A Guide to Creating Your Online Portfolio

There are so many reasons why we have a website. I'm sure we can all agree that a portfolio site is a MUST HAVE for any visual artist. If you missed anything from my workshop at the recent Institute of Medical Illustrators (IMI) conference, don't worry, I've put all of the worksheets here in today's blog post. 

This post is really more for those with little to no web experience and only provides snippets of information from the wide, wide world of the internet. I'm in no way a web guru and only hope that some of the advice I'm giving can be catered to a person's specific need. Please know that what I say is not set in stone, web development is always expanding and growing and it's useful for you to keep up with the developments as they come. 



worksheet 1

Before you begin, ask yourself these questions...

This will help define who you are and what you bring to the table. I found writing all of this down at the beginning of the process helped me keep on track. If I ever swayed from my end goal or felt disheartened, I would refer back to this sheet.


What should go into your website?

If you're new to web design or not very comfortable creating site maps, use this checklist worksheet to pick the navigational features and main body content that could be included in your site. 


Make your website functional

The next steps is for people to find you on the massive expanding space that is the internet. One useful thing to do is to consider SEO and how certain keywords are used to find you. This worksheet will help you consider those keywords. 


Tools to help you build your site

New to web design? Don't know any code? Need help with colour choices and font? Don't worry there are SO MANY tools out there that will help you through your web building process. I've listed a few select sites here for you in this worksheet. 


Ready to get creating or revamping your own site? Let's get started! 


INTRODUCTION - Website must haves

There are a few things that your portfolio website must have in order to make it beautiful but also functional. Below is a very brief list of what your portfolio website must have: 


1. Your website MUST be Responsive

Google ranks responsive sites higher than non responsive sites when searched on mobile devices. This video from Tech Design Studios sums it up nicely. 

Link to Google support page about this >

2. It MUST have appropriate Search Engine Optimization (SEO)

This means that you need to have keyworded title text and keywords, relating to what you do, in your body text. Your images need to be saved with appropriate keywords in the filenames. This video from AdWords is a great intro to how it all work. 

Link to Google Webmaster >


3. It must show your best work and explain what you do

It goes without saying that only your best work should go up on your portfolio site (all killah no fillah). It's also useful to approach your site like someone who doesn't know what medical artists do. You can't expect a viewer to just 'get it' by looking at your final pieces. The medical topics we work with are sometimes very complex and difficult for those outside of the project to understand. Explain to them your how your services and process helped a particular project, by doing this you'll allow people to understand the niche work of your field. 

4. Have clear calls to action

Don't let users of your site be left with no next step. Most of the time it will result in them leaving. Have clear calls to action with identifiable links and buttons. Once you've explained what you do or given them a taste of some nice visuals, lead them to explore your site by inserting identifiable links or buttons throughout your site. For example action point can be 'buy this product', 'subscribe to this email list', or 'contact me for a quote'. 




First let's focus on you, who you are, what you do and your skills. 

Ask yourself these questions:


1. Do you want to be seen as an individual artist or as a studio? 
This question should make you think years down the line. Where do you see your company? Are you still a sole trader or are you managing a team of people within your company?

2. Are you a freelance artist, studio or artist looking to work in a team?
By identifying this you will  be able to cater your portfolio for the type of clients or organizations you want to work for. 


3. Try to think about what you do/offer. List them.


4. Who are your dream clients?

5. Do you know medical artists that have worked with your dream clients? Are they your competition? List them.


6. What is it about your work that can get you noticed over other artists?
I've listed some examples in the worksheet to help you get started. Write this down for yourself, not as if you're writing for someone else to see. Use this time to reflect on your accomplishments and your incredible skill set. 



Worksheet  2 - What should go into your site? 

If you're new to web design or not very comfortable creating site maps, use this checklist worksheet to pick the navigational features and main body content that could be included in your site. 

By working through the navigation options and also the things you should include in your main content on each page you can get an idea of how your work can apply to each of these. 

I also find that having a check system like this helps me review things when I'm nearing the end of site development. 




Anatomy of a good homepage

Your homepage is your SELLING point and is super important as it can determine whether a user will stay and explore your site or leave. Your homepage should aim to:

  1. KEEP users on your site
  2. ENTICE them to look at more of your stuff
  3. Have CLEAR calls to action

I've listed in the image some things I highly recommend you having on your homepage. Here are some great examples of good homepages: 

Cognitionstudio   |   Nucleus Medical Media




Avoid dumping all of your work onto 1 page without a sense of visual hierarchy or categorization. Instead group images from 1 project together and place them into categories. Use eye-catching thumbnails or teaser images to get people to read more about the project. 

Be sure to add a descriptive title and make links or buttons to read more noticeable. 

