A portfolio website is a curated, online space that showcases your best work. It’s one of the most practical and memorable ways to share your work with press, potential collaborators or employers.

Much like your PDF portfolio, a portfolio website can be used when applying for jobs or internships. The idea is that in just one, centralised space, you can quickly communicate who you are, what you do and how people can contact you.

Portfolio websites come in all shapes and sizes, and can vary depending on your discipline. Ultimately, whether you’re a designer, photographer, writer or digital artist, the best portfolio websites are a true reflection of your projects, passions and personality.

Today, there are loads of ways to showcase your work online, be it through an Instagram account, Tumblr page or Behance profile. And depending on your discipline or practice, showcasing your work on a particular platform (or combination of platforms) might make the most sense for you.

There are a few reasons, however, why it’s worth having a website, too:

Having a portfolio website gives you the opportunity to control and curate the way you want to be seen online, in one dedicated space.

Whereas other online platforms might limit you to certain dimensions or formats, having your own online space gives you the flexibility and freedom to choose everything from the layout and the size of images to the typefaces you use.

Without one, clear destination for your work, potential employers might have to click around on various platforms. Your portfolio website, however, can help people find you faster online by including the right search terms and tags (more on that later).

This way, your website will usually be the first thing to appear in search results when people look you up. Plus, this can minimises confusion if, for example, you have a common name.

Social media platforms offer an easy and accessible way to showcase your work, but not without certain risks. A portfolio site can serve as an effective backup for any work you share on social media, in the event that your account gets banned or suspended for any reason – even hacked. It happens more commonly than you think, and often when you least expect it.

You also won’t have to worry about the risk of platforms updating overnight and having to navigate through new interfaces!

While there are no set rules, generally speaking, a portfolio website is made up of the following:

• A homepage
  Also known as a landing page, this is the first thing a visitor sees when they come to your website.

• An ‘About Me’ or ‘Contact’ page
  This is where you include personal and contact information, for example:
  • Your full name and pronouns
  • Email address
  • Telephone number
  • A short statement about yourself and your practice

• Project pages
  These help you communicate the story of each project. Project pages typically include anything from images, GIFs or videos, alongside a brief caption describing the contents, contributors and credits.
  
  Many creatives choose to group their project pages into clickable categories. For example, photographers might consider sorting projects by format, like ‘Portraits’, ‘Events’ and ‘Personal’; or if you’re a multidisciplinary creative you could organise these more broadly by medium, such as ‘Graphic Design’, ‘Digital’ and ‘Illustration’.

Sarah Madden, illustrator
Built using: Squarespace

Sarah’s landing page shows a visual cross-section of projects, allowing a visitor to quickly understand her style and work. Clicking on each square takes you to an individual project page, containing a short caption, an example of the work in context and some process images.

A clean, minimal layout allows Sarah to clearly signpost the different sections of her website, backed against a neutral and complementary colour. In this case, Sarah’s opted to group her projects into a ‘Work’ section with contact details and a short biography in an ‘Info’ section – as well as small icons to point viewers to relevant social media accounts.

It can be daunting to know where to start when it comes to putting together a portfolio website, especially if it’s the first time you’re making one. Below, we’ll take you through all the essential steps – from curation to design, before getting it up and running.

Before you start collecting projects or drawing out your dream website design, it’s a good idea to think about what you want to achieve with your portfolio website. For example, do you want your website to be:

• A one-stop destination for all your creative work
• A space to flex your coding and design skills
• A way to point people to your blog, shop or social media accounts

The answer to this will be different for everyone, it could even be a combination of the above. Whatever the answer, knowing what role you want your website to play will help make the decision-making process much easier.

Jennifer Zheng, director, designer and animator
Built using: Wordpress

Jennifer’s landing page offers a quick indication of her whimsical style of work. Opting for a more abstract but still accessible approach, she’s grouped her work into four different specialisms and an ‘About’ page.

Clickable links for ‘Direction’, ‘Design’, ‘Animation’ and ‘Objects’ float around a central focus point: a looping, self-designed animation of an amorphous character being greeted by a cat. Clicking on each specialism then brings you to a long page, showcasing all of her projects as images and GIFs.

If you’ve ever put together a PDF portfolio, you may be familiar with this bit. While designing and building a website might seem like the hard parts, often it’s deciding what projects to include in the first place that can be the most challenging.

It’s never easy to pick out just a few key projects, but with a little help, the cut can be made easier. Here are some top tips:

When a visitor lands on your website, you only have a few seconds to dazzle them with your portfolio. That’s why you should only showcase your favourite, top-tier pieces. Don’t be tempted to include everything you’ve ever made!

