Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
hello
@SamanthaToy
Dilemma
THE WEB DESIGNER’S
Clients
Efficiency
Work Everywhere
System
CONTENT 

MANAGEMENT
DESIGNERS PRESENT MULTIPLE FIXED
WIDTH COMPS TO CLIENTS
DESIGNERS PRESENT MULTIPLE FIXED
WIDTH COMPS TO CLIENTS
DESIGNERS PRESENT MULTIPLE FIXED
WIDTH COMPS TO CLIENTS
Stop!!!!
FRANKENCOMP
Why?
THERE HAD TO BE
!
A Better Way
STYLE TILE
Style Tiles are a design deliverable consisting of fonts,
colors and interface elements that communicate the
es...
not
PAGES
design
SYSTEMS
not
CANVAS IN
content
OUT
WORDS CAN MEAN
!
!
THINGS
Very Different
“NEWSY”
“NEWSY”
http://www.usatoday.com/
!
!
http://www.nytimes.com/
!
!
“CLEAN”
“CLEAN”
http://www.apple.com/
!
!
http:// jontangerine.com
!
!
“PLAYFUL”
“PLAYFUL”
http://www.PBSKids.com/
!
!
“PLAYFUL”
http://www.PBSKids.com/
!
!
http://kids.tate.org.uk/
!
!
Why?
MOODBOARD
For setting the “mood”. Best for when you
are discovering and establishing a new
identity for a client while des...
jaynawallace.com
jaynawallace.com
too vague
COMP/ MOCKUP
Jumping right to mocking up what the site
should look like. This works for really low
budgets or sites that a...
too precise
!
DESIGN ARTIFACT
A Better
!
OPEN HOUSE
The Architect’s
!
!
!
http://www.flickr.com/photos/samuraislice/2985048261
!
!
!
http://www.flickr.com/photos/samuraislice/2985914042
TYPOGRAPHY
COLORS
UI ELEMENTS
ADJECTIVESBUTTONS
LOGO HEADER TREATMENT
SEPARATES STYLE AND
STRUCTURE
DEVICE WIDTH AGNOSTIC
COMMUNICATION AROUND A
RESPONSIVE PROJECT
TYPOGRAPHY
COLORS
UI ELEMENTS
ADJECTIVESBUTTONS
LOGO HEADER TREATMENT
HOW
DESIGN IS ABOUT
Problem Solving
EDUCATE THROUGH
!
Design Process
GENERATE A DEFINITION
OF SUCCESS THAT 

IS SEPARATE FROM TASTE.
!
THE STYLE TILE
Process
1Step 2Step 3Step 4Step
Listen Interpret Define a
Visual Language
Iterate
HOW
LISTEN
HOW
1Step
2Step
3Step
4Step
TYPES OF
QUESTIONS
HOW
1Ste 2Ste 3Ste 4Ste
TYPES OF
QUESTIONS
Goal Oriented
Exploratory
Metaphor
Degree of
HOW
1Ste 2Ste 3Ste 4Ste
CLIENT SURVEY
?
?
?
?
HOLD A DESIGN
KICKOFF MEETING!
Have the stakeholders complete a survey
before the meeting or have everyone answer 

questi...
GOAL ORIENTED
What are the top 3 user goals in order of importance?
What are the top 3 business goals in order

of importa...
Ask Why?
GOAL ORIENTED
Generate an definition of success that 

is separate from taste.
HOW
1Ste 2Ste 3Ste 4Ste
EXPLORATORY
QUESTIONS
Who is the audience?
What are the websites of the competitors?
HOW
1Ste 2Ste 3Ste 4Ste
METAPHOR
QUESTIONS
Client’s Product/Service is like a .
If it were a , it would be a 

