One-Page Portfolios: Trends and Showcase

One-page portfolios are certainly a popular trend among web and graphic designers. Many designers have created one-page portfolios that use a lot of creativity, but there are also some elements or characteristics that are very common among them.

In this post we’ll look at ten trends of one-page portfolios with examples of each. At the end of the post we’ll include a showcase for your own design inspiration, plus some resources to help you if you’re interested in creating your own one-page portfolio.

Trends of One-Page Portfolios:

1. Focus is on the Work

One-page portfolios tend to keep the work of the designer as the focus of the page. More traditional portfolio sites may include screen shots of some work on the homepage, but generally the work in the portfolio will be displayed on a separate page.

Because one-page portfolios include all of the elements of a portfolio site (the work, biographical information, services information, contact, etc.), the contents of the page are often arranged to emphasize the work from the portfolio.

James Lai Creative
James Lai Creative uses a prominent location on the page to display items from the portfolio. Click on a thumbnail and you’ll see a larger image above.

James Lai  Creative

Bunton
The majority of screen space on the Bunton portfolio is used to display the work.

Bunton

2. Introduction/Biographical Info

“About” pages are common on portfolio sites, whether it belongs to an individual freelance designer or a design studio. One-page portfolios generally still include this information in a brief welcome or introduction.

Alexandru Cohaniuc
Alex has a large welcome message at the right side of the screen that greets visitors.

Alexandru  Cohaniuc

3. Navigation Menus

Although they do not have multiple pages, one-page portfolios frequently will contain a navigation menu. Links from the menu will lead to specific sections of the page rather than leading to other pages on the site.

A number of different techniques can be used to make the one-page portfolio easy to navigate. Some navigation menus appear to be just like the menu on any other website, except that when you click you’re not led away from the page, just to another spot on the page. Sticky menus are also sometimes used, and other sites will use a menu in multiple places on the page to avoid forcing the visitor to scroll back to the top.

Two24 Studios
Two24 uses a colorful navigation menu at the top of the page. If you click on the links you will slide to a lower section of the page.

Two24 Studios

Alamofire
Alamofire uses a sticky navigation menu that always appears at the right side of the browser even when you scroll to the bottom of the page.

Alamofire

4. Smooth Scrolling

The smooth scrolling often works hand-in-hand with navigation menus. When the visitor clicks on a link within a navigation menu they will experience a smooth scroll or slide to another section of the page.

Deluge Studios
Click on any of the links in the navigation menu of Deluge Studios and you will smoothly scroll to the appropriate section of the page.

Deluge Studios

5. Use of Lightbox for Portfolio Items

Since the portfolio items on a one-page site are right there with everything else, there is usually no room to have large images or screen shots of the work. Lightbox JavaScript effects are commonly used to open up a larger version of the image when clicked over top of the existing page.

The lightbox effect makes it easy to display your work to visitors, and it makes it possible for the visitors to quickly move through the images from one to the next.

Alessandro Cavallo
If you click on any of the thumbnails on Alessandro Cavallo’s site you will see a larger image with a lightbox effect.

Alessandro  Cavallo

6. Big Background Images or Illustrations

One-page portfolios are generally either very tall or wide pages because of the amount of content that is included. Big background images are certainly not unique to one-page portfolios, but these images are often used creatively with the various sections of the site to add some intrigue and visual appeal.

Volll
Volll’s site uses a large, colorful, and creative background image/illustration. As you scroll through the page you’ll see various parts of the image.

Volll

Yodaa
Yodaa uses a similar approach with a large background image.

Yodaa

7. Contact Forms

Every portfolio site needs to provide visitors with a way to get in touch with the designer, and of course contact forms are very common. Many one-page portfolios also include a contact form in a specific section of the site.

Edit Studios
Edit Studios includes a full contact form at the bottom of the page.

Edit Studios

8. Horizontal Scrolling

Horizontal scrolling is probably more common on portfolio sites than it is on other types of sites, in part because portfolios can take more creative liberties because they are expected to be innovative and creative.

Some one-page portfolios make excellent use of horizontal scrolling to lead the visitor to various sections. In some ways it can be like using different pages, except that the visitor is scrolling or sliding to various sections of the site rather than actually moving from one page to another.

IndoFolio
IndoFolio uses horizontal scrolling with a large, creative background image.

IndoFolio

Tyler Fink
Tyler Fink also uses horizontal scrolling on his portfolio.

Tyler Fink

9. Social Networking Links

Many designers are active on social networking sites like Twitter, Facebook and LinkedIn. Links to these profiles are very common on one-page portfolios, and it gives visitors another place to get more familiar with the designer and to get in contact if they choose.

Visual Groove
At the bottom of the page, Visual Groove includes links to various social networking profiles that provide an alternative method for getting in touch.

Visual Groove

10. “Back to Top” Links

Because one-page portfolios tend to be very long (or wide), if there is no navigation provided throughout the site the visitor will have to scroll a long way back to get to the top of the page. Many one-page sites include links for going back to the top, and some include other types of navigation throughout the site that will make it easy for visitors to move through the site without the need to go back to the top to access a navigation menu.