To help narrow this down, try making a list of all your projects. Mark the ones you’re most proud of, and cross out anything that doesn’t best represent who you are or what you’re genuinely interested in.

Elena Petitti di Roreto, filmmaker
Built using: Custom build

Filmmaker Elena’s immersive landing page is made up of an extensive set of film stills of her work sprawling across it that changes as the visitor’s cursor moves, offering a glimpse into the themes she explores in her films while also demonstrating the breadth of her filmography.

Hovering over the sections ‘Special Projects’ and ‘Commercial’ brings up a video for each project, quickly and stylishly giving the viewer a sense of the work, while the ‘Prints’ section continues the montage style of the landing page. Her info page is a simple list of selected clients, distributors and press, accompanied by another film still.

Remember that your portfolio site isn’t just a current showcase of your work and practice – you can use it to attract more of the projects you’d like to take on in future.

For example, if you’d like to do more branding work but currently only have one project under your belt, be sure to include it on your site and make it feel prominent. This lets potential employers know that you’re interested in this area, and can lead to being commissioned for more of the same.

Remember that any first-time visitors to your website (including potential employers) likely won’t have met you before! So in addition to any client or commercial projects, don’t forget to put in any self-initiated or personal work that helps to give someone a sense of your personality, passions and interests.

Ben Eli, graphic designer and creative
Built using: Wix

Ben’s website opens with a self-introduction in large, alternating type, brought to life by simple ascii emojis and accents. Opting for a white-green gradient, the background adds a subtle and complementary pop of colour, without taking attention away from the work. As an added memorable and personal touch, Ben has also included an alternating ticker-tape in the bottom right hand side to share some of their favourite albums.

Scrolling down reveals a curated list of client and personal projects, with each title revealing a teaser image when you hover over it. Each project is also given its own page to give a deeper dive into the work.

Once you have a clear idea of what projects you want to share, you can begin to think about the look and feel of your portfolio website. While there’s really no right or wrong way to go about this, it can be helpful to use your work as a starting point. Consider some of the following:

• What kind of look will complement your projects? What colour palette might work as the best backdrop for your work?
• Do you want the work to take centre stage, or do you want the design of the website to also reflect your style and aesthetic?

Remember that ultimately, the most effective portfolio website is one that clearly represents your personality and practice. Whether you choose to showcase your coding wizardry or pore over your typeface and layout choices, everything from your cursor to your URL can be used to express who you are as a creative.

A good way to start the design process is by collecting some inspiration from other creatives’ websites. Note down what you like about some of your favourite sites, and consider what options might best suit you and your work. For a quick hit of inspiration, you can also visit sites dedicated to sharing innovative website design..

Jamie Waters, multidisciplinary creative
Built using: Custom build

Jamie’s portfolio website opts for a more thematic, immersive landing page – also a long, scrolling one – that expresses his singular style. As a result, the website acts as a sort of canvas to express his own personal aesthetic while also being a container for an ever-growing list of ideas.

There’s a mixture of layout options on display – from grid formats to scattered images – all of which come together to create a loose collage of Jamie’s work. A list of categories on the left hand side also remains static above this sea of work, making sure the viewer can find their way to an organised list of project pages.

The pages of your website create structure and help a viewer navigate through your work and information.

To map this out, try drawing a wireframe. This is a two-dimensional sketch of a page’s interface, focusing on layout and function. This will help put you in the mind of your visitor, and their journey, as they navigate your website.

Visitors don’t always have a lot of time to spend on your site, which is why it’s important to communicate your projects succinctly. Here are a few tips to consider when planning your project pages.

Both quality and quantity of images matter when it comes to telling the story of a project. Each image should serve a purpose, so be selective to avoid any doubling up.

Think about what elements are worth highlighting; for example, a unique process or detail used in the design of a book cover – or whether you need to see your work in context. This could mean digitally mocking up an idea for an advertising campaign on billboards, or placing an illustration in a magazine layout.

Large image sizes can take a while to load, so where possible, reduce the quality of your images, rather than the resolution. Save non-transparent images as jpegs – this significantly reduces the file size, without making the image look pixelated.

Harry Butt, designer
Built using: Custom build

Harry’s website is one long page with a smooth scroll and unified aesthetic. Each project is presented with the same simple format of either images, videos or GIFs, placed side-by-side. A slideshow of images allows a visitor to click through a variety of stills without the images taking up too much space.

There are no more than two images or videos per project, offering a condensed snapshot of the work, followed by a concise caption and full credits for additional collaborators. Visitors are also given the option of downloading each project as image assets.

