How to Build an Online Portfolio

The Capstone of Your Online Identity

Image generated using Midjourney

Your portfolio is a gateway to your online identity and in a world that’s increasingly digital, it’s more important than ever.

If you’re interested in learning why your portfolio is so important, check out Part 1 here.

In part two we’re going to focus on what it takes to create a portfolio. I’ve split this guide into two sections:

• Hosting your portfolio — what’s required to create a new website. Domain, hosting and other technical concepts (no code).
• Designing your portfolio — designing the content of your website. Layout, navigation and other important ideas.

Hosting Your Portfolio

There are two key steps involved in creating any new website. The first is to register a domain, the second is to select a platform to host your site.

What is a domain?

Your domain is your web address. For Medium, it’s medium.com. Domains can be generic, such as .info or .agency, or they can be regional, such as .com.au or .co.uk.

When you register a domain, you’ll need to provide contact details (name, email, number and address) and pay a registration fee (usually $10-$30). This is typically renewed on an annual basis. Once registered, you’re the owner of that domain and entitled to use it however you like.

This is useful for many reasons, but there are two worth highlighting:

• A domain cannot be registered twice. Once you register a domain, and for as long as you renew that registration, no one else can use it.
• Your domain is separate to the platform hosting your website. Whether you code a website from scratch or use a third party website builder, your domain is still owned by you. As the owner, you can take it with you wherever you go — you can transfer your domain between platforms.

Registering a domain can be done via cloud providers such as Amazon Web Services, third party providers such as GoDaddy, or website builders such as Squarespace.

If you don’t have experience building websites and plan on using a website builder, I recommend you register your domain using the same platform. Everything will be setup automatically and if you decide to switch platforms later, you can always transfer your domain to the new platform.

What is hosting?

A domain is an important first step, but it’s useless without a platform to host the content of your website.

When you register a domain, that domain also points to the address of a server (that’s an IP address). In web development this is referred to as DNS. Just as a phone book maps names to numbers, DNS maps domains to servers.

When you go to Medium.com, your computer sends a request to that server, and the server sends back the Medium.com web page that’s displayed in your browser.

Now that you have a domain, you need a platform that will host the content of your website — i.e. a server. It’s role is to store your pages, text and images and send them to anyone visiting your website.

You can code your own server and host it on a computer at home, but there are many platforms that will handle it for you for a monthly fee. The benefit of using these website builders is they step you through the process, most of which is automated.

Either way, it generally goes something like this:

1. Go to your website builder of choice. I use Squarespace for all my websites and Shopify for my online stores. Most offer a free trial, I recommend looking around to find one that appeals. I can recommend Squarespace from personal experience and if you’d like to support my work, you can use this referral link.
2. Create an account. You’ll need some basic details to start your free trial.
3. Register a domain. This can be anything that’s not already in use and will usually cost between $10 and $30 for 1 year. For Bite, I use bitegroup.com.au. It’s also worth noting, some platforms offer a free domain (1 year registration) if you sign up to a website plan.
4. Start building your website. This brings us to the second half of the post.

Designing Your Portfolio

There are three key considerations when designing your portfolio. They are navigation, visual design and accessibility.

Navigation

A website is a collection of pages. Medium has it’s home page, this post is another page, my profile is another.

Your portfolio is also a collection of pages, and deciding what those pages are and how you navigate them before you start building can be hugely beneficial.

1. Gather the content of your portfolio. If it helps, this can be done in any text editor. Collate all your text, images, links and anything else you plan on displaying on your website.
2. Divide your content into pages. This really depends on what your content is, but to give you some examples — you’ll start with a home page. The home page is the most valuable page on your site and should serve as a directory to the rest of your portfolio. You may also have an about page, a page for each of your projects, a gallery or a contact page. Pages shouldn’t be too long, nor too short. If they are, consider splitting them up or combining them with other pages.
3. Create a menu. For websites with more than a few pages, best practice is to include a navigation menu in the header of every page. This menu doesn’t need to list everything, but it should include the most significant areas of your website. For example — there’s no need to list every project in the menu when you can link to a ‘Projects’ page which in turn, leads the user to a page for each individual project.

Visual Design

As with any website, the better it looks the more likely users are to stick around.

The look and feel of your portfolio relies on many key principles — so much so that web design is a massive field in and of itself in the tech industry. We can briefly summarise though with some of the most notable:

• Consistency — it’s important to remember that every design choice you make must be consistent across the entire site. Every item on this list is a choice you make once per website, not per page.
• Font — up to two fonts, varying in size and weight (boldness). Different heading sizes, paragraphs, links and key sections of your site, such as the header and footer may have subtle differences in their styling.
• Colour — pick a palette of 5 colours and use them for everything across your portfolio. You’ll need neutral colours for the background and most text, and accent colours to highlight elements such as links, buttons, headings and other features.
• White space — the empty space around your content. This text is not covering the screen edge to edge, it’s got spacer columns either side and more space (possibly dividing lines) to separate the menus. Icons, headings, images, links and paragraphs are all separated by empty space. It’s important to ensure your content is spread across the page in a way that is easy and intuitive for users to navigate.
• Images and Iconography — While it’s not strictly necessary to have images or icons on your portfolio, pure text will get very boring very quickly. If you need visual content, an incredible resource for illustrations is unDraw (where I source all the illustrations for my blog posts), Unsplash for images and Icons8 for icons.

Accessibility

As web designers, it’s our responsibility to ensure our websites can be used by everyone — including those with disabilities such as visual impairments.

Most website builders include a whole range of features to support accessibility, and it’s our responsibility to ensure we’re using them to their full potential.

Using proper menus, sections and headings to split up our content is a great start to ensuring your portfolio can be easily interpreted by screen readers. Using alt text to describe your images is also an easy habit to get into and can have a massive impact on the experience of your users.

Accessibility is constantly evolving and always something we can improve on. Always review resources provided by the platforms you’re using that can help you improve, such as this Squarespace guide or this Shopify guide.

Conclusion

Condensing so much information on web development and design into a single post is challenging, but I hope this at least helps point you in the right direction. If you’d like some examples, check out the Bite website or my personal portfolio.

If you’d like to learn more, have questions or if there’s something you disagree with, leave a comment and let’s start a discussion.