Laptop with Illustrations

[Full Disclosure: This page contains affiliate links, if you click links and purchase, we will earn a commission at no additional cost to you.]

Benefits of having your ONLINE portfolio website

I am going to show you how to design your online illustration portfolio website step by step, from the research phase to publishing it in the browser ready to be seen by the world.

Your portfolio website is your golden ticket to land a job or to find freelance opportunities.

There are thousands of amazing illustrators and designers on Dribble, Behance, etc. But what will make you and your services stand out? What makes you unique and competitive in the market ?

Your personal brand, your own website, is what can make the difference. Having your personal brand and your own hosted domain will give a very professional impression, you will be able to set up your own blog, collect emails, build your own audience and even build your own digital shop.

Gal Shir website is an example of how your personal website will help you grow professionally.

Gal Shir first started showing his projects and after a while he has built a successful digital shop on his website where he sells texture brushes, color palettes, pattern brushes and even his own book.

How to present your portfolio:

  1. Keep it simple: Keep your online portfolio simple and easy to navigate. You should focus more on your projects rather than the portfolio itself.

  2. People prefer to interact with other people rather than with cold brands.

Start building your personal brand by working on your about page.  Show your face, explain your creative process and how you can help your potential clients solve their problems.

An amazing body of work in addition to your personal branding are a very strong combination to succeed professionally and to make a living from your passion.


Chris Thomson Portolio

Chris Thomson is a freelance designer based in Belfast. His body of work speaks for itself. It is just out of this word, in one single word “amazing”. He has worked for well known TV shows like Terrahawks, Firestorm, or Doctor Who. I really can’t stop admiring his work.

Chris Thomson Portfolio
Lisa Congdon Website

Lisa Congdon Art & Illustration

Lisa Congdon is an expert in illustration and hand lettering. In her personal website she shows her portfolio and she also offers her own shopping products  and her own courses: “Become a Working Artist”, “Drawing for Kids” or “Working Successfully With Clients” among others. Lisa is a clear example of how illustrators can also become successful entrepreneurs.

Carlos Manzo

Carlos Manzo is a multimedia designer based in Dublin. His work is just outstanding and his style is unique. Without a doubt Carlos is one of the most talented and passionate artists I ever have known.

Carlos Manzo Porjects
Nathalie Ouederni Illustration Portfolio

Nathalie Ouederni

Natalie Ouederni is a talented French designer based in Barcelona. She is extremely good at food illustration, wildlife illustration and hand lettering among other skills. Her website is simple and beautiful, this is a perfect combination to effectively transmit her talent.

Ann Shen online portfolio website

Ann Shen is an illustrator and letterer with a wide rage of experience working with very reputable clients such as Disney, Facebook and the New York Times. She has also published two books: “Bad Girls Throughout History” and “Legendary Ladies”.

Ann Shen Illustration Portfolio
Jolly Edition Illustration

Jolly Edition

Laura Schema is an illustrator, blogger and teacher. She is an expert at wedding stationery and she does great work sharing her creative process with the world on her website.

Penelope Dullaghan

Penelope is a freelance illustrator and blogger based in Indianapolis. She has won several awards and was also a judge at the illustration awards for Communications Arts and CMYK.

Penelope Dullaghan drawings
Liv Wan Drawings

Liv Wan

Liv Wan is a designer and an illustrator with a recognised hand-drawn style. Liv leverages her previous experience as a chef to bring her knowledge into her illustrations. She has worked with very well known clients such as Snapchat or Edinburgh Zoo.

Craig Paton

His body of work is outstanding and speaks for itself by showing his professionalism and expertise. Craig is a famous illustrator with  experience working for companies like BBC Scotland, Holland and Sherry or American Mensa.

Craig Paton portfolio website
Alison Hansen drawings

Alison Hansen

Alison Hansen is a professional fashion illustrator and blogger based in London with experience in the UK and the USA. Some of the clients she has worked for are Harrods, House of Fraser or Ultimo. Her services include fashion illustration, live illustration, portrait illustration, textile design and technical illustration.

Diana Toledano

Diana Toledano is a fabulous Spanish illustrator based in San Francisco specialising in children's books. She also writes her own blog and she teaches workshops while also doing school visits and library events.

Diana Toledano illustration portfolio website
Viktorija portfolio website

Viktorija Illustration

I love Viktorija illustrations, they have a lot of personality and style. Viktorija leverages her own website to run her own blog and sell her products. She has experience working for very popular companies such as Pinterest and Swatch.

Alex Tass

