One-Page Portfolios: Trends and Showcase

The portfolio site is an important asset for any designer or agency. Many potential clients will base their decision of what designer to hire in part on the quality of the portfolio itself, in addition to the work samples showcased on that portfolio site.

One approach to creating a portfolio site that will stand out is to go with a one-page site. Rather than having separate pages for the designer bio, description services, and for specific items showcased in the portfolio, everything can be included on one page.

In this post we’ll take a detailed look at one-page portfolios, including a showcase of 35 excellent examples. We’ll also look at some of the common elements and characteristics that you’ll find with many onepage portfolios. In addition to the beautiful examples that you’ll find in this post, if you want even more examples there are a few gallery sites that focus exclusively on one-page sites. One Page Love and One Page Mania are both worth browsing.

Common Characteristics Found on One-Page Portfolios

Before we move on to the showcase of one-page portfolios, let’s look at some of their common characteristics. Of course, none of these characteristics will apply to every single one-page portfolio, but they are common.

Navigation Menus

Despite only having one page it is very common for a navigation menu to be included. With the menu it’s sometimes difficult to even know that a site is just one page until you click one of the links or scroll through the site. The navigation will lead visitors to specific sections of the site so they don’t have to scroll manually, making it easier to find certain content and areas of the site. jQuery sliding effects are commonly used when a visitor clicks on one of these links.

Scrolling Effects

Since most one-page sites are rather long, a lot of scrolling can be involved even if a navigation menu is included. Some designers take this as an opportunity to include special scrolling effects that can enhance the user experience and make the site more fun and entertaining. Parallax scrolling is one common effect that is used.

Limited Content

Because everything on the site is included in just one page, in most cases the content is a little condensed. Instead of have a long, detailed bio, just a start paragraph may be used. Service descriptions are often very short, maybe even just a list or statement of what the designer or agency does. One-page portfolios also often showcase fewer items as compared to multi-page portfolios.


Responsive Design and Layout

Most, but not all, one-page portfolios being designed today use a responsive design and layout. The same thing can also be said of most multi-page portfolio sites that are being designed and developed now.

Showcase of One-Page Portfolios:

Jar Design

Jar Design

About this site:

  • The bright color scheme of this design looks great.
  • There are some creative effects as you scroll and move your mouse.
  • As you scroll down you’ll see a description of their process. Then further down the page are five work samples.

Shaun Weaver

Shaun Weaver

About this site:

  • This site includes a navigation menu at the top right of the screen. If you click on those links you’ll slide to a specific section of the page.
  • A 3-paragraph bio is included.
  • 10 work samples are showcased. When you click on one of the images it will open more information about the project and the client.

Leeann Pica

Leeann Pica

About this site:

  • This site features a sticky header and a full-screen blurred background photo.
  • Five work samples are showcased.
  • A brief statement about the designer is included in the “About” section, along with a photo.

Action Backed

Action Backed

About this site:

  • Something you won’t see with a lot of portfolio sites, this one includes an email optin form in a prominent location.
  • Five different work samples are showcased. Four of them are works in progress with only small thumbnails being shown.
  • Big, bold typography is used throughout the design.

Barnyard

Barnyard

About this site:

  • A full-screen animiated slideshow captures your attention as soon as you arrive on the site.
  • The design includes a number of illustrations.
  • This site includes more content than most one-page portfolios. The navigation menu in the header will lead you to any section of the page, and the menu sticks to the top of the browser as you scroll.
  • Clients are listed, but specific work samples are not shown.

Soumya Bishi

Soumya Bishi

About this site:

  • A trendy flat design style a pleasing color scheme are noteworthy features of this design.
  • A navigation menu appears if you hover over the icon in the header.
  • The site includes a very brief bio (1 paragraph) and 6 portfolio items are showcased.

Alistair Williams

Alistair Williams

About this site:

  • There is very little content on this site. There is a full-screen slideshow with a few different photos and when you click on the “profile” link it opens a brief bio.
  • Some past clients are listed, but work samples are not shown.

Madre Crossmedia

Madre Crossmedia

About this site:

  • The full-screen background video is the first thing that you will notice when visiting this site.
  • As you scroll down you’ll see a 2 paragraph description of the company and its approach.
  • Lower on the page, 10 different work samples are showcased. When you click on any of the items it opens a screen with a larger image and a little bit of info about the project.

Wastronauts Media

Wastronauts Media

About this site:

  • A small navigation menu is included with links to the work samples (listed as “designs”) and a contact form.
  • The site includes a 1-sentence description of the company, along with longer descriptions of the services offered.
  • Four different work samples are showcased in a slider lower on the page. Each project includes a brief description as well as a screenshot.

Alyoop

Alyoop

About this site:

  • A full navigation menu is included in the header, which makes the site feel like a standard multi-page site when you first arrive.
  • A 1-paragraph bio of the company is included, as well as brief descriptions of the 3 services offered by the company.
  • Eight work samples are included. Most of them link to case studies of the project on Behance.

Evan Knight

Evan Knight

