Let's Build: A Consultancy Website - Part 5

Part 5 features the beginning stages of wireframes as well as the addition of a new style guide. In the last part of the series, I created the first iteration of a style guide in which the branding for Alyssa's consulting business has been modified a great deal.

A new logo and color palette provides a big switch in her original branding. She had used her previous logo for many years and adapting to the change could prove to be a challenge for both her and her previous clients. Having all that in mind I decided to create a second style guide using the same new logo but a different direction for typography, color, and other various components in the design system.

While the change isn't massive I think it's more of a halfway point between her original branding and now the currently proposed branding.

Saving some time

To save time I did the second style guide off camera. I felt the first style guide was rather long-winded and probably a bit boring to watch. The second style guide came together quickly once I decided upon color. It featured a bolder approach with color and typography. I used a salmon-like color against a white background and it really resonated with me.

In the parts to come, you will see me modify the style guide even further as our design progresses and more aesthetic-based decisions are made.

Transitioning to wireframes

A style guide can provide a great deal of information to both other designers and developers working on the same project. Unfortunately, what it doesn't provide is realistic solutions to user experience problems. Enter wireframes.

UX Best Practices

Today the web is full of patterns that are common trends in the industry. A certain type of flow that is recognizable by a user is key since we don't want to waste a user's time when on a website. Having these patterns across many platforms makes it easier for a user to traverse their way around the web quickly even though these patterns are not a requirement.

Sometimes breaking UX patterns can be a delightful thing as it provides a fresh take on something a user sees or interacts with. Other times these patterns can be what is commonly referred to as dark patterns. These patterns for lack of a better term "cheat" the system and hack a user's flow. Sadly, the patterns are in place because they tend to work but in terms of customer satisfaction are downright annoying.

I wrote a blog post a while ago about such patterns in which you can read here. I deliver a bit of a rant about these patterns. If you read it you can probably get the hint that I'm not a big fan ;).

I could go on and on about user experience design here but lucky for you I wrote a book about learning user experience design. Check it out if you haven't already.

Wireframing 101

Wireframes aren't meant to be much to look at. In fact, as a designer, if you make your wireframes really pleasing to the eye I feel you are missing the point. The purpose of these is to lay the foundation for the user experience. This involves establishing layout, flow, types of interactions and more. In no way is a wireframe a final design.

Rarely has a wireframe I've designed turned out to be 100% like the final concept. Wireframes are fast to create and quick to change and that's the whole point. Rather than design, an entire concept from start to finish you can do a lot of trial and error with wireframes quickly. After review from your peers and stakeholders, you can then move towards the final design in which more aesthetics come into play.

If you want to get even more fancy and technical you can introduce a prototyping phase into your design workflow where your wireframes are actually interactive to some degree. This can involve anything create basic HTML mockups or using a tool like Marvel or Invision to create clickable image-based prototypes.

In this series, I'll be skipping the prototyping phase. Alyssa's consulting site is a rather common concept so creating advanced prototypes to share interactivity isn't all that necessary to me.

Coming Up

In part 6 (the next part of the series), we finally transition to design. In that part, I will begin to focus on aesthetics. Along the way, you'll see much update the style guide to match the design. This will all pay off later when we hit the development phase. A lot more is to come. I hope you're liking this series so far. If you have any comments, suggestions, feedback of any type it would be great to hear about it. Also if you haven't already subscribed, be sure to subscribe to my newsletter to receive this in your inbox every Sunday as well as subscribe to my YouTube channel so you never miss a new video from me!

The Series So Far

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