Remember that your images and captions work hand-in-hand, so what you write should provide any context that can’t be seen in your images, and vice versa.

Where possible, choose a readable typeface and avoid long paragraphs or pages of text. Instead, focus on explaining each project in small, bitesize chunks. Be equally as selective with the level of detail and background you share: what’s most important for a viewer to know?

If you’re including any group work, also be clear about the role you played in the project and give credit to your fellow collaborators.

After you’ve decided on the content and look of your website, it’s time to start making it a reality!

The good news is that there are now countless ways to build a website – regardless of your skill level. Whether you decide to use a template or code your site from scratch, it can be as simple or complex as you dream up.

When taking this next step, it’s important to know that you don’t need to create something with clever wizardry, or spend lots of money to create a great portfolio website. A simple, efficient and well-structured website will always trump slow-loading sites that are difficult to navigate.

There are heaps of sites out there designed to help you get a portfolio site up and running. Have a look around to compile some you like the look of; keep in mind that while some are free, others require a fee. Some popular options are:

• Wordpress (includes free and paid templates)
• Squarespace (includes free and paid templates)
• Wix (includes free and paid templates)
• Cargo (includes free and paid templates)

The most common builders today have built-in templates that are ready to use. By playing around with these templates, you can view your site in real time and get an idea of how it’s shaping up, and what a visitor will see first.

Jyni Ong, writer
Built using: Custom build

Writer Jyni Ong has included a description of herself on the left of the page that includes her contact details, which remains there as you scroll through her website. This is a quick, useful snapshot of the key publications her work has appeared in, and how to contact her.

Jyni’s website is itself a long list of works she’s had published that redirects you to the site of the original piece, and hovering over each one gives you a visual preview of the work. The list’s contents alternate between creative, writing, and curating, which effectively demonstrates her breadth while displaying her work in the order she’s most proud of.

If you’re comfortable with code, you can of course consider building your portfolio website from scratch. This has some advantages; primarily that you have free rein to make anything you want. Just make sure you preview your site on different browsers before setting it live; this will ensure you don’t get caught out by any bugs, and that it all looks consistent.

Collaborating with a friend who can code is another good option; if you can, try to agree on a reasonable price in advance, and make sure they tell you how to update and maintain the site in future.

If coding is a skill you’d like to add to your bow, you could treat your portfolio website as a project in itself, and learn as you go. There are plenty of useful resources to learn how to code your own website and which require no prior knowledge including:

• SuperHi’s Plan, Design + Code Your First Website
• Khan Academy’s Intro to HTML/CSS: Making webpages
  
• Mozilla Developer Networks’s Guide to Learning Web Development

Once your website is out there, you’ll have to make it searchable. It’s a good idea to think about SEO, or Search Engine Optimisation.

This helps search engines like Google find your site and rank it higher on the results pages. To improve your ranking, spend some time looking through the SEO tabs on your site when adding content. Each page of your website should contain brief descriptions of its contents.

Add some flair to your URL
Your domain name (or, simply, your website’s URL) is what people will be typing to reach you. The most popular and effective approaches are simply your full name or name of your project or industry – for example yourname.com, yourname.co.uk or yournameceramics.com

The domain name extension is also another place your personality can shine, with some opting for more humorous ones like .cool, or .lol. This can also help visitors get a sense of what to expect; for instance, yourcompanyname.biz could link to an online store.

How to buy a custom domain name
Buying a domain name is simple: go to a registrar such as Namecheap or Google Domains, search for your intended website name and make the purchase. Alternatively, some website builders such as Cargo provide you with a customisable address with a monthly or annual subscription.

Prices for domain names vary; generally they range from £7 to £25 annually for a new registration, and are likely to be cheaper if they don’t yet exist or have a more common extension – for instance, .co.uk will usually be cheaper than a newer and fancier extension, such as .party or .cool. So shop around on different domain providers and consider different domain extensions.

⏰ A word of warning! After you’ve bought your domain, remember to set a date in your calendar to renew your subscription, or you may find that your site mysteriously goes offline in a year or two!

Once your website is up and running, you’re ready to share it with the world! There are lots of places it can be useful to include, such as your PDF portfolio, in emails, on your cover letter, CV and your social media profiles.

Remember that much like your career journey, your portfolio website is a constant work-in-progress. Updating it regularly will ensure that it continues to best represent you, your work, skills and interests. So whether you’re swapping out old projects for new ones, making small design tweaks, or considering a visual overhaul, know that as your career evolves, your portfolio website can – and should – do the same.