The Ultimate Freelance Web Designer Guide

Posted by Ryan Gittings

The Ultimate Freelance Web Designer Guide

Having been a freelance web designer for many years, I often get asked for advice and support and to reveal my experiences.

I recently took part in my very first ever podcast, on Being Freelance. I've received some great feedback and thought I'd try and create the 'ultimate guide' to becoming a freelance web designer that's freely available for everyone to access in a written format! So, let's jump right in.

My experience

I started as an 18-year-old freelance web designer, having worked for a local agency for a couple of years. Whilst employed, I gained experience within the industry and picked up some vital skills (especially in business) that set me up for becoming a freelance web designer, which I'll share in this article as we go. Early on, I wanted to make sure I focused on the web design of the freelance world, offering a complete service for clients looking for web design, front-end web development and being a point of contact for the complete delivery of the projects. Let's move on to the first critical decision you need to make.

Pick an area of expertise

My first major piece of advice: starting in the industry is a super exciting time! Technology can be fascinating, and you can feel like you want to offer all services to all clients. I did this, and it was one of a few regrets in the early days.

I found myself offering freelance web design, freelance web development, backend development, eCommerce development, graphic design and digital marketing. As I moved into year 2, I found that I had a wide range of clients, all having a wide range of specific requirements and technologies. I found it exceptionally challenging to keep on top of the ever-changing nature of the technology space. Shopify was constantly evolving its front-end documentation, as was CSS as a language, and even tools like Photoshop evolved and adapted. I was happy to learn, but you just run out of time when trying to find the time to deliver quality services to clients and how to best use these tools. So, let's move on to the main sections with freelance web design and how you can offer these services. I offer each of these services as it stands at the time of writing.

Front-end design

As a freelancer, I offer design-only services. As standard, this includes static design in design software such as Figma or Sketch. If you feel you're on the design side of the spectrum and enjoy the graphic design of things, this is an excellent service. Utilising tools that are more suitable for digital design will allow you to provide clients with high-quality solutions, so it's well worth spending time familiarising yourself with these tools.

The expected deliverable for clients here is access to a shareable URL with the design or the design file itself. This space is quite crowded and probably has the lowest barrier to entry. Foundational knowledge of how the web works and adopting good web design practices such as fluid scale and typography, native CSS solutions, SVG usage and more will allow you as a designer to be ahead of the competition.

Front-end development

I also offer front-end development to clients. The term 'front-end' is quite broad these days, and some companies hiring 'front-end' developers expect you to know all the tools. I bet you've heard of React, Next JS, and Gatsby if you've researched front-end development. Yes, parts of this stack can indeed be front-end, but for me, front-end is how the website works. In my opinion, the front-end shouldn't involve too much backend work in Node or PHP, and it should be a simple stack, HTML, CSS and Javascript. Suppose you can become proficient in these three core technologies without frameworks or tools like Tailwind CSS. In that case, you'll have a perfect foundational bed of knowledge to build upon, where you can start exploring frameworks if that makes life easier.

Recently, I've almost exclusively adopted Jamstack and become a freelance jamstack developer. I solely use 11ty, a lightweight static-site generator that simplifies my front-end code whilst allowing me to cater to pretty much any size of client!

Hybrid

When chatting to clients and working with companies, I feel that the 'gap' that I fill as a freelance web designer is translating high-quality design into high-quality development. As I offered both services individually and gained a lot of experience in both areas, almost exclusively focusing on them, it allows me to deliver high-quality products. In a very crowded web space, I feel I do stand out being able to do both, and both at a high level.

Let's move on to getting started with your documentation in order.

Documentation

When I first started, I was very nervous about how to set up my business, how to look professional and how to compete against others. Luckily, I had some exposure to this with my previous employment, but here are some critical areas worth looking at to deliver professional services.

Contract & Privacy

Having a good contract is a vital part of good documentation. When working with clients, you must ensure that your documents cover you in the unfortunate times (and they do happen to all of us)! Having a contract that's strong, clear, readable and not scary for either you or your client is very important.

I highly recommend contract killer by Stuff & Nonsense. It's a great, high-quality starting point for your contract that covers most of the key aspects of the web design space. It even has a GDPR Policy that'll be required to protect users/clients' data. You can use the policy for your website too!

Proposal

A high-quality proposal can differentiate between winning a job and losing one. Clients often expect you as freelancers to produce these documents during their tendering process. I include the following:

  • Introduction
  • Project requirements
  • Project breakdown
  • Timeline and schedule
  • Pricing
  • Terms

