Style guide


This is the style guide that I created for my website but the process and principals I use in creating this document are the same as I would utilise when starting any piece of design. The two main pieces that I like bring together are the text that I would employ and the colours I will use. Both of these inform the overall feel of the design and have a massive impact upon whoever views the piece in question.

    I chose Museo slab for the primary font for its legibility and because it fitted with the aesthetic that I was going for in the design. A Balanced and well-rounded font that didn’t deviate very much between its regular and italic forms. I will use my primary font for the vast majority of the content on the site but I chose a secondary font Museo san to be available for deployment at a later date if it is needed. I would use this secondary font for more clinical pieces of text such as a text that contains legal or similar content or if I choose to employ quick navigation links at the bottom of the page. By using a secondary font for these elements, I will be better able to show the distinction between the content and help users better navigate my site.

    One of the main reasons why I have not chosen to implement the font at the moment is simply because my site is only a couple of levels deep at most and any given time. By this, I mean that a user is at most 2 clicks away from the homepage. Where my site to develop into something that had a greater level of complexity, in the future, this is when I would employ the techniques I have just stated.

Once I had chosen my fonts, I looked for a ratio that fit with the visual weight that I wanted for the site. In this case, I landed upon the perfect fourth at 1.333, which gave the differing element the appropriate visual weight I was looking for.

The colour is the next consideration and for this, I used various colour wheels and charts to find colours that fit with the design aesthetic I was looking for. These colours were not chosen at random but had a carefully considered mathematical relationship that tied them together.

    After these considerations were taken care of and recorded, I laid out how these elements would be employed on the site. To do this I calculated how many elements were going to be necessary, then employing the ratio that had already been developed I laid out how each given element on the site would look.

    By doing all of this work before I begin the main design process, I massively speed up how that process moves forward and spend far less time tweaking and second guessing myself later.

Style guide.jpg