About this site:

  • A very light color scheme and clean design characterize this portfolio site.
  • Brief bio information is included.
  • Eight different portfolio items are showcased. If you click on a link it opens more information about each project.

Alex Cerezo

Alex Cerezo

About this site:

  • This design makes heavy use of black and white, with a bright pink used as an accent color.
  • A 1-paragraph bio is included, as well as a link to a PDF resume.
  • Thumbnail images are shown for 6 work samples.

Casper Odendaal

Casper Odendaal

About this site:

  • A large, dark background image features prominently in this design.
  • Five work samples are shown. If you click on any of them it will open a screen with more information about the project.
  • No bio or service description is included.

Michele Mazzucco

Michele Mazzucco

About this site:

  • If you click on the navigation icon in the header it opens a menu.
  • A bio is included, along with a brief description of the services provided.
  • Six thumbnails from work samples are showcased, along with links to Dribbble and Behance for more images and details.

Alto Labs

Alto Labs

About this site:

  • Click on the navigatio icon in the upper right corner to open the menu.
  • The site includes a very brief statement about the company, as well as two work samples.
  • The “start a project” button links to the company’s email address.

Keegan Burkett

Keegan Burkett

About this site:

  • This site includes a 1-paragraph bio, as well as a brief description of the services offered.
  • One recent work sample is showcased.
  • Click on the navigation icon to open the menu.

Tyler Somers

Tyler Somers

About this site:

  • A navigation menu is included in the header, and it sticks to the top of the screen as you scroll down.
  • Eight work samples are shown, and when you click on any of the images it opens a screen with additional images and a project description.
  • Contact information is displayed if you click on the “Contact” link in the navigation menu.

Mohammed Bilal

Mohammed Bilal

About this site:

  • The site includes a full navigation menu. As you scroll down the page the menu sticks to the top of the browser.
  • More than 20 work samples are shown, including concepts in addtion to client projects. Clicking on some of the will lead you to Dribbble.
  • Icons are used to lay out his 4-step process.

Andrew Littman

Andrew Littman

About this site:

  • This site includes a small amount of content. There is a 1-paragraph description as well as the work samples.
  • Thumbnails of 4 work samples are shown, and each one links to a page on Dribbble.
  • A link to his Dribbble profile is also included via a button that says “view more work.”

Dolox

Dolox

About this site:

  • This colorful site features a changing background color.
  • Some animation effects are used as you scroll down the page.
  • Their 4-step process is laid out as you scroll down.
  • Service descriptions and severl work samples are shown lower.

James Hsu

James Hsu

About this site:

  • The site includes a sticky header and navigation menu.
  • Several different large background photos hold a prominent place in the design as you scroll down.
  • Six different work samples are showcased.

Dustin Myers

Dustin Myers

About this site:

  • As you scroll down, a sticky header and navigation menu appear.
  • Eight different work samples are shown. Clicking on the portfolio images opens up more information about the project.
  • A breif bio and photo of the designer are included.
  • One unique feature of this site is a slider that showcases several different client testimonials.

Clint Forrester

Clint Forrester

About this site:

  • The sidebar includes a navigation menu, and the entire sidebar can be closed by clicking on the “x”.
  • As you scroll down the page the navigation menu highlights the section of the page that you are on.
  • Nine different work samples are shown and if you click on an image it opens a screen with more information.

ISOflow

ISOflow

About this site:

  • The site includes a sticky header and navigation menu.
  • Ten different work samples are shown. As you hover over the image it shows a brief description of the project.
  • Lower on the page, photos, names, and job descriptions are shown for all 8 of the team members.

RINS

RINS

About this site:

  • An arrow is shown to let you know that you need to scroll down.
  • Some details about the services and project types (single-page websites and multi-page websites) are provided.
  • Photos and brief bios of the two-man team are provided.
  • No work samples are shown.

Edwin Eddie Diaz

Edwin Eddie Diaz

About this site:

  • A bright color scheme helps to provide a memorable experience.
  • The sticky header and navigation menu make it easy to find the different sections of this one-page site.
  • Six different work samples are shown in a slider.

Markus Schott

Markus Schott

About this site:

  • This portfolio site includes a photo of the designer and a brief bio.
  • Skills are listed lower on the page.
  • Work samples are not shown currently, but there is a message that the public portfolio is being completed.

Vtr

Vtr

About this site:

  • A brief bio and contact information are included.
  • Three work samples are displayed, as well as some details about each project.
  • Social media icons link to the designer’s profiles both in the header and footer.

Arc Design Lab

Arc Design Lab

About this site:

  • The navigation menu at the bottom of the screen turns into a sticky header as you scroll down.
  • Eleven different work samples are shown.
  • The portfolio can also be filter by type of project.

Simple As Milk

Simple As Milk

About this site:

  • An illustration of the team greets you when you arrive at the site.
  • A full navigation menu is included in the header of the site.
  • Twelve work samples are showcased in a slider.

Which of these sites do you like the best? Would you use a one-page site for your own portfolio? Feel free to share your own thoughts on one-page portfolios and these examples in the comments.

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

62 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.

Close