#bradfrost

[sonyaaaj]

STYLE GUIDES 

WEEK 4

This week in class we learnt about style tiles. Here are my notes on style tiles:

What should style tiles include? 

Specific overall responsive design structural patterns and grids 

Include code snippets for implementation, hidden in accordions 

Include UI component variations, and indicate appropriate context of use for each

For each component, include detail specifications for spacing and sizing

Specific visual standards in appropriate formats 

specific typography styles (Typeface, size, weight, foundry, line spacing/leading, kerning/tracking)

Components for a style guide:

Buttons 

button groups 

breadcrumbs

cards

tables

dialogs

grid lists of content, media, or photos

vertical lists

navigational menus

date and time pickers

progress and loading indicators

checkboxes

radio buttons

drop-down menus

sliders

on-off switches

numeric input steppers

form fields

tabs

toolbars

tooltips

alert modals

icons

animations 

tokens

Style guides: Info and examples of how things should be done consistency across sites. Can be visual or can be for language.

Pattern libraries: include UI elements like forms and buttons and when to use.

Component libraries: are pattern libraries plus code.

Popular tools are bootstrap, foundation, or semantic UI.

Why have them?

Time saver, better design, consistency in design code and brand, and increased team communication.

BRADFROST ATOMIC DESIGN:

Atomic design is methodology for creating design systems. There are five distinct levels in atomic design:

Atoms: basic building blocks of matter, atoms are HTML tags, such as a form label, an input or a button. Can include elements like colour patterns and fonts or even animations. You can see your global style laid out at a glance.

Molecules: the backbone of our design system when combined. Example: a form label, input or button aren’t useful by themselves, but combine them as a forma and now they can actually do something together, like a search bar.

Organisms: Molecules give us some building blocks to work with, and we can now combine them together to form organisms. Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface. This might look like a menu bar at the top of a website.

Templates: This is where we break the chemistry analog to get into language that makes more sense to our clients and our final input. This is where we start to see the design come together and start to see layouts in action. Templates are when clients start seeing the final design, and often begin as wireframes and build in fidelity.

Pages: Placeholder content is replaced with real representation content to give an accurate representation of what the user will see. Here we can test a few iterations, and loops back to specific elements if anything needs to be fixed.

Why atomic design?

Provides a clear methodology for crafting design systems. Also helps to give consistency throughout the design.

Interface inventories:

These show how bad some websites are when creating their buttons and states.

These two example shows serious design inconsistency:

Where as the next screen shot (Etsy) shows great visual consistency:

[simonelishman-blog]

Development is Design: Bradfrost 07/10/13

Brad talks about the divide between design and development and how companies do not recognise this. HTML and CSS development is DESIGN. Front end developers should also be involved in the design process, they are not restricted to just code. A lot of companies now a days do not realise this.

Brad talks about the wall between web designers and front end developers and how they need to come together. This is so true because each job role is required when making a brilliant website. The competitiveness need to be dropped!

[litwinski]

Brad Frost – Atomic Design – beyond tellerrand 2013

[benspopshop]

Check out this video and Brad Frosts Pattern Lab

Brad Frost – Atomic Design – beyond tellerrand 2013

[fiderweb]

Brad Frosts version of the pattern library.

[fiderweb]

RGA's version of the pattern library.