How to create an online portfolio in 9 easy steps

Portfolio website

Showcase your work and stand out from the crowd with this step-by-step guide to creating an online portfolio with Moonfruit.

Whether you’re a design graduate, an experienced photographer, or a hobbyist jewellery designer, (hell, you may even be looking to show off those screen prints you did in your evening class last summer), making an online portfolio is a great way to showcase your work to the masses.

If you’ve got something to show in a visual format, a portfolio can be a great addition to your CV when it comes to job hunting. Employers will no doubt be impressed that you’ve taken the time to do it, creating that all-important great first impression.

That being said, if you’re a designer or photographer it’s pretty much essential that you have an online portfolio, along with business cards that feature its URL.

Fortunately, they’re really easy to set up, they improve your online visibility, and are quick to update when you have something new to show off – what’s not to love?

So make your way through this guide to get yours up and running!

Before you start

Plan what you’re going to include. As a general rule you should stick to showing your best work – this is all about quality, not quantity. Remember, less is more.

Have a rough idea of the layout you’re after. Things may change as you’re designing your portfolio, but having a drawn-out plan will provide direction and speed up the process.

If you’re including images, make sure that your files are all the same size and dimensions (our design team recommends that the images should be cropped real size, pixel perfect and at a resolution of 72 dpi) to give a polished and professional look.

Here’s how you do it

Step 1

Create your Moonfruit account (if you don’t already have one) at

Step 2

Choose a template to start with, preferably in our new v6 site builder. They’re all fully customisable, but the ones below are great starting points for portfolios (you can of course choose a blank template if you want to start from scratch):

Moonfruit templates

Choose a customisable template to get started.

Step 3

Now that you’ve got your template, it’s time to make it your own. Getting your name or logo on the homepage is a good place to start. If you have a pre-made image ready for this, you can upload it by going to the Insert icon in the main toolbar. Under the Basic Objects column select Image and choose your images from there. If you don’t have an image ready, then have a play around with what you can create using the different font styles in the Editor.

Remember, this is all about you, so whether you choose to make your name/logo big and bold or refined and subtle, make sure it fits in with your preferred style and the image you want to convey. It’s probably a good idea to put it in the top-left corner – this is where users tend to look when they land on your site.

Names and portfolio logos

Portfolio names usually go on top left of page

Step 4

When visitors come to your portfolio, they’ll want to know who you are and what you do. Create a short, snappy summary about you, your work and where you’re based, to follow on nicely from your name (also known as a tagline). Keep it to the point, like the example below.’

Short summary

Create a short snappy summary of who you are and what you do

Step 5

Time to add some images! What you specialise in will obviously determine the type of images you add. If your work is image-based, add some good quality examples to the homepage – this way, you’re instantly showing off what you can do. Add images as shown above. You could also add short descriptions to your images to give some context.

For designer portfolios in particular, providing background on the brief you were working to will help visitors fully understand and appreciate your work. Using Moonfruit’s Lightbox Gallery is a good way to catalogue and showcase all your work in one go.

Moonfruit gallery

Use the gallery function to upload a group of images

Step 6

Now for your contact details. Where you place them depends on the type of portfolio you’re creating, but whatever approach you take, make sure they’re easy to find. You can either have your details running across the top of each page, or you can have a dedicated contact page – both shown below.

Contact details

Option A – If encouraging people to contact you is high on your list of priorities, this is a good approach. To do it, go to the Insert icon in the main toolbar, and then select Page Master (this is a background layer that appears on every page on your site) then select Body text from the Basic objects column. Add your contact details in the box and position at the top of your page – this will ensure the details appear in the same location throughout your site. (Some templates come with this already in place, so all you’ll need to do is add your own details).

Option B – This is the style generally preferred by designers, keeping the tops of pages minimal. To add a separate contact page see step 7 below. You could also add a Google Maps feature to highlight your location – see our how-to guide if so.

Step 7

Your homepage should be coming together now, so let’s look at creating some more pages. If the template you’re using has pages with names you’d like to change, go to Pages in the main toolbar, then select Organise your pages from the Page management column.

In this section you can edit the page names, add and delete pages. You can come up with your own ideas to suit what you want to show, but it’s a good idea to have pages covering:

Work – where you display a range of your best items or projects to showcase your skills.

Bio and contact – displaying all the relevant information about you, your work and your business. You could also personalise this with a photo (if you’re comfortable with that).

Testimonials/References – featuring honest reviews that show people what they can expect from your work.

Shop – if you have work to sell, consider adding a shop page to your portfolio – it shows that your work is serious and can be a healthy earner!

Your homepage Step 8

Don’t forget to add links to your social media pages and profiles where relevant and appropriate. Note the ‘appropriate’ mention – while it’s great to show a more personal side, you don’t want to be linking to images of your, ahem, fun night out for your pal Bob’s birthday…

Social media links

Step 9

Now you need to make sure everything is easy to navigate. Have a look at what you’ve created so far and move around the site as a visitor would. Make sure that all pages are intuitively laid out and that the content is easy to access. Ask your friends and family to have a look at what you’ve created too – it’s always good to get a second opinion.

Your completed portfolio image

Remember, this is a foundation for your online portfolio, you’ll need to keep adding to and updating it to keep it fresh and engaging for visitors.

Here’s how it’s done

Dargan Media

Do something different

More and more people are creating online portfolios in a bid to stand out online, so to make yours truly unique, make sure you inject your own personality into your design – originality is what counts, and replicating what you’ve seen somebody else do elsewhere isn’t going to score you any points so get creative!

Here are some examples of pretty impressive portfolios to inspire you

Have you had a go at making your own online portfolio? Were these tips helpful? Share your portfolios below.

Want to build a free website with Moonfruit? Go to our homepage to find out how.

Vicki Shiel
Editor at Moonfruit. Likes food and smoothies.

More posts by this author

Add a comment

  • (will not be published)

More posts by this author