Third Mind | Be a Leader or Sit Back and Follow
2677
post-template-default,single,single-post,postid-2677,single-format-standard,ajax_leftright,page_not_loaded,,qode-title-hidden,side_area_uncovered_from_content,transparent_content,qode-child-theme-ver-1.0.0,qode-theme-ver-10.0,wpb-js-composer js-comp-ver-4.12,vc_responsive

Be a Leader or Sit Back and Follow

Matryoshka Dolls

Code Style Guidelines: documentation explaining how your code bridges the gap between designers, developers and clients.  These set guidelines are meant to help everyone on your team to write consistent cohesive code. We recommend including Pattern Libraries within your code style guide. Pattern Libraries are the collections of your user interface (UI) components, navigation, buttons, drop downs, icons, product tiles, sidebar filers, etc. They will help articulate everything that goes into making up your user interface.

A website can be made up of many complex pieces. You have multiple pages, images, maybe some JavaScript, and it all needs to come together to create this larger experience. But as with things in nature, it can be broken down even further than that into more “atomic” elements. Brad Frost, Website designer extraordinaire, has used this analogy to develop his Atomic Design process.

Atomic Design is composed of five distinct stages working together to create deliberate interface design systems. These five distinct stages listed below work together to produce effective user interface design systems.

Atoms: UI elements that can’t be broken down any further and serve as the elemental building blocks of an interface.

Molecules: collections of atoms that form relatively simple UI components.

Organisms: relatively complex components that form discrete sections of an interface.

Templates: place components into a page layout and demonstrate the design’s underlying content structure.

Pages:  apply real content to templates and articulate variations to demonstrate the final UI and test the resiliency of the design system.


Watch Brad Frost’s presentation to learn how to create a sound UI design system and visit patternlab.io, which provides open source tools that walk you through the process of creating Pattern Libraries.

Check out Pattern Library examples by; MailChimp, Starbucks, Apple, and Dropbox