Deconstrukt #1: Portfolio Design ~ Top 40 Client Showcase Pages
Deconstrukt is a new editorial series that features industry leaders giving a bite-sized deconstruction of the web. Hot sites, new technologies and strategies for success in the field of web design & development.
To kick off this inaugural edition, we share 40 superlative examples of portfolio presentation pages designed with the client in mind.
In this article we'll be focussing mainly on the presentation of client work within a designer's portfolio rather than the portfolio design itself (with a couple of exceptions). Two reasons for this. First, many of you will already have glanced at the main pages of these sites but may not have dug deeper to expose the pages that client's really care about, the ones featuring the client themselves. The second reason is that nothing makes you bring your A game more than a fussy client and/or aggressive competitors, both of which head straight to your portfolio to judge your worth. This added pressure is often the driving force in making these pages some of the best visual experiences on the net.
Here is a collection of 40 superb client project page designs we believe have met their respective A-game requirements and kicked them right through the net. No doubt we've missed some this time around so drop us a line if you think you have a page design to add to the next line up.
The page designs have been tagged for selective viewing if you're looking for some specific inspiration.
-
1. Locomotive ~ Canada
Client Page: Triathlon Urbain
Spacious, amazing color palette and on-trend with laser precision. Locomotive's portfolio page design should win an award on its own. A class act. 'Nuff said.
#minimalist #fullscreen #trendsetter #immaculate
-
2. Activation Nodeplus ~ China
Client Page: BMW BEC App
Some load time here depending on your net speed but definitely worth the wait for this high impact client portfolio page design. The peeps at Activation Nodeplus probably gave their client BMW an adrenalin rush from the get-go via the sheer visual splendour of the hero photo. This is followed by classy glide-in visuals as you scroll, intelligent and unique layout for the content - and a footer right out of the next Tron movie (if there was one). All finished off with some of AN's signature 'hyper electric polygon animation'.
#visuallyspectacular #dynamic #animated #subtlemotion #hyperactivefooter
-
3. mystaticself ~ Canada
John Lacoviello's portfolio has no direct links to the client pages but before the little UX voice inside you gets mad, head over to the site and check it out. This site forces me to write the word 'wicked' to describe it. With a site like this we don't care if the client likes it. Describing this site will not do it justice but for those not feeling clicky yet, here is a condensed summary. There's this floating microchip type thing, like a baby Borg cube, with a molecular phase shift problem hovering in front of a randomly shifting sequence of vibrant color vignettes that is... this is too hard. Go and see it for yourself but go gently with your mouse on the baby Borg cube, it's an interactive navigation. Have fun. Ground breaking stuff!
#innovative #addictive #advanced #soundscape #animated
-
4. John Karlsson ~ Sweden
Client Page: Pingdom
Let's get this out of the way, go to John's home page (http://johnkarlsson.se) and move your mouse around on his logo. When you're done playing with the interactive logo, head to his portfolio. We think John has done a great job of infusing some technical attributes to this page design which is perfect for a client like Pingdom. Client happy = job well done.
#sleek #clean #video #brandstory
-
5. TMBR ~ USA
Client Page: Converse Sonata
TMBR appeared to have mastered the melding of grace and sophistication to outdoor motifs as this page demonstrates. The basic elements are there, superlative photography, subtle tile loading effects, minimalist text boxes and a mountain boot full of style ~ all done with warmth and charm no client could resist. Marshmellows over the fire anyone?
#photographic #balance #warm
-
6. Media Monks ~ Netherlands
Client Page: Google's Android Wear Watch Faces
To ease us into this exposé of great client portfolio pages we couldn't go past this uber clean portfolio page design by Media Monks for Google's Android Wear Watch Faces. We love this spacious yet 'cut to the chase' design that features the core elements aka what the client wants to see. Easy to read text, scroll, big images - each with their own gallery arrows, and a ton of white space. Clean and simple... a match made in heaven for Google's brand attributes.
#clean #simple #refined #lessismore
-
7. Jean Helfenstein ~ NZ
Client Page: Pick One
Jean Helfenstein's site has no direct links to the project pages which is just fine because this site is worthy of a serious look-through. Right from the get-go you know this site is going to be special and it does not disappoint. When you're done drooling, simply choose one of the works and check out the portfolio page designs to view them. Be sure to scroll and see the horizontal scroll in action.
#innovative #visuallyspectacular #fullscreen #fx
-
8. Super Top Secret ~ USA
Client Page: Rossignol Snowboards
Admittedly this is a case study vs a standard client page but who's counting? Super Top Secret's page for Rossignol Snowboards sets the standard pretty high with parallax, a soundscape, gorgeous typography and wonderful background illustrations. A class leading portfolio page design that demands the client's attention.
#polished #soundscape #visuallyspectacular #comprehensive #illustratedbackgrounds
-
9. Aerolab ~ Argentina & USA
Client Page: Xapo
We love the use of minimalism at the beginning of the scroll to help the user absorb the statistics, themselves elegantly animated without superfluous flare. Not shy on content either, this is a mighty scroll that provides the client with plenty of confidence in their decision to hire the designer long before they reach the end. Excellent presentation, rhythm and appropriately styled to the client's needs.
#blackandwhite #minimalist #fadeincontent #brandstory #comprehensive
-
10. Hue_ ~ Poland
Client Page: Paulaner beer
We had a hard time picking the best client page design from Hue_’s very impressive portfolio. In fact the whole site is addictive, but in the end we decided on this page due to the extra punch brought on by the sumptuous use of red and expansive visuals. This page does more than simply display the client's product, it celebrates it.
#bold #colorful #fresh #comprehensive
-
11. Jean Maxime Brais ~ France
Client Page: WorkflowGen
Luscious photography, big fullscreen visuals and vivid colors make for serious eye candy on this page for WorkflowGen by Jean Maxime Brais. The right dash of whitespace brings balance and poise to this high impact piece of impressive digital creative.
#visuallystunning #fullscreen #icons #vivid
-
12. Apt ~ Norway
Client Page: Prosjekt Fantasi
It's often the little things that bring the best effect, like Apt's portfolio page for Prosjekt Fantasi. Look for the neat 'slide down' div after clicking the play button on the video. Incorporates excellent video work with Apt's fresh design ethic and that certain Norweigein 'something'.
#clean #simpleUX #subtleparallax #colorful #video
-
13. Miguel Trias ~ Spain
Client Page: ADL Palma
Miguel's portfolio features classic aesthetics and elements but as with all great design work, it is Miguel's personal touch that gets this page on the A-list. Subtle fade-up scroll effects and use of white space make this page pleasing to scroll through. Nice work.
#minimalist #clean #nicetone
-
14. Dunckelfeld ~ Germany
Client Page: Bulls
Dunckelfeld's superlative page for Bulls ticks all the boxes needed to please the client and then some. Unlike some of the other big and bold pages in this article, this page has a touch more UX via multiple buttons positioned throughout the page and subtle but novel hover effects. Solid design with good energy and a stunning outcome.
#photographic #fullscreen #colorful #3Dbikeview #video #comprehensive
-
15. Plug and Play ~ UK
Client Page: Nour El Nil
Portfolio page design 101. This page by Plug and Play has all the best elements needed to impress any client. High impact full-screen photo, one colunm text box for a description, brand design teaser, color and pattern palette guide, the word 'Responsive' above the website screenshot (I know, clients don't care but we do!) and mobile usage shots. Lastly, a call to action. Great job!
#simple #fadeupscroll #greatcontent #brandstory
-
16. Method Studios ~ NZ
Client Page: Honda Pioneer
The peeps at Method utilize the energy inherent in the color red to infuse this page design with power and impact, a clever strategy given the hero is Honda's Pioneer MUV (and red being a Honda brand color). Scrolling down invokes a color change in the background which acts to spotlight Honda's logo. The page ends with another excellent hero shot, this time emblazoned against the crispness of white space (desktop ref.). All of this combined ensures a happy bunch of Honda executive peeps. Golf anyone? Think I'll swap my cart for one of those MUVs.
#highimpactcolor #brandfocus #goodstrategy #short&sharp
-
17. Flavien Guilbaud ~ France
Client Page: Suspended Animations
Accomplished art director Flavien Guilbaud enlisted the help of Florien Morel (interactive developer) and Baptiste Briel (front end developer) for this superb piece of web design and developement work. Flowing through the chosen client page is facilitated by a horizontal scroll that is silky smooth, even when viewed via good ol' Firefox. So few elements but such a powerful piece of digital art.
#innovative #stylish #horizontalscroll #silkysmoothfx
-
18. Lab21 ~ Greece
Client Page: Harbor Suites
There have been some very nice additions to Lab 21's site since it won WOTD some time ago so you might want to start at the home page and have another look too, some sublime stuff here. Our focus is client presentation via the portfolio but we love the portfolio page so much we've supplied that as the link. Once there, select Harbor Suites. Meticulously designed and executed, this page demonstrates Lab 21's style that combines thoughtful graphics with their signature minimalist/scientific aesthetic. A minimalist call to action contact form meets prospective clients at the end of the scroll.
#unique #meticulous #greatpalette #minimalist
-
19. Indicius ~ Argentina
Client page: ESPN
Hot off the keyboard is the new and absolutely amazing site by Indicius. Take your time snooping around then head to the portfolio and select ESPN. Spacious, on trend and another example of meticulous execution. This is the kind of page the client sits and stares at for some time, simply lacking the 'files' to explain why they love it. Designers & developers know.
#fresh #fullscreen #bold #colorful #meticulous #justlaunched
-
20. Gladeye ~ NZ
Client Page: Vodafone
Gladeye from New Zealand begin this portfolio page design for Vodafone with a wonderful illustration that deserves deconstruction due to the subtle power it has on the viewer. Notice how the curved water and angled dynamic of the red Vodafone sail add a kind of 'natural pressure' to coax your gaze downward? This in combination with the white space presented above the fold (desktop ref.) aids the decision to scroll via subtle energy lines that guide the eye to the centre title then down. Whether intentional or a fluke, design gems like this are rare and worthy of mention. Scrolling down does not disappoint thanks to the design team's great use of composition and visual story telling through whole page - all the while keeping the focus on the hero, the client's brand.
#colorful #personality #brandstory #illustratedbackgrounds
-
21. Piotr Swierkowski ~ Poland
Client Page: Cube of Speed Sounds
Piotr's work seems to being going from strength to strength and this client page design is no exception. Green on green and oh so sharp. Relevant design focus, light on text, flawlessly executed. Definitely a happy client at the end of this paycheck.
#sleek #minimalist
-
22. Coralie Castot ~ France
Client Page: Oracle
Paris based artistic director Coralie Castot's design for Oracle is the way we like it. Bold and unique. It takes courage to attempt design work like this and that earns big respect points in our book - and most likely in the client's book also.
#visuallyspectacular #subtleparallax
-
23. Knock ~ USA
Client Page: Levi's Revel
Knock are renowned for their own unique style which is put to masterful use in presenting Levi's Revel range. Running like its own commercial, the page flows Levi's brand attributes seamlessly into the digital space which is why we had to include it in this article. The page acts like a teaser with splashes of movement that add drama accompanied by subtle yet sexy photography. An obvious client pleaser.
#photographic #blackandwhite #video #dynamic #brandfocus
-
24. Bonhomme ~ France
Client Page: #GIFMYLIVE
Different clients have different brand attributes which can often be hard to accommodate within a portfolio that needs to cater for variation. Bonhomme know this which is evident in this piece with its captivating yet sublte use of parallax and animation. Love the graphic shapes and visual referrence to GIFs. Top marks!
#minimalist #subtlefx #eyecandy
-
25. Anakin ~ Germany
Client Page: Côte&Ciel
This page design demonstrates what happens when minimalist chic meets style and grace. The result? A fluid page with enviable sophistication that reminds us how good a simplified portfolio could and should be.
#clean #minimalist #brandstory #video
-
26. Frank Digital ~ Australia
Client page: What's On In Sydney
The real magic starts a scroll or two down on this page, where glorious full screen color graphics take the client deep into the project they just shelved out the big bucks for. Not too little and not too much, this page provides exactly what the client needs to see, the energy of the client's brand and of Sydney itself emphasized via dynamic graphic angling and eye catching elements.
#colorful #fullscreen
-
27. Urban Influence ~ USA
Client Page: Wood Shed Production
Attention to detail and thoughtful story telling imbue this portfolio page by Urban Influence with warm and fuzzy notions of a simpler life. Generous photographic work guides the scroller down to a subtle revealing of the passionate craftsman behind Wood Shed Production. Polished to perfection, the page ends with some serious smarts by providing a mini-contact form, share links, unmissable 'Visit Wood Shed' button, and some elegant prompting to explore more work examples. Well done guys.
#photographic #fullscreen #comprehensive #story
-
28. TAOSTUDIO ~ Italy
Client Page: Psykea
Italian designer Michela Chiucini's TAOSTUDIO site is a tasetfully different take on the ubiquitous Designer's portfolio. When you enter Michela's site, you are entering her world. We chose the letter P for our fav client page design over the other letters mainly because of the original color palette and overall exemplary presentation. B and W would be our next favs, which is yours?
#original #greattone #minimalist
-
29. Visual Soldiers ~ USA
Client Page: Zegg
The crew at VS surely nailed this page from a client's point of view by meeting the number one client request right off the bat - "can you make the logo bigger?" This is a short and sharp page with a polish all its own and laser-like focus on the client's brand color as a highlighting feature.
#minimalist #subtleparallax #brandcolorfocus
-
30. Alexis Rousseau ~ France
Client Page: Hubertine Auclert Center
Fans of purity in design will love this portfolio page by Alexis Rousseau. Classic elements such as meticulous presentation and a good amount of content make this design a great 'portfolio design 101' example.
#brandstory #originalpalette #fullscreen #minimalist
-
31. C2 ~ Croatia
Client Page: Vivaci
C2 are a self-proclaimed dynamic duo of code and uncluttered design consisting of Ana Travas and Sergej Skrjanec. This page design features a horizontal scroll as a way of presenting the client work. Chosen imagery provide some insights into the project but it's the innovation of the site that would leave the client smiling.
#innovative #short&sharp #horizontalscroll #classy
-
32. Alexander Engzell ~ Sweden
Client Page: Mond
If you're a fan of edgy design then this page by Alexander Engzell should be on your look-list. A key point of difference here is the diagonal swipe effect to introduce content. A rock solid color scheme and bold graphics are finished off nicely with a money shot of the logo 'M' to finish the page.
#edgy #dynamic #angulargraphics #fx
-
33. Coulee Creative ~ USA
Client Page: Blossom Yearbooks
A great mood shot sets the tone for this page that provides expansive promotion for the client. Coulee have done an excellent job of presenting the client as the true hero of this page. Background color switch-outs, fresh graphics, and seamless video top-off a well executed outcome.
#clean #comprehensive #energetic
-
34. VerbalVisual ~ Germany & USA
Client Page: Main Page
VV's portfolio has a check-worthy feauture for inspiration in the form of the scroll stopping at the start of a section item but allowing the screenshots for that item to continue to scroll, then at the end of the screenshots the portfolio section is released back into the scroll - clever and underated. Just keep scrolling the page and you will see the effect in action. Clients may not notice this subtle but sensible feature but we certainly did.
#justscroll #simple
-
35. dimension ~ Spain
Client Page: The Candy Project
Yes the title grabbed us but not as much as the visuals that seem to leap right off this bold and tasty portfolio page by dimension. Add a sprinkle of video and a glaze of parallax and you've got a nice bowl of eye candy ready to serve to the client.
#colorful #fresh #highimpact #fullscreen
-
36. SOON_ ~ UK
Client Page: Resident Advisor
London peeps SOON_ tell a nice visual story and wrap it in a very appropriate urban-chic aesthetic for this folio page design. Logo insights are a nice touch for the client and those business card designs are sweet. Screenshots of tweets about the project and a good testimonial end the page well for prospective clients.
#simple #brandstory
-
37. Adoratorio ~ Italy
Client Page: Bersi Serlini
This is a 'short and sharp' portfolio page design that relies on a big, bold and gloriously colored illustration to capture the viewer. After starting to scroll we are greeted by some illustrative animation to enhance the subject matter while at the same time display Adoratorio's unique style.
#illustration #minimalist #colorful #shortandsharp
-
38. Cuberto ~ UK
Client Page: IBOXPRO
We've included a number of clean designs in this article for their use of space and color, but mostly because they would certainly please the client. This uber-clean page design by Cuberto is no exception. No more words are needed.
#clean #colorful
-
39. Frank Collective ~ USA
Client Page: Muhammad Ali
Brooklyn and L.A. based Frank Collective get a nod for using this client page to tell the story of Muhammad Ali. Rich in facts and wrapped in stylish graphic design, this is a nice layered approach that would probably see the client, Authentic Brands, do that marathon handshake thing clients sometimes do when they are happy with the work.
#storygraphics #comprehensive #clientfocus
-
40. Tool of North America ~ USA
Client Page: AIRBNB
Tool utilized their substantial creative prowess to full extent in their work for AIRBNB as displayed in this video. We chose this piece because rather than the std video teaser & plug for the client, this friendly walk-through style video cleverly begins by dealing with a challenge the brand is (or was) facing and then proceeds seamlessly into telling the story of how the work was created. Due to the complexity of the project we can see why video was the best choice in getting this information across quickly to visitors of Tool's portfolio. In seconds we learn that Tool combined film, animation, WebGL, real-time data visualization, iconography, a reactive sound engine that plays multiple soundscapes depending on the user's interaction, and more in this top shelf project. To top it off, stats of the impressive results to the campaign are shared to back it all up. Such a breadth of info could not be easily assimilated via standard web page design without overloading the viewer. Point made.
#video #innovation #happiestclient
