How I designed my portfolio

Creating a portfolio often feels overwhelming due to the many considerations involved. In this context, I share my personal experience into my portfolio's design process, including my resources for visual inspiration, how to put research into application and my evaluation of web-builders.

Where to look for visual inspiration?

Before designing my portfolio, I knew that I wanted to create something that looked slick, minimal and refined. It was important to me that my portfolio showcased my case studies in the best light, but also reflected my personality, skills and experience as a designer.

With this in mind, I began looking for inspiration on layout, typography, colour and interaction design across several platforms including LinkedIn, Awwwards and Google. Here's how I researched for inspiration:

• I spoke with designers within my LinkedIn network to see what platforms they have used to create their portfolio and what they recommend.

• I Google'd things like 'Top 10 designer portfolios' to narrow down my search.

• I explored design agencies, consultancies and non-design websites to gather a variety of resources

• I bookmarked websites that I found interesting to keep as reference for later.

The secret to creating a visually-appealing portfolio

1) Cherry pick design elements

From my research, I picked 4 - 5 different websites that caught my eye. Not every site was amazing, but there were certain things I admired such as the layout of a specific page, the colour palette, typefaces or the interactions used. I took all of the design elements that I liked and brought them together to begin creating my own designs.

Top tip: I'd advise starting with layout, followed by typeface choice, colours and interactions.

2) Be expressive and experiment

Using the design elements I had gathered, I loosely chucked together a first draft of my homepage. In the early stages of designing your portfolio, you want to be care free with your ideas to see what works and what doesn't. It's often through experimenting that you stumble across the best of ideas, so get comfortable tweaking and changing things. Don't be afraid to get messy, it's part of the process!

3) Don't overwhelm yourself

I knew if I tried to design everything at once, I'd become overwhelmed. Instead, I treated my portfolio like a project and broke it down into smaller chunks, starting with the homepage layout. Once that was in a good place, I followed on with the case study page and additional pages that revealed more about my personal story and interests.

Remember, your portfolio should reflect YOU as a designer and person. Don't lose focus on this when designing your portfolio!

Framer, Squarespace or Wix?

Having used all 3 web-design platforms, here's why I chose for Framer:

• Being able to design for desktop, tablet and mobile at once

• Seeing live changes across all breakpoints

• Simple user interface with the ability to quickly change styles

• You can design a website in Figma and transfer it over to Framer via the dedicated plug-in

• Active and welcoming community forum

As Framer is still relatively new, there are a few features missing compared to Squarespace and Wix including the inability to password protect individual pages. However, the platform is constantly being updated with exciting features opening the doors to new creative possibilities.

I learnt Framer through downloading free templates and essentially dissecting them to see how they were constructed. Also, whenever I got stuck, I'd watch YouTube tutorials through the official Framer channel and Framer partners. Or, drop a message on the support forums.

Would I ever use Squarespace or Wix?

Both Wix and Squarespace offer user-friendly drag-and-drop web building tools, catering well to those with limited technical prowess. They provide a range of dynamic templates and visually appealing components. However, a drawback lies in the challenge of ensuring consistent design across desktop, tablet, and mobile platforms.

In both platforms, design work is limited to either desktop or mobile mode at a given time, resulting in uncertainty about how the design translates between devices. Although automatic adjustments are attempted, issues like odd spacing and misplaced content require time-consuming manual adjustments. Despite this, I've come across numerous designers with impressive portfolios on Squarespace, which offers a quick and accessible way to establish an online portfolio.

To round off

Designing your portfolio should be a fun experience rather than an overwhelming one. Treat it as a opportunity to challenge your creative abilities and push the boundaries of your design thinking. A great analogy I like to use: imagine your portfolio as a trophy cabinet for all of your accomplishments. Your homepage is the cabinet doors whilst your case studies are the trophies - make the viewer want to stop and stare!