Design your way

Wednesday, September 17, 2014

Style guides are something that have been around a long while. Even before the websites and internet, there were companies that needed to get their brands out there visually. They were required to come up with visuals that were both consistent and unified in delivery.


The way to achieve this, both then and now, is to employ brand identity guidelines. These type of guidelines are usually something that is included in a document, and which define certain information.


This certain information does concern itself with brand colors, typography, such as fonts, sizes, leading, or the positioning of the logo. Also, how to use it is detailed for various situations, as well. These different situations can vary greatly. One example would be print layout from web layout, which do both differ each other.


What is included in a brand or identity guide exclusively is dependent totally on the company itself. The different ways that it can range can be from a single page document to a document that is massive and comprehensive in detail.


Learn About Front End Style Guides


What does work in a very similar way to brand and identity guides is no other than front end style guides. The only difference between the two is that you are creating an identity for a website instead of one for a specific brand. This time around, the website is the brand, and a style guide for this, will be a style guide that does concern itself mainly with creating both consistency and unity that is suited for a website’s design.



Style guides are something that can do a lot for us. They not only encourage overall understanding, but they do also know how to promote cooperation and boost up maintainability. Style guides are not something new. Nor are they something that we have not used before. However, the reality of them in our industry is this, and that is that they are starting to gain a whole lot of popularity.


Their importance


No one is saying here that a style guide does need to be created for every website out there. Nonetheless, it does make perfect sense to just go ahead and come up with one anyhow.


A perfect example is this. If you have a website that is very heavy when it comes to content. It would be logical to come up with a style guide. This is especially true if the content itself does need to be displayed in an array of different ways.


Another example for using a style guide is if you are working with a large teams on a specific website. A guide such as this can be extremely handy if every component of the site must be built consistently. It does not matter who builds it, only that it does get built properly, and that it is documented properly. It also doesn’t matter if a member of the team is a newcomer either.


What is also another benefit for large website teams such as these is by having a fixed definition as well as naming conventions for each website component. You are indeed able to communicate very clearly and effectively which module component is being referred to in essence a whole lot easier.


When you create a style guide, you are creating a system, and a structure, that permits you to view the entire website in a very big picture that is very enlightening and insightful. This will make the entire process of updating this website a whole lot more manageable and simpler in description.


Some examples


Design style guides, as well as, code standards documents are a very successful way to ensure brand and code consistency. However, nestled in between the code and design examples, there are web-based style guides that are coming out on their own.


These web-based style guides are maintained by front-end developers. They are something that is far more dynamic than visual design guidelines. They are able to document every key component as well as its code on the site and in one place.


Mozilla

Mozilla Front End Style Guide


Mailchimp

Mailchimp Front End Style Guide


Fontshop

Fontshop Front End Style Guide


Starbucks

Starbucks Front End Style Guide


Github

Github Front End Style Guide


Code for America

Code for America Front End Style Guide


Google HTML/CSS Style Guide

Google HTML/CSS Style Guide Front End Style Guide


Salesforce

Salesforce Front End Style Guide


Yelp

Yelp Front End Style Guide


South Tees Hospitals NHS Foundation Trust

South Tees Hospitals NHS Foundation Trust Front End Style Guide


The conclusion


Do you still need convincing that the creation of documentation for every project is well worth it? If you do, then do continue to read on, because there are indeed a few nice side-effects attached to working this way.


When you have a style guide that is perfectly unified on all fronts, you will be able to spot inconsistencies right away whenever your design does break. It is very simple to examine when components are able to adapt to different screen widths. You can also test for browser bugs, as well as, develop print style sheets when everything is all together on one page.


This approach also forces one to think hard on just how much things do work and how something does work in relation to the site as a whole. It doesn’t just focus on one single page and that is it. This is something that will make a whole lot easier to add on more pages later on. It just makes far more sense to start off development with a style guide as opposed to just using a page-by-page basis.


When you have a combined style guide, it is something that does help both designers and developers to review all of the elements that will go into the site itself. These incorporated elements will also be able, to be labeled appropriately, to either be designed or populated.


When one has a boilerplate listing of components for each and every project, it can prove to become the very thing which can serve as a reminder for things that did get missed in the designing process.








Source: http://ift.tt/1Dj8Xbo

No comments:

Post a Comment

 

The Cash Box Blueprint

Most Reading