How to start your design portfolio website in 10 steps

Having a strong online portfolio is a must for all designers. Follow these 10 steps to unlock the key to expressing your work in a way that is unique to you and your style via a portfolio website.

An online portfolio is essential in the world of work for designers and creatives today. The ability to showcase your work in a clean and digestible way is the modern-day version of your printed folder or PDF attachment. You can view your personal website as the go-to destination for your resume, contacts, and relevant projects — all to land you your dream job.

Here’s how:

 

1. Define your values

Begin your site building process by brainstorming your values. Understanding your own brand can be a daunting task but it is essential to creating a consistent site that reflects yourself and the way you work or create.  Ask yourself in a brainstormed mind map:

• ‘I’m happiest when working on…’
• ‘I’m proudest when working on…’
• ‘I am focused on…’
• ‘It is important to…’
• ‘My key messages are…’
• ‘My niche is…’
• ‘I contribute responsively (socially or environmentally) by…’
• ‘I create impact by…’

From here, you can focus on re-occurring themes that come out of your research. There can be many facets to consider but creating a set of guidelines for your site will build your personal brand on a deeper level from the outset. They will guide the perception of how genuine and consistent you are in a professional landscape. You can also use these values when job searching to align yourself to an organisation that is true to you. Creating a set of notions that are genuine to you will impact your decision making throughout the site from construction to portfolio works chosen, and your ability to have a transient site you can adapt through time.

 

2. Collect inspiration

After conducting your personal deep dive, it is time to conduct some visual research. No matter which field of design you are in, researching other portfolio examples will provide you inspiration and activate your own idea generation on what to include in your own site. It is especially helpful to look into your own creative industry. Here are some examples to start you off:

Visual Communicator/Graphic Designer

Web Design

Photography

Fashion Design

Product Design

Animation

Architecture

Interior Design

When researching some design inspiration you can start noting down elements of the sites that speak to you. From the way work is presented, how the biographies are integrated, your UI (logos, typography, colours, themes and format), what touchpoints stand out to you, how many pages you may require, style of buttons, menu format, and more. To take note, begin constructing a mood board filled with these images, your own sketches and iterations of how you may apply these.

 

3. Filter through your best projects

Now that you’ve established a proposed look and feel, supported by your values, it is time to reflect on which projects showcase you best. Choosing work can be an almighty task, especially when there is a lot of it. Your work is the core of the website, so it is essential to choose the most relevant projects and showcase them in a refined way. It is always quality over quantity, so don’t be deterred if you can only come up with 3-4 pieces.

The work should be the star of the show and easily accessible from your landing page. Depending on your ideation, you may choose to display the work in a bold way directly on the landing site, or highlight the works on a dedicated ‘projects’ page navigated easily through a menu.

Each project should also tell a story. Be sure to dedicate a page to the chosen works. Here you should display the title, discipline or project type and include a biography for context describing the decisions made on the project. Finally, don’t forget your collaborators! A step that is often overlooked, but nonetheless can showcase your ability to collaborate well with others.

 

4. Use high quality media

Throughout your degree or career be sure to document your successful work and file these away for safe keeping. This will help you organise your work when incorporating them into your web portfolio. It is important to invest time into photographing, animating, mocking up or videoing your work to get it ready for your online showcase. Using a variety of visuals will allow viewers to understand your project in depth.  Finally, a solid documentation with high quality media or mock ups will bring your works to life and improve the aesthetic of your site overall.

 

5. Create a wireframe

Now that you have mastered your ideation and collected your content, it is time to draft your build! Sketch out and plan your format in a wireframe. Map out each page from the landing, to the projects, to the individual works, contacts or mission pages. Ensure that you can navigate to each one logically and get home too. You may start with a simple navigation wireframe, but also be sure to sketch each page thoroughly, from title, body copy areas and images. Use hierarchy to organise your content.

Keep in mind how you will be contacted, ensuring you map out a designated pathway. Consider a contacts page with access to social media and your email, and have this on hand continuously in the sites menu bar or footer on each page.

Finally, iterate your sketches with functions, buttons, icons, animations and stylistic choices you intend to use.

 

6. Build an experience

As you visualise your content coming together, now you are ready to build. There’s no doubt anyone is able to create a website today regardless of your technical skill level. Depending on your own skills, there are two options for constructing your site:

1. Choosing a website builder (Squarespace, WordPress, Wix, and more) and beginning with a template you can customise. Using a web builder is helpful for beginners.
2. Hosting it yourself. This is great for scalability and complete customisation, but difficult if your knowledge of coding is limited. Be sure you do your research on what will be best for you.

When building, try to stick to your sketched wireframe, testing and refining as you go. To optimise your experience think back to the functions you want to include on the page. Will you use a hamburger menu or a full screen list? Will you use an animated transition from one page to the next? Will you stylise your pointer? Really customising the users’ experience on your site will help your portfolio stand out amongst the crowd.

 

7. Make it responsive

It is estimated that approximately 40% of users worldwide are now using their mobile as the go to device for browsing. How perfect would it be for an employer to pleasantly browse your site whilst out on their lunch break? Therefore, you must ensure your amazing website portfolio is just as amazing when viewed on any device, mobile or tablet.

When designing for a mobile or tablet view, ensure you declutter the screen using a clear hierarchy, as elements drop down to a portrait view. Again, the UX may be altered to suit the device, from transforming a list menu to a hamburger menu or adding a search bar for easy navigation.

 

8. Gather feedback

Test, test, test your site! Thoroughly refine your build by asking for feedback. Like with any project we can get all too familiar with our website and lose sight of a new visitor’s experience. Ask a trusted friend or colleague to try it out and record their experiences.

• What was their perception?
• Was it fully functioning?
• What did they like and dislike about the aesthetic?
• Was there any information missing?

Making small adjustments will allow you to perfect your site and ensure a pleasant experience for all.

 

9. Publish!

After massaging out the kinks, you are ready to publish and put your projects out for potential employers to divulge!

 

10. Keep it current

We all know a portfolio is ever changing and growing with you as designer. There will always be a new project to highlight or a new function to implement. Be sure to continue to visit your site with a critical eye. Keep it current by improving the UX overtime and staying up-to-date with evolving design trends.

 

For more advice on design portfolios in general, be sure to check out our step-by-step Design Portfolio Guide. You’ll have access to targeted advice for conventions for specific design disciplines, as well as tips for applying to design jobs.

And if you’re interested in building a portfolio of your own, try Portfolium. It’s an an online portfolio platform with social networking features where staff and students can curate their own profile. Start now by logging your achievements, projects and competencies in order to showcase your skills to peers and potential employers.

All UTS students and staff have access to Portfolium directly at portfolium.uts.edu.au. Build a unique profile of your work throughout your degree, starting now!

Good luck creating!

 

Featured image courtesy of Unsplash