Creating your own portfolio website from scratch

Do you want to create your own portfolio website? In this article we share some tips to get you started on your own successful online portfolio.

Are you a webdesigner, visual designer, photographer or artist? And do you want to create your own portfolio website? In this article we will discuss the different steps you go through when creating a portfolio website.

Jump directly to:

• Doing the Pre-work
• Get Inspired
• Collect Content
• Create wireframes
• Designing Your Portfolio Website
• Create Color Palette
• Typography
• Images and illustrations
• Building Your Portfolio Website
• Launching Your Portfolio Website

Doing the Pre-work

Before you start designing your portfolio website, it is best to do some preliminary work. During the prework you prepare for the design phase. Consider looking at examples or doing a small competition analysis.

Get Inspired

Check out other portfolio websites to get inspired. Find inspiration by browsing a lot of portfolio websites of others. This allows you to find out what works or what you would'nt want to put on your own portfolio.

It is also useful to find inspiration to recognize patterns. You will see that the logo of a website is often at the top left and that if you click on the logo, you will return to the homepage. By recognising these types of patterns on your own website, it is easier for your visitors to use your website.

Save screenshots of the portfolio websites in a special folder on your computer, so you can easily reference them when designing.

Collect Content

As you know what you like about a website, you can collect the content. You can start with this before designing, but there are also web designers who start with the design first and fill it with real content later.

For example, you could already write the copy and save it in a Word document, or put images of your work in a folder, so that you have them at hand when designing.

Create wireframes

Wireframes are layout drawings for your website. Here you determine the global layout of the website. They are not about the colors or images you use, but more about the navigation, layout and content. Since wireframes are fairly easy to make, it is easy to quickly design different screens.

What you show on the portfolio website is the most important thing about the wireframes. What do you see on the homepage? How is the about-us page organized? You answer these questions with the wireframes.

Designing Your Portfolio Website

Now the real work begins. You are going to work on the actual design of your website.

Create Color Palette

Choose colors and combine them into a color palette. Choose a color palette with colors that match together and only use colors from this palette on your website. This way you ensure a uniform appearance.

You have to think carefully about putting together your color palette. Which colors go well together? And how do you want people to feel while looking at your website?

Typography

Typography is about designing text, making it legible and beautiful. Of course the text size is super important, but there is much more to it. Think of hierarchy, line spacing, which fonts you use and much more.

Images and illustrations

Do you pick photos or illustrations? How do you show your work? Do you choose a minimalist approach and only show your designs or do you use mock-ups that show the work in a realistic environment?

Building Your Portfolio Website

After designing your portfolio website, it is time to convert the design into a working, responsive website. There are various tools for this, but you can also do this yourself using HTML and CSS.

Launching Your Portfolio Website

Congratulations, your website can be put online! But the work doesn't stop there. Of course your website needs visitors. Promote your website on your social media and add the link to all your social media accounts. Don't forget websites like Dribbble and Behance, here you can add your website to your own account for free.

In addition, you can also try to get visitors from Google or other search engines. The work you do for this is called SEO (search engine optimization). This requires a lot of skills, but you can already apply the basics yourself.