Guides — The ultimate guide to creating a portfolio website

Posted 11 March 2020 Written by Lecture in Progress

From perfecting your personal branding to nailing those networking skills and navigating finances, preparing for the world of work is no easy feat. That’s why, in partnership with Wix, we’ve developed four guides designed to help you step into your creative career with confidence.

It might sound a little dramatic, but in terms of showcasing your work to the world, not having a website is a bit like being lost at sea without a life jacket and whistle. How is anyone supposed to find you? The thing is, with so much choice out there, there are now countless ways to showcase your work online. We’re talking about everything from dedicated Instagram accounts and Behance profiles to spreadsheets. So why bother creating your own portfolio website?

Well, there are a few reasons. As well as the flexibility and freedom to curate your online persona, a portfolio website is one of the most practical and memorable ways to share your work with press, potential collaborators or employers. And here’s the best part: you don’t have to be a coding genius to make a brilliant portfolio website...

In this guide we’ll be taking you through the essential steps to creating a portfolio website that best represents you and your work, while calling on some industry professionals for their expert tips on how to make a splash online.

Contents

1. Representing Yourself Online
2. Finding Your Purpose and Making a Plan
3. Design: What’s It Going to Look Like?
4. The Technical Bit: Getting Your Site Online
5. How to Maximise Your Site’s Potential
6. Updating Your Site
7. Practical Resources
8. Further Reading

1. Representing Yourself Online

Consider your online presence
Deciding to create your own website is pretty exciting. It means you’ve already done the hard bit: You have a handful of work you’re proud of, and that you’re ready to share. But before you start drawing up your dream website, we’ve got some thinking to do.

Consider all the platforms you’re already using online. You might have an Instagram account, or several. You might also have a LinkedIn profile or a Behance page. Collectively, all of these touchpoints make up your ‘online presence’, and individually, they represent different sides of your practice and personality.

Where are you already sharing work?

Twitter
Instagram
Facebook
Tumblr
Behance
The Dots
LinkedIn
Dribbble
Other
Submit

This means that when people are searching for you online, they could find themselves landing on any one of those touchpoints. And if you’ve ever Googled yourself to find a handful of embarrassing Facebook photos emerge in your search, you’ll know that the World Wide Web can be a cruel place, with an unforgiving memory. Being searchable is a good thing, but you want to make sure it’s for the right reasons.

Your portfolio website is a chance to control and curate the way you want to be seen and perceived. It means that an employer’s first impression of you is the one you want them to have, rather than the one Facebook decides to show them. And as a bonus, you won’t have to worry about other platforms owning your data or changing their user interfaces overnight.

Let your personality shine
Above all, a portfolio site is a chance to put your best foot forward, and give recruiters, employers or collaborators an understanding who you are as a creative, regardless of your discipline.

Michael Bierut is a partner at New York-based design consultancy Pentagram in New York. Like many other employers, when he’s looking at portfolio sites, he naturally likes to see great work that’s been “beautifully documented and carefully presented. But I also like to get a sense of the personality of the designer behind the work,” he adds. “Make your site distinctive, but also make sure it’s understandable (at minimum) and compelling (ideally) to someone who’s never met you. The visitor should want to meet you in person!”

It’s a big order to fill, so how do you go about doing that? Well, we recommend taking a look at some examples to help you get inspired...

Caroline’s website, designed and developed by Samuel Bassett

Caroline Dussuel, creative stylist
When you’re just starting out, the chances are you’ll be looking to showcase the best projects from your portfolio. Paris-based creative stylist Caroline Dussuel’s image-led website is a great example of this. She’s opted for an understated yet experimental layout, collating each project as a group of collapsible individual photos, presenting them as though scattered on a table.

The site feels relaxed and informal, and mimics the way you might look through printed photos. With no written captions, Caroline ensures all focus stays on the images. Her logotype, in the top left-hand corner, even disappears when photos scroll across it, so as not to distract from the work.

Alan Trotter, writer
Some creatives decide to focus on demonstrating a specific skill in a more conceptual way. Take Edinburgh-based fiction writer and copywriter, Alan Trotter, whose site essentially writes itself in front of you. Opening up on a few words, the more you click, the more the narrative unfolds – revealing a witty tone and charming personality as a writer. After it launched, Alan even got 13,000 visits to the site in one day!

