Building a portfolio with Wix Studio: A Step-by-step Guide

Introduction

Wix Studio has some really useful CMS features that make creating portfolio sites really simple and accessible. It can be confusing what is and isn’t possible with these connections and CMS settings, so I have written his guide to give you an idea of the possibilities, and the process to building a basic portfolio site with Wix.

I am a firm believer that you need to start with the most basic form of a website before you begin adding bells and whistles that complicate and confuse the user. Once you establish what it is that your user is missing with your website, you can add incrementally without affecting the overall usability.

Each of these sections could be a blog post on their own, and I am sure one day I will get there, but for now here is the overview to help you get started and to follow along in your own process. Please get in touch if you need any further clarification.

Step 1: Planning

Set-up

Information you need

Below is a list of information you need to collate before starting to plan anything.

Setting Goals

Portfolio sites all tend to have similar goals that differ in priority depending on what point of your career you are at or your current career goals. Below is a list that can help you prioritise what you are trying to achieve by setting up a portfolio site. It’s important that you have a clear vision of what you are trying to achieve as the elements you feature on your site will differ depending on what you chose to prioritise.

1. To gain new clients

   1. What type of client would you like to work with?

   2. Which projects of yours demonstrate your ability to work with your ideal client?

   3. What is the first step in your process to onboarding a client?

   4. What do you offer new clients, that other’s don’t?

2. To demonstrate your expertise

   1. What disciplines do you work across?

   2. Which projects are you most proud of?

   3. Which projects demonstrate the widest skill set?

3. To record your projects

   1. What properties are common across your projects (client, brief, dates, reviews)?

   2. What information about your projects is it important to record?

   3. How often do you need to be able to upload projects and how much time can you give to it?

4. To sell products

   1. Operationally, how do you plan to do this? Print on demand? Stock you ship personally?

   2. Why are you choosing a personal site to sell products on?

   3. How will you drive traffic to your portfolio site in order to sell products?

5. To build a community of people who follow your work

   1. How do people who follow your work like to hear about it?

   2. How often do you wish to tell people about your work?

   3. What format do you want to communicate in?

   4. What features would people in your community benefit from?

   
   

Answering the above questions and ordering the goals by priority will give you a really clear understanding of what your site is going to be used for and how it should be designed.

There will be a clear difference between a portfolio used to register all projects performed by a senior, long standing professional and a site to display and sell the digital products created by an upcoming artist,

Structure and Site-Map

Now that you have your goals, it is time to develop your site structure.

Your site will be made up of the following pages:

1. Home Page

2. Projects List Page (dynamic)

3. Project Item Page (dynamic)

4. Project Category Page (dynamic)

5. Contact Page

   
   

Optional Extras may be

1. Search results page

2. Landing Pages

3. About me (CV, qualifications)

4. Services Page

5. Shop Page (checkout and payment pages included)

6. Blog Page (And blog post page)

7. Members Area (login and feed pages)

8. Privacy Policy & Accessibility Statement

   
   

This guide is going to take you through building the 5 pages that need to exist, and there will be future guidance on setting up the optional extras.

To start with, the best place to design a website is to design with a pen and paper.

You are going to first work out what your sitemap looks like. This is a diagram of each of your pages, what they are connected to and what they need to contain. It should look something like this:

Depending on your goals, you will provide different information on each page, so refer back to the goals you set in the beginning.

HOME PAGE

Header (Global)

Hero Section

Section 2

Section 3

Find Out More Section

Footer (Global)

PROJECT LIST PAGE (Dynamic Page)

Header

Hero Section

Project Category Menu

Project Gallery

Find Out More Section

Footer

PROJECT ITEM PAGE (Dynamic Page)

Header

Hero Section

Project Item Details

Gallery Section

Find Out More Section

Footer

PROJECT CATEGORY PAGE (Dynamic Page)

Header

Hero Section

Project Category Menu

Project Gallery

Find Out More Section

Footer

CONTACT ME PAGE

Header

Hero Section

Find Out More Section

Footer