When I saw Alex Tass' logos for the first time I realised his high level of professionalism and expertise. He has designed more than 750 logos and he is the co-founder and co-owner of Nocturn and Utopia.

Alex Tass website
Ilya Boyko portfolio

Ilya Boyko online portfolio

Ilya Boyko is a graphic designer and founder of Boyko.Pictures. He does an amazing job at presenting his projects by telling stories and engaging with his audience. He is an excellent communicator.


Radost is a professional illustrator, especially good at communicating her message and showing her design process. She has worked with amazing companies such as Snapchat, Microsoft and Clearbit.

Radost designer and illustrator
Steve Doogan Illustrations

Steve  Doogan Illustration

I was amazed when I saw Steve Doogan's portfolio. He has experience with linocuts, mono prints and drawing among other skills. His portraits are exceptional.

Jakub Jezovic

Jakub Jezovic is a designer and illustrator from Slovakia. His website is elegant , simple and clean. He presents a high level of detail in his illustrations. He also shows his expertise in motion graphics, UI and brand identity. I can summarise his work in one simple word: Spectacular.

Jakub Jezovic Illustration Portfolio
Kristina Gehrmann graphic novelist

Kristina Gehrmann online portfolio

Kristina Gehrmann is a famous illustrator and graphic novelist specialised in storytelling and history illustration. When viewing her portfolio I was amazed with the quality of her work. Without a doubt her work is inspiring for new illustrators and graphic artists.

Jon Illustration

Jurgis Jonaitis is an illustrator from Lithuania. He is extremely good at illustration, but also exceptional at conveying the story of his work. His comics and illustrations are proof of his talent.

Jon comics and illustrations
Anton Emdin illustrator and character design

Anton Emdin

Anton Emdin is a very talented and experienced illustrator based in Australia. He has worked with clients such as the Rolling Stone, Business Reported, MAD and many more. He stands out for his amazing gift caricatures and character design.

Ohn Mar Win

Ohn Mar Win is an excellent illustrator based in UK. She also has her own blog and teaches at Skillshare. You can find among her clients well known companies such as Mark & Spencer, UNICEF or BBC Worldwide. I especially love her patterns and food illustrations.

Ohn Mar Win website and blog
Elena Winata art director portfolio

Elen Winata

Elen Winata is an art director and Illustrator. She worked for clients such as The Times, Google o National Geographic. Her projects stand out for their vibrant colours and their level of details.

Julien online portfolio

Julien is a digital illustrator. His icons and illustrations show the smart selection of colours, proportions and the care taken in every detail.

Julien portfolio digital illustrator portfolio

How to MAKE and publish your illustration portfolio (step by step)

The Web Design Process

The web design process

Any time I am about to design anything, a portfolio, website or application, I follow a systematic process that lets me achieve the business objectives of the project.

First of all I have to understand the problem I am going to solve and the business objectives that I am trying to achieve. This way all my efforts and design decisions will be focused on achieving these objectives. 

Ultimately the goal of a website is to persuade users to make a certain decision or behaviour, for example, subscribing to a newsletter, buying a product or making a reservation.

In the case of this illustration portfolio website the goal is clear, we want to convince a potential client or employer to contact us to know more about us or hire our services.

The requirements and features to achieve this goal would be:

  1. Have several ways to contact the designer and make this clearly visible on the website.

  2. Because the projects will be the first thing the users will need to find, you should showcase your best work straight away on the home page.

  3. The website would need to give detailed information about yourself, show your face and this way really start working on our personal branding. Personal branding is very powerful in business and it will give us a clear competitive advantage.

Mood board

Once we have a clear objective(our problem and solution are defined), this is when I start researching, finding inspiration and gathering ideas.

I start looking for visual design inspiration, UX patterns, color combination ideas, typography and iconography.

In a nutshell, our mood board will be a picture of all the inspirational elements in one single place.

UI Sketching

UI Sketching

At this stage I start creating low-fidelity sketches by just using pen and paper.

In this phase, I take a strategy decision to achieve the objectives of the website. What elements we are going to design, why are we designing them and where and how they will be placed.

These sketches will be very basic drawings of the skeleton of the website.

This is really going to help me in the next design step. Because the structure of the site is already set in this stage, in the next stages I just have to focus on UI design, typography, colours, spacing, etc...

Design high-fidelity mockups

Now it is time to start applying visual UI design styles. In this phase I choose colour combinations, font face, and I set the spacing, layout and other UI design techniques to the website.

The tool I use for my design is Sketch, but you can use any other design software like Adobe XD, Figma, Photoshop even Adobe Illustrator.

