June 20, 2017
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.
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!