Creating the final website design

This is the third part of my 4-part series taking your behind the scenes of my web design process. To check out the first instalment where I take you through my branding process click here and the second instillment where I show you how I sketch out the website layout click here.

After locking in the homepage layout and gathering all of the content such as the text and images from my client I put it all together to create the final visual design for the website, which is what we’ll cover in this blog.

Adding the client’s content

The first thing I do once we’ve settled on the layout design is add in all of the content provided by my client. I typically ask for this well before we start working on their project, and provide a handy workbook to help them write the text if needed.

I like to add in the text to the homepage wireframe we’ve been working on to see how it will look and establish the final layout. This may mean that the final design looks a bit different that the wireframes we settled on, but the overall design will stay consistent with the layout.  

I’ll then add in the photos and if the client has requested that certain images appear on a certain page I’ll make sure to follow their preferences. On the other hand, if the client doesn’t have existing images or couldn’t find photos they like I’ll help by selecting a handful of free stock images to complement their design and support their business’s message.

Side note: Photos are a SUPER important part of your website design. Most people will give your website around 3 seconds before moving on unless you capture their interest! Your images are a great way to communicate what you do, show your style and keep people interested. If a client sends me images for their website that seem really off-brand or aren’t up to the quality of their offering, I’ll never shy away from telling them and helping them find photos that do support their brand and website design!

Layering in the branding

Once the content is added to the homepage wireframe, I then get to layer in the branding we’ve established for the client’s business. This is where things really come together and the site starts to look like the beautiful slick design we’ve been working towards.

On the homepage I may not need to use all of the elements we’ve created for the branding, but I’ll set the tone for the site and give a taste for the overall style. I keep our other branding elements in mind as I work on the other pages since some times they’ll work perfectly in another instance.

There are some instances where we don’t end up using every part of the branding we’ve established on the website. This can seem a little odd since we spent all of that time working on the business’s branding but there are occasionally instances where we’ll hold back a few elements from the website but the client will use those elements in other areas of their business such as on their PDFs, newsletters, business cards etc...

When working on my fictional baby sleep trainer’s website, I chose not to include all of the brand colors and one of the patterns in the homepage design. This allowed me to keep the homepage as clean and calming as possible since that was one of the goals for the brand. The fun purple brand pattern would be great for her workbooks however since it really pops and stands out against the other elements in the site.

Presenting the Design to the Client

Showing my client the design with all of their content and branding is one of my favorite parts of the whole web design process. They get to finally see everything come together and really grasp what their website will look like!

I really love jumping on a video chat for this so we can walk through the design together and they can share any feedback with me live on the call. I try to also schedule in enough time to let them sleep on it and come back to me with any other thoughts for final adjustments before we get into the build phase.

If there are major changes to the layout or styling of the homepage, I’ll update my design and send it over to my client for final approval. More often than not, they’ll request a few small tweaks that I just note down to integrate while I build out the website.

This phase usually goes pretty quickly, especially if we’re only drafting up the homepage. Once we’ve got the design locked and loaded, I can get stuck-in to building out the website on our chosen platform.

I’ll go into more detail about my build process in the next post and share how I wrap up my projects to set my clients up feeling confident moving forward with their new websites.