Upload
dandineenuob
View
93
Download
0
Embed Size (px)
Citation preview
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?