The main point here is to design for the user and utilise your design skills to achieve the objectives of the project.

In this case the objectives, as we saw in the previous section are to convince the potential client that you are the right fit for the project and to contact you so you will have the opportunity to land that project or that job opportunity.

High-Fidelity mockup

To encourage the visitor to get in contact I used unique, vibrant colours for call to actions like the contact buttons.

I placed social media icons in a standard prominent position clearly visible for the visitor for instance at the very top of the main page and also at the very bottom.

The first thing that a potential client will wish to check on your website will be the projects, for this reason I placed the projects directly on the home page.

In the about page I placed a photo of the designer. This is so important in personal branding, clients, like everyone else, like to interact with people and see the persons face. This also builds trust and therefore, your personal brand.

A professional photo showing eye contact can do loads and it is essential for your personal branding strategy.

Customise template with visual code

In order to code my design I use Webflow [ Full Disclosure: I'm a compensated advisor and an affiliate for Webflow.] Webflow is a modern no-code tool that has completely changed the Web design industry.

In fact, this website is built with Webflow, the same as most of the Websites I design for my clients. I love how I can design absolutely anything and visually implement it with html and css without the need to hire a developer.

Next I am about to show you how you can customise this illustration portfolio website. To follow along with me you can download this design portfolio template for free and customise it with your own content and your own projects.

First of all visit the page where the template is hosted. Once you are on the page, press the clone button and the project will appear in your personal dashboard from Webflow.

Clone project

To make things simpler, think about Webflow as one of your preferred design tools such as Adobe Indesign or Adobe illustrator.

On the left side you will have control over all the layers and content (this shows html elements such as divs, forms, navbar, text and headers)

Webflow elements panel

On the right side you will control the styles of the elements selected ( colours, spacing, typography, etc ( this is the CSS of the website).

Webflow styles panel

In order to add new elements to your website you just have to drag them from the element section and place them on your canvas.

Drag element in canvas

Let’s start customising the header. First add your name on the nav bar by double clicking on the text element and just writing your own name. This is simple, isn't it?

How to write designer name

Next, add your email address on the contact button of the navigation bar.

To achieve this, once the contact button is selected, click the "Element Settings" button at the top right of the canvas,  select the email icon and write your email address.

Add your email

To change the heading and the introductory text you just have to select the text element, double click as you did with your name and proceed to add your content.

Customise text

To add your own instagram, twitter account and email, select the social media icon, and in the right panel, select the “Element Settings“ tab, then select the “url” tab and paste your social media link.

Add social media links

If you wish to add an additional social media icon it is very straight forward. First select any of the social media icons, right click and select “duplicate”. 

Duplicate social media icon

Now select the image in the new icon and click the settings tab just above the image and replace the image with one from your computer.

Replace social media image

There you go. You have your social media icons all set. Now you can do the same with the icons located in the footer.

It’s time to replace the sample projects and add your own projects.

First select the image thumbnail and as you did with the icons, select the setting tab icon above the image and click “replace” to select your own image.

Add your own project image

Second, while keeping the image thumbnail selected open the "Setting tab" and in the “Light Box Settings” select  the image file and replace the file with your own image file.

Replace project in lightbox settings

Finally, replace the sample caption of the image for the name of your project.

Add your own lightbox caption

Now you can start making changes on the About page. To switch between pages on your project click on the Pages icon located at the left of the screen and choose the “About page”.

Switch to about page

In order to replace the image with your own image first select the picture layer, then click the "Style" tab at the right of the screen, in the "Background" section select the image file and click the “Choose image” button.

Change profile picture

Now add your email in the contact button. Fist click the button, secondly click in the "Element Settings" panel, select the email icon and write your own email.

Add contact button email

To continue adding your own content you just have to apply the same customisation methods previously used for the home page.

Publishing and selecting a domain name

Publishing your full functional website is extremely easy. Once you have finished performing all the desirable changes, just press the publish button. This couldn't be easier.

Publish your portfolio

If you don’t have your own domain name you can buy one in any domain register. I personally use GoDaddy to buy and park my domain names but there are many other providers.

Once you have your own domain name, connecting it to Webflow hosting is very straightforward and you only have to delete and add some values related to the domain name.

This step is explained in detail in this tutorial provided by Webflow.


If you want to know more about Webflow and how to build your own websites from scratch, your can find a comprehensive range of tutorials at Webflow University.

Please email me or DM on twitter any time if you have any question.


Would you like to advance your design career and learn a high paid in demand skill? Find the latest free professional web design courses.