This is as basic as it needs to be for the time being. You are now going to think about the goals for each to here sections. Use the goals from the first part of the guide to assign numbers to each section of your website. Then add a list of things you want to be displayed in those sections, based off the goals. Below is a breakdown of the home page to help you get started.

Home Page

Follow the following structure:

Header

Your header will include a menu, potentially a search bar, and your logo. Don’t worry about design just yet.

Hero Section

Your Hero section is the part of your website that appears first. It should be contained ‘above the fold’, which means that you shouldn’t have to scroll to see it. This is both for user experience reasons and because your Hero section should always be light and easy to load. A quick loading website is far better for SEO purposes.

Your Hero Section should also align with your primary goal. For example, if your goal is to get more clients, your hero section should contain your USP and exactly how you want you clients to first interact with you. That could be, ‘leave your phone number to get a call back’, or ‘describe your project and I’ll get back to you’, or even, ‘purchase a consultation call’.

If you primary goal is to sell products, you should have product imagery and a button taking people to ‘best sellers’ or ‘sale’.

If your primary goal is to build community, you should capture an email right away. Or give them the opportunity to subscribe, or sign up.

Section 2

The following section should be what I like to call a plan B for your primary goal. You need to think of the reason why somebody might not follow the behaviour you want of them after seeing the first section and give them push to do that in the second section. So for example, give potential clients more reasons to trust your expertise, or provide a gallery of your latest products.

Section 3

The third part that you see on a website should be geared to your secondary goal. For example, it could be reviews that demonstrate your abilities or product quality, or it could be navigational buttons to different types of projects you have worked on.

Find out More Section

This section is all about navigation. Here you want to send your user to the ‘next’ part of the interaction. You want to preempt what information they would like next and deliver them the perfect link. It will change per page, but the principle is the same. For example, if you page is geared towards demonstrating you expertise, this might be a link towards featured projects. Or if it is geared towards community building, it may send them to a section of your website that shows them what they benefit from being a part of your community.

Footer

Your footer should contain links to all notable pages on your website, including privacy policy and your contact details. It should also include your logo and any copyright information.

Below is an example of what your list may look like, remember to do this for each page:

Home Page

Header

Logo

My name

Menu

Search bar

Hero Section

Sign up to my weekly newsletter

Email input section

Illustration of me

Section 2

What I write about in my newsletter (three USPs)

Icons for each USP

Section 3

Read my latest featured project

Main image for featured item

Button to feature project item page

Find Out More Section

Download my free how-to guide

Guide short description

Video of guide in use

Download button

Contact Me

Get in contact text

Form - Name, email, message, submit button

Footer

Links - blog, privacy policy, all projects, subscribe to mailing list, contact me page

Logo

Social media icons and links

CMS (Content Management System)

Your CMS is going to be your best friend when it comes to building a portfolio with Wix. The CMS is essentially a spreadsheet in the back of your website, invisible to users on the site, where you can fill out rows of information and Wix will automatically create you a page with the same information to display to your users.

This way, when you complete another project, you can fill a row in your spreadsheet and automatically update your website, without having to manually create, and structure a new page every time.

What is really important is that you make sure you have really developed a great structure for displaying your project items before designing your portfolio item page. This is because the structure of your data in the backend of your website directly influences what you can display to your users. You want to make sure that the data you have on your projects is fully comprehensive so that you have the ability to provide all the information necessary on your page.

Utilise the list you have created for your Project Item Dynamic Page to help you fill this information out.

Here are some examples of how your CMS could be set up for your project data:

Wireframes

Now that you have a comprehensive list of things you need to include on your website, you can begin structuring how you want them to be displayed.

If you are not a designer, don’t worry! Stick to shapes such as circles and rectangles and you will be able to ‘grid’ your way through this section. Use a piece of paper, draw out a vertical rectangle and split it into the number of sections you have included in the page you are designing.

Use your list of information/assets you need to include in each section to inform how many shapes you need to draw into each section. Sketch, arrange and rearrange until the composition looks balanced.

Use shapes to denote titles, subtitles, paragraph chunks, images, videos and buttons. You should avoid using colours, other than black, white and grey. You can create contrasts and set rough sizing now. Keep in mind the flow of the website and where each button/scroll will navigate your user.