and why?
!
!
HOW
1Ste 2Ste 3Ste 4Ste
DEGREE OF
QUESTIONS
On a scale of 1 to 5 (One being weak and 5 being
strong) How strongly do you feel the site should be
?...
INTERPRET
HOW
1Step
2Step
3Step
4Step
COMMON THEMES
HOW
1Ste 2Ste 3Ste 4Ste
Identify
Blanket Adjectives
Patriotic
Authoritative
American
Readable/Publishing
HOW
1Ste 2Ste 3Ste 4Ste
AGGREGATE
!
!
FROM THE ANSWERS
HOW
1Ste 2Ste 3Ste 4Ste
Adjectives
Middle!
Personable
Reliable
Inviting
Modern
Friendly
Fun
Gary Sinise
Volkswagon
!
HOW
1Ste 2Ste 3Ste 4Ste
Different!
Curren...
BREAK DOWN
!
!
INTO SMALLER PIECES
HOW
1Ste 2Ste 3Ste 4Ste
Big Ideas
Unity
Harmony
Balance
Rhythm
Contrast
Emphasis
!
!
!
Line
Color
Shape
Form
Pattern
Space
Texture
ELEMENTS PRINCIPLES
HOW
1...
Normal
HOW
1Ste 2Ste 3Ste 4Ste
Happy
HOW
1Ste 2Ste 3Ste 4Ste
Sad
HOW
1Ste 2Ste 3Ste 4Ste
Aggressive
HOW
1Ste 2Ste 3Ste 4Ste
Whimsical
HOW
1Ste 2Ste 3Ste 4Ste
HUMANS MAKE SUBCONSCIOUS
ASSUMPTIONS BASED ON
!
!
HOW
1Ste 2Ste 3Ste 4Ste
Subtle Visual Cues
DEFINE A VISUAL LANGUAGE
HOW
1Step
2Step
3Step
4Step
MATCH ADJECTIVES
WITH VISUALS
HOW
1Ste 2Ste 3Ste 4Ste
SOFT
PEOPLE FOCUSSED
FRIENDLY
HAPPY
HOW
1Ste 2Ste 3Ste 4Ste
SOFT
PEOPLE FOCUSSED
FRIENDLY
HAPPY
HOW
1Ste 2Ste 3Ste 4Ste
SOFT
PEOPLE FOCUSSED
FRIENDLY
HAPPY
HOW
1Ste 2Ste 3Ste 4Ste
SOFT
PEOPLE FOCUSSED
FRIENDLY
HAPPY
HOW
1Ste 2Ste 3Ste 4Ste
SOFT
PEOPLE FOCUSSED
FRIENDLY
HAPPY
HOW
1Ste 2Ste 3Ste 4Ste
ITERATE
HOW
1Step
2Step
3Step
4Step
ITERATING ON A STYLE
!
!
THAN ITERATING
ON A COMP
HOW
1Ste 2Ste 3Ste 4Ste
More Efficient
!
STYLE TILES ARE
JUST ONE TOOL
“
“The role of the
designer is basically
that of a good host,
anticipating the needs
of the guest.”
!
!
~Charles Eames
!
INSTEAD OF PAGES
Design a System
Deliver a system
ELEMENT COMPONENT
COMPOUND
COMPONENT TEMPLATE COMPOSITION
ELEMENT
COMPONENT
COMPOUND
COMPONENT
“A beautiful design
system is about finding
the same balance of
consistency & variety.
!
!
~Yesenia Prez-Cruz
http://cognit...
EXAMPLE
If the Council on Communities was represented by
one celebrity spokesperson who would 

it be and why?
!
!
Pat Sayjak
Because we are consistent and friendly without being
too in the way of getting the job done.
!
!
Katy Perry
Because we have fun while doing a great job. We
develop relationships with our communities and bring
them joy.
!
Denzel Washington
In Training Day. Denzel Washington just gets Sh*t
done. No nonsense. That’s what we do, we go into
commu...
Middle!
Readable
Clear
Usable
Clean
White Space
Empowering
Toyota
Katy Perry
Different!
Bright
Fresh
Welcoming
Inviting
Pol...
Middle!
Readable
Clear
Usable
Clean
White Space
Empowering
Toyota
Katy Perry
!
Different!
Bright
Fresh
Welcoming
Inviting
P...
!
www.StyleTil.es
!
www.StyleTil.es
Thank You
@SamanthaToy
!
www.SamanthaToy.com
!
www.StyleTil.es
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Faster Design Decisions with Style Tiles
Upcoming SlideShare
Loading in …5
×

