Embed Size (px)
DESCRIPTION
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.
Citation preview
a problem of expectations
ATOMIC DESIGN
@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?
“
DESIGNER
PSD FULL-COMP MOCKUP
“ want a banner here”
“want a banner here”
“this up…”
“want a banner here”
“this up…”
“…and this down”
“want a banner here”
“this up…”
“…and this down”
“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
–Dan Mall
A responsive design process is like a scandal.
“
we have to rethink
our design process
welcome to
the Post PSD Era
1set the
right expectations
expectations
• client
• team
• personal
collaboration& conversation not presentation2
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 tiles1
–Samantha Warren
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.
“
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 guides2
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 frameworks3
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
?
http://bradfrostweb.com/blog/post/atomic-web-design/
BRAD FROST—
ATOMIC DESIGN ELEMENTS
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
ABSTRACT
CONCRETE
atoms
molecules
organisms
templates
pages
ABSTRACT
CONCRETE
atoms
molecules
organisms
templates
pages
i loved this
i loved this. do it.
sketch the
site-wide templates1
set molecules & organisms directly in your browser
establish
the visual direction2
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
WEBSITE.COMARCHIVE
first do it, then do it right, then do it better.
craft pages
when needed
3get design
in your 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
designabile.com
@zetareticoli
