All the small things

Working on the design of the Alphas & beyond…

How & why are we makingour design decisions?

Design pages

/about.html

- A rigid page

- A bespoke design

- A single width

- A single device

Design pages

Try viewing it on:

- A tablet? - A mobile device? - A TV? - A smartwatch?

Design pages

A fridge?Thanks very much Internet of things :-(

Design systems

Adaptable / flexible / reusable

Brand area

Main navigation

Hero

Article

Design systems

Small, discreet elements of functionality

Design systems

Modules adapt to their location & context

So where do we start? We start small.

We start with the most commonly used element on the web*

* I can find no stats to corroborate this but I type it a lot so it must be popular

The humble <p>

Design driven by content

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Itaque his sapiens semper vacabit. Lorem ipsum dolor

125px

25px

Vertical rhythm

Vertical rhythm

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

More information

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

Title Title Title

Vertical rhythm

Many, many different design & frontend methodologies…

- Atomic design

- BEM

- SMACSS

Cool name?