STYLE TILES A visual web design process for
STYLE TILES “A visual web design process for clients & the responsive web” KATHERINE CHENG
WHAT ARE STYLE TILES? Created by Samantha Warren Style Tiles are a design deliverable consisting of § Fonts § Colors § Elements that communicate the essence of a visual brand for the web. Help define the mood, tone and 'feeling’
WHAT STYLE TILES ARE NOT They are NOT: § A literal representation of how the site will look § Framework § A defined process § Presented for a particular screen size
WHEN WOULD I USE IT? Style Tiles present clients with interface choices without making the investment in multiple photoshop mockups.
HOW DO I CREATE ONE?
STEP 1: LISTEN Have a design kickoff meeting Ask Questions Establish the right tone for the Project
STEP 2: INTERPRET BREAK DOWN CLIENT FEEDBACK Elements of design § § § § Line Color Shape Form Pattern Space Texture Principles of design § § § Unity Harmony Balance Rhythm Emphasis
STEP 3: DEFINE A VISUAL LANGUAGE Download the. psd template § http: //styletil. es/ Get creative!
STEP 4: ITERATE Make Changes Combine options Faster revisions Refine
EXAMPLES
STYLE TILE Version 1
STYLE TILE Version 2
STYLE TILE Version 3
WEBSITE Finished product
STYLE TILE A style tile that could have been made for http: //ucf. edu
STYLE TILE chipotle
CONCLUSION
OLD WAY VS NEW WAY PROBLEMS Multiple Mock Ups /Comps Time Wasted Get stuck on little details on a full mock up SOLUTIONS Device Agnostic § More efficient responsive design process Reduce Complexity and Clarify Objectives Time Saved More time to experiment
3 D PARTY REVIEWS “Style Tiles provide a fresh and productive way to approach the design process. They allow you to specifically hone in and focus on a project’s personality and mood without worrying about specific layout decisions. ” –Joshua Johnson, Design. Shack. net “Style Tiles are a revolutionary way of approaching the design process and help you and your client form a clear direction for the website from even the most involved and complicated project. ” –Chris Brown, tutsplus. com
3 QUESTIONS FOR THE EXAM 1. How do Style Tiles help designers build modern websites? 2. What problems can using Style Tiles cause? 3. How do Style Tiles help or hurt the Designer/Client Relationship?
- Slides: 21