Freelance Web Design in Edinburgh

Web design is a constantly evolving field, which has gotten more simple in some areas and more complicated in others.

A good web design should be simple, consistent, mobile friendly and quick to load. A bloated slow website design will result in people leaving to go elsewhere.

I have been a freelance web designer in Edinburgh for around 10 years now. I have been around as the field has evolved over the years. So I have a keen eye for detail and know what works and what doesn’t.

I’m a big believer in simplicity and try to create designs which emphasise the content. I also take a real focus on performance and aim to get a page loading in the sub 1s range where possible. 

Freelance Web Design in Edinburgh 1

Custom Design vs Templates

These days there are many ways to use pre made templates to build a site. Wether its a raw HTML template or a WordPress theme.

Templates are a valid option for someone wanting to keep costs low and don’t mind having a website design that might be used on someone elses website.

There is always a trade off to using a pre made theme though. If it’s a WordPress theme, then typically your performance takes a hit, it’s not quite as straight forward to use and it might look a bit generic.

As a web designer, I always prefer to build things from scratch as this gives me complete control over the outcome.

Building from scratch gives me the ability to take a client through a full process, where I can refine and tweak things along the way, so that the outcome is perfect!

Custom designed websites result in a website that is easier to maintain, quicker to load and absolutely unique to you.

My Freelance Web Design Process

There are many ways a web designer can approach website design. Different designers have different approaches and clients have different needs which will change the way I will approach a project.

Not all websites are required to be built from the ground up like this, some might use pre built templates for example. But this will give you an insight into what is involved in designing and developing a website from absolutely nothing.

The following process is a real-life example of a recent project I am working through with a new client.

There are 5 steps to my web design process:

  1. Requirements gathering
  2. Wireframing
  3. Designing the website in HTML
  4. Importing the designs to the CMS
  5. Training and adding content.

Requirements Gathering

To start with I will meet with my client to talk over the project and gather some information on what it is they are looking for.

Once I have a general idea of what the client is looking to have done I will draw out a visual site map to get a record of what page templates will need to be built.

Freelance Web Design in Edinburgh 2

As you can see this is a very basic website in terms of structure, but there is still value in drawing out these maps when sitting with a client, even on simple projects like this.

This gives me a birds eye view of the site from which I can identify which unique templates will need to be designed.


Once I have drawn out the sitemap with the client I will drill down into drawing wireframes for the site.

This allows us to really nail down the page by page structure of each page and will identify how much work will be required in the build phase, which allows me to give more accurate time/cost quotes.

Freelance Web Design in Edinburgh 3

This is an example of a wireframe I completed with a client for their home page. 

I find that drawing out wireframes is absolutely essential early in the design process because it allows the client to visualize the layout and offer feedback. 

The more information I can gather at this stage the better because it can save me changing things further down the line when I actually design the website.

This is the point where I will usually try and figure out just how much content the client has or is willing to create so that I can tailor the site structure around this. For example, the client may now have any images for a large banner image and may not wish to use stock photography. 

HTML Designs

Once I have all the information I need from the client I will go off and start the design process.

For a lot of designers, this will involve booting up a tool like photoshop to visually design the project, then after approval will go off and design the website again in the browser with code.

I find that this wastes a massive amount of time, which results in the client being charged significantly more. 

This was standard practice for years, however, times have changed. Laying out the website in HTML/CSS first is easier and a massive time saver. 

A big contributing factor to this is the evolution of mobile responsive websites. Your website needs to be able to scale to any size of device. Designing in the browser allows you to build with mobile in mind and if the client requests a change to the layout, you don’t need to go through each and every design layout to make that tweak. 

Freelance Web Design in Edinburgh 4

This was one of the pages that were part of the design proposal I submitted to my client. This was designed in the browser and was based on the wireframes I made with the client.

I use royalty free stock photography and dummy text in my designs with the idea that the content is added when the design is integrated to the CMS.

Import into CMS

Once the client is happy with the designs I have submitted I will take the designs and incorporate them with a CMS which is appropriate to the use case.

In this example I chose to use ProcessWire, however, I always leave the option open and can happily use any modern CMS, such as WordPress.

ProcessWire was a good fit for this project though because it’s super lightweight and easy for the client to use, plus it always gets raving reviews from my client’s who have used it after coming from other CMS’s. 

Freelance Web Design in Edinburgh 5

This is an example of the administration page for the homepage in ProcessWire. You can see how the fields in this match up to how the website lays out in the design.

Being able to layout the admin fields like this makes it super easy for the client to be able to update their content because they can easily identify where everything is meant to be. 

Training and adding content

Once the build is complete I walk through everything with the client and assist them with adding their content when needed.

I find that with ProcessWire, very little training is needed because it’s so easy to use.

But with a more complex website, such as an e-commerce platform built with WooCommerce, training can make the process so much easier for the client.


I have been doing web design and development for years. Over those years my processes have changed to keep up with the times and I find that this process is the best because:

  • The client gets an insight into the structure of their site right from the beginning.
  • I get an in depth understanding of what will technically need to be done so I can provide accurate quotes.
  • Designing in the browser is significantly faster and produces better results.
  • The client has full visibility along the way of the process so changes can be made as early on as possible.

If you have any questions or would like to go through this process yourself and have me build you a website, then please feel free to contact me.