How to Build an Eye-Catching Portfolio Layout

by Jake Rocheleau

on June 20, 2013

in Designer Showcase

Both personal and corporate portfolios require careful attention to detail. There are lots of new user experience techniques which can offer a seamless interface for designers. And when presenting your work online it is worth spending a bit of extra time to ensure your strategy will impress visitors.

I want to share a few ideas for when you are crafting a new portfolio layout. These trends will obviously advance as time goes on. Digital creatives are often the first people jumping onto new trends, and so it is reasonable to assume portfolios may resonate newer design ideas in the future. But not every idea is going to be perfect for your website. It takes a bit of critical thinking to determine which design styles would fit best into your own personal or company portfolio layout.

Single Page Layouts

The popularity of single-page parallax scrolling websites has become enormous. JavaScript libraries are growing rapidly and this allows designers to scale out their own projects very quickly. The appeal towards single-page websites is that all your major information may be kept in one place. This means no further HTTP requests and your visitors have direct access to everything on a single page.

leo tartari ux designer website layout

There are plenty of drawbacks to using this method and it really only works if this design is your final goal. Some creative professionals and corporations need to use multiple pages and subpages for getting all their content online. However freelancers singular entities like Leo Tartari can put together a splendid performance within just a single page. The content is easy to read and organized in a beautiful presentation which really catches your eye.

tyler smith branding web developer portfolio website

Now another fascinating difference is in the amount of information you choose to portray on a single page. Leo’s design has many larger panels which each display a small amount of information. It is definitely a creative endeavor and works perfectly for the style. Yet we might also compare the portfolio of Tyler Smith, which is a lot neater and less detailed. His features consist only of his personal projects and a brief summary about himself. These two contrasting examples of single-page design offer a broader spectrum of what is possible for your own portfolio website.

Big Imagery

Typically you can find big oversized images in the website’s of media companies and design agencies. However various portfolio elements can benefit using large photographs and background images. The homepage design of Francisco Inchaust’s portfolio has a nice background image covering a large span of the header. The colors blend nicely with the rest of the layout and it provides a common branding theme within the other pages.

portfolio writing design for francisco inchaust

Other pages on the site are built around typography and standard practices. I like his design a lot and have been following the layout over a couple years. I think the biggest takeaway is how flexible your portfolio layout can be, even by using a mixture of various design elements. Good typography coupled with eye-catching imagery is a nice way to grab people’s attention.

Focus on Typography

When I mention typography it is worth noting this is a separate idea compared to a text-centric website layout. Every portfolio should be using some text and thus you will need to handle the typography in some way. But other portfolios may be constructed solely around text on the page.

josh austin portfolio dark website typography text layout

The portfolio of interaction designer Josh Austin is a great example of minimalism with a focus on typography. You can find great information on his work, his skills, and some other background knowledge. Portfolio designs like these should not take a whole lot of time. But contextual layouts can still make a big impact when the copy is written in just the right way.

Minimalist Content

Designing content along with minimalism is quite possibly the most heavily used portfolio layout scheme. I have witnessed dozens of various portfolio layouts which all focus around a minimalist design. The goal is to generally present the least amount of information that is needed for your visitors. Make the design clean, the navigation easy to find, and the page text easy to consume.

chris masterson website minimalism inspiration gallery

Looking at the portfolio for Chris Masterson you can tell a lot of detail has gone into the formatting. Each of the portfolio entries is designed to have it’s own page. Much of the layout is focused around imagery – which would be a good starting point for designers. The layout ideas are great because it leaves each aspect of the site to be very malleable. You can change around the different elements and it will all still look pretty great.

nerdy hippo website layout inspiration minimalism portfolio

To design a website around minimalism is also to cut back on unnecessary content. Generally you do not need an extra Twitter feed widget or other related distractions. The beauty of minimalism is within the lack of distractions. Visitors can focus on your work and your credentials which is what really matters. There are so many more examples of minimalism which I have not included in this post. Check around the Internet with a Google search and see if you can put together other fundamental design ideas.

Final Thoughts

The chance to build a portfolio is rare because designers are not often working on other people’s websites. So it is worth spending a bit of time to do research before jumping head-first into your own project. And it is crucial that your visitors and clients may view your past work, read about who you are, and possibly what skills you have to offer. Try combining a few of these techniques along with your own ideas and you can surely put together one outstanding portfolio layout.

Powered by Shutterstock

About Jake Rocheleau

Jake is a digital researcher and writer on many popular design magazines. He frequently writes on topics including web design, user experience, mobile apps, and project management. You can find him all throughout Google and tweeting @jakerocheleau. Connect with Jake on google+