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.

Faster Design Decisions with Style Tiles

4,145 views

Published on

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

Published in: Design
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Get access to 16,000 woodworking plans. ▲▲▲ https://t.cn/A62YeZUX
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×