top of page

Copied

How to make a portfolio in 10 steps


How to make a portfolio

Having a sharp online portfolio is a must for every designer. That's why we've put together this complete guide to creating a portfolio.

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 with learning how to make a website, here’s a guide on creating an online portfolio you’ll be proud of.


Starting a design business? Use this design name generator to name it.



Ready to create an online portfolio? Start designing yours now.



What is a portfolio?


An online portfolio is a digital collection of your work, experiences, qualifications, skills or accolades you have earned and want to share (see digital portfolio examples). It is a great way to showcase your skills and talents to potential employers or clients. People in all sorts of fields use portfolios, but the most common ones include the creative arts (graphic designers, photographers, writers, musicians, etc.), technical fields (software and web developers, engineers) and business. The layout of your portfolio depends on the field you're in and what it is you want to highlight.



How to create an online portfolio




01. Gather inspiration


Creating a portfolio begins with some visual research (and checking out the best portfolio website builders). 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 create your website from scratch and enjoy complete freedom to express yourself online.



portfolio website templates


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.


"An outstanding portfolio is all about storytelling. It’s not just a showcase of work, but a narrative that weaves together a professional’s skills, creativity, and personality. Features like dynamic presets, AI setup and beautiful templates let creators bring their stories to life, ensuring that every portfolio not only stands out for its aesthetic appeal, but also tells a compelling story about the creator behind it."
Hani Safe, Product Manager at Wix


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. Prioritize the quality of your images when making a fashion portfolio, for example, to showcase your work off to the best of its ability.



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 need some model portfolio examples or you're creating an industrial design portfolio, graphic design portfolio, a stunning photography portfolio or any other type of website, here are the most crucial pages and sections to include, plus some professional design features to consider implementing on your site:



Homepage

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.



About page

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. We recommend adding a downloadable PDF so those interested in hiring you can add it to their system.


You can show off your personality with puns, smart microcopy, illustrations or anything else that feels true to you. Take a cue from DA Creative which emphasizes its confident and assertive bio with futuristic graphics and bold bits of microcopy.



how to make a portfolio example


Contact information

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 (especially in high-ticket industries, like architecture portfolios).


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.


Tata Rekso demonstrates the sizable impact these elements can have on the user experience. When you hover over one of her featured works, the text changes color and a sneak peek of the work pops up beside it.


With Wix, hover effects like these are easy to add. If the effect you're looking for isn't available, you can use Velo by Wix to make your site more dynamic and tailor it to your specific needs. 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.



Tata Rekso demonstrates how to make a portfolio that's interactive


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?


UX designer Diana Renko's portfolio illustrates that great UX design can be both functional and inventive. Her redesigned hamburger menu stands out for its unique spin while remaining easily recognizable. This creative approach showcases Renko's ability to blend familiar usability with personal style, proving that good UX design need not be dull.


For more ideas, check out this collection of the best UX portfolios.



Diana Renko demonstrates how to make a portfolio that has 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 (see writing portfolio examples for inspiration). 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. Using your portfolio as a personal marketing portfolio is never a bad idea.



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.


Take a look at journalist Lauryn Higgins' portfolio to see an example of mobile design done right. Her minimalist design easily translates to mobile—a good argument to choose a minimalist design style if it suits your brand.


If you’re creating your portfolio with Wix, your site will automatically generate a mobile-friendly version, with an adaptive gallery for your images. That cuts down a significant portion of the work, but it's important to check the mobile editor every time you update your site design to ensure that the generated site correctly captures your vision.



The desktop and mobile versions of Lauryn Higgins' website


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.



Tips for making a portfolio


Now that you know how to make your portfolio, here are some extra tips to make sure you really nail it:


  • Use consistent branding throughout your portfolio. This means using the same fonts, colors, and overall style throughout your portfolio. This will help to create a cohesive and professional look. On top of that, only include your best work in your portfolio. This will help you to showcase your skills and abilities to potential employers or clients.

  • Make sure your portfolio is mobile-friendly. More and more people are using their phones and tablets to view websites, so it's important to make sure your portfolio is mobile-friendly. Use a clear and consistent navigation system so that potential employers or clients can easily find the work that they are looking for.

  • Keep your portfolio up-to-date. As you create new work, be sure to add it to your portfolio. This will help to keep your portfolio fresh and relevant. Make sure that your images are clear, sharp, and well-lit and add clear and concise descriptions to each one.


How to make a portfolio FAQ

How should a portfolio start?

A portfolio should start with a strong introduction that tells your story and what you are all about. You can include a brief bio, your contact information and your goals. You may also want to include a statement of purpose that explains why you are creating a portfolio and what you hope to achieve with it.

What makes a good portfolio?

How do I create a student portfolio?

How do I create a student portfolio?

How do I improve my portfolio?

How to make a portfolio for job hunting?

How to make a portfolio for my art?

How to build a portfolio for modeling?

How do I build up my portfolio?


Was this article helpful?

bottom of page