{"id":5080,"date":"2016-12-20T14:29:13","date_gmt":"2016-12-20T14:29:13","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=5080"},"modified":"2020-11-30T10:22:17","modified_gmt":"2020-11-30T10:22:17","slug":"style-guides-better-design-development","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/style-guides-better-design-development\/","title":{"rendered":"Style Guides for Better Design and Development"},"content":{"rendered":"

Style guides can give many benefits to the entire workflow, from design right through to build.<\/p>\n

In short\u2026<\/h2>\n

During the design phase style guides<\/a> encourage consistency in the visual identity and help keep the interface system as logical as possible, which makes for a better UX.<\/p>\n

<\/div>
<\/svg><\/div>

\"During the design phase style guides encourage consistency.\"<\/p><\/span><\/blockquote>\n

During the development phase they streamline the transition from design to development as they minimise build errors and help encourage modular development best practices.<\/p>\n

<\/div>
<\/svg><\/div>

\"During the development phase style guides streamline the transition from design to development.\"<\/p><\/span><\/blockquote>\n

Further to this, style guides can be converted into \u2018living front end style guides\u2019 which help make future updates and site maintenance more manageable due to a cleaner, more modular and structured codebase.<\/p>\n

As a bonus both the style guide and living front end style guide can be used as a project deliverable and a way to better communicate the UI identity to your team and your client.<\/p>\n

Designing interfaces<\/h2>\n

When designing an interface it needs to be consistent and logical. We need to create a clear taxonomy with appropriate affordances to give the best user experience (UX). Or put simply, the interface needs to make sense.<\/p>\n

When we design an interface we aren't designing pages, or panels, we are creating a design system of elements and components that will be used in various combinations. If we keep this in mind we can create a truly fluid and flexible interface system.<\/p>\n

We can use style guides to abstract and breakdown our designs into modular scalable elements and components, that can work together to form a congruous system.<\/p>\n

When interfaces aren't thought of as a design system we can end up with messy and inconsistent interfaces that are very confusing for the user:<\/p>\n

\n

@brad_frost<\/a> ????<\/p>\n

\u2014 Gavin (@gavinwassung) April 1, 2016<\/a><\/p><\/span><\/blockquote>\n