I keep my proposal short and sweet but detailed enough to include everything the client needs. I created a bespoke design within PandaDoc, which tracks clients viewing activity and handles the legal stuff like digital signatures super well, so I'd highly recommend it!

Finance

Finance is one of the things we can all struggle with from time to time, and it's probably the subject matter I get asked about most. Let's break it down into some key areas.

What should you charge?

The magical question. As a freelancer, charge too little, and you might not earn enough to keep the business running and ultimately pay your bills. Charge too much, and you'll start losing leads who could have been successful paying clients. The magical amount will sort itself out over time, and there's very little chance you'll get that figure straight away; over time, things change. Inflation happens, life happens, and sometimes circumstances change.

I think you have to start by working out what you need to be a successful freelancer. Maybe compare it to previous jobs, or look at your finances and work out what salary you're looking to achieve.

I've seen freelancer rates between £30 - £150 per hour. Both ends of the spectrum are perfectly valid. I work out my week to be 8 hours a day, 40 hours a week, and 160 hours a month. I also take annual leave regularly to keep a healthy work/life balance. So I factored this in when working out what I need to charge, and you definitely should too!

I use two main quoting methods, both of which I use extensively.

Project rate

I use a project rate for all major projects. Wherever possible, I try and use project rates for the following reasons:

  • Scope cap. By giving one price for the entire project, I can finalise the scope and cap that scope, ensuring clarity between myself and the client, which benefits us both.
  • Time management. By capping that scope, I know how long things should roughly take, schedule both my diary and my clients, and keep things ticking along nicely.

As I say, all my significant projects use this. I then have a bunch of extras and addons, which I usually quote per hour.

Hourly rate

I have an hourly rate to offer smaller, more time-focused tasks. This rate changes depending on several factors, urgency, required skills, etc. I clarify to the client that I'll only charge for the time, usually for tasks under half a day, such as website migration, content edits, tweaks and minor design changes. It just makes sure my time gets covered for smaller tasks and that the client can achieve everything they're looking to do.

Branding

Now you've got your documents in order; you can start to move on to the fun stuff - your brand. Branding is often a missed step for freelance web designers, but I think it's a crucial step in the marketing process. It makes you think about how you want to present yourself to clients, what clients you want to target and how you can do that. I run under two brands:

  • Ryan Gittings. My website, name and 'brand'. I wanted to be the face of the brand, to deliver that personal connection with clients. As I work across disciplines, I wanted to be the face of the brand to show it's just me working on their projects. I like to work with clients who are looking for a freelance web designer, so I can tailor my brand, website and service.
  • Made By Kingfisher. My company umbrella that everything sits within. I always knew I wanted to try other businesses and seek opportunities, so I wanted a Limited company to house everything - fun fact: the name was born from my love of Kingfishers. I love fly fishing and often see the beautiful birds whilst fly fishing on the River Usk. I've worked on several different side projects, such as addons for Perch CMS, a brand new iOS app called Steamboat. I have a website for Made By Kingfisher, which generally targets clients looking for web design in Hereford.

Style

Once you've established your brand name and persona, you can start to think about style and branding. At the very start, I sat down and thought long and hard about who I wanted to target and how I could do that. I always knew I had the most joy working with smaller businesses, startups and on projects that do good in the world. I wanted to brand my freelance site around feeling very personal, so I've always tried to incorporate that into branding and style. I've recently adopted a Memoji as my main site icon to feel you're meeting me as a human rather than just interacting with a digital product. My website is full of small details and interesting facts, such as being a Disney fan, a MUFC fan (don't even go there), and trying to bring my personality to the screen.

But think about how you want to come across? Incorporate your favourite colours and styles, express who you are and what you can offer and use it as a blank canvas to explore whilst catering to the clients you're looking to target. Are you targeting larger businesses? Maybe try and put together more comprehensive case studies that go into detail and create a more boutique design - targeting small businesses? Maybe try making a site that focuses on how you can work with them, break things down and keep things simple and personal.

Marketing

So you have documents, a brand, and hopefully a website. A huge milestone! You should take a step back and be super proud you got this far.

A lot of my clients expect everyone instantly to start getting in touch. The world doesn't work like that; as with anything, you'll get what you put in. You have to work on creating a complete marketing strategy to ensure users can find you and you're getting the most out of your website. Let's break it down into some critical areas where you may want to focus your efforts.

Local marketing

As a freelancer, I think it's vital to start with users being able to find you locally. In my early days, I leaned on word of mouth and some small local advertising to get me the leads I needed to keep busy in the early months and years. Of course, times have changed a bit now, but I found going out and handing out business cards, going to local networking events and pitching for local tenders helped establish my name locally. Utilising this method, I've been fortunate enough to work with some brilliant local brands, including startups and SMEs.

I think it's an underrated method these days, and many freelancers make the mistake of trying to aim too high and forget to lay some foundations first. Local marketing will always be an excellent way to network and establish some reputation locally, even as a freelancer.

Digital marketing

Digital marketing is the big one. Everyone wants to rank for terms like freelance web designer, freelance web developer and even web designers near me. As with above, most of the SERPs that are appearing high have probably spent years optimising their site, building their brand and gaining authority and backlinks. You won't be able to compete with that overnight, but take small steps to start ranking.

A perfect place to start is with ranking in Google Maps. It's a massive opportunity for good exposure within your service areas and is easy to set up. Make sure you have a Google My Business page and ensure it's up to date, accurate, and has all the locations you target locally. Don't spread yourself too thin; start with your hometown, try and get into the top 3 results and build up from there. Moz has an excellent article on this.

Once you've started to appear in SERPs for local terms, hopefully, you should see yourself beginning to rank for service-based terms when appending your city name to the keyword. You can introduce strategies to start climbing the rankings for your county and, eventually, even nationally.

Social

I've seen social media be effective for many of my fellow freelance web designers. Some have used LinkedIn, whilst others have used Twitter and Instagram to excellent effect! I have limited success with LinkedIn, so although I have a profile and check-in from time to time, I don't actively pursue LinkedIn as a platform.

I have great success on Twitter, mainly just engaging with fellow professionals in the industry. I wouldn't say it directly gets me work, but it does make sure I'm active within the community and does allow me to keep on top of the industry, with industry tips, tenders and even the odd DM requesting a quote.

I advise exploring all the platforms and finding what works for you. If you're design orientated, Instagram can be a beautiful canvas to showcase work and create a wow factor!

Time management

I wanted to include an extensive section on time management (I might break this out into a new article in the future). In the first few years of my freelancing career, I found it very difficult to manage my time. As an 18/19-year-old, I was naive to think I could regularly work 12-hour days and weekends too. I love what I do and always have to be honest, so it didn't feel like work in the early days. A few years later, I found I didn't have the same motivation to work all the hours; maybe that was me becoming an adult and jumping into the real world. I started to enforce 9 to 5 hours, most weekends off, and a strict lunch break which over time helped massively with my mental health and stopped me from having these bouts of burnout.

Since COVID, I've pushed things further by trying to optimise my time, so let me share some ideas I use in my day-to-day life with you.

Scheduling

I made a significant change to my day-to-day schedule. As a freelancer, I have to operate the phone, reply to emails, deliver work and reply to new leads. These tasks are simple, but when combined with no structure, they are challenging to keep on top of and make me less productive than when I first started. I now schedule my time into blocks of smaller chunks with focused tasks. For example, I now organise calls into two pieces from 11 am-12 pm and 2 pm-3 pm and take a max of two a day. I reply to the bulk of emails with new enquiries and existing clients when I first log in and when I get back from lunch. I respond to anything urgent in-between. The rest of the time allows me to focus on the day-to-day running of the business, along with my actual design and development tasks for clients - this gives me routine, clarity and structure, allowing me room to breathe. Phew!

Annual leave

I can't stress this enough - give yourself a break! When you do get busy, you forget to look after yourself. I think COVID highlighted to us all that life is short. Spending time with loved ones is a significant part of life you should try and balance with work. At a minimum, give yourself time off as if you were an employee to ensure good mental health. Time away from the screen is good - I often find it gives me that pause from technology and makes me twice as productive when I'm back!

Your business will always be there when you return, and clients can wait for things, regardless of how many emails you receive with URGENT as the subject title. Take some time off; your mind and body will thank you for it years later.

Tools

I often get asked what tools I use to manage my freelance web design business. I have a post written a few years ago, but I thought I'd put it in this hand guide. I've split this into key sections to make it easier to follow.

Devices

I use my MacBook Air (M1, 2020) for most day-to-day tasks. It's a fantastic, portable little machine that's been the best machine I've ever owned. I always have an iPad Pro which I take away with me if I ever need to catch up on emails out and about or show clients things at meetings; just that bit smaller and easier to carry, with excellent battery life.

I have office space that I use during my typical working day, with a larger display - this gives me two screens for maximum productivity whilst remaining on one device, simplifying my setup.

Coding

For front-end development, I use VS Code. It's a fantastic product that keeps improving, making life easier with built-in Git support, a terminal, and advanced features such as multiple cursors. I'm not one to change often when new things come out unless they genuinely improve my workflow or productivity. I use the following setup for most projects:

Utility

I have a suite of utility apps that I've built up over time, and they've optimised my workflow. To name a few:

  • Sizzy - Browser testing.
  • Browserstack - Browser testing.
  • Teams - For phone system and client meetings.
  • Slack - Client communication, automated reports, and bots.
  • Reminders App - Project management and status tracking.
  • Notion - Client task management for larger clients.

Graphic/Design

I have a small set of apps for graphic and web design tasks, including:

  • Figma - Front-end design software.
  • Adobe CC - For graphic design tasks

Browsers

I test in most major browsers as standard, so they're all installed on my machine. But I use the following:
Safari - For day-to-day browsing to ensure privacy and security whilst browsing the web.
Chrome - For dev tools and debugging of website builds.
Chrome Canary - For testing them, bleeding-edge technology websites to support upcoming features.

Client interaction

An essential piece of the jigsaw is delivering quality services consistently - this ensures longevity and even helps with things like word of mouth. I've split client interaction into critical areas I expect to maintain.

Honesty

An underrated part of being a successful freelancer is being honest. In my early days, I was scared to admit if I couldn't do something or didn't feel comfortable. Being honest with clients about how busy you are, what you feel comfortable doing and how you best think you can help has done me well over time. The good clients will be patient, appreciate your worth and understand, so be honest with them, and they'll return the favour.

Quality

Keeping quality high can be difficult during busy periods, and sometimes you can be tempted to cut corners and lower your quality. Please don't do this! If you're alive, you're doing great, and it might signal that your hourly rate is too low or that you may need to optimise time better. If you let your standards slip and start lowering the quality of work, this can have a knock-on effect, lead to unhappy clients and affect your overall reputation as a freelancer.

Support

Clients will always need support. It can be a tricky error to ensure your time is covered whilst also ensuring the client has support for the products you've built. I always use the 15-minute rule - if I can fix their problem, help them out, or document how to do something within 15 minutes, I offer this for free. I've found that clients appreciate the gesture, resulting in more repeat work and recommendations. I'm not saying you should do this, but I thought it was worth sharing my experience! Anything over 15 minutes become chargeable in 30-minute units (my hourly rate is divided by two). Offering good support is an underrated part of a freelance web design business. Making sure you allocate time in your day for this and have a clear and consistent pricing strategy can be the difference.

Communication

Several methods of managed communication can be an excellent tool to ensure you remain in touch with previous clients and up-to-date with existing ones. I generally stick to email as much as possible for client communication, so I have an accurate history of correspondence and a copy should I need to refer back to it. It keeps everything centralised and organised for me. I do regular work for my larger clients and offer to join their relevant Slack channels, so my emails don't get blocked up with requests. It centralises the work for the client and me and keeps it all together.

For video calls, I either use Zoom or Hangouts; both are excellent tools that more than do the job for my needs. I also offer the standard phone calls, but these are by appointment only via booking on my site to allow me to manage time effectively. It's worked very well since I introduced it and reduced the time I'm aimlessly on the phone with leads that aren't high quality or relevant to me.

Summary

If this guide inspires or helps one person pursue a freelance web design career, I'll deem it a success! Freelancing can sometimes be very challenging, but it comes with many perks, which I feel very fortunate to receive. Having flexibility within my daily calendar, being my boss and working with some fantastic clients is truly a privilege. It isn't without its challenges, but I'm hoping this guide gives you ideas and the headstart you need.

My advice to you: go for it! I did, and I never looked back. You can do it too, and become a successful freelance web designer!

If you have any questions, please feel free to reach out via email (ryan@ryangittings.co.uk) or DM via Twitter (@ryangittings).

Send Your Project Brief

If you're not sure and would prefer to chat or drop me an email, get in touch.

Project Details
What type of business are you?
What budget have you got to work with?

Example: Home, Services, Services -> Web Design, About, Contact

Websites generally take anywhere between 4-12 weeks to complete, depending on the brief.

Personal Details