Faster Design Decisions with Style Tiles

WATCH a version of this from An Event Apart Austin 2013: https://vimeo.com/115992327

Website: http://styletil.es/

Illustrations by Garrett Miller. Give him a shoutout at @heyitsgarrett

Diving into responsive design projects can be daunting. Old design practices are cumbersome when thinking in terms of web systems that will span a wide variety of devices and dimensions. What if we had an artifact that not only helped us communicate with clients, but allowed for developers to jump into the project earlier? Style tiles are a design artifact consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web. They create a strong foundation early in the web design process for talking with clients, establishing a visual language, and working iteratively with developers. Learn how to apply design principles and bring confidence and agility to your process by using style tiles.

More from An Event Apart:
http://aneventapart.com/news/post/the-truth-about-style-tiles

Style Tiles and How They Work on A List Apart:
http://alistapart.com/article/style-tiles-and-how-they-work

The blog post that started it all:
http://badassideas.com/style-tiles-as-a-web-design-process-tool/

Project Page: https://www.behance.net/gallery/3656877/Style-Tiles

Follow me on Twitter @Samanthatoy
Follow Style Tiles on Twitter @StyleTiles

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Faster Design Decisions with Style Tiles

  1. 1. hello
  2. 2. @SamanthaToy
  3. 3. Dilemma THE WEB DESIGNER’S
  4. 4. Clients
  5. 5. Efficiency
  6. 6. Work Everywhere
  7. 7. System CONTENT 
 MANAGEMENT
  8. 8. DESIGNERS PRESENT MULTIPLE FIXED WIDTH COMPS TO CLIENTS
  9. 9. DESIGNERS PRESENT MULTIPLE FIXED WIDTH COMPS TO CLIENTS
  10. 10. DESIGNERS PRESENT MULTIPLE FIXED WIDTH COMPS TO CLIENTS Stop!!!!
  11. 11. FRANKENCOMP
  12. 12. Why?
  13. 13. THERE HAD TO BE ! A Better Way
  14. 14. STYLE TILE Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web. WHAT
  15. 15. not PAGES design SYSTEMS
  16. 16. not CANVAS IN content OUT
  17. 17. WORDS CAN MEAN ! ! THINGS Very Different
  18. 18. “NEWSY”
  19. 19. “NEWSY” http://www.usatoday.com/ ! ! http://www.nytimes.com/ ! !
  20. 20. “CLEAN”
  21. 21. “CLEAN” http://www.apple.com/ ! ! http:// jontangerine.com ! !
  22. 22. “PLAYFUL”
  23. 23. “PLAYFUL” http://www.PBSKids.com/ ! !
  24. 24. “PLAYFUL” http://www.PBSKids.com/ ! ! http://kids.tate.org.uk/ ! !
  25. 25. Why?
  26. 26. MOODBOARD For setting the “mood”. Best for when you are discovering and establishing a new identity for a client while designing a website. Concepts & emotions. 
 Works great for web startups. ! !
  27. 27. jaynawallace.com
  28. 28. jaynawallace.com
  29. 29. too vague
  30. 30. COMP/ MOCKUP Jumping right to mocking up what the site should look like. This works for really low budgets or sites that are being refined rather than redesigned. Works if expectations are set. ! !
  31. 31. too precise
  32. 32. ! DESIGN ARTIFACT A Better
  33. 33. ! OPEN HOUSE The Architect’s
  34. 34. ! ! ! http://www.flickr.com/photos/samuraislice/2985048261
  35. 35. ! ! ! http://www.flickr.com/photos/samuraislice/2985914042
  36. 36. TYPOGRAPHY COLORS UI ELEMENTS ADJECTIVESBUTTONS LOGO HEADER TREATMENT
  37. 37. SEPARATES STYLE AND STRUCTURE
  38. 38. DEVICE WIDTH AGNOSTIC
  39. 39. COMMUNICATION AROUND A RESPONSIVE PROJECT
  40. 40. TYPOGRAPHY COLORS UI ELEMENTS ADJECTIVESBUTTONS LOGO HEADER TREATMENT
  41. 41. HOW
  42. 42. DESIGN IS ABOUT Problem Solving
  43. 43. EDUCATE THROUGH ! Design Process
  44. 44. GENERATE A DEFINITION OF SUCCESS THAT 
 IS SEPARATE FROM TASTE. !
  45. 45. THE STYLE TILE Process 1Step 2Step 3Step 4Step Listen Interpret Define a Visual Language Iterate HOW
  46. 46. LISTEN HOW 1Step 2Step 3Step 4Step
  47. 47. TYPES OF QUESTIONS HOW 1Ste 2Ste 3Ste 4Ste
  48. 48. TYPES OF QUESTIONS Goal Oriented Exploratory Metaphor Degree of HOW 1Ste 2Ste 3Ste 4Ste
  49. 49. CLIENT SURVEY ? ? ? ?
  50. 50. HOLD A DESIGN KICKOFF MEETING! Have the stakeholders complete a survey before the meeting or have everyone answer 
 questions together. HOW 1Ste 2Ste 3Ste 4Ste
  51. 51. GOAL ORIENTED What are the top 3 user goals in order of importance? What are the top 3 business goals in order
 of importance? HOW 1Ste 2Ste 3Ste 4Ste
  52. 52. Ask Why?
  53. 53. GOAL ORIENTED Generate an definition of success that 
 is separate from taste. HOW 1Ste 2Ste 3Ste 4Ste
  54. 54. EXPLORATORY QUESTIONS Who is the audience? What are the websites of the competitors? HOW 1Ste 2Ste 3Ste 4Ste
  55. 55. METAPHOR QUESTIONS Client’s Product/Service is like a . If it were a , it would be a 
 and why? ! ! HOW 1Ste 2Ste 3Ste 4Ste
  56. 56. DEGREE OF QUESTIONS On a scale of 1 to 5 (One being weak and 5 being strong) How strongly do you feel the site should be ? ! ! HOW 1Ste 2Ste 3Ste 4Ste
  57. 57. INTERPRET HOW 1Step 2Step 3Step 4Step
  58. 58. COMMON THEMES HOW 1Ste 2Ste 3Ste 4Ste Identify
  59. 59. Blanket Adjectives Patriotic Authoritative American Readable/Publishing HOW 1Ste 2Ste 3Ste 4Ste
  60. 60. AGGREGATE ! ! FROM THE ANSWERS HOW 1Ste 2Ste 3Ste 4Ste Adjectives
  61. 61. Middle! Personable Reliable Inviting Modern Friendly Fun Gary Sinise Volkswagon ! HOW 1Ste 2Ste 3Ste 4Ste Different! Current Comprehensive Smart Stimulating Unexpected Polished BMW M5 Alex Trebek ! Same! Solid Insightful Conservative Self-assured Silver Serious Charlton Heston Cadillac !
  62. 62. BREAK DOWN ! ! INTO SMALLER PIECES HOW 1Ste 2Ste 3Ste 4Ste Big Ideas
  63. 63. Unity Harmony Balance Rhythm Contrast Emphasis ! ! ! Line Color Shape Form Pattern Space Texture ELEMENTS PRINCIPLES HOW 1Ste 2Ste 3Ste 4Ste
  64. 64. Normal HOW 1Ste 2Ste 3Ste 4Ste
  65. 65. Happy HOW 1Ste 2Ste 3Ste 4Ste
  66. 66. Sad HOW 1Ste 2Ste 3Ste 4Ste
  67. 67. Aggressive HOW 1Ste 2Ste 3Ste 4Ste
  68. 68. Whimsical HOW 1Ste 2Ste 3Ste 4Ste
  69. 69. HUMANS MAKE SUBCONSCIOUS ASSUMPTIONS BASED ON ! ! HOW 1Ste 2Ste 3Ste 4Ste Subtle Visual Cues
  70. 70. DEFINE A VISUAL LANGUAGE HOW 1Step 2Step 3Step 4Step
  71. 71. MATCH ADJECTIVES WITH VISUALS HOW 1Ste 2Ste 3Ste 4Ste
  72. 72. SOFT PEOPLE FOCUSSED FRIENDLY HAPPY HOW 1Ste 2Ste 3Ste 4Ste
  73. 73. SOFT PEOPLE FOCUSSED FRIENDLY HAPPY HOW 1Ste 2Ste 3Ste 4Ste
  74. 74. SOFT PEOPLE FOCUSSED FRIENDLY HAPPY HOW 1Ste 2Ste 3Ste 4Ste
  75. 75. SOFT PEOPLE FOCUSSED FRIENDLY HAPPY HOW 1Ste 2Ste 3Ste 4Ste
  76. 76. SOFT PEOPLE FOCUSSED FRIENDLY HAPPY HOW 1Ste 2Ste 3Ste 4Ste
  77. 77. ITERATE HOW 1Step 2Step 3Step 4Step
  78. 78. ITERATING ON A STYLE ! ! THAN ITERATING ON A COMP HOW 1Ste 2Ste 3Ste 4Ste More Efficient
  79. 79. ! STYLE TILES ARE JUST ONE TOOL
  80. 80. “ “The role of the designer is basically that of a good host, anticipating the needs of the guest.” ! ! ~Charles Eames
  81. 81. ! INSTEAD OF PAGES Design a System
  82. 82. Deliver a system ELEMENT COMPONENT COMPOUND COMPONENT TEMPLATE COMPOSITION
  83. 83. ELEMENT
  84. 84. COMPONENT
  85. 85. COMPOUND COMPONENT
  86. 86. “A beautiful design system is about finding the same balance of consistency & variety. ! ! ~Yesenia Prez-Cruz http://cognition.happycog.com/article/sweet-systems
  87. 87. EXAMPLE
  88. 88. If the Council on Communities was represented by one celebrity spokesperson who would 
 it be and why? ! !
  89. 89. Pat Sayjak Because we are consistent and friendly without being too in the way of getting the job done. ! !
  90. 90. Katy Perry Because we have fun while doing a great job. We develop relationships with our communities and bring them joy. !
  91. 91. Denzel Washington In Training Day. Denzel Washington just gets Sh*t done. No nonsense. That’s what we do, we go into communities and change things, no questions asked. We are bold. !
  92. 92. Middle! Readable Clear Usable Clean White Space Empowering Toyota Katy Perry Different! Bright Fresh Welcoming Inviting Polished Simple Prius Denzel Washington (in Training Day, not The Pelican Brief) ! ! Same! Moderate Philanthropic Safe Sophisticated Classy Action Oriented Jaguar Pat Sayjak !
  93. 93. Middle! Readable Clear Usable Clean White Space Empowering Toyota Katy Perry ! Different! Bright Fresh Welcoming Inviting Polished Simple Prius Denzel Washington ! Same! Moderate Philanthropic Safe Sophisticated Classy Action Oriented Jaguar Pat Sayjak !
  94. 94. ! www.StyleTil.es
  95. 95. ! www.StyleTil.es
  96. 96. Thank You @SamanthaToy ! www.SamanthaToy.com ! www.StyleTil.es

×