search

islco / methods

ISL's methods for creating interactive experiences
1 stars 2 forks source link

Style Tiles #2

Open pbest opened 5 years ago

pbest commented 5 years ago

Style Tiles

Establishes a direct connection between style and actual interface elements without defining layout.

A design deliverable meant to validate visual decisions and define design directions through type, color, layout, photography, illustration, movement and practical UI elements.

It is usually presented as part of a design direction (link to ticket) alongside a moodboard #1 and a definition (link to ticket).

If a moodboard is seeing a beautiful shirt on the rack, a style tile is trying that shirt on and seeing if it fits you well.

Time Required

3-5 working days (per round)

Why

I’m going to use this method when I want to form consensus around a design direction between designers and stakeholders, providing a platform to further validate design decisions without the distraction of content or layout.

How to do it

  1. Perform a creative intake #21 and moodboards #1

  2. Think through possible components that may appear in your brand or product. Apply the design principles captured in the Creative Intake #21 and Moodboards #1 onto these components.

  3. Start defining design characteristics like type, color, layout, photography, illustration, and movement through components on each style tile.

  4. Layout and refine your components to create a single composition per direction.

  5. Iterate, review and refine. Limit your directions down to 3 or 4.

Pro Tips

  1. Make each style tile "dribbble worthy." It should be a well coordinated layout that is beautiful in it’s own right.

  2. Be derivative then branch out. You are literally trying the style on for size. If you like a button style, try it out, then iterate until it matches your direction.

  3. Define the differences in your design directions. Make deliberate decisions that illustrate each direction's unique characteristics.

  4. Style Tiles should be practical and define design characteristics. You should feel comfortable starting design with this exercise at it's core.

Examples

screenshot 2018-12-18 13 00 25

screenshot 2018-12-18 13 05 30

Further Reading

Links for a deeper dive & more understanding

http://v3.danielmall.com/articles/rif-element-collages/ http://styletil.es/

Example Presentations

https://drive.google.com/open?id=1UKs6-iGyr65efRouMPXW3oFqZPDMB3n8&authuser=dan@isl.co

DanRader commented 5 years ago