Sony Simon Live. Love. Learn.
What is a Style Guide?
In the context of web development, a style guide is a set of standards for the creation of web pages. This ensures consistency across the website and enforces best practices in usage and visual composition.
“That sounds like a stylesheet or CSS to me, Sony. So what is the difference?”, you may ask.
If you are a freelance web developer and you want to discuss with your client on what the website colours are or what styling will be applied to blockquotes, then showing them a stylesheet is not cool. But show them a style guide, and I am sure they will be impressed (and will understand).
If you work in a team with UI designers and web developers, then this can be the “language” between the designers who don’t code and developers who code the HTML/CSS files.
In a style guide, you can give your website colours cool names like “Lively Lime” or “Passion Pink” or “Zeal Teal” which makes communication between team members easy. And less geeky! During college days, I thought to speak in Hex was cool, not anymore! 😉
Style Guides are also sometimes created after the website is developed. Documentation is crucial for ongoing support and maintenance of a website. Using a living style guide helps document all the code bases which can be referenced at a later point for enhancement or maintenance. The reason it is referred to as “living” style guide is because the style guide is always in sync with the code.
Creating a Style Guide will definitely take some time up front. But this pays off with faster development times for newer pages. It also ensures that as the team grows, everyone can speak the same visual language.
5 Key Benefits of a Style Guide
- Ensures consistency across your website
- Provides a well-documented reference material for a growing team or yourself (especially, if you manage a bunch of websites)
- Maintains a common visual language between your team members and/or your clients
- Style Guide combined with SASS prevents a bloated CSS and ensures a smaller and well-described codebaseCollection of source code that is used to build the website
- A test for cross-browser compatibility (Just open it in different browsers – easy!)
What is Frontify Style Guide?
Frontify provides a web-based tool for creating style guides. It is easy, fast and fun!
For any of the budding freelance UI designers or web developers out there, I would definitely recommend Frontify as a great tool to put together your design and impress your clients who may not understand CSS.
Frontify also offers a Living Style Guide tool through the Frontify API available here. I also think that the awesome crew behind Frontify is working on a “generate from website” option.
How to Setup a Frontify Style Guide?
Setting up a style guide in Frontify is very easy. Let me show in 3 simple steps.
Step #1 Create Brand
When you log on to Frontify, you will be taken to your dashboard. Click on the Create Style Guide button. You will see a Create Brand pop-up window. In this enter your Brand Name (can be a website, brand name or client name), Brand colour and Brand icon or logo. If you do not have a Brand colour or icon yet, you can just leave in the defaults. Next, you will be asked to create a Style Guide. You can either go for a Blank Template or choose one of the templates provided.
Step #2 Customize Page Appearance
Once your template is ready, the next step is to customise the appearance of the pages. Clicking on the top left down arrow on your main page will open a menu. In this select Customize Appearance. You will be provided with options to customise the header, the fonts and colours and also the alert box colours.
Step #3 Create Outline
If you have opted for a Blank template in Step #1, then this is for you. In Frontify, you can organise your content into documents, categories and pages. You can have multiple documents. Then you can create multiple categories within each document and multiple pages within each category. This terminology can be a little misleading because a category is a single web page. And pages are actually sections in a single web page.
- In the above example, Style Guide and Pattern Library are documents.
- Within the Style Guide document, there are various categories like Introduction, Design Elements, Resources etc.
- Under the category Design Elements, there are multiple pages like Logo, Colour, Typography etc.
- Inside the Colour page, there are multiple sections such as Colour Palettes and Usage Guidelines.
As you can see I created two separate documents for Style Guide and Pattern Library. Style Guide mainly focuses on visual language (e.g. colour, fonts, icons). Pattern Library is a collection of building blocks for the website like buttons, progress bars, calendars.
More to come…
Every style guide should have information about the 3 must-have design elements:
- Colours
- Typography and
- Graphics
In a series of articles, I will share with you more about these design elements and how you can include them in your Style Guide using Frontify. So stay tuned!
If you are doing something similar to this, please do get in touch. Let’s band up together and share our thoughts and inspiration. 🙂
For more articles on web development, please visit the Web Development section.
Hey Sony
Thank you very much for the nice article about Frontify. There’s only one litte thing I wanted to propose 🙂
You write: “Frontify does not offer a Living Style Guide tool. It will not keep itself in sync with your codebase.”
–> This is not exactly right. You can create a Living Style Guide right from your code base. See here: https://www.npmjs.com/package/@frontify/frontify-api. Once you are in sync, you can insert your patterns directly as content blocks within the style guide and complement them with text / images, etc.
Hey Andreas 🙂
Thanks for reading my blog post and getting in touch. I have updated the article with this information. I was not aware of this until you pointed it out. Is the “generate from website” option coming soon?
Hey Sony!
We’ve tested the “Generate from Website” feature quite a lot. The problem with it is, that most websites are not very “brand consistent” and therefore generate results for the style guide which are mostly incorrect and will cost more energy to adjust than it would cost if you define them manually from scratch 🙂
So for the moment, we will not publish that feature.