Hi, My name is Andy Leverenz. I design, code, and am an author of things. Check out my agency called Couple of Creatives https://coupleofcreatives.com and my blog Web-Crunch https://web-crunch.com🤘🏻

=============

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.

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!

💻 Read the original blog post: https://web-crunch.com/lets-build-consultancy-website-part-6/

💻 Check out the blog: https://web-crunch.com

💡 👫 Check out my agency: https://coupleofcreatives.com

🚀 Links:

Weekly Newsletter: https://web-crunch.com/subscribe Twitter: https://twitter.com/webcrunchblog Twitter(Personal Account): https://twitter.com/justalever Facebook: https://facebook.com/webcrunchblog Dribbble: https://dribbble.com/justalever Github: https://github.com/justalever Medium: https://medium.com/the-web-crunch-publication

📘Check out my book on UX Design: "LUXD: Learn User Experience Design" https://web-crunch.com/books/luxd

📙 Check out my FREE book on Tumblr Theming: "Pro Tumblr Theming" https://web-crunch.com/books/ptt

📌Recommended Stuff I Use to Shoot Video: Canon EOS Rebel SL1 - http://amzn.to/2m3EZDH Linco Lighting Set - http://amzn.to/2mF8Shs Logitech HD Pro Webcam C920 - http://amzn.to/2mpqzBk Rode NT-USB Condenser Microphone - http://amzn.to/2mFhaG9

💯 Need awesome web hosting? Check out cloudways. They allow me to use a variety of hosting providers and build apps with ease: http://bit.ly/webcrunchhosting ... https://www.youtube.com/watch?v=fvvFdwT7jb8