I've listed in the image some things I highly recommend you having on your portfolio. Here are some great examples of portfolio pages: 

Hybrid Medical Animation   |   Invivo Communications





Anatomy of a good project page

Be sure to give your work some explanation as to what the project is about. REMEMBER your viewer might not be a medical professional so cover the following: 

  • Write an informative title for your project (also helps with SEO)
  • Write a description on what the project is about, how your services helped and what the results were. This is your chance to show people how you can solve problems for them. 
  • Include additional information like who the client was, the audience, and what tools you used.
  • Be sure to link back to your main portfolio page to keep them browsing through your site.
  • It's also useful to link to similar projects so that they can see the breadth of your skills.

I like to treat every project like a case studies and this helps my audience understand my services, especially when they are so focused and unique.  

Here are some great examples of a project page:

Invivo Communications   |   Hybrid Medical Animation



I also have some additional tips for how to display your images and videos:

  • Avoid using image carousels too much, rather place the images one after another or next to each to allow viewers to quickly skim through your work. Carousels tend to animate a bit too slowly and there is a risk of images not being seen.
  • Try to keep your images the same size or dimensions throughout the page to keep alignment and design clean.  
  • If you have an animation it sometimes is useful for the reviewer to see image stills from the animation. Choose beautiful compositions, this will entice people to watch the full animation. 
  • Make sure all of your animations are at a 16:9 HD ratio!! 
  • Show your work in progress sketches or behind the scene photos to give the viewer a sense of your process and how you work.

Here is an example of a fantastic portfolio page site by Joyce Hui >



worksheet 3 - Make your site functional

Making your site functional in terms of people finding you requires some research into keywords and SEO. Below are some useful exercise and links to help you get there.  

Write down your keywords

Use worksheet 3 to write down keywords that best describe the following: 

About you

Here are some to help get you started fr describing yourself: freelance, artist, illustrator, animator

Selling you

Remember the stuff you wrote down in worksheet 1? Try to think of keywords for that. These will be what sells you as an artist. 

Your service(s)

Here are some keywords to help get you started: medical, illustration, animation, interactive, medicine




Once you've done that you're going to research your keywords and use Google Keyword Planner to figure out the best keywords to use to yield better search results.

I highly recommend you read this article > How to do Keyword Research 



Optimizing your site with appropriate SEO

If you want to learn more about this here are some useful videos and links to take you to the next step of your site development. The SEO starter guide is brilliant. 

Google Webmaster   |   SEO STARTER GUIDE        



Worksheet 4 - How to Create Your Site? 

Now that you've figured out the navigational features of your site and general layout design, this worksheet with provide you with the tools needed to build a site. These tools are especially helpful for beginners in web design. 

There's more stuff in the blog post below so please continue reading.



If you don't know code, don't try and build a website from scratch. You're going to have a bad time. Below are the top 3 site builders that come with beautifully designed responsive templates. I highly recommend these over the other site builders because of their functionality and ease of use. 

Note: This website was created using the Marquee theme in Squarespace



All three of the above web builders come with great templates however you still need to put in the work to make it your own. Explore each builder's tools and functionality, there are loads of tutorials and forums out there. Sometimes it's also helpful to take inspiration from varying templates to create your own layout. 



Is coming up with a good colour combination a struggle for you? Or do you have trouble finding colours that compliment your visual style? The sites below can suggest modern and complimentary colour themes for you. 

Web AIM: Color Contrast Checker
(use this site to check the readability of your text colours on your backgrounds)



You want to make sure that your viewers have the best experience and with that comes readability of the text on your website. Take into account the colour of your typeface and also the size and spacing of things. Below are some useful articles and tools to help you work through this stage of your development. 

Font Pair

Font pairing is so important for style and READABILITY. Don't worry if you're not a font aficionado. Sites like this are perfect to find the write font pairing for your title and body text.   

TIP: Don't over use typography. Too many varying typefaces can be confusing and make your site look cluttered, which reduces legibility and readability. 

Smashing Magazine Articles

I love smashing magazine articles, they really summarize some good tips to web design. 

I'll link you to one that talks about font size and spacing in web design. 

Tone of Voice

How your voice comes across in the written text on your site does affect readability. Read the above article by Harriet Cummings to understand tone of voice and begin cultivating your own brand.  



So you've done your website, what next?

People won't know about your site unless  you TELL THEM about it. Even if you've kitted our your site with great SEO, it'll be a small number of people that miraculously stumble upon your site in the beginning stages. Social media is the easiest and cheapest way to get people to know your work. Whenever you're ready, check out my blog post on Getting Your Online Portfolio Noticed. 


Want to see more?

Visit my other blog categories