Kostandinos
Each section of the Kostandinos portfolio includes a navigation menu so you will have have to use endless scrolling to move through the site. The “Home” link leads to the top of the page.

Kostandinos

Showcase of One-Page Portfolios:

Eduardo de La Rocque

Eduardo de La  Rocque

Pikaboo

Pikaboo

Justin Tsang

Justin Tsang

Veboo Labs

Veboo Labs

Jason Reed

Jason Reed

Luke Larsen

Luke Larsen

Ignacio Ricci

Ignacio Ricci

Guerilla

Guerilla

Frenzy Labs

Frenzy Labs

Attack of the Web

Attack of the Web

Mutant Labs

Mutant Labs

Creative The

Creative The

This by Them

This by Them

Puppetbrain

Puppetbrain

Nora Rose Travis

Nora Rose Travis

Project 365

Project 365

Onvo Media

Onvo Media

Kinetic Shadows

Kinetic Shadows

Zulsdesign

Zulsdesign

Andrew Greig

Andrew Greig

SocialSnack

SocialSnack

Orman Clark

Orman Clark

Galan

Galan

Magouya

Magouya

Visualbox

Visualbox

Dean Oakley

Dean Oakley

Carrot Creative

Carrot Creative

Greg Wallace

Greg Wallace

Michel Ferreira

Michel Ferreira

Additional Resources:

Here are some useful articles, tutorials, and resources that may be useful to you in your own work.

How to Build Your Own Single Page Portfolio Website
Chris Spooner has an excellent tutorial for designing and coding a one-page portfolio.

How  to Build Your Own Single Page Portfolio Website

How to Design a One-Page Portfolio in Photoshop
This tutorial from DesignM.ag leads you through the process of designing a dark, textured one-page site.

How to  Design a One-Page Portfolio in Photoshop

Design an Attractive One-Page Portfolio Site Using Photoshop
Another Photoshop tutorial from DesignM.ag.

Design  an Attractive One-Page Portfolio Site Using Photoshop

10 Expert Tips for Designing a One-Page Portfolio
Design Shack has a useful article with tips and pointers for creating a successful one-page portfolio.

10  Expert Tips for Designing a One-Page Portfolio

The One Page Graphic Design Portfolio Guide
You the Designer has an article with tips and advice for designers who want to create a one-page portfolio.

The  One Page Graphic Design Portfolio Guide

Folio Focus
For more portfolio design inspiration see our portfolio gallery, Folio Focus.

Folio Focus

One Page Love
A gallery that showcases excellent one-page sites.

One Page Love

UPDATE: Also see 1 Page Web Design Gallery.

For more on portfolios please see:

Published February 11th, 2010 by

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads. Visit WPEngine.

Join Our Newsletter!

Subscribe to our weekly newsletter chalked full of useful tips, techniques, and design goodies. We have 20,000+ loyal readers and counting! We’ll even send you a free e-book (Freelance Designer’s Guide to Multiple Income Streams) and a $10 discount on our most popular product the Freelance Starter Kit.

61 Responses

