[ SXSW Bios ] #sxsw #FastDesign (Archive)
Brief
With responsive design designers need to rethink the process they go through to work with clients and developers to create successful visual designs. Rather than creating traditional comps, style tiles are a deliverable that help you to communicate with your client, establish a visual language and work iteratively with developers. In this presentation, Samantha will explain how to reinvent your process to leverage Style Tiles as a deliverable.
Notes
A lot of our design processes are relics from ad/print design processes. We haven’t done a great job as an industry finding design processes that are specific to the web medium (and the multi-channel contexts of devices, etc.).
Separate design comps inevitably come to the client where the client reacts to individual pieces of a design (and you end up with a Frankencomp: design comp made up of multiple designs). Instead, we should be thinking about the end-design problem and work toward the same goal together. “design thinking”: using designer’s sensibility and methods to match needs with technology as well as business strategy.
We need a better design artifact than the comp / mockup (because iterating against a mockup is too much work). How can you develop buy-in for design decisions early and carry that support to the end of a project? How can you maintain client trust throughout the process and end up with few-to-no changes at the end (when you have implemented an interface)?
Style Tile
The missing design artifact. Combination of fonts, colors, and interface elements that communicates the essence of a visual design for the web. Facilitates a common visual language, catalyst for iterative discussions about preferences and goals, and establish a common theme that all team members can work towards. Similar to paint chips and fabric swatches.
Design as an iterative process.
Design as an iterative process.
Design as an iterative process.
Style tiles feel a lot like visually-focused design patterns where it is the design options that take the lead rather than the use. Combination of a moodboard (too vague) and a mockup (too precise), something in-between. Can be completed in parallel to a UX discovery (tying in content strategy, wireframing). Style tiles are device width agnostic.
Put together major branding, major use of typography, colors, and identify the themes that the style tile represents.
Process
Listen: Have you taken the opportunity to really hear what your client needs? Good types of questions: goal oriented (set expectation for staying away from “preference” and focusing on business goals), exploratory (audience? comparative sites?), metaphors (this product is like a…), degrees (how strongly do you feel about…, gets at preferences ahead of the game, show example sites).
Interpret: How well are you translating what you’ve heard from the client? Start by identifying common themes, sort them into groups, break apart big ideas into smaller chunks (e.g., elements/principles of design).
Define a visual language: aka Make the style tile. Start comparing the ideas to example sites to get the closest translation. “It doesn’t need to be ‘right’, it just needs to be a place to start the conversation.” This is where adopting an iterative design process becomes critical. Style tiles give you a safe place to have the “frankencomp” experience without its damaging effect on the design process. It’s human nature to combine options.
Responsive Design
A List Apart article: Responsive Web Design
“Lightweight and disposable” “Get out of Photoshop as soon as you can” (get to front-end, interaction soon)
Style tile gets approved. Create a component style guide (how could styles be applied to separate elements so the interaction developer can build a more responsive website).
Think of things in terms of separate parts of the same system (“Sweet Systems“).