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?