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.

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.

Wireframing

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.

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. 

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. 

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.

Conclusion

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:

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.