Let’s Build: A Consultancy Website – Part 6

In part 6 we begin the initial design phase of the consultancy website. Going forward I'll be referencing the style guide and wireframe I created in the previous parts of this series.

Making the transition to design

Due to the nature of the design phase, I don't have any rigid rules for enforcing the style guide.

As you watch my progress you will start to notice how I alter a lot of the components as I transition to design. Throughout the life of this project, I can almost guarantee you that the style guide will change as a result.

In this part of the series, I begin with the fundamental components of the website's header which include the logo, navigation menu and an introductory piece of content that explains the website's purpose.

First and foremost: don't make the user think

A big goal of mine in nearly any design project I take on is to pay extra attention to user experience. "Website Design" can take on a number of different meanings when it comes to building websites and web apps.

Early on in my career, I assumed "web design" only entailed the actual look and feel of a website. While this is partially true, it is a very limiting assumption.

Presenting elements in a graceful way is only part of the equation. User experience is important here as it actually defines and accounts all the available paths a user can navigate through on your site. Combine good user experience with good UI design and you've probably got yourself a good equation.

What goes on inside my brain before I begin a design

Before I begin a new design there's a lot of questions I have to ask myself, the client, and sometimes Google ;).

• Do we have any content to work with?
• Photography? Please, no generic stock photos!
• What is it you (the client) are ultimately wanting people who visit your website to do?
• Have you approved a style guide I delivered yet?
• Is your branding and logo actually final?
• How soon do I need to complete this design?
• How many pages do I have to design and how many will encapsulate the general "idea" I'm after. (I try to design most of the time in the browser if the design is simple enough).
• Will I need to actually create prototypes for the site/app?
• Will we be A/B testing any specific design components? (i.e. Call to actions, banner ads, forms, lead text).
• Do I really need fancy web fonts at all or can I get away with system fonts everyone already has installed on their computer/device?
• And a crap ton more!

About the progress so far

So far I've created a style guide, wireframe for the home page, and in this video, we begin a design for the home page.

My plan is to probably design two entirely different home page concepts review those with Alyssa. From there I will proceed to design for the about page and services page as those will likely be pretty unique in layout and overall form/function.

I could take the easy way out here and just design those pages in the browser but as I've found out before this leads to pretty stale results. I work best by creating a design first for the more in-depth pages on a website. There will be generic pages as well like the contact page or even a 404 error page that we can easily design in the browser.

Blog

I haven't decided 100% on what to do with the blog feature. I think I may utilize Medium to save a little time and provide a few more features. Another benefit to going that route is less code on the website.

Depending on the tech stack I use to build the site this could all very well change. Stay tuned to see what direction we head!

THE SERIES SO FAR

• Part 1
• Part 2
• Part 3
• Part 4
• Part 5