9 Necessary Design Elements for Online Portfolios

Although your online portfolio should show off your unique style and abilities, every portfolio should take advantage of a few design elements. If you want to really wow potential clients, then make sure you study the best portfolios out there to gather ideas for your own.


Designers might be tempted to show off flashy designs and create unique features to showcase their work. However, it’s better to keep your portfolio simple and straightforward. Keep the focus on the work itself. This shows the site visitor that you understand the focus of design and how to make a web design load quickly.

One example of a beautiful portfolio that is fairly simple in design is PHDL. This design firm’s site shows images of technology and design, which brand them. However, they’ve kept the text simple, the images are all uniform in size and the navigation is intuitive.

Beautiful Images

Some site visitors will never make it past your landing page. Your portfolio is your chance to highlight your design work, including your ability to find unique images that speak to the topic at hand. Utilizing images shows site visitors your ability to bring everything together in a visually pleasing way.

An example of a portfolio using gorgeous images is design firm She Was Only. They offer four big, gorgeous images of products they’ve designed in action. Viewers will immediately see not only the design ability but gather ideas for the uses of the designs.

Organized Categories

Most designers work on a variety of projects. You might create websites, brochures and print ads on any given day. It’s important that you show site visitors the scope of the work you are able to do. However, you don’t want your page to look cluttered. To avoid this issue, think about categories you can utilize to feature your work.

A good example of this is the website of photographer Mark DeLong. The photos are broken down into categories such as Celebrities, Commercial Photography and Fashion Photography. Click on any image in said category and you’ll see additional examples.

Great Headlines

Make sure that your site has great headlines that grab that reader’s attention. In fact, if you can get visitors to read your headline, about 90% of them will also read your call to action (CTA). A headline can make the site visitor click on a link to read more about you, explain the importance of hiring you to do the work, versus a competitor, or improve SEO for your site.

Artist Kristina Krogh does a good job adding headlines to her online portfolio. She simply offers the name of the print under the image of it. Because the titles are interesting, they make eye catching headlines that encourages the reader to click and learn more.

Call to Action

A Call to Action (CTA) is vital for any type of site, including an online portfolio. Making your CTA into a button increases clickthroughs by as much as 45%. A CTA directs your site visitor to take the action you want them to take, or can simply direct the site visitor through a sales funnel more efficiently.

One portfolio with an effective CTA design is Character based out of San Francisco. This design firm offers some beautiful images and then a simple CTA within a transparent box that says, “View Project”. Adding a simple box that commands action can increase your conversions.


Even though you want to keep navigation simple and highlight your best work, there is room for you to show your personality. As a designer, what makes your designs unique is your own personal take on the world around you.

When you share your personality, you’ll draw the clients who like your type of vision to you and thus are happier with the finished product. It’s important to let your personality shine through both in your written content and in the images you choose to share with site visitors.

An example of a designer showing off the personality of the firm while also showing best work is Yoke, a creative studio. Note the cartoon elements and use of motion to drive the site visitors through the types of work this studio can create, including an animated graphic or two.


A blog might not be the first thing you think of when planning your online portfolio to showcase your design work, but it can do a number of things that will give your site an edge over competitors. A blog can drive traffic to your site as people share your posts or you send out a newsletter. Content can even help you rank higher in search engines. Even more important is the fact that a blog helps you connect with your readers.

Christopher Lee’s online portfolio includes a blog. He covers topics such as how to produce your own print materials, and how to package prints.


It’s important to include clear navigation on every page of your website, particularly the portfolio. For example, people expect to see navigation near the top of the page and to always have a clear way back to your home page. If you do not include this, then the visitor might grow confused about how to navigate your site. Including a clear navigation structure allows the site visitor to browse different areas with the assurance that they can make it back to where they started.

One example of a site with clear navigation is Studio Airport. This site uses modern features of a big picture that fills the width of the page, but the navigation placement is traditional. They also set off the navigation in capsules, keeping the design simple but easy to locate.


It’s easy to get so busy making sure all the elements are there that you forget to list a way visitors can  contact you. A site visitor might love your designs and want to hire you, but they aren’t going to jump through hoops to figure out how to get in touch with you. It’s important to include contact info in location that is easy to find and to put that link on each and every page of your portfolio.

Designer Lizzie Seymour’s site is a great example of putting contact info in an easily locatable spot. Note how she has a small envelope icon in the upper right of her design. Simply click the icon to email her.

Include these nine design elements in your online portfolio to make the best impression possible on potential clients. Of course, there are many other elements that go into making a great design, but if you follow these rules you’ll have made a good start.

10 thoughts on “9 Necessary Design Elements for Online Portfolios”

  1. Excellent article. This is a good list of design elements that look great, are functional and will definitely generate click through. I lean a little more to the traditional, so number 8 was a great choice of design (for me anyway). Either way, thanks you for the great information and keep up the great work!

  2. Hi Lexie, the article is really awesome. You have given the insights of Design Elements. Although all the 9 design elements are required but Simplicity, Beautiful Images and Great Headlines are the key parts for Online Portfolios.
    Thanks for sharing such a nice article.

  3. Hi Lexie, thanks for sharing. The quality of portfolio images is a must in any case. Bad images can ruin even the best modern layout out there. I really like minimalistic approach in designing portfolio sites

  4. The importance of HD quality images is huge. I mean lot at the captivation of the site in point 2.Beautiful Images vs the pictures in site 4.Great Headlines. I highly suggest people spending more time on the images they pic up from Google. It counts tremendously for click through rate I have found on my site over the years.

  5. Thanks for sharing all those interesting topic which is mendetaory for having a perfect portfolio blog. But the main problem with my portfolio is with the pictures. I am not finding any of mine attractive pictures. So can I use pictures that are taken from Google? will there be any problem?

    1. Hey Remsun, my suggestion to you would be to use stock photos with CC0 in order to stay within copyright guidelines. Consider photos on unsplash.com and pixabay.com. Hope this helps! Using photos from Google can be risky because you need to make sure you have the rights to use the images.

  6. The significance of HD quality pictures is gigantic. I mean part at the captivation of the site in point 2.Beautiful Images versus the photos in site 4.Great Headlines. I exceptionally recommend individuals investing more energy in the pictures they pic up from Google.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top