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
Recommandé
Recommandé
Contenu connexe
En vedette
En vedette (19)
Dernier
Dernier (20)
Faster Design Decisions with Style Tiles
- 3. hello
- 4. @SamanthaToy
- 6. Clients
- 7. Efficiency
- 11. DESIGNERS PRESENT MULTIPLE FIXED WIDTH COMPS TO CLIENTS
- 12. DESIGNERS PRESENT MULTIPLE FIXED WIDTH COMPS TO CLIENTS
- 13. DESIGNERS PRESENT MULTIPLE FIXED WIDTH COMPS TO CLIENTS Stop!!!!
- 15. FRANKENCOMP
- 16. Why?
- 17. THERE HAD TO BE ! A Better Way
- 18. 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
- 21. WORDS CAN MEAN ! ! THINGS Very Different
- 22. “NEWSY”
- 24. “CLEAN”
- 26. “PLAYFUL”
- 29. Why?
- 30. 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. ! !
- 31. jaynawallace.com
- 33. jaynawallace.com
- 34. too vague
- 35. 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. ! !
- 37. too precise
- 45. COMMUNICATION AROUND A RESPONSIVE PROJECT
- 51. HOW
- 53. DESIGN IS ABOUT Problem Solving
- 55. GENERATE A DEFINITION OF SUCCESS THAT IS SEPARATE FROM TASTE. !
- 56. THE STYLE TILE Process 1Step 2Step 3Step 4Step Listen Interpret Define a Visual Language Iterate HOW
- 58. TYPES OF QUESTIONS HOW 1Ste 2Ste 3Ste 4Ste
- 59. TYPES OF QUESTIONS Goal Oriented Exploratory Metaphor Degree of HOW 1Ste 2Ste 3Ste 4Ste
- 61. 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
- 62. 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
- 63. Ask Why?
- 64. GOAL ORIENTED Generate an definition of success that is separate from taste. HOW 1Ste 2Ste 3Ste 4Ste
- 65. EXPLORATORY QUESTIONS Who is the audience? What are the websites of the competitors? HOW 1Ste 2Ste 3Ste 4Ste
- 66. METAPHOR QUESTIONS Client’s Product/Service is like a . If it were a , it would be a and why? ! ! HOW 1Ste 2Ste 3Ste 4Ste
- 67. 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
- 69. COMMON THEMES HOW 1Ste 2Ste 3Ste 4Ste Identify
- 71. AGGREGATE ! ! FROM THE ANSWERS HOW 1Ste 2Ste 3Ste 4Ste Adjectives
- 72. 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 !
- 73. BREAK DOWN ! ! INTO SMALLER PIECES HOW 1Ste 2Ste 3Ste 4Ste Big Ideas
- 75. Normal HOW 1Ste 2Ste 3Ste 4Ste
- 76. Happy HOW 1Ste 2Ste 3Ste 4Ste
- 77. Sad HOW 1Ste 2Ste 3Ste 4Ste
- 78. Aggressive HOW 1Ste 2Ste 3Ste 4Ste
- 79. Whimsical HOW 1Ste 2Ste 3Ste 4Ste
- 80. HUMANS MAKE SUBCONSCIOUS ASSUMPTIONS BASED ON ! ! HOW 1Ste 2Ste 3Ste 4Ste Subtle Visual Cues
- 81. DEFINE A VISUAL LANGUAGE HOW 1Step 2Step 3Step 4Step
- 82. MATCH ADJECTIVES WITH VISUALS HOW 1Ste 2Ste 3Ste 4Ste
- 83. SOFT PEOPLE FOCUSSED FRIENDLY HAPPY HOW 1Ste 2Ste 3Ste 4Ste
- 84. SOFT PEOPLE FOCUSSED FRIENDLY HAPPY HOW 1Ste 2Ste 3Ste 4Ste
- 85. SOFT PEOPLE FOCUSSED FRIENDLY HAPPY HOW 1Ste 2Ste 3Ste 4Ste
- 86. SOFT PEOPLE FOCUSSED FRIENDLY HAPPY HOW 1Ste 2Ste 3Ste 4Ste
- 87. SOFT PEOPLE FOCUSSED FRIENDLY HAPPY HOW 1Ste 2Ste 3Ste 4Ste
- 90. ITERATING ON A STYLE ! ! THAN ITERATING ON A COMP HOW 1Ste 2Ste 3Ste 4Ste More Efficient
- 96. ! STYLE TILES ARE JUST ONE TOOL
- 97. “ “The role of the designer is basically that of a good host, anticipating the needs of the guest.” ! ! ~Charles Eames
- 98. ! INSTEAD OF PAGES Design a System
- 105. Deliver a system ELEMENT COMPONENT COMPOUND COMPONENT TEMPLATE COMPOSITION
- 106. ELEMENT
- 107. COMPONENT
- 108. COMPOUND COMPONENT
- 115. “A beautiful design system is about finding the same balance of consistency & variety. ! ! ~Yesenia Prez-Cruz http://cognition.happycog.com/article/sweet-systems
- 116. EXAMPLE
- 122. If the Council on Communities was represented by one celebrity spokesperson who would it be and why? ! !
- 123. Pat Sayjak Because we are consistent and friendly without being too in the way of getting the job done. ! !
- 124. Katy Perry Because we have fun while doing a great job. We develop relationships with our communities and bring them joy. !
- 125. 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. !
- 126. 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 !
- 127. 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 !
- 140. ! www.StyleTil.es
- 141. ! www.StyleTil.es