Let's Build: A Consultancy Website - Part 3

In part 3 of the Let's Build: A Consultancy Website series brings forth the beginning of the hands-on portion of the videos to come. This part and the next will feature me designing a high-level style guide of elements we can later repeat throughout our interactive design.

At this stage, there is one definite path. You'll see me do a lot of trial and error when it comes to stylistic choices. I walk you through setting up predefined typography styles, color and more which will later allow me to focus on more of the user experience design rather than the UI.

Why a style guide first?

Realistically your style guide will always be evolving but establishing a set of elements will later help you visualize the paths your users may take as well as allow you to build a type of atomic based design. Overall your design will remain more consistent and branded going this route.

On your own, you can certainly dive into a design immediately if you already have a concept in mind. I personally think there is a wrong way to go about it but there are more efficient ways to accomplish such tasks.

Use the software to your advantage

Like many other design applications, Affinity Designer allows you to create relational design elements. These by nature update in real-time and are repeatable with a few keystrokes or mouse clicks. Setting up your document to utilize features such as text styles, layer styles, assets, symbols, color palettes and more allows me to scale my designs with ease. Combine this with artboards and you can design a complete website in little time.

Since time is always of the essence I tend to design only a few major pages that need unique concepts.

What's to come

The next part of the series will round out the first style guide concept I plan to create. I may make one additional style guide to offer a choice to our client (Alyssa). Options are always a plus but be sure to restrict it to 3 or less. I have found the more options you offer the worse the final design ends up. For some weird reason, the client always picks your least favorite option!

The Series So Far

• Part 1
• Part 2