Less than a week until TNW València 🇪🇸 Get a last-minute 30% discount on your ticket

This article was published on October 29, 2014

The guide to crafting an amazing online portfolio

The guide to crafting an amazing online portfolio
Amber Leigh Turner
Story by

Amber Leigh Turner

Owner and Creative Director of January Creative

Owner and Creative Director of January Creative in Nashville, Tennessee, Amber has been a self-employed graphic and web designer for over ei Owner and Creative Director of January Creative in Nashville, Tennessee, Amber has been a self-employed graphic and web designer for over eight years, starting early in her collegiate career. Amber has a unique passion for not only all things design, but all things business as well. Freelancing as a student gave Amber an opportunity to write a student freelancing book, appropriately named Students Freelancing 101: A Start to Finish Course to Becoming a Student Freelancing, to help other students who want to start freelancing. Follow her on Twitter. Email her at https://21.co/amberleighturner/

Are you working on designing your new portfolio site or personal website? Unsure of where to start or how to make it look professional? What type of design elements should you focus on when you are working on your site? Designing your online portfolio should best highlight on your portfolio pieces so your work speak for themselves.

How do you create a portfolio site in a way that the design isn’t really the first thing that is seen? Below, let’s talk about some of the major design decisions that need to be made as you work through designing your new online portfolio to help make sure the focus is always on your work.



For your online portfolio, you should consider adding a logo or some graphic mark that signifies who you are and the type of work you do. While this often is a no-brainer for companies or design firms, for individuals and freelancers this may not seem as important.

When visitors come to any site, the first thing they look for is a logo or name of the site. This element shouldn’t be skipped simply because you want to place all the focus on your work. If you want a clean, simple logo for your site and haven’t created one, services like Squarespace offers a free professional logo maker with your site.

Having a nice logo or graphic mark on your portfolio tells your visiting audience several things: that you are professional, that you know how to take care of the details and that you are stable. Your logo will give you a nice professional and polished look while showing visitors that you are offering professional services.

Designing the small details like your logo shows visitors that you pay attention and make sure even the tiniest of details are taken care of. Finally, those with a logo often appear more stable as they have taken the time to develop a logo because they plan to stick around.

All of these good vibes are what you want to convey as visitors move down from your logo to the rest of your site.


For your portfolio website, the type of typography you use will go a long way. Since portfolios are more about the work than your words, you should keep your words at a minimum and where they don’t take focus off of your work.

If you must use some copy on your website, make sure that it is used to describe your work or yourself and keep it short and sweet.


Clean, easy to read and unobtrusive typography works best for your online portfolio. Things to consider when choosing a typeface and using it on your site include: simple and clean letterform (no decorative fonts), colors you choose (more below), spacing around the typography and the font size.

Look into using san-serif fonts, keeping the color a neutral color (grays and blacks work well), and keeping the font size small but where it can be easily read.

While on the subject of content, make sure you don’t cram your portfolio site with a lot of copy. It is great to have some description of your work for each portfolio piece, but keep it descriptive and at a minimum.

Also, be sure to include information about yourself as well, but this is often best on its own page and limited to about two to three paragraphs.


The psychology behind colors in design will help you discover the perfect color palette for your portfolio site. Keeping in mind that the design of your portfolio website itself is to aid in the viewing of your work, selecting colors so that they fade into the background and bring forward your work is the key.

Often, portfolio sites work best when the work is displayed on a white or light gray, or dark gray or black background. Using bright colors tend to distract viewers from seeing your work, so reserve any bright colors to selected areas such as headings.

Many portfolio sites stick to neutral color schemes since they are the cleanest and most effective backdrop for just about any type of work you want to showcase.


Make sure the colors you choose contrast well with your work. If your work is very bright in color, your site should have muted colors. If your work is very muted, using selected bright colors will help draw attention to your work.

If you use similar color scheme for your portfolio site as you do for your work, then it will cause a competition visually between your work and the site itself, and this is often very visually jarring for visitors.


Your work on your portfolio site should be laid out in a clean and easy-to-follow format. Think about how art galleries showcase work on the walls. Are the pieces crammed together or spread apart? Is the entirety of the space well laid out or does it feel like it was put together last minute?

Organize your pieces on your portfolio in a way that allows each piece to breath and have its own space. Avoid cramming lots of pieces onto your portfolio page, as this tends to feel very chaotic and unprofessional.

Often, portfolio sites have work laid out in a grid with works spanning two or three images across and how ever many rows needed to show all the work.

In planning the layout of your site, pay attention to the size of your portfolio images. Visitors are coming to see your work, and they may linger and stay on one or two pieces for a long time.

To help aid in their viewing, present images are are large enough for them to see the details, but not so large as to be overwhelming and daunting.


vintage cameras

Finally, for your portfolio website, your photos and/or graphics you use on your site to showcase your work need to planned and created keeping in mind their purpose. Visitors want to see your work, so they will often spend time viewing each piece you have. The types of photos and graphics you use should be created in a way that showcases your work in the best possible way.

For physical pieces, look to take the best photographs you can of your work, using the best camera you have available to you. Take multiple pictures and at multiple angles so you can see which will work best later on.

When you go to edit your pictures, feel free to adjust the exposure, contrast, lightness and brightness to help showcase your work in the best light – just don’t go overboard as you don’t want to misrepresent your work.

For your digital pieces, figure out the best way to showcase the entirety of your work for a project in one image (meaning a thumbnail – you can always have visitors click to see more about that project and more images as you see fit). Layout, crop, and adjust so that visitors understand what they are looking at but also allows the work to be showcased in the best way possible.


Taking your logo, typography, colors, layout and photo/graphic treatment in mind when designing your new portfolio site will help you make sure that your online portfolio is serving its purpose: to place all the focus on your work. Your portfolio site will be the most successful when every design decision made is in favor of showcasing your work.

If you need help getting started, services like Squarespace can make the setup process easy so you can focus on crafting quality content.

Read next: The psychology of Web design: How colors, typefaces and spacing affect your mood and Designers’ dream giveaway: Win a Sony Alpha a5100, $300 in MOO supplies or a FiftyThree stylus

Interested in Squarespace? Use code THENEXTWEB for 10 percent off.

Get the TNW newsletter

Get the most important tech news in your inbox each week.