Studio Brief 4 - Style Guide

In order to communicate my web design to the developers who's job it would be to code up the website I created a style guide in that the web developers can use as reference when coding. Style guide is essentially rules and guides to follow for what the web developers should and shouldn't be doing and how they go about coding up the website. It's a way of making sure no mistakes can happen as the style guide will give them everything they'll need. 

Below is the finished style guide:

Front cover - not necessarily important but gives an instant understanding of the style of the site.

Font size page - When it comes to coding information, text comes in forms of H1, H2, H3 and so on to H6. The 'h' represents a heading and the number next to it represents the size, therefore H1 is the biggest header and normally used for titles and h2 is used for subtitle and so on. Also 'P' represents Paragraph which is used for body copy. In the guide above, I've let the developer know what headers to use and what size. If there was a title then the web developer would know that he had to use the typeface Didot regular at the point size of 22. If the developer needed to use body text then he would look at the guide and see the rules I set out for 'Paragraphy' and that is to use the typeface Garamound in either reg, bold or italic and it had to be at the point size of 17. That just shows you how he would seek out the guild to let him know what rules he needs to follow in terms of type and size.

I've also reference the CSS font stack in case the primary typeface isn't compatible or usable. For example the developer would input the following font stack into the CSS style sheet. font-family "Didot", "Didot LT STD", "Bodoni MT", Garamound, "Times New Roman". That font stack once implemented within the CSS would let the code know that if Didot doesn't work then the typeface will change to the next typeface in the font stack and that would be Didot LT STD. The order of the typefaces are chosen for similarity, so the next font that is most similar in characteristic to Didot is Didot LT STD.

In the end this ensures the brand still stays consistent and it's reputation isn't damaged is the site doesn't display your typeface so the backup font is there in case the primary typeface fails. 

Pop up - This page lets the developer know how to recreate the pop up. That include what percentage of fade for the background, the RGB colour code of the pop up box, what header and colour of text and how thick the border has to be.

This makes sure the developer isn't second guessing. If he didn't have these rules then he might guess from the Photoshop file which would be inaccurate and unprofessional from the designer not to provide guidance on how to recreate the pop up.

Buttons - First of on the left hand corner the style guide expresses what colours are to be used throughout the site and what the RGB colour code would be for it. The colours shown are the primary colours and the highlighted colour for the promotional call to action button. The left hand side communicates what code to implement on the different stages of the active navigation buttons.  How it would appear at it's primary stage, how it would look once someone hovers over the button with their mouse, how it looks once the user has clicked and lastly how the button would appear if the link had been visited. And with the respectable colours and point size to have the border.

Call to action button - This is the same set up at the navigation button but for the promotional button. So again what it would look like at the different stages of interactivity the developer would take this information and implement it with the CSS.