Four Tips for a Killer Custom Website Design Style Guide

admin November 14th, 2017

We do a ton of website design and rebranding for a variety of clients. If you’re looking for custom website design in Melbourne, we’re your guys.

However, one of the things we always do when looking at this sort of stuff is, along with wireframing and general design principles, to develop a style guide.

Outlining pre-designed elements (like to call to action buttons, logos, etc.), colour schemes, fonts and any other stylistic variables for your new site, the style guide is like our design bible for your website.

Of course, we seek your approval on all this content before running with it, because simply put, this can be a radical departure from your previous website design.

However, it is crucial for our team to develop this document, because we need to ensure that no matter who is working on the site through the web development process, the website will look like what you’ve agreed upon.

This document will already have pre-existing elements on there for developers to borrow (avoiding annoying coding), practically providing everything they could possibly need (within reason).

The guys and girls of our design team have outlined a few important points that they believe are crucial for developing a custom website style guide.

Branding Understanding

I write this so often, but it’s true: your website is your digital shopfront. In retail, if you have a store that is messy, uncoordinated and dated, customers will just leave. Digitally speaking, your website needs to be equally tidy; otherwise, they’ll leave even faster.

A huge part of this appeal though is branding. Presenting a unified, visualised aspect of the brand is more enticing for customers to stay and engage with your business.

So, be sure to ensure a lot of existing brand personality in your style guide. Understand the team, the history, the “power animal” that best represents the brand; anything that you can use to flesh out your brand ideas.

Vocalisation

This really is an element of branding, but I said four tips, and dammit if I’m not going to honour that. And no, vocalisation isn’t about recording yourself reading through all the copy (though, killer app idea man! Web 4.0 right there!).

Ensuring that the tone of voice throughout the website is consistent is pretty critical to the overall style guide. Do you want to be funny and quippy? Do you want to be dry and boring (looking at you, lawyers)? Regardless, try to codify it in your style guide.

You can include 404 error messages (“Nice, 404 error over here. You broke it. You. Not us. You. Good job, champ.”), thank you messages (“Cheers for signing up to our wicked mailing list, bro. We promise not to completely drown you in emails. Just a light drenching.”), and countless other messages that users are likely to encounter.

The Colour and The Shape (Font Shape, that is…)

Of course, if you’re rebranding, then all this stuff is a given, but it’s important to include. But still, tell everyone what colours you’re using, regardless of whether they’re RGB, Hex Codes or Pantone Colour Code.

And, you should have a good idea of brand fonts. For example, Newpath web likes Trebuchet MS, for some reason. At least it’s not the oversaturated Helvetic, or the groan-inducing Times New Roman (to quote a friend, “more like Times New No-man!”), or the frankly embarrassing Comic Sans (surely, people only pick this as a joke, right?!).

No matter what way you slice it, ensure that designers and developers across the project know what colours to use and what fonts to include. Don’t make them work it out (that’s annoying), or worse, guess!

Pretty Pictures

Finally, style guides should include rough ideas of images to be used, included icons and basically anything that conveys the branding stuff in a visual manner. Don’t leave this to the last minute either; having this stuff identified early means that development can run far smoother than previously.

Where are you images coming from? Are you taking them yourselves? Pulling them from iStock or some other image service? You don’t necessarily need to have all of them identified (but it’ll help), just give everyone involved a good idea.

Same with icons; are you going for the purposefully clipart-y or something a little more refined? Show designers and developers what you’re going for so that they might be able to incorporate some more ideas on their own. Make it easy for everyone to play the game.

Style Guides are Hard!

I have not even covered a quarter of what goes into everything, but as I said before, I said four tips, and I’m sticking to it. Really though, it doesn’t matter.

Newpath web’s team of skilled web designers can handle your custom website design in Melbourne, developing a spectacular style guide (more like style bible, am I right?!) that will clearly and effectively map out the entire website design.

Hit up our design page to see how we can help you do yo’ thang, or shoot us a message at our contact us page, or just call – 1300 761 806. We’ll have a chat and see what we can do.