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.
The majority of screen space on the Bunton portfolio is used to display the work.
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.
Alex has a large welcome message at the right side of the screen that greets visitors.
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 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.
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.
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.
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.
5. Use of Lightbox for Portfolio Items
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.
If you click on any of the thumbnails on Alessandro Cavallo’s site you will see a larger image with a lightbox effect.
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’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.
Yodaa uses a similar approach with a large background image.
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 includes a full contact form at the bottom of the page.
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 uses horizontal scrolling with a large, creative background image.
Tyler Fink also uses horizontal scrolling on his portfolio.
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.
At the bottom of the page, Visual Groove includes links to various social networking profiles that provide an alternative method for getting in touch.
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.
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.
Showcase of One-Page Portfolios:
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 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.
Design an Attractive One-Page Portfolio Site Using Photoshop
Another Photoshop tutorial from DesignM.ag.
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.
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.
For more portfolio design inspiration see our portfolio gallery, Folio Focus.
One Page Love
A gallery that showcases excellent one-page sites.
UPDATE: Also see 1 Page Web Design Gallery.
For more on portfolios please see:
- 25 Impressive Design Portfolio Websites
- 25 of the Best Photographer Portfolio Websites
- 25 of the Best Photographer Portfolio Websites – Part II
- 25 of the Best Photography Portfolio Websites – Part III
Published February 11th, 2010 by Steven Snell