How I Designed My Freelance Marketing Website

Whenever I speak to new clients or other freelancers, one of the first things they often ask is ‘how did you design your website?’

Websites and digital branding are a huge part of marketing yourself as a freelancer and can help to represent your work ethic, your range and your abilities in just a few simple web pages. Not only does your website create a virtual shop window for your business, but it also allows potential clients to evaluate you before even making contact. It’s great for creating a wider audience for your content, it can help to shed light on your name within your industry and presents a solid first impression to anyone hoping to collaborate.

My website has been through several different iterations over the years. Evolving from a lifestyle and beauty blog to a professional business site, I’ve spent many days and hours working to get it right and it hasn’t always been an easy task. Hundreds of cups of coffee, branding articles and WordPress blogs have gone into making the site as it stands today and I can’t deny how proud I am to have worked on it.

So in today’s article, I want to share my process for getting my site up and running, and creating the branding you can find throughout Nikki McCaig Marketing to this date.

Disclaimer: Before I begin, I do have to mention that some of the technical elements of the website were provided ever so kindly by the wonderful Studio Seventeen, i.e. creating a child template and developing a blank base theme for me to work from. If you’re ever in need of a professional and high-quality website build, I recommend checking them out.

Starting from scratch

When I first began to design my site, I would never have been able to predict just how much work goes on outside of WordPress itself. From researching templates to designing brand assets to choosing typography elements, the external details that go into creating a smooth, functioning website are just as important as the site itself. I sat down one day and started looking through other freelance sites, to try and establish which services they offered, how many case studies they included, what they shared through their FAQ page. Every website was different, but from that, I was able to put together a simple sitemap to get me started.

These are the pages I would recommend if you’re setting up your freelance site for the first time:

• Home
• About
• Services x 4
• Case Studies (max 6)
• FAQ
• Blog
• Contact

It’s always worth taking a little time to work out the best order of pages for a coherent user journey. Try to determine which pages your user will want to see first, which area of the site will have the most important information, which pages can be grouped together into a drop-down menu?

Once I had established my web page set up, I began to create the blank pages one by one, before adding them to my menu. This allowed me to gauge how long my menu would be, how many pages I would need to include and how much information I could share through the site. Later on, I also included a Podcast page, and a Publications page to my site, to share some of my public speaking recordings and published articles too.

Branding

The next stage of web design was creating and developing my own branding. Using Pinterest, branding articles and Canva as useful tools of inspiration, I slowly put together a firm set of brand guidelines for myself — finding colours, imagery, themes, typography and a logo that represented my brand and my work.

I’ve always loved using minimalist themes in my branding — seeking out simple, earthy palettes, neutral imagery, thin simple typography, and so it was fairly easy to translate this into a cohesive design formula. I set out the core colours of my branding to be used across the pages and found some richer tones to be used as accents on buttons, links and headers as well.

I found a simple serif font for my heading text and a standard sans for my body content. I created my logo using a neat handwritten font, creating a sharp contrast between that and my written text. I kept everything as paired back as possible, prioritising simplicity over heavy colour schemes and design templates. I even developed a categorisation system for the imagery used — editing stock photos to fit my desired colour palette and creating lists of subjects that would fit the theme of the site. Often I opted for professional images, using subjects such as laptops, coffee, keyboards and notebooks. However, as I wanted to emphasise the ‘beauty’ of marketing as well, I also selected images that represented nature, clean designs, home interiors and physical products too.

From there, I was able to move on and start implementing my branding into the physical site itself.

Page Design

To help keep my site coherent across the different pages, I began my design by using a standard template provided by Elementor, a WordPress page builder plugin. The template implemented several key content blocks, and sections for images, testimonials and buttons, all of which I was able to develop and change to fit my brand guidelines. I drew up a rough plan of which written content would be applied to which page and began organising the different content into miniature page designs on Canva to help me plan ahead.

One of the most useful design processes I picked up was the act of duplicated a page I was happy with and using it as a style guide for every other page that followed. I would pull apart different sections from other templates and apply to the duplicated page, altering the visual aesthetic to fit the brand theme and adding in fresh content — whilst still making use of the original design itself.

For pages such as the FAQ page, Contact page and the Home page, I ended up building the templates from scratch, out of content blocks and sections taken from existing pages. Whilst it took a while to find the right layout for each page, I repeatedly assessed the site on new screens, to help me evaluate which sections might need to be altered, re-sized or removed for the best visual appeal.

The Case Study pages also took a significant time to develop, and I relied heavily on Pinterest for guidance on how to create a visual breakdown of a project on my site. Using Canva to create many of the brand assets, i.e. the colour palettes, image representations and style guides, I made sure to keep the feel of each case study as creative and polished as possible, despite the varying nature of the content.

For the Blog page, I was unable to edit many of the aesthetic elements of the template, however, I discovered different ways to help the blog posts themselves become part of the design. Using several different plugins to hide headers and featured images, I was able to develop a consistent style for each blog post that helped to unite them as a cohesive series, regardless of the topic.

Finishing Touches

Once the site itself was complete, I took some time to go through every page and evaluate all of the minor changes that needed to take place before the initial launch.

This assessment included:

• Broken links
• Copy mistakes
• Slow loading pages
• Incorrect brand usage
• Unresponsive design elements
• Slow loading images
• Incorrect button animations
• Low-quality images
• Faulty plugins
• Incorrect logo sizing

This helped me to comb through each error and make the necessary changes, however, it often took longer than expected to fix particular plugins, bugs or image sizes.

Eventually, once the physical elements of the site were finished, I also went through and provided SEO copy for each page and image. I downloaded the Yoast plugin from WordPress to create individual metadata and keywords for the pages and site and embedded alt tags for the images, assets and logos as well. I optimised any large or oversized images to help keep the site speed high, and updated any plugins before finally launching the finished site.

Designing a website from scratch can be a long, complicated and frustrating process. I can’t tell you how many times I had to delete an entire page and start again due to a dodgy plugin or a poorly sized content block. I poured blood, sweat and tears into this website and it went through so many stages of development that there were honestly points where I considered hiring a professional to do it instead.

But looking at the site now, and all it contains about my work, my life and my abilities — I’m so glad I stuck it out and finished it alone. It’s one of my greatest achievements as a freelancer, and from the lovely compliments I receive about it from my clients, my hard work has definitely paid off.