10 portfolio design tips inspired by Webflow designers

Discover what sets great portfolio websites apart.

Neal O’Grady
July 5, 2015
Inspiration

Webflow’s community of designers boasts some serious talent. And these two designers’ portfolio sites exemplify the art of personal portfolio design.

That’s why, starting with this post, we’re going to dig deep into some of the incredible websites built on the Webflow platform—and share some tips on how you can push your own designs to the next level.

First, we’ll see what R.V. Krishna has to teach us about navigation design and color use for one-page portfolio sites. Then we’ll look at how Josh Overton uses a mix of unique and time-honored layouts to entice users to explore his work.

Want us to consider your site for a future Best of Webflow post? Let us know on Twitter @WebflowApp!

R.V. Krishna’s personal portfolio site

Krishna’s portfolio site packs in all kinds of creative animations, UI elements, and custom graphics (including a pure-CSS iPhone and iPad). It’s worth scrolling through just to get inspiration on all the ways you can present information—the site features bar graphs, timelines, 10-point scales, and more.

The single-page site takes inspiration from traditional CVs and resumes, but R.V. keeps things fresh and engaging with a variety of animations and transitions, tailoring each section of the site to present its information in a unique way.

R.V. efficiently presents a wealth of information visually, here using color accents to call out key data.

Design clear, unobtrusive navigation

Notice the header that slides down once you pass the splash screen. It’s incredibly simple, with just R.V.’s logo, name, specialties, and a link to reach him. No navigation here! Instead, R.V. guides users through his site with subtle colored circles on the right side of the screen:

These links animate on hover, revealing an icon and a section name. Clicking one whisks you to the appropriate section, but animates through preceding sections, giving you a sense of where the section is relative to the rest of the page, rather than just magically you teleporting there. This simple, unintrusive design keeps you focused on the content, and encourages you to scroll through the whole site, creating a strong sense of narrative.

Highlight key info with color

In several sections, R.V. uses dark backgrounds to convey professionalism and strong colors to highlight key information.

The site’s color palette ranges across the spectrum, but never feels overly loud or clashy. How’d he do it? By sticking to only a couple of colors in each section, and keeping his shades within the same color family, so they all look like they belong together.

In some sections, he uses dark grays and whites as backgrounds, calling out key information with bold, high-contrast colors. In others, he switches things up, using bright colors for the background, and black and white for the information. This keeps things fresh and flexible, without sacrificing consistency. 

In other sections, he uses the bold colors for the background and black and white for the information.

In the Clients section, for example, the large block of bright white focuses you on the most important information—the clients’ logos—while cleverly avoiding the riot of colors a bunch of different logos might introduce.

Highlight your expertise and set expectations

More ways to represent information. Note how honest R.V. is about his areas of expertise. Setting expectations properly can really improve the user experience!

Throughout the site, Krishna highlights his experience, clients, and skills. He’s even upfront about what he’s not so good at. This shows people that he’s both humble and honest—great qualities to highlight to potential customers!

He finishes the site off with a simple contact form, so it’s easy for people to get in touch. Never forget that the purpose of your portfolio is to attract clients and/or employers. If potential clients can’t reach out to you, it’s not doing its job.

If you look closely, you’ll notice that Krishna uses circles throughout his design—for sidebar navigation, buttons, section logos, image cropping, and data representation. This creates continuity between the various sections.

5 design tips inspired by R.V.’s portfolio

1. Highlight key information visually—people process images faster than words

2. Use animations to add dynamism and life to your site

3. Use color to draw attention where you want it and distinguish different sections, but keep your palette cohesive 

4. Limit the number of colors visible at any one time so the design doesn’t feel too loud

5. Create continuity by reusing design elements, such as circles

Overton Graphics’ business and portfolio site

Josh Overton’s design business site, Overton Graphics, features a host of highly customized and eye-catching images. Unlike the other designers highlighted here, Josh opted for a much darker color scheme, tending towards rich shades of purple, yellow-orange, and red. Dark colors can communicate a sense of professionalism, and purple is classically associated with royalty and refinement.

Keep content simple, clear, and consistent 

When the page loads, you’re presented with bold, full-screen imagery and the text smoothly transitions in. Josh keeps the copy minimal here, giving you just the company name and a single descriptive (yet inspiring) tagline. That lets the beautiful custom imagery and the site’s creative design speak for themselves.

Notice the geometric pattern in the background, which Josh uses throughout his design to create a futuristic and mysterious edge, while uniting the site’s various pages and sections.

Unlike most sites, the page’s “header” is on the side, with a simple logo, icon-based navigation, and some social links. It’s clean, easily to scan, and the icons clearly communicate what they link to. But Josh doesn’t lean entirely on the imagery, adding text labels on hover. Clicking a navigation link triggers a smooth scroll down to the appropriate section.

Notice how smooth this animation is. Sites with many animations and transitions can be pretty hard on a computer’s graphics processor, creating noticeable choppiness on page scroll. Overton’s site is smooth and snappy the whole way through. Well optimized, sir.

For more on site optimization, check out “How to boost your site’s performance.”

Help people dig deeper

Josh highlights his latest project, because a designer’s latest work should always be their best work.

Once you start scrolling, you’ll move right to a full-screen highlight of Josh’s latest project, with a name, brief description, a link to the site (sending his clients some traffic), and a link to a longer project description. Josh also includes an image of the site overlaid on the same geometric pattern from the homepage. This not only looks great, but also tells you what the project was at a glance—a website.

When you click Learn More, you dive in to a detailed project page with more info about the project, as well as a gallery of images.

See the homepage and community buttons at the bottom right? These let you browse through images and descriptions of the project’s key pages. This is a great way to provide context on the images you’re presenting.

This unique layout deviates from traditional vertical designs, making efficient use of horizontal space to limit the page to a single screen. This keeps things interesting, and shows his creativity. And because he’s already put the navigation on the side, more horizontal elements don’t seem out of place.

Clicking View Images opens a full-screen lightbox.

Clicking one of the images in the project page opens a full-screen lightbox, so visitors can check out the design in more detail. There's nothing worse than having to squint at screenshots on a portfolio site, so show off your work!

A brief animation lets you know the images are loading. This kind of feedback lets users know something’s happening, so they don’t just think the page is broken if it’s slow to load. Super smart.

A beautiful grid of images with hover effects highlights the rest of his portfolio.

If you navigate back to the homepage and scroll down to the projects section, you hit a grid of images representing the rest of his portfolio. A grid-based design offers an efficient way to present a lot of content and give users an array of choices. Each image has a dark transparency that disappears on hover, revealing the project name and type. The dark overlay keeps the page from looking busy, and helps clearly highlight whichever project a user is considering clicking. Each image links to a detailed project page.

A brief About Me page (complete with downloadable CV) rounds out the experience.

Josh also includes a brief About Me page, where you can learn a bit about him, what he does, and who he’s worked for. You can even download his CV, which is a nice touch. Some clients want to know the person behind the work, so it doesn’t hurt to let your personality shine here and there.

Like R.V., Josh finishes off the site with a fairly simple contact form. It’s a little more complex than R.V.’s, but it lets potential clients indicate what they’re interested in, which undoubtedly streamlines communication later. Again, always include a way for people to contact you.

5 design tips inspired by Josh’s business and portfolio site

1. Highlight your most recent work—it should be your best, after all

2. Keep it simple, stup … honey. Adding a lot of animations can cause the page to chug. You want your site to be fast, because your clients want their sites to be fast.

3. Experiment with unique layouts to inspire interest and more efficiently present content

4. Create continuity with a repeated design element (like Josh’s geometric background pattern)

5. If you have a lot of projects to share, show them off in a grid—this illustrates your breadth of work, but makes it easy to explore that breadth

Now let’s see your stuff 

We’ve only scratched the surface of all the beautiful sites made on the Webflow platform. We’ll continue to dive into the Webflow community’s sites right here, so stay tuned. Until then, happy designing!

Oh, and if you’d like us to look at your site for a future post, let us know on Twitter!

Neal O’Grady

Freelance designer, traveler and all-around web guy.

You might also like...

More

Join the conversation

What's Webflow?

Try it for free

Designer

Bring your wildest web designs — and client sites — to life, without writing code.

CMS

Build completely custom content structures for client sites and prototypes.

Hosting

World-class web hosting at your fingertips, without all the usual hassles.