If you are struggling, go back to basics and use a grid system to keep everything feeling balanced. Use an arrangement from below as inspiration for each section.

If you want to include more complex imagery and shapes or animation, you can. But, I recommend building the most basic website you can to begin with and working on animations or complex compositions after.

Lists and Copywriting

Now it is time to make a list of all the required assets that you are going to need in order to flesh out your website. You are also going to write any copyright information you think you are going to need for the website. Write more copy than necessary as it is much easier to cut back, than write more once you are in the building step of this process.

Your lists should try to include as much detail as possible. What images will you be using, be specific on colours, atmospheres and backgrounds. Does it need a transparent background? Does the colour of the image need to be inverted? It’s okay if you are unsure because you haven’t worked on styling yet, but it’s important you keep this in mind as you are writing the lists.

Step 2: Building

Convert Wireframes and Site Structure to Wix Site

Now that you have the paper drawings. It is time to get digital. Go to Wix Studio and chose to create a new site. Choose a blank canvas, or you can use a template, or AI to create a blank template. Templates and AI generate templates can look like time savers, but they can make you waste a lot of time on building unnecessary features. I recommend using a blank canvas and sticking to what you have designed on paper. Once you have the site up and running, you can then experiment using templates and ideas, but to begin with, I feel it’s important to get down the essentials.

Use the site structure icon to build out the sections on your site as you have planned. Make sure you name these, set global sections to ensure consistency and most importantly, keep it simple.

Connecting your CMS

Now for the confusing part!

You have built how you would like your Project Item page to look. It contains all the example information that each of your projects need to display, including images and videos.

Fill your CMS

The most important part of a portfolio website is the portfolio. You should take the time to figure out what projects you want to be displayed and how best to display them. Now is the time to go into the backend of your website and fill out your CMS with as much information and quality assets as possible. This includes collating, editing and structuring imagery in galleries. Writing and producing content around each project. Highlighting which projects are considered featured, and most importantly categorising your projects into groups that help you to display them appropriately.

To categorise your projects use the following method. Create a column for each category you intend to house your projects under. Use a Boolean to dictate if the project is or is not in said category. This is the best way to be able to work with the information on the front end. This way, projects can fall under as many categories as you like, but will be displayed on category pages correctly.

Importing assets

Here you are going to go page by page and upload each of the assets required to the elements. Forget about any settings, alt text or SEO for the time being. Just make sure each asset is the correct file format (Wix largely does this for images, but double check videos) and that whatever element you are adding it to, still works in the way you want it to.

Importing Copy

Now it’s time to import all that copy you wrote. You can cull anything that feels too much, rewrite and distribute copy. You will find that you can’t ‘fit’ as much as you’d hoped. Don’t worry about size of text, or style for the moment. Just make sure you are saying what you need to say, where.

Set Global Styling

You will now be choosing your fonts, styles, colours and setting logos.

You will now be choosing your fonts, styles, colours, and setting logos. This is a crucial step in establishing your brand identity and ensuring that your content resonates with your target audience. Here’s a detailed breakdown of how to approach each element:

Choosing Fonts

Fonts play a significant role in conveying your brand's personality. Consider the following:

• Readability: Ensure that the fonts you choose are easy to read across different devices and sizes.

• Brand Personality: Select fonts that reflect your brand's tone—whether it's modern, classic, playful, or professional.

• Pairing Fonts: If using multiple fonts, choose complementary ones that work well together, such as a serif font for headings and a sans-serif for body text.

  
  

Selecting Styles

The style of your content can greatly impact user engagement. Consider these aspects:

• Consistency: Maintain a consistent style throughout your content to create a cohesive look and feel.

• Hierarchy: Use styles to establish a visual hierarchy, making it easier for readers to navigate through headings, subheadings, and body text.

• Whitespace: Incorporate whitespace effectively to avoid clutter and enhance readability.

Choosing Colours

Colour selection is vital for evoking emotions and setting the mood of your content. Keep these tips in mind:

• Brand Colours: Use your brand’s colour palette to maintain consistency across all platforms.

• Contrast: Ensure there is enough contrast between text and background colours to enhance readability.

• Emotional Impact: Different colours evoke different feelings; choose colours that align with the message you want to convey.

Setting Logos

Your logo is a visual representation of your brand, so it’s essential to integrate it properly. Here are some considerations:

• Placement: Decide where your logo will be placed on your website or content—commonly in the header or footer.

• Size and Resolution: Ensure your logo is high-resolution and appropriately sized for different devices to maintain clarity.

• Variations: Consider having different versions of your logo for various uses (e.g., full colour, monochrome, or simplified versions).

By carefully selecting your fonts, styles, colours, and logos, you are setting the foundation for a strong and recognizable brand identity. Take the time to experiment with different combinations and seek feedback to ensure that your choices resonate well with your audience.

Step 3: Getting Things Done

Optimizing for All Devices

When it comes to web development and digital marketing, making sure your site looks great and works well on every device is key. We're talking about breakpoints, which are the spots in your CSS where the layout changes to fit different screen sizes—like desktops, tablets, and phones. To nail this, you need to check out how your site looks and functions at each breakpoint. This means testing the layout, making sure images resize nicely, adjusting font sizes for easy reading, and keeping navigation simple and user-friendly on all devices. By using responsive design techniques and frameworks, developers can build websites that look and perform great, no matter what device someone is using. Plus, it's important to regularly test and update your site to keep up with new devices and screen sizes hitting the market.

Picking a Domain

Your domain name is basically your online identity, so it's a big deal in your digital strategy. Picking the right domain isn't just about being catchy; it should reflect your brand, be easy to remember, and ideally include keywords to boost your search engine visibility. Once you've got your domain, make sure all the DNS settings are spot-on to keep your site running smoothly. This means setting up subdomains, handling redirects, and getting SSL certificates for security. Keeping an eye on your domain's performance and health is crucial to avoid issues like downtime or security breaches, which can hurt user trust and search engine rankings. Don't forget to renew your domain regularly and keep your contact info updated to maintain ownership and avoid losing it.

Email Setup

Email settings are super important for any online strategy, especially if your business relies on email for marketing, customer service, and internal communications. Setting up email accounts with your domain name boosts professionalism and brand recognition. Make sure your email settings are configured for reliable and secure delivery. This involves setting up protocols like SMTP for sending emails, IMAP or POP3 for receiving them, and using SPF, DKIM, and DMARC records to guard against email spoofing and phishing. Customizing email signatures and creating templates for marketing campaigns can keep your brand consistent and streamline communication. Regularly checking out email analytics helps you understand open rates, click-through rates, and engagement, allowing you to keep improving your email strategies.

SEO Basics

Search Engine Optimization (SEO) is a must for a successful online presence. It's all about using strategies and techniques to boost your website's visibility in search engine results. To run an effective SEO game plan, you need to dive into keyword research to find the terms and phrases your potential customers are searching for. This means optimizing on-page elements like title tags, meta descriptions, header tags, and content to match these keywords while keeping the content engaging and valuable. Off-page SEO, like link-building and social media engagement, is also crucial for building authority and trust with search engines. Regularly tracking and analyzing SEO performance with tools like Google Search Console and SEMrush helps you spot areas for improvement and tweak strategies to keep up with changing algorithms and user habits.

Using Google Analytics

Google Analytics is a powerful tool for getting insights into your website's performance and user behavior. To execute a solid digital strategy, you need to set up Google Analytics properly to track key metrics like traffic sources, user demographics, session duration, bounce rates, and conversion rates. Setting up goals in Google Analytics lets you monitor specific user actions on your site, like completing a purchase or signing up for a newsletter. This data is essential for understanding how visitors interact with your site and spotting opportunities for optimization. Plus, segmenting your audience based on behavior and acquisition channels gives you deeper insights into customer preferences and habits. Regularly reviewing and interpreting this data allows you to make informed decisions, adjust marketing strategies, and ultimately enhance user experience and drive conversions.