Comments are now closed on this post.

  • Brian, February 12, 2010

    Thanks for including Kinetic Shadows in the list.

  • Kostandinos, February 12, 2010

    Thanks for including me in this showcase! I’m honored to be on the same list with so many designers I admire. Excellent job on covering every angle of one-page portfolios… lots of good ideas in here, which is helpful as I’m in the process of tweaking mine. Long time fan of your blog, so this is extra cool… thanks! :)

  • Wai, February 12, 2010

    This is just everything I need to know. Great list. I’m inspired. Thank you.

  • pasxal, February 12, 2010

    Very nice collection! It seems that I am following this trend :)

  • pixellaar, February 12, 2010

    great great great I like it!

    Wanna see one more? Look at http://www.pixellaar.nl

    have a nice day and look ;)

  • aledesign.it, February 12, 2010

    Excellent list! Many examples useful and rich of creativity! Thank a lot for the sharing…I love this post. Inspired me and my work!

  • ganesh, February 12, 2010

    Excellent list, Thanks.

  • zulsdesign studio, February 12, 2010

    thank for including me.
    Great List!

  • Naina Redhu, February 12, 2010

    I love Visual Box’s website. I stared at it for days when designing my own. Of course mine looks nothing like it but I did stare at VisualBox a lot.

  • qborreda, February 12, 2010

    Very nice compilation. This would work for most graphic and web designers.
    But can I have the chance and ask you guys, what would be a programmer one-page portfolio like?

    Is there something I’m missing with this http://www.elquefaltaba.es/qborreda.html (spanish, sorry) portfolio?

    Feel free to suggest anything ..

  • Johnnyboy, February 12, 2010

    At One Page Love I saw http://www.ericsteuten.nl
    Very nice work centered design with its own identity.

    Also http://fuelbrandinc.com is worth checking out. Less visual candy, but nevertheless very nice and technically impressive.

  • Martyn, February 12, 2010

    I have my own one page portfolio I would like to thrown in – http://nineteeneightyfour.info – Perhaps not as good as these however.

  • Nick Hand, February 12, 2010

    Awesome list! Another to check out – http://www.nickhand.net

    Thanks! Keep the inspirational posts coming!

  • Craig, February 12, 2010

    Interesting list. I’d say that Auxiliary Design Co.’s site definitely belongs here too.

  • Febby Tan, February 12, 2010

    hey, thanks for including Visual Groove on the list!
    overall it’s a great list anyway :)

  • New York Web Designer, February 12, 2010

    Great range of one page portfolio sites, lots of inspiring ideas.

  • Ian Devlin, February 12, 2010

    Some nice sites here, thanks for that. I also favour the one page portfolio, as I have done on my site.

  • Gutenbyte-Webdesign, February 12, 2010

    what do you think about mine? its in german, you can translate it via translate.google.com.

  • Aaron Moody, February 12, 2010

    A great list, I really love one page portfolios, straight to the point, which Is why I recently re-designed my portfolio. One page, of course!

    -Aaron

  • sarah, February 13, 2010

    Hi, very interesting list. Thanks!
    We are a new ita/eng community to webdesign and we have released for free this one-page layout:
    http://www.yif.yourinspirationweb.com/
    I hope you like it.

    Sara

  • Airfone, February 13, 2010

    A nice range of sites. A great work done by designers. Very good looking portfolio sites.

  • Eko Setiawan, February 13, 2010

    This article is very complete, as a guide to create a one-page portfolio site.
    I am very interested to create it, thanks for share :)

  • Lexi Luge, February 13, 2010

    great inspirational list, here’s another one of my fav’s http://sean-nieuwoudt.com

  • Intipadi, February 13, 2010

    thanks for a great great inspiration!

  • Adrian - 7creative, February 13, 2010

    Very inspiring post. I’m starting to like the yellow black and white combination.

  • Mark Dijkstra, February 13, 2010

    nice list :D

    but i dont see my website here :P

  • Igalerie, February 14, 2010

    2010 trend is here … most wonderful and complete collection.

  • bodasactra, February 14, 2010

    I love these post. They drive me to improve my design and code ability. Challenging and fun for sure but I wonder how these sites perform. These are certainly visually stunning and a designer can truly respect the skill and innovation in these, but a site like this one or traditional block design seem to get great numbers. Ho well do these stunning sites do in bringing in users and potential clients. I rarely see them in searches but always run into more reserves and traditional designs up top?

  • babloo, February 15, 2010

    Hi Buddy!!!

    Is this really can work out for all sort of portfolio..??? reply me ASAP…

  • Robert, February 15, 2010

    I admit, your articles help improve my design ability. It really fun indeed but I wonder how these sites perform. A site like this one or traditional block design seem to get great numbers.

  • Benzai, February 15, 2010

    Great list! Thanks for the inspiration!

  • Alex Peterson, February 16, 2010

    Great selection! Would be interesting to find out how they fair in search engines.

  • BoxedinDesign, February 16, 2010

    Man there’s a bunch of crappy designers listed here.

    Actually, I guess Spooner is ok at design. Joking around. Everyone here deserves to be listed. :) Nice post!

  • bindi, February 16, 2010

    Great collections!! I am also designer .. really good for inspiration :)

  • Michal Kozak, February 16, 2010

    Great roundup!

    I think the most important are info and work showcase. I’d put navigation here on the 3rd place, because it’s still one-page portfolio, so you will scroll through the whole page eventually.

  • Wedding Photographer Sydney, February 20, 2010

    Awesome collection and great inspiration. Will keep checking the updates thanks!

  • Bennie, February 26, 2010

    Nice collections of One-Page Portfolios, I love most is Wonder, its simply and attractive! Beautiful and very creative idea with beautiful visual!

  • Love the post. There is such a great variety of style here that it gives me some great ideas of some things I could do for my clients. Thanks!

  • eko mobile shared, July 14, 2010

    give me a good inspiration to desain a portofolio web

    thankz for your great post

  • Denizli WEB TASARIM, July 30, 2010

    Some times one page sites being very beautifull

  • Custom Graphic Design, January 24, 2011

    Great list! Thanks!

  • jordan zanatta, May 20, 2011

    i’m quite a fan of http://www.denisechandler.com

  • Great collection of one page websites. Thanks so much for sharing

  • John williams, June 18, 2011

    Really nice and creative web designs. I would love to see those innovative creations…

  • Web Design Liverpool, September 29, 2011

    Excellent selection of designs

  • Chris Schubert, February 19, 2013

    Hi,

    thanks for the extensive collection and impresive samples. I am actually asking (myself) how many additional words are necessary to show a portfolio page, in case design is shown. I tried out a wordpress theme (Gridly) which allows to post different formats and proportions in pinterest-style. For me it works well, what do you think? Would be great to get some comments.