How to Create an Online Portfolio: The Ultimate Guide
This post was last updated on January 21, 2021.
Having a sharp online portfolio is a must for every designer. Here are ten steps to creating a website that truly expresses your unique style.
These days, a professional online presence is an absolute must for designers and creatives. An online portfolio with spot-on website design is the modern day version of a business card, a resume and a project showcase all in one. After all, it’s the go-to place for all potential clients and employers looking to hire you.
Creating a portfolio website is an opportunity to make something that shows off your skills and conveys your unique voice, while looking just as crisp and professional as any of your other work. With the right tools, you can go beyond technological constraints and artistic compromises, and build a powerful online presence.
To get you started, here’s a guide on how to create an online portfolio you’ll be proud of:
How to create an online portfolio
01. Gather inspiration
Creating a portfolio begins with some visual research. Whichever field you’re in, looking around at other online portfolio websites will provide you with plenty of inspiration and generate some initial ideas. It’s especially recommended to take a look at websites by other people in your specific creative niche or industry.
When looking through these resources, start thinking of the vibe you want your portfolio to convey and what experience you aim to create. You can take notes or even make a mood board to accompany you throughout your creative process. Consider essential details like the color palette, typography and site structure that you like, and clue yourself in on current web design trends.
02. Choose a template
How do you want visitors to move from one page to the next? By opening a menu or scrolling down for further information? Do you want your site to be a one-page website, or a gallery of fullscreen images that open up into individual pages? These are questions you’ll ask yourself at the next step, choosing your portfolio template.
When you’re ready to go, have a look at these portfolio templates for creatives. You might find something similar to the result you envision, in which case you’ll be able to customize it and make it your own. If you’d rather start from a blank canvas, you can always build your website from scratch and enjoy complete freedom to express yourself online.
03. Showcase your best projects
Your actual work is the core of your online portfolio, so make sure to showcase it in the best way possible. It should stand out and be easily reachable through the homepage and/or website menu. You can highlight this work by creating a dedicated “projects” page on your website.
Expose clients to your creativity and skill by sharing only your best work. This way, you’ll bring their attention to your strengths, and maintain a consistent level of quality throughout your portfolio.
As well as presenting your best work, make sure to update your website every once in a while, so that you’re always sharing your most recent creations. This will show visitors that you’re active, working and have experience. When first creating an online portfolio, consider how you can build a portfolio that’s easy to update, letting you comfortably add new projects as you go.
It’s helpful to add a narrative for each project, so that visitors can get a sense for the context of your work. Make sure to give a concise description of the project and mention your role, as well as any collaborators you worked with - an often overlooked portfolio design tip.
04. Use high quality images
Not only photography portfolios require high quality images. To ensure that your work looks as impressive online as it does in real life, invest time and effort into photographing your work, your process and your products. In cases when a professional photoshoot is not feasible, work with mockups to bring your visuals to life. When showcasing your images, the Wix Pro Gallery will offer you a professional look with customizable layouts, edits and effects.
05. Include the right content and features
Once you have a good base from which you can set off and a collection of projects ready to display, it’s time to identify which additional content you want to include in your online portfolio, and how to present it strategically. This includes text, images and other media. Whether you're creating an industrial design portfolio, graphic design portfolio, or any other type of portfolio - here are the most crucial pages and sections to include, plus some professional design features to consider implementing on your site:
The virtual home of your portfolio should grab your visitors’ attention with an eye-catching design. On top of the visual aspect, your homepage is a chance to stir the curiosity of potential clients and employers with a powerful introductory sentence. Make it short and sweet, clearly expressing who you are and what you do. There’s no need to go into your biographical details here (that’s what your ‘About’ page is for), but your name and main area of expertise are an absolute must.
Since your homepage acts as a starting point and base for visitors’ navigation, be sure to also include a menu of items that’s easy to find and clearly directs users to the right place on your site.
The About page is where you present your background and short bio, provide essential information about your activities and summarize your unique identity and values. Include any distinctive elements, such as your achievements and skills. It can also be a good idea to clarify your current employment status and include your CV. You can either add it directly onto the page or as a downloadable PDF.
You can show off your personality with puns, smart microcopy, illustrations or anything else that feels true to you. Check out how designer Jikun Tao added a personal touch to her online portfolio by including a googly-eyed gif and a play on typography.
After you’ve stunned visitors with your site, make sure they can easily contact you. Commissions won’t pop up in your inbox by some miracle, so add any of the following elements to ensure you’re reachable: a contact form, your email, phone numbers and links to your social networks.
These can be featured as part of your menu, in a dedicated contact page or as a pinned element on the side of the screen. It’s also highly recommended to repeat your contact details in your website footer, offering visitors a final invitation to get in touch.
Clients and testimonials
Highlight your professionalism with a list of respected clientele who have chosen to work with you. If any of your projects have been featured elsewhere or have received press coverage, mention that too.
You might also want to drop in a testimonial or two by satisfied clients. As long as the feedback feels genuine and not over-the-top, testimonials can add a lot of credibility to your online portfolio. Don’t miss out on this chance for some free and authentic PR.
Incorporate professional features
To craft a professional look and an engaging experience, see how you can incorporate design features that catch your visitors’ eye by taking your online portfolio design up a notch. From hover effects and parallax scrolling to animation and lightboxes, these finishing touches can help bring your website to life. They can also serve as functional tools, drawing your visitors’ attention to a specific place, or generating interaction.
Another great way to make your site more dynamic and tailor it to your specific needs is using Velo by Wix. This web development platform lets you insert code elements into your website with various custom interactions, helping you bring your most intricate visions to life on your portfolio.
06. Improve your portfolio's UX
Now that you have your content, it’s time to make all the pieces come together. There are a number of factors to take into account for creating strong UX, or user experience, on your website.
Start by listing all the web pages you’ve decided to create. Then, identify which elements will need to be included on each page. For example, a project page might include a featured image, header, description, plus a few extra images or media features. Listing the items on each page will let you prioritize, decide on their hierarchy and come up with a fitting website layout.
You can either sketch out your ideas on paper as wireframes, or start creating your portfolio website straight away, gradually putting elements into place.
Once you know which pages will make up your online portfolio, you’ll be able to decide on the navigation. How do you want your visitors to transition from one page to another? Will you include a hamburger menu that opens up into a fullscreen list, or a fixed menu at the top of each page? How will you indicate what page people are on? This guide shares website navigation tips and covers everything you need to take into account for a smooth browsing experience.
For more ideas, check out this collection of websites with good UX design.
07. Work on your site's SEO
What good is an online portfolio if no one gets to see it? In order for your clients to find you and book your services easily, work towards optimizing your website to bring it higher up on Google search results.
Search engine optimization (SEO) is an ongoing task, concerning various elements of your site. Here are some pointers will help you get started:
Create unique, fresh and valuable written content. A good way of doing this is by writing blog posts, as they’ll give you the chance to share ideas that other designers and creatives will enjoy reading. This will also show Google (and site visitors) that you’re actively working.
Do keyword research to find the right keywords for your site. Keywords are the most commonly searched phrases on Google when people are looking for creatives such as yourself. A keyword example could be “independent web designer” or “Toronto architect.” Once you’ve done some keyword research, use these phrases in strategic places throughout your website.
Write alt text for your images. Short for alternative text, alt text is a brief description of your site’s images and photos (for example, “postcards and business cards for a branding project”). Writing SEO-friendly alt text can also help improve your website’s accessibility. You’re likely to have many visual elements on your online portfolio, so use this opportunity to integrate your keywords into your alt text.
Write titles and descriptions (known as metadata) for each of your design portfolio’s pages.
Get found by people in your area using local SEO. If you’re a freelance designer with a permanent location, use local SEO to ensure that your portfolio is found by anyone searching in your particular area. Make sure to claim your business on Google My Business, register your website on relevant directors and add your location on your website’s pages.
Pro tip: If you have a Wix website, try Wix SEO. It’s a free, step-by-step plan designed to help improve your site’s SEO with a tailored checklist and helpful tips.
08. Make it mobile friendly
People often forget about the huge amount of users who are likely to be viewing their site from a smartphone. In fact, mobile devices account for 52% of web page views worldwide. That’s why the best website designs should look just as good on mobile as they do on desktop.
One of the major challenges designers face when it comes to creating a portfolio online is ensuring that it will be mobile compatible. Your mobile website is more than just web design made smaller, so there are a few rules to keep in mind when designing for mobile.
For the small screen, you’ll want to declutter the mobile version of your site, keeping only the most crucial elements visible. Furthermore, pay attention to the fonts and colors you use and make sure they’re legible. Reduce the amount of typing required and consider adding a search bar to ease navigation.
If you’re creating your portfolio with Wix, your site will automatically generate a mobile-friendly version, with an adaptive gallery for your images.
09. Ask for honest feedback
We all know the feeling of getting lost in a project until we lose sight of what it really looks like. That’s why it’s always best to run your website by a second set of eyes for some insight and fresh ideas. Ask your trusted friends what they have to say about your portfolio’s content and visuals. Did they think your portfolio was missing information? What did they like or dislike about your site’s appearance? Was it easy to navigate? Even if it means making adjustments, critical feedback from your peers can help you fine-tune the details of your site.
10. Publish and promote
Once you’ve published your online portfolio, don’t forget to share it on all of your social channels, from Pinterest to Dribbble and more. This straightforward social media marketing strategy will help you reach more potential customers, improve your SEO ranking and hear honest feedback.
Another Instagram tip for designers is to add social buttons to your site, helping visitors reach your social media profiles easily.
After you’ve gotten the word out, remember that your portfolio should grow with you. There’s always another tweak around the corner to make it a little better. Keep updating your site with new content and projects, implementing different features, improving the user experience and staying up-to-date with current design trends.
Text Eden Spivak and Dana Meir