{"id":9824,"date":"2015-11-12T23:27:38","date_gmt":"2015-11-12T23:27:38","guid":{"rendered":"http:\/\/proxystudio.uxpin.com\/?p=9824"},"modified":"2024-05-20T21:29:23","modified_gmt":"2024-05-21T04:29:23","slug":"3-mini-style-guides-to-get-you-started","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/3-mini-style-guides-to-get-you-started\/","title":{"rendered":"3 Mini Style Guides to Get You Started"},"content":{"rendered":"

The three \u201clite\u201d style guides that we talk about here aren\u2019t perfect replacements for a full, front-end style guide. They can be used as either time-savers, or better yet complements to a more complete style guide that comes later.<\/p>\n

\"Photo<\/p>\n

Photo Credit: \u201cDiscussing the mood boards<\/a>.\u201d foam.
\nCreative Commons<\/a>.<\/p>\n

For example, front-end guides can\u2019t match the creative and atmospheric benefits of mood boards, which are much more useful in the \u00a0earlier stages of the design process. In the later stages, though, developers won\u2019t be able to copy-and-paste code from a mood board.<\/p>\n

If you have the time, start with these three, then expand them into complete style guides.<\/p>\n

1. Mood Boards<\/h2>\n

Mood boards are the most artistic, but most abstract, of all style guides. They specialize in setting an project\u2019s atmosphere and artistic style but little else aside from that. What they lack in technical details, they make up for in concept exploration.<\/p>\n

Popularized by industries such as fashion and interior design, these stylistic collages have been proven effective across many visual industries, including web UI design.<\/p>\n

Mood boards work best at the beginning of the design process: they aid in the inspiration and exploration of ideas, at a time when ideas are most needed. An eye-pleasing mood board will keep the entire team moving in the same direction before more substantial style decisions come into fruition. However, as more consistent frameworks develop throughout the design process, the mood board loses effectiveness.<\/p>\n

\"Samples<\/p>\n

Photo credit: Duoh<\/a><\/p>\n

In addition to helping you think about consistency early in design, mood boards are also great for design collaboration. Since clients and stakeholders may have difficulty articulating the details of their ideas, mood boards provide a clear visual direction for productive feedback.<\/p>\n

To learn more about mood boards, check out this list of 24 pro tips<\/a>. When you\u2019re ready to start, here\u2019s a list of helpful tools<\/a>.<\/p>\n

Join the world's best designers who use UXPin.<\/h2>Sign up for a free trial.<\/span>Try it for free!<\/a><\/section>\n

2. Style Tiles<\/h2>\n

Style tiles are a transitional style guide more specific than mood boards, but lacking the intricacy of brand or front-end guides.<\/p>\n

The inventor of style tiles, designer Samantha Warren, describes them as a way to<\/a> \u201cestablish a direct connection with actual interface elements without defining layout,\u201d and that they, \u201cwork well for clients who have established brands and need them to translate smoothly to the web.\u201d<\/p>\n

\"Screenshot<\/p>\n

Source: Samantha Warren, StyleTil.es<\/a>.
\nCreative Commons Attribution-NonCommercial 3.0 Unported License<\/a>.<\/p>\n

As you can see in Warren\u2019s example, style tiles maintain the same collage look and feel of a mood board, but with more concrete information. Notice how the style tile provides details like typeface, font treatment, and recommended patterns.<\/p>\n

Because they\u2019re quick to make, style tiles work when first determining a site or app\u2019s visual style, or when considering a redesign. If done well, style tiles can even replace mockups as a visual representation of the site or app\u2019s theme.<\/p>\n

Even if you need something meatier, this Compass extension can help you turn style tiles into a more complete style guide<\/a>. Installation instructions are on the site.<\/p>\n

3. Brand Style (Identity) Guides<\/h2>\n

Deviating from posters to manuals, the brand style or identity guide lists out all the rules and standards for a company\u2019s brand. Extending far beyond simply the logo, it will affect the entire brand identity on websites\/apps, advertising, business cards, public forums \u2013 anywhere, really.<\/p>\n

Brand style guides will include design details such as fonts, colors, sizes, iconography, and logo placement. Aside from consistency, their overarching purpose is defining the personality of the brand \u2013 whether the tone is smart or sassy, or whether the first impression should be rugged or refined.<\/p>\n

The brand style guide is like a Magna Carta that protects your identity, preventing less familiar employees from diluting your impact through poorly executed visuals. They cover any usage specifications concerning the brand, including:<\/p>\n