1.
ATOMIC DESIGN
a problem of expectations
@zetareticoli

2.
Francesco
Improta

3.
any designers
in the room?

4.
“
Can you send me
a preview of the site?

5.
once upon a time
the PSD era

6.
we designed
pages

7.
pixel-perfect
pages

8.
standard web designer’s
workflow

9.
“
Can you send me
a preview of the site?

10.
PSD
FULL-COMP
MOCKUP
DESIGNER

11.
“ want a banner here”

12.
“want a banner here”
“this up…”

13.
“want a banner here”
“…and this
down”
“this up…”

14.
“want a banner here”
“…and this
down”
“this up…”
“hmm, there’s too
white…”

15.
It’s a
pathetic process

16.
• focused on details

17.
• focused on details
• you ‘re doing a presentation of your
mockups

18.
• focused on details
• you ‘re doing a presentation of your
mockups
• static mockups, no interactions

19.
• focused on details
• you ‘re doing a presentation of your
mockups
• static mockups, no interactions
• time consuming

20.
pixel perfect design

21.
“
A responsive design process
is like a scandal.
–Dan Mall

22.
http://opensignal.com/reports/fragmentation-2013/

23.
we have to rethink
our design process

24.
welcome to
the Post PSD Era

25.
1 set the
right expectations

26.
expectations
• client
• team
• personal

27.
collaboration
& conversation
not presentation 2

28.
“
But we can't sell web sites
like paintings
–Brad Frost

29.
design systems
not pages3

30.
what’s a
design system?

31.
PAUL RAND
1914-1996

32.
a design system
is a language

33.
• typography
• colors
• grid & layout
• shapes

34.
HTTP://DAVERUPERT.COM/2013/04/RESPONSIVE-DELIVERABLES/

35.
how should I
design a system?

36.
style ti1les

37.
“
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

38.
“
Your client should not be
expecting you to present a full
design comp.
–Samantha Warren

39.
good
• speedy visual development
of ideas

40.
good
• speedy visual development
of ideas
• feedback ready

41.
good
• speedy visual development
of ideas
• feedback ready
• ideal for responsive workflow

42.
not good
• vague

43.
not good
• vague
• don’t match expectations

44.
not good
• vague
• don’t match expectations
• lack global vision

45.
style gu2ides

46.
good
• structured workflow

47.
good
• structured workflow
• shared vocabulary

48.
good
• structured workflow
• shared vocabulary
• useful reference

49.
not good
• time consuming

50.
not good
• time consuming
• created after project launch

51.
not good
• time consuming
• created after project launch
• auxiliary project

52.
not good
• time consuming
• created after project launch
• auxiliary project
• internal tool

53.
design in the browser
with frameworks 3

54.
good
• build a prototype

55.
good
• build a prototype
• easy to test

56.
good
• build a prototype
• easy to test
• faster development

57.
not good
• unneeded stuff

58.
not good
• unneeded stuff
• hard to customize

59.
not good
• unneeded stuff
• hard to customize
• using someone else
structure, naming, style

60.
?

61.
BRAD FROST
—
ATOMIC DESIGN ELEMENTS
http://bradfrostweb.com/blog/post/atomic-web-design/

62.
atoms

63.
building blocks
abstract
global styles
atoms

64.
colors

65.
typography

66.
images

67.
Label text
Placeholder text
BUTTON TEXT
Option 1
Option 2
Option 3
form

68.
molecules

69.
group of atoms
concrete
do one thing well
molecules

70.
Search the site
Type a text… Search

71.
PROGRAMMA REGISTRAZIONE SPONSOR CONTATTI BLOG

72.
organisms

73.
distinct section
group of molecules
ready for visual
exploration
standalone, portable
elements
organisms

74.
templates

75.
context
HTML
increase fidelity
production code
templates

76.
pages

77.
specific instance of a
template
highest fidelity
system
effectiveness
make client happy
pages

78.
CONCRETE
ABSTRACT
pages
templates
organisms
molecules
atoms

79.
CONCRETE
ABSTRACT
pages
templates
organisms
molecules
atoms

80.
i loved this

81.
i loved this. do it.

82.
sketch the
site-wide
templates 1

83.
set molecules & organisms
directly in your browser

84.
establish
the visual direction 2

85.
design tool & deliverables
• 20 second gut test

86.
design tool & deliverables
• 20 second gut test
• visual inventory

87.
design tool & deliverables
• 20 second gut test
• visual inventory
• element collages

88.
style
tiles
element
collage

89.
design atmosphere

90.
iterative
improvement

91.
add context

92.
WEBSITE.COM
WEBSITE.COM
WEBASRICTHEIV.CE OM

93.
first do it,
then do it right,
then do it better.

94.
craft pages
when needed

95.
get design
in your 3 browser

96.
TEST, TEST, TEST

97.
it worked!

98.
slowly
built fidelity

99.
dramatically reduced
page design iterations

100.
worked in parallel

101.
client
loved this method

102.
• be involved in design process
• recognized work’s value
• received stuff every week

103.
what future?

104.
nobody
is an expert

105.
experiment

106.
build your own
design process

107.
share

108.
thank you
Francesco Improta
@zetareticoli
designabile.com