Despite all the research and surveys, when you launch your startup, you still have no idea what customers want. The only way to find out is to pivot and adjust your product every chance you get. But this eventually results in a cluster of code and inconsistent styles that will very quickly become unmaintainable.
How do we make sure that our app looks gorgeous even after months of iterations? How can we make sure that everything’s still consistent, without hiring a designer every time a change has been made to the interface?
If you want to get started with style tiles (or guides) quickly, grab our free template!
Large companies have been using large, multi-page documents called “branding guidelines” (sometimes also “style guidelines” or just “style guides”) for decades. These documents keep everyone on team updated and informed about how should company’s branding be used. From the secretary to developers, all follow the same rules.
Why not use the same approach with startups?
This short document created by HookFeed saves them time and money every time they need to make a change to the app. The developers on the team can simply take the guidelines and apply them to the tweaks, without too much back-and-forth with the designer. The interface stays consistent and beautiful and everyone’s happy:
The cost of this deliverable is typically in the hundreds (not the thousands) and any developer you work with should be able to execute your product according to the style guide (if not – look for a new developer).
– Matt Goldman, Founder of SmallHQ
Get started with style guides
Style guides for startups can be much leaner than those for Starbucks or Apple. Smaller teams typically require less guidance due to better inside communication. It’s best, actually, if your startup’s style guides are only a single page long. This way you’ll be sure that everyone on the team looked it through.
When should you start developing style guides? The best time is really right at the beginning of a project. While the logo design is still fresh in your (or the designer’s) mind, that is the best time to also think about what fonts and colours to combine it with.
The elements in the style guides need to be universal and give enough freedom to whomever will be applying them, while also being quite firm and strict. Think about the purpose of each element you add to the guides and add short explanations:
- What is this button used for? What if it’s disabled?
- Will this colour be universally used for “success” or “error” feedback?
- Which font will always be used for body text?
Whatever’s in the guides must be modular. You should be able to take anything and move it somewhere else or apply it to another element.
This will also help keep guides maintainable. Just like the rest of your app, these will eventually need to be tweaked and added to. Make sure your CSS classes don’t overlap, and to think about the future features you might need. I shouldn’t really have to say this, but in order to keep your guides future-proof, make every element responsive.
What to include in style guides
At the very least, your guidelines should include colour palette, logo sizing and spacing, and fonts to be used. This will typically be all you need for a non-software startup.
However, if you want to set some ground rules for the UI design as well, you’ll also need various button states, success and error messages, form elements, and anything else that may come in handy.
It’s best to combine all the examples with a short explanatory text. For a typical SaaS startup, you’ll need to define the following:
Branding
Give some examples of how should the logo be used. Can the logo be black and white? Can some colours be adjusted, depending on the background? Set the smallest allowed logo size and how much space should be around it at all times. Provide RGB and CMYK colour values of the logo.
Colour Palette
Along with the colours in the logo, can they be combined with any other? Think about how to colour-code functions in the interface. Which colour will be used for “success” messages?
Typography
Define what font families and the sizes for headers, paragraphs, block quotes, and form elements should be used. Think about how will in-text links, bold, and italics look. Along with the typography, you can also define icons: which icon set or style should be used?
Form Elements
Define the styling for all form elements. Show examples and color codes for submit buttons, form buttons, info buttons, as well as form fields. Think about validation: how will you let the user know about an error in the form?
Hierarchy
How do headers, images, titles, paragraphs and other elements relate to each other? Provide a few examples that define the visual hierarchy.
Images
Images can be super-important to create a sense of consistency if done right. Do you want to only use black-and-white photos? Make all of them square? Provide examples as well as some explanation for these as well.
Tools to use
The tools that you can use to produce style guides are as varied as the types of style guides we can produce. A basic pdf can be created using any graphic design software out there, but if you’re looking for something more advanced, the Sketch app offers two unique features — shared “Symbols” and “Styles”. These let you set up your style guides in one page, and use them right away in a mockup on another — both get updated every time you make a change. This way, you can instantly see how the styles apply in real-time and are able to adjust them on-the-go.
If you already have a website but want to streamline your processes and generate a style guide out of the existing CSS, you can use one of the generators, like StylifyMe or PatternLab. These will not give you the “ready-to-go” guides, but they will extract most of the elements and styles that you need to get started. At the very worst, they will point out inconsistencies in your site’s colours and fonts.
The ultimate solution is to develop CSS style guides that basically allow modular code to be simply copied and pasted where it’s needed. This requires a little more time up-front but can be immensely helpful for rapid in-the-browser design.
It’s important that you take good care of style guides; if there has been a change made in the design, this change must be added to the guides asap. That’s the only way we can make sure that they will continue to be useful in the future.
If you want to get started with this technique right away, I’ve prepared a template for you to download. Head over to the download page!
Design, but simple.
My popular design ebook is now on sale. Don't miss out!
