How to design a website: My web design process.

I am currently working on my first ever project operating solely as a designer. In every other project, I've always been the developer and sometimes designer as well.

I first learned web design in 2021. I have never been a confident designer. Imposter syndrome has followed me throughout my design career. Even with satisfied design customers, that impostor syndrome remains. Having been hired purely for my design skills, I now feel I have earned my seat at the designer table.

Enough self-congratulation. Why am I talking about my design process?

When I first learned web design, I felt a constant inferiority to other designers because the quality of their designs was so much higher than mine. Over time, I have learned that incredible designs don't just fall out of someone's head. They are the result of a process. Understanding that process gave me the confidence to design better and better websites. 

I am writing this post to myself three years ago. I want this to be what I needed to hear at the start. I hope sharing my process can provide some reassurance for someone starting out that they can create beautiful designs too.

Why is a design process important?

A common mistake people make when selling design is thinking they only sell a result. In many ways, the process is more important than the result. Especially when designing bespoke items like a website, your process is how you assure clients that you know what you are doing and you guarantee the result they want. A clearly defined process builds trust with your client and creates a guaranteed pathway to a quality product.

How did I discover my website design process?

I doubt that my design process is that different to other people. I copied most of it from others. 

If you go to a design school, they might teach a set way of designing. I did not go to design school. I taught myself and developed my process through practice.

Part of my learning journey was copying other people's designs. I'd trawl through Siteinspire and Awwwards to find beautiful websites. I'd copy parts of those designs and incorporate them into mine. Copying other designs is still a vital part of my process.

My process has evolved with each project. Every project presents a new challenge. Each of those challenges prompts me to fine-tune the process. So, I hesitate to say that I have discovered my process, but I am in the process of discovering it.

Considerations during website design

I started my career as a web developer. That experience provides me with these key considerations to keep in mind during the design process.

User experience (UX)

The user should always be at the centre of every design choice. A website needs to be usable. If users can't find their way around a site, they will use a competitor instead. 

As designers, there is always the pull to make beautiful experiences with as many bells and whistles as possible. Part of our job is having the discipline to cut out the fluff and ensure a smooth user experience.

Developer experience (DX)

Where possible, consult the developers about your designs. You must be sure they are capable of building what you design. More advanced features like scroll animations and 3D rendering can throw some developers, so make sure they can bring your designs to life. 

Make sure your devs have everything they need to build out your designs. Provide animation references, explicitly label and describe your designs, and ensure all assets are easy to port straight into the build. Make it harder to get the build wrong than to get it right.

Mobile-first

Understanding your demographic is an essential part of the design process. People talk about mobile-first design like it is the be-all and end-all, but it's not always the right choice. If you're designing a website whose user base is 90% desktop users, mobile-first doesn't make sense. In that case, you would nail the desktop design before your mobile design. That may not be something they teach in design school, but it makes sense to me.

Web Accessibility

I see so many websites lacking basic accessibility features. A lot of the accessibility features get implemented in development, but some crucial ones are part of the design. 

The main thing you want to include in your design is contrast. You need enough contrast between your foreground and background colours so people with varying degrees of colourblindness can still read your content. You also need your copy to be large enough for people to read. 

For a web accessibility checklist, go to WCAG for the official guidelines.

How do I design a website?

With those considerations in mind. It's time to design. 

My design process has four main stages. I'll go through each stage to give you an idea of what it is for and how you complete it.

Stage 1: Inspo and moodboarding

Before designing anything, I first want to get an idea of the aesthetic. Following discussions with the client, I should know their target audience, what their brand is, and who their competitors are. Even if they have brand guidelines, I use this phase to get an idea of what similar websites do well and what we can do better. I pull inspiration from different places, including websites, posters, images, film clips, and music videos. I store everything in a directory to serve as my moodboard.

Some designers create a moodboard asset to share with the client. Doing this is not essential. It does, however, confirm that you and the client are on the same page about the aesthetic.

Stage 2: Wireframing

Once you have an idea of the aesthetic, start considering the layout. 

Wireframes are low-fidelity versions of the final design. They focus on page structure and layout. They are typically in greyscale, using boxes to represent media and copy blocks.

I always ask my clients to provide me with a rough draft of the copy content for each page I am designing. Knowing the content enables me to structure the page and fix the layout without having to go back later because the content has changed.

I create a wireframe for each page type in the design. I wireframe both the desktop and mobile layouts. Once complete, I share the wireframes with the client for their feedback and approval.

Stage 3: Design

After agreeing on the page structure and layout, it is time to start colouring in. At this point, we bring in colours, fonts, media, and animations to bring the designs to life. This stage creates the final design document along with accompanying assets like animation references and documentation.

Stage 4: Feedback

This stage isn't really a stage in itself. It is part of stages 2 and 3. 

Staying on the same page as the client means their feedback is essential. During the wireframing and design stages, we can easily head off in our own direction without keeping the client involved. Regular client feedback helps keep the design in line with their vision. 

Having their input also creates a sense of ownership for the client. When they feel involved, they'll give better feedback, creating a more aligned design and a prouder client at the end.