Manshen Lo, illustrator
London-based visual artist and illustrator Manshen Lo decided to disperse images of her work against a pale grey background, on a long horizontal scroll. Clicking into the work isolates the image while clicking the ‘i’ icon allows you to read a short caption or credit.

The calm, considered design lets her work and unique aesthetic speak for itself. This is something that CNN’s art director of special projects, Sarah-Grace Mankarious, is always looking out for – especially when it comes to illustrators. “As an art director I’m looking for a distinctive style that should be clear to see within the first three projects or pieces,” she shares.

David Massara, graphic designer
Swiss graphic designer David Massara graduated from ECAL last year. His website is split into two scrolling sections: one for text on the left and images on the right. Clicking on project titles aligns the images with the project description and the simple blue dot cursor complements the very rigid, structured and well-considered design.

Ultimately, a successful portfolio site is one that looks and feels right for you. So whether you go big with a conceptual coding extravaganza or incorporate small but charming additions with your choice of typeface, everything from the URL to your cursor can be used to express who you are as a creative.

2. Finding Your Purpose and Making a Plan

One of the biggest misconceptions about creating websites is that designing or building them is the hard part. But in fact, it’s often deciding what goes on there in the first place. To help get to the core of this, we’ve developed three questions whose answers can form the basis of your site:

What is my website’s purpose?
Think back to your online presence and all the different ways you’re currently representing yourself online. What role does your website play within that? For example:

One clear destination for your work to live
A playful demonstration of your skills
A drive people to a shop, blog or social media profiles

There’s no right or wrong answer here, and you might want to combine a few of these. But ultimately, knowing the goal behind your site will inform and inspire your entire decision-making process.

What pages do I need to build?
These will make up the different layers of your site. These are some good starting points:

Homepage
A landing page, the first thing your visitor sees.

‘About Me’ or ‘Biography’ page
This can include a short statement about your practice, where you studied or worked, or what you’re interested in.

Contact page
This should contain essential info, such as your email address (with a working link!) and social media links. As web designer Craig Jackson puts it, “Don’t take people on a treasure hunt to find your contact details!”

Project pages
These tend to consist of images, GIFs or videos alongside a caption describing the project and listing fellow contributors or credits. How might you tell the story of your project?

Depending on the goal you’ve set yourself, the pages you’ll need will vary. For example, if you’re happy to keep using Instagram as a way to share your finished work, why not consider making a single-page website that acts like a business card with your contact information? This might link to your social media accounts, blog, or even a shop.

Rifke Sadleir, developer
When she was starting out, developer Rifke Sadleir’s portfolio website was a way to contain her work in one place. While it was an easy way to showcase her skills to potential employers, as her career progressed Rifke started sharing more of her projects on Instagram. And now? “My website serves as more of a business card than a portfolio. I decided to remove all of the project pages from the site, as it seemed silly to post every bit of work to two places at once.”

The clue’s in the name with ‘business card’ sites: they place emphasis on the basics. But they can be great ways to point people to other parts of your online presence, particularly if, like Rifke, you use other platforms to host your work. These sites can also be brilliant creative opportunities to represent an element of your practice or personality. You’ll often see creatives integrating ‘toys’ or interactive tools to do just that. In Rifke’s case, the user is encouraged to re-paint the background colour using a drawing tool. “It seemed like an obvious way to make my site a bit more fun,” Rifke remembers.

Jennifer Xiao, illustrator
Freelance illustrator Jennifer Xiao is another example of someone combining several elements on a landing page for easy access. Each button or icon is hand-drawn in her illustrative style, leading you directly to different sections for social media, comics, and her shop.

Ester Mejibovski, designer
University of the Arts student Ester Mejibovski’s portfolio site is made up of only two pages: one is a visual chronological timeline of her work with her most recent projects at the top; and the other for her CV. But scroll down and there’s no denying what her end goal is: to get hired! The flashing purple and red banner with her email address and ‘HIRE ME’ in capital letters leaves no room for miscommunication, and also serves as a playful addition to the more serious-looking design.

What work do I want to show?
This is quite possibly the trickiest part of all. You’ll likely have been through a similar process if you’ve put together a print portfolio, or PDF, but while it can be hard to make the cut, here are some universal top tips to help you do so...

Less is more
It sounds obvious, but when it comes to curation, choose your very best work. Don’t be tempted to include dozens of projects, and remember that you’re only as good as your worst project. For Micheal Bierut, the most important rule is to “only show things you are truly proud of. Show the kind of things you want to be doing professionally.” New York-based designer Lirona Ashkenazi-Eldar’s portfolio practically announces this idea, with a headline at the top that reads: “I am Lirona and this is what I do best.” It’s a literal take, but the sentiment is universal.

Michael also advises prioritising finished work on your website: “I find that preliminary sketches and other process documentation works best in a live conversation,” he adds. So if you’re someone with a keen interest in showing your process, consider a link to an external blog or separating your site to include a ‘sketchbook’ page.

Making long stories short and big images small
The less-is-more mentality also applies to the images you choose to upload and the words you write to accompany them. Massive images can be a nightmare to load, so Rifke Sadleir advises you to save non-transparent images as jpegs, and reduce the quality rather than the resolution. “This reduces the file size massively, without making the image look pixelated,” she says.

And when it comes to writing captions, digital designer Myles Palmer offers a word of warning: “Communicate what the work is and your role in it clearly, in small, bitesize chunks. Don’t have page after page of text – just enough to inform [your visitor].”

Show the work you want to do more of
You might have completed a variety of briefs at university, but it makes sense to select those most relevant for your career. “I only want to see the work you enjoyed making,” says Wallpaper* magazine’s photography director, Holly Hay, “[And] if you show work you’re very proud of, it leads to being commissioned for more of the same.”

3. Design: What’s It Going to Look Like?

Now it’s time to consider how your portfolio website will look, feel and behave, and thinking about the nature of your own work is a great starting point. What kind of style or design aesthetic might complement your projects? Do you want your work to take centre stage, or do you want the way your website behaves to do the talking? Here are some suggestions:

Personality

• Funny
• Serious
• Absurd
• Characterful
• Emotional
• Reserved
• Sensitive
• Thoughtful
• Critical


Look

• Polished
• Playful
• Chaotic
• Ordered
• Minimal
• Futuristic
• Experimental
• Abstract
• Sophisticated

This can be tricky if, like the growing numbers of creative multi-hyphenates out there, you find that your work spans a few disciplines. Our advice? Embrace it. When we asked chief production officer Olivia Chalk for her thoughts on curation, she agreed that while there’s nothing wrong with showing breadth, you just need to consider categorising your projects “so they don’t all appear on the same page at once” and cause confusion.

Dennis Krawec and Son Ayong’s​ websites

Take recent Rhode Island School of Design graduate, Dennis Krawec. Dennis groups and signposts his projects via disciplines (everything from art direction and set design to editorial design) in the margins of his site, brought together by a fun and unifying design aesthetic. Or have a look at Son Ayong’s site. She splits her work (‘Illustration’, ‘Graphics’ and ‘Websites’) by vertical dividers that expand as you click on them, making it easy to navigate.

Try out some templates and go (browser) window shopping
If you have a clear vision for your website and are ready to start building, Wix gives you the option to start from scratch with a blank template. But if you’re still unsure or stuck, browsing design suggestions online can be a great place to get inspired. A platform like Wix makes this super-easy with a range of templates and themes to choose from for designers, photographers, filmmakers, illustrators and more. This can help you quickly work out what you like, and what might suit your work.

You can also sketch out how your site might look with some of the templates in mind – what will the visitor see first? You can try drawing wireframes to plan the layout of your pages, and what links you might need and where. This will help put you in the mind of your visitor, and their journey as they go through your website.

4. The Technical Bit: Getting Your Site Online

Now you have the content and site-design sketches, it’s time to bring it to life, and there are lots of ways to do this. You can of course build your site from scratch, or even team up with a friend who can code or collaborate with a developer. However, if you do collaborate, make sure it’s someone you trust and that you’re clear on the price and how to update the essentials.

When we asked founder and director of EVERYONE Agency, Helen Parker, for her advice on this, she was keen to stress that you don’t need to “spend lots of money on creating something with clever wizardry – sometimes the simplest sites are the best.” Besides, as Michael Bierut puts it, you should always aim to avoid anything that is “slow and needlessly elaborate.”

But if you’re still worried about not being able to code, don’t be! One of the great things about using Wix in particular, is that you can also use their templates to start building on straight away. There’s a misconception that using a template means you risk your website looking like everyone else’s. But you can change everything from the typeface, layout, image size to background, colours, menus and more.

6. How to maximise your site’s potential

Once you have a site up and running, you’ll naturally want to shout about it! One way to do this is of course sharing it on social media. But you’ll also want to think about SEO, or Search Engine Optimisation. Having good SEO helps search engines like Google find your site and make it appear higher on the results when someone searches you online. This might sound complex, but it’s actually very straightforward if you use something like Wix SEO Wiz to help you.

6. Updating your site

Keeping things fresh
It might seem premature to start thinking about reworking your website, but knowing when to update it is an important consideration. “A lot of designers get lazy and never update their projects, so things can get stale quite fast,” says designer Craig Jackson, whose own portfolio site has seen four different incarnations, each one varying in tone and style. You want to make sure that your site continues to represent your practice as your career progresses, so keep it up-to-date where you can.

And as a final note, in the words of American designer, artist and writer Laurel Schwulst: “A website...is inherently unfinished. It’s imperfect...but that’s the beauty of it. Websites are living, temporal spaces.” It’s a reassuring thought, because – as most creatives will agree – you’ll go through numerous phases in your career. And as you grow and reinvent yourself, know that your website can do the same.

Now you’ve brushed up on your portfolio website-building skills, we recommend reading our guide to making industry connections.

8. Practical Resources

Hoverstates
An industry-leading blog showcasing the best in alternative digital design.
hoverstat.es

Crazy Cool Websites
A Facebook group showcasing interesting website design. facebook.com/groups/393558204075688

I Want My Name
A tool for exploring available domain names.
iwantmyname.com

Wix Domain Names
For searching for, and buying your own domain name.
wix.com/domain/names

8. Further Reading

• Rifke Sadleir’s guide to creating bespoke portfolio websites
Via Lecture in Progress

• Your body text is too small
Via Noteworthy

• Web design as architecture
Via Arc

• 100 websites that shaped the internet as we know it
Via Gizmodo

• From glossies to gal-dem: the websites revolutionising women’s media
Via The Guardian

• My website is a shifting house next to a river of knowledge. What could yours be?
Via The Creative Independent

• A holistic approach to creating a design portfolio
Via Wix Playground

Create the portfolio for the job you want
Via Wix Playground

• How to make your design portfolio rank on Google
Via Wix Playground

• How to create an image-based grid layout for your website
Via Wix playground

How to create a column-based site with scroll effects
Via Wix Playground

• How to create a gallery-based site with strips
Via Wix Playground

• A collection of portfolio website templates for creatives
Via Wix Playground

• Creating a Wix site from a blank template
Via Wix Playground

25 of the best homepage design examples and tips to make your own
Via Wix Playground

How much does a website actually cost?
Via Wix Playground

50 website colour schemes for your inspiration
Via Wix Playground

10 outstanding website navigation menus
Via Wix Playground

Work Ready is a partnership between Lecture in Progress and Wix, created to help prepare emerging creatives for the world of work. Every year, Lecture in Progress partners with like-minded brands and agencies to support our initiative and keep Lecture in Progress a free resource for students and those starting out. To find out more about how you can work with us, email [email protected]

Posted 11 March 2020 Written by Lecture in Progress
Illustration: Gianluca Alla
Collection: Guides
Disciplines: Graphic Design, Photography, Illustration
Mentions: Wix

Related Guides

`
Sign Up Sign In

Lecture in Progress relies on the support of partners and plus members to provide the ongoing insight and advice to the next generation. To help support sign up now or find out more.

scroll to top arrow-up
share

Become a Member

Lecture in Progress is now free to access. Become a member and receive a number of additional benefits.

Member

Free

Alongside a wealth of behind-the-scenes advice and insight into the creative industries, join now to get exclusive access to offers and promotions. You’ll benefit from:

  • Member offers and promotions
  • Two weekly newsletters
  • Bookmark content
  • Shape the future of Lecture in Progress

Member Plus

£35/per year

By becoming a member plus, you’ll be helping us in our aim to support the next generation of creatives. You’ll also get the chance to shape the future of Lecture in Progress, and benefit from:

  • Member Plus offers and promotions
  • The biannual Lecture in Progress newspaper, delivered to your door
  • Insight reports into creative education and industry
  • Two weekly newsletters
  • Bookmark content
  • Shape the future of Lecture in Progress

Lecture in Progress is made possible with the support of the following brand partners