One-Page Portfolios: Trends and Showcase

Interactive Online > Blog  > Web Design  > One-Page Portfolios: Trends and Showcase

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.


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

read more..
Free Website for Your Dental Practice
See why our dental practice websites exceed the features & value of your typcial dentist website.
  • No cookie-cutter websites
  • No duplicate content
  • Custom built with a unique look and feel
  • Unique content written by professional writers
  • Set yourself apart from other dentists
  • The key to your online success!
* we never share your e-mail with third parties.