show & tell - all the small things
TRANSCRIPT
![Page 1: Show & tell - All the small things](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58f15bf91a28ab616c8b45e3/html5/thumbnails/1.jpg)
All the small things
![Page 2: Show & tell - All the small things](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58f15bf91a28ab616c8b45e3/html5/thumbnails/2.jpg)
Working on the design of the Alphas & beyond…
How & why are we makingour design decisions?
![Page 3: Show & tell - All the small things](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58f15bf91a28ab616c8b45e3/html5/thumbnails/3.jpg)
![Page 4: Show & tell - All the small things](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58f15bf91a28ab616c8b45e3/html5/thumbnails/4.jpg)
![Page 5: Show & tell - All the small things](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58f15bf91a28ab616c8b45e3/html5/thumbnails/5.jpg)
Design pages
/about.html
![Page 6: Show & tell - All the small things](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58f15bf91a28ab616c8b45e3/html5/thumbnails/6.jpg)
- A rigid page
- A bespoke design
- A single width
- A single device
Design pages
![Page 7: Show & tell - All the small things](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58f15bf91a28ab616c8b45e3/html5/thumbnails/7.jpg)
Try viewing it on:
- A tablet? - A mobile device? - A TV? - A smartwatch?
Design pages
![Page 8: Show & tell - All the small things](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58f15bf91a28ab616c8b45e3/html5/thumbnails/8.jpg)
A fridge?Thanks very much Internet of things :-(
![Page 9: Show & tell - All the small things](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58f15bf91a28ab616c8b45e3/html5/thumbnails/9.jpg)
Design systems
![Page 10: Show & tell - All the small things](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58f15bf91a28ab616c8b45e3/html5/thumbnails/10.jpg)
Adaptable / flexible / reusable
Brand area
Main navigation
Hero
Article
Design systems
Small, discreet elements of functionality
![Page 11: Show & tell - All the small things](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58f15bf91a28ab616c8b45e3/html5/thumbnails/11.jpg)
Design systems
Modules adapt to their location & context
![Page 12: Show & tell - All the small things](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58f15bf91a28ab616c8b45e3/html5/thumbnails/12.jpg)
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
![Page 13: Show & tell - All the small things](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58f15bf91a28ab616c8b45e3/html5/thumbnails/13.jpg)
The humble <p>
![Page 14: Show & tell - All the small things](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58f15bf91a28ab616c8b45e3/html5/thumbnails/14.jpg)
Design driven by content
![Page 15: Show & tell - All the small things](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58f15bf91a28ab616c8b45e3/html5/thumbnails/15.jpg)
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Itaque his sapiens semper vacabit. Lorem ipsum dolor
125px
25px
Vertical rhythm
![Page 16: Show & tell - All the small things](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58f15bf91a28ab616c8b45e3/html5/thumbnails/16.jpg)
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
![Page 17: Show & tell - All the small things](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58f15bf91a28ab616c8b45e3/html5/thumbnails/17.jpg)
Vertical rhythm
![Page 18: Show & tell - All the small things](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58f15bf91a28ab616c8b45e3/html5/thumbnails/18.jpg)
Many, many different design & frontend methodologies…
- Atomic design
- BEM
- SMACSS
Cool name?