Advertisement
Check these out next
Atomic design, a problem of expectations
Oct. 15, 2014•0 likes•2,012 views
7 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Design
We've focused on designing Web pages for long time. Pixel perfection & designing the same experience for all devices is not possible. Instead of page-based designs. We need design systems. Atomic design allows us to traverse from abstract to concrete. Creators can focus on the atoms and molecules and Clients can focus on pages and templates.
Francesco ImprotaFollow
Head of Design at Citynews spaAdvertisement
Advertisement
Advertisement
Recommended
Better. Faster. UXier. — AToMIC Designjennifer gergen
Atomic designBryan Wengren
To the Pattern Lab! Better Collaboration in Drupal Using Atomic Design Princi...Daniel Ferro
Use atomic design ftwGiantJohnPepper
Creating Living Style Guides to Improve PerformanceNicole Sullivan
So…What Do I Make? (Dan Mall)Future Insights
Atomic design, a problem of expectations
- ATOMIC DESIGN a problem of expectations @zetareticoli
- Francesco Improta
- any designers in the room?
- “ Can you send me a preview of the site?
- once upon a time the PSD era
- we designed pages
- pixel-perfect pages
- standard web designer’s workflow
- “ Can you send me a preview of the site?
- PSD FULL-COMP MOCKUP DESIGNER
- “ want a banner here”
- “want a banner here” “this up…”
- “want a banner here” “…and this down” “this up…”
- “want a banner here” “…and this down” “this up…” “hmm, there’s too white…”
- It’s a pathetic process
- • focused on details
- • focused on details • you ‘re doing a presentation of your mockups
- • focused on details • you ‘re doing a presentation of your mockups • static mockups, no interactions
- • focused on details • you ‘re doing a presentation of your mockups • static mockups, no interactions • time consuming
- pixel perfect design
- “ A responsive design process is like a scandal. –Dan Mall
- http://opensignal.com/reports/fragmentation-2013/
- we have to rethink our design process
- welcome to the Post PSD Era
- 1 set the right expectations
- expectations • client • team • personal
- collaboration & conversation not presentation 2
- “ But we can't sell web sites like paintings –Brad Frost
- design systems not pages3
- what’s a design system?
- PAUL RAND 1914-1996
- a design system is a language
- • typography • colors • grid & layout • shapes
- HTTP://DAVERUPERT.COM/2013/04/RESPONSIVE-DELIVERABLES/
- how should I design a system?
- style ti1les
- “ Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web. –Samantha Warren
- “ Your client should not be expecting you to present a full design comp. –Samantha Warren
- good • speedy visual development of ideas
- good • speedy visual development of ideas • feedback ready
- good • speedy visual development of ideas • feedback ready • ideal for responsive workflow
- not good • vague
- not good • vague • don’t match expectations
- not good • vague • don’t match expectations • lack global vision
- style gu2ides
- good • structured workflow
- good • structured workflow • shared vocabulary
- good • structured workflow • shared vocabulary • useful reference
- not good • time consuming
- not good • time consuming • created after project launch
- not good • time consuming • created after project launch • auxiliary project
- not good • time consuming • created after project launch • auxiliary project • internal tool
- design in the browser with frameworks 3
- good • build a prototype
- good • build a prototype • easy to test
- good • build a prototype • easy to test • faster development
- not good • unneeded stuff
- not good • unneeded stuff • hard to customize
- not good • unneeded stuff • hard to customize • using someone else structure, naming, style
- ?
- BRAD FROST — ATOMIC DESIGN ELEMENTS http://bradfrostweb.com/blog/post/atomic-web-design/
- atoms
- building blocks abstract global styles atoms
- colors
- typography
- images
- Label text Placeholder text BUTTON TEXT Option 1 Option 2 Option 3 form
- molecules
- group of atoms concrete do one thing well molecules
- Search the site Type a text… Search
- PROGRAMMA REGISTRAZIONE SPONSOR CONTATTI BLOG
- organisms
- distinct section group of molecules ready for visual exploration standalone, portable elements organisms
- templates
- context HTML increase fidelity production code templates
- pages
- specific instance of a template highest fidelity system effectiveness make client happy pages
- CONCRETE ABSTRACT pages templates organisms molecules atoms
- CONCRETE ABSTRACT pages templates organisms molecules atoms
- i loved this
- i loved this. do it.
- sketch the site-wide templates 1
- set molecules & organisms directly in your browser
- establish the visual direction 2
- design tool & deliverables • 20 second gut test
- design tool & deliverables • 20 second gut test • visual inventory
- design tool & deliverables • 20 second gut test • visual inventory • element collages
- style tiles element collage
- design atmosphere
- iterative improvement
- add context
- WEBSITE.COM WEBSITE.COM WEBASRICTHEIV.CE OM
- first do it, then do it right, then do it better.
- craft pages when needed
- get design in your 3 browser
- TEST, TEST, TEST
- it worked!
- slowly built fidelity
- dramatically reduced page design iterations
- worked in parallel
- client loved this method
- • be involved in design process • recognized work’s value • received stuff every week
- what future?
- nobody is an expert
- experiment
- build your own design process
- share
- thank you Francesco Improta @zetareticoli designabile.com
Advertisement