How to create beautiful style guides online

Inspired by our previous mini guide on how to create user personas online, we decided to cover another great topic and describe a new way to create lovely style guides for your existing brands or some new projects.

What?

A style guide (or a brand book, brand guideline, etc.) is a document that represents a certain brand. It’s comprised of a set of standards that should be followed to properly represent that brand. In other words it’s the definition of a brand’s visual components and personality (logo, colors, typography, voice and tone, marketing presentation and much more). The volume of a brand guideline can range from a few pages to hundreds of pages and depends on how much details/info you’re willing to describe. Big brands like Buffer, Yelp, Skype, Medium, Ubuntu, Mozilla and others, made their style guides public, so you can anytime browse one and see what’s in it.

Why?

An awesome company has a notable brand, and vice versa. It’s important to document your brand’s identity, personality, mission and vision. All these will ensure you a consistent way to work with your business partners, marketing teams and of course customers (providing the best experience). Consequently, you will be able to extend your domain of activity and have a strong brand and a solid presence on market.

How?

Imagine an easy way to create and manage your style guide which you can constantly update and publish online + share it with your colleagues or users. It would be accessible from everywhere and look nice on any device (PC, laptop, tablet, smartphone). You could also export your style guide in PDF or print it directly. Guess what? All these are possible with Frontify Style Guide. A bunch of design & brand enthusiasts from Switzerland created this wonderful tool that you can use to create web based styles guides in minutes.

Let’s proceed

1. Sign up and create a new style guide

Sign up on their website and create your 1st style guide. Upload your logo, name your brand and define its color. You can create a style guide from scratch or use a predefined template (we have chosen this option, here you have 2 kind of templates: standard and advanced) or generate one from a website (requires a paid plan).

2. Include relevant data in dedicated sections

Once you create a new project you will be able to add relevant data about your brand and customize the visual appearance of your style guide. Here you can toggle between edit and view mode, customize the appearance of your layout (change fonts, background color and image, customize headings, etc.).

The data is classified into categories and pages, which you can find on the left side, in the sidebar. You can create new categories and pages + sections, that will be automatically assigned to related pages.

Adding new elements is super easy, you simply click on + button and select a predefined element from the list. It contains a vast number of different content blocks like: section, image, fonts, icons, colors and much more (the library is constantly updated). Each predefined element is designed to look accordingly and has dedicated options.

For example: if you want to add some colors that are used on your site, simply the “Colors” element from the list, include the HEX or RGB code of your colors and press Enter. They will be automatically added to your list of colors and will look nice. The same is with fonts, styles, icons and other elements, simply add them and include relevant data, the app will do the rest. Go through all the sections of your style guide and complete them, following the same procedure.

Note: Although there is an option to cut and paste an element, we didn’t find a way to rearrange diverse content blocks within sections (would be great if all the elements could be easily arranged with a drag and drop functionality).

3. Review and preview your style guide

Once you completed all the sections you can instantly preview your style guide by switching to view mode. You can also duplicate it or print it directly from your account (it’s created to look nice on print or digital format). Also, if you meet some difficulties you can read the app’s comprehensive documentation, or look at a real example of Frontify style guide. If you’re willing to suggest some features or ask some questions, a dedicated conversation box is available (the guys from Fontify will be happy to help you).

We tested the app and created a brief style guide for our brand. Here is what we got:

4. Share your style guide

Once your style guide is ready, you can share it with your colleagues or partners or make it public, so everyone can see it. Here you have 2 options:

a) Private – only your team members will see the guide. You can invite users by adding their email addresses and setting up the appropriate roles (owner, editor, viewer).

b) Public – your guide will be public and will be accessible by everyone who has the link. A premium feature is coming soon if you want to personalize the URL of your guide.

The layout of your style guide is responsive, so it will look nice on any kind of device.

The bottom line

The app is fast, intuitive and very customizable, you have tons of options. It will help you create elegant style guides faster. We tested it and liked it very much, the possibilities are practically endless, you can use it to represent different projects as well. It feels professional and has a solid framework + it provides a great user experience. We experienced some difficulties with arrangement and custom icons, everything else went smooth and nice. Hope to see it growing.