My Web Design Process

Sixty Eight Ave - My Web Design Process - Featured Image

Today I've decided to share my web design process. Designing a website isn't easy. It takes a lot of planning and hard work to develop something that functions well.

The following are the steps I take in designing a website:

1. Planning

The first thing that I do when planning a website is ask the client to fill out a website questionnaire. This helps me get a sense of what they want out of their website. I use Google Forms for clients to fill out, as I find it to be quick and easy to use.

Another alternative would be to create an interactive PDF document, which clients can fill out directly on the PDF. Sending an email with a list of all of your questions works as well.

In the questionnaire, I make sure that I ask a lot of questions. It's important to ask as many questions as you can about the client's project. It will give you less headache while building out their website in the long run. The goal of the website needs to be clear from the very beginning. This is important because you don't want to run into a lot of surprise elements your client wants to add.

Beewits has an incredible in-depth web questionnaire that you can refer to here.

2. Project Scope

The next step is to define the scope of your project. This is so important because it minimizes scope creep, a completely frustrating thing that a lot of designers have to deal with when you don't define the scope of your project properly. No one wants to have added surprises while working on a project. Clients asking you to do things that weren't previously discussed is a hassle and a huge waste of time. You need to be clear about what needs to be done, how long each task will take to get done, and how much each task discussed will cost.

After the client fills out a web questionnaire, I send them a web proposal outlining all the tasks that need to be done, how much time each task will take, how much each task will cost, the overall cost of the project and the approximate time it will take to complete it. I also outline extra costs that can occur, should they choose to add something in the project if they are still unsure about including it. I also include an agreement between the both of us to ensure that we understand the terms of working together. I make sure that we both sign the document, as it protects both of us in case any issues arise.

Once we both come to an agreement, I will ask them for the first half of payment in order to get started on the project.

3. Sitemap and Wireframe

Before I can start designing anything, I create a sitemap which includes a list of all the pages and elements that needs to go on the clients website. For example, their about, contact, portfolio, shop pages, email newsletter form, social media accounts, etc. I usually just draw it out in my sketchbook. Others use software for this. But old school ways always feel more effective to me when it comes to planning. You can also use post it notes on a wall to figure out what needs to go where.

After I have my sitemap, I start drawing out wireframes in my sketchbook by hand, which is just an easy and no fuss way to gather website layout ideas without dealing with the fine details. The focus is on the overall structure of the design.

A lot of people like to use programs like Balsamiq or Axure to create their wireframes, as it gives a professional feel when showing to clients, but since I don't show clients my wireframes, I feel using these programs are an unnecessary step for me.

4. Content Creation

While I work on using the sitemap and wireframe, I ask my client to gather content that they would like to have on their website. I give them a list of things I need from them and give them a time frame of when I need certain things by. If they need help with written content or photos, I ask them if they are interested in paying for stock photos, or have me write out their content for an additional charge per page. All of this would have been addressed in the project scope portion of the planning process, so it wouldn't be a surprise to the client when I ask for content.

It's really amazing that a lot of clients expect a web designer to produce content for them. They expect you to do every aspect of the website, and forget to think about what they want on the website. You need to be clear from the start that they need to be involved in the content creation portion of your website. We are creating a website for them; it is not our job to provide all the content on the website.

The only thing that I can offer clients is finding stock photos, writing their content for them with their involvement, and referring them to other people who they can hire to create content for them.

5. Visual Design & Site Development

Once I receive most of the content, I begin working on the visual design of the website. I begin by creating several mood boards for the client to choose from, which demonstrates the colours of the website. From there, I work on a style guide which includes colours, fonts, a few images, and logos that gives a feel of what the style of the website will look like.

When the client is happy with the style guide, I move on to designing the mockup for the website. There are several approaches I take to creating a mockup. A lot of people use Adobe Photoshop or Illustrator to create their mockups. I like to design the website right in the browser, especially when dealing with website builders like Squarespace. I can show clients how the design looks and how it functions at the same time.

When it comes to designing with Wordpress, I like to design mockups by creating a static website using HTML/CSS and some javascript. It gives me a more accurate idea of how a website will look in the end rather than creating a mockup in Photoshop. I find it easier designing a website with code than using a design program.

I move on to finishing the rest of the website once the mockup is complete and approved by the client.

6. Site Testing

Testing out how the website functions is the next step that I take. I test out all of the elements of the website to make sure that it works correctly. Then I make sure that it looks good across all the popular screen sizes and all the browsers. Once it looks good across all devices, I go back and check for errors again.

7. Launch!

Once the website is approved by the client and I have received the final installment of payment, I launch the website. Again, I go through the whole website to make sure everything is in working order. When everything on the website works, I'm done!

Building a website is a lot of hard work. The way I work isn't how every web designer works. Everyone has their own process of creating a website. What works for me in my process may not work for someone else.

Sixty Eight Ave

I'm a web developer and designer based out of Vancouver, Canada that specializes in WordPress & Squarespace.