The document discusses the need for a new design process called "atomic design" in the post-PSD era. It outlines some of the problems with the traditional pixel-perfect PSD workflow and presents atomic design as an alternative. Atomic design involves designing systems rather than pages by breaking interfaces down into reusable atomic elements like atoms, molecules and organisms. This allows for faster, more collaborative and responsive design processes.

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?

6. once upon a time
the PSD era

7. we designed
pages

8. pixel-perfect
pages

11. standard web designer’s
workflow

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

13. PSD
FULL-COMP
MOCKUP
DESIGNER

14. “ want a banner here”

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

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

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

18. It’s a
pathetic process

19. • focused on details

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

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

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

24. pixel perfect design

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

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

27. we have to rethink
our design process

28. welcome to
the Post PSD Era

29. 1 set the
right expectations

30. expectations
• client
• team
• personal

31. collaboration
& conversation
not presentation 2

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

34. design systems
not pages3

35. what’s a
design system?

36. PAUL RAND
1914-1996

40. a design system
is a language

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

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

43. how should I
design a system?

44. style ti1les

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

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

50. good
• speedy visual development
of ideas

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

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

53. not good
• vague

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

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

56. style gu2ides

65. good
• structured workflow

66. good
• structured workflow
• shared vocabulary

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

68. not good
• time consuming

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

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

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

72. design in the browser
with frameworks 3

74. good
• build a prototype

75. good
• build a prototype
• easy to test

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

77. not good
• unneeded stuff

78. not good
• unneeded stuff
• hard to customize

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

80. ?

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

85. atoms

86. building blocks
abstract
global styles
atoms

87. colors

88. typography

90. images

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

92. molecules

93. group of atoms
concrete
do one thing well
molecules

94. Search the site
Type a text… Search

96. PROGRAMMA REGISTRAZIONE SPONSOR CONTATTI BLOG

98. organisms

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

103. templates

104. context
HTML
increase fidelity
production code
templates

107. pages

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

109. CONCRETE
ABSTRACT
pages
templates
organisms
molecules
atoms

110. CONCRETE
ABSTRACT
pages
templates
organisms
molecules
atoms

111. i loved this

112. i loved this. do it.

113. sketch the
site-wide
templates 1

117. set molecules & organisms
directly in your browser

119. establish
the visual direction 2

120. design tool & deliverables
• 20 second gut test

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

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

123. style
tiles
element
collage

124. design atmosphere

128. iterative
improvement

131. add context

133. WEBSITE.COM
WEBSITE.COM
WEBASRICTHEIV.CE OM

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

135. craft pages
when needed

137. get design
in your 3 browser

140. TEST, TEST, TEST

141. it worked!

142. slowly
built fidelity

143. dramatically reduced
page design iterations

144. worked in parallel

145. client
loved this method

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

147. what future?

148. nobody
is an expert

149. experiment

150. build your own
design process

151. share

152. thank you
Francesco Improta
@zetareticoli
designabile.com