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!

There can be many reasons for a website to exist

I often witness some very unsolicited advising taking place. Some people tend to have premade answers when it comes to websites and more often than not, it comes from a good place. In spite of that, most of them don’t bother to ask anything about the project before weighing in.

left the tomatoes gif
There’s a reason why the tomatoes are on the plate. But how could you know that?

I get it. We all know our stuff. But a website can serve many purposes and unless you were part of the process, you don’t know what it is we’re doing here. And you don’t know the function of every component of that project. So thanks for the input but we’re good.

guy gif

That said, it doesn’t mean that everyone who will give their opinion about our work is out of line. We must always be open to constructive criticism and set the ego aside when it comes to problem solving. I just think we should be smart and think for ourselves rather than to take everything at face value.

Personality disconnect

Just like you, I don’t like to be sold to, and I don’t like when companies try to exploit my inner dumbass. Even though it has become some sort of buzzword, authenticity is what it’s all about — true authenticity that is. It’s what we should all strive for while we make our way through that colossal white noise vortex. 

Perception is the name of the game. We have a say in how people view us, and view our businesses. Even though we can only control a portion of the big picture, it’s our job to nudge that perception to where we want it to be. 

Pro tip: If you’re a brand (or solopreneur), don’t just find another brand to imitate. Truly ask yourself what you stand for and what you want to be. Be as genuine as possible. Define your brand’s personality and then act accordingly. Without any restraint, broadcast who you are to the world.

girls dancing gif
Take it all in people.

If you do what others do simply because you think: “It worked for them, it’ll work for me.” Think twice about that. I know, you know, and everybody knows this would do a disservice to you and your audience. 

For instance, you’re a freelancer and you present yourself as a funny easygoing person. You’re then hired to work in an agency for 2 months but 3 days in, it’s getting pretty obvious you're not funny nor easygoing. Uh-oh! You managed to pull a Plaxico Burress and you’re now stuck in a very unfortunate situation. 

Same goes for brands. You claim to care about the environment and people but then you use an antitheft device on your cars to violate the Clean Air Act. Whoopsy-daisy! Turns out you’re garbage and the environment was way down on your priority list. 

Try not to be on the receiving end of this.

The ones who will make it to the other side are the ones who dared to be different

Most people are scared to break the mould. They say stuff like: “If we talk like this, we could possibly offend blond mothers over 42 who also drive electric cars.” Or: “If we look different from the competition, this could maybe potentially make us lose business opportunities at some point perhaps.” Yes — solid point. Essentially, it all comes down to what type of brand (or person) we want to be.

The truth is, brands willing to take risks will always come out on top.

So with this in mind, I’ll paraphrase my very good friend, Paul Arden: “If you always play it safe, you’ll be the same as everyone else. And that’s seriously bad for business.”

But from the right perspective, times like these afford us a peachy opportunity to stand out. That’s right, I said peachy. While most are content with being bland, I think we should aim higher. Why not try to turn some heads and get some reactions? If we’re ok with people remaining indifferent, we fail. Because indifferent people won’t pay attention to us, talk about us, hire us, refer us, and so on. The Apples and Nikes of the world understand this. They apply it with precision and consistency. So if they can do it, why can’t we? My advice to you is simple: 

Be brave. Stand out. And know that, yes, that will probably alienate some people. Chances are, they weren’t the customers you wanted anyway.

As you were.

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

Designer

The power of CSS, HTML, and JavaScript in a visual canvas.

Interactions

Interactions

Build website interactions and animations visually.

CMS

CMS

Define your own content structure, and design with real data.

Ecommerce

Ecommerce

Goodbye templates and code — design your store visually.

Editor

Editor

Edit and update site content right on the page.

Hosting

Hosting

Set up lightning-fast managed hosting in just a few clicks.