Style tiles as a part of a unified agile development process
The problem Often in designing web pages a lot of work goes in to creating full screen designs before the client gets their "first look". Wireframes have often been generated and our designers get to work on back filling these with their initial look and feel concepts. These screen designs take a lot of time and can result in an aesthetic that just doesn't gel with the client's vision. Iterating designs at that level might require many versions over the same set of 3 or more screens at 3 or more break points for responsive designs. The solution There another approach that has gained popularity over the last few years that integrates nicely with an iterative, agile development methodology. The first step in this process from a designers point of view are called Style Tiles. You can thing of style tiles as a half way point between Mood boards and Screen designs. The things that we ask our designers to concentrate on at this stage can be listed on the fingers of one hand and give the client a quick flash card from which we can gauge emotional responses. These are quick to iterate through and allow the client to change the direction of the design before large amounts of the design budget are consumed. Style tiles are generated after initial concept meetings with the client and are driven by emotive adjectives and likes/dislikes.
Light and simple; expert. Like an App and an academic Journal at the same time.
Here's that list
- Typography including a three level heading hierarchy
- Iconography and branding
- Weight and space; leading (line-height), gutters (margins and padding)
- A colour palette including primary colours, secondary colours and tints
- Background palettes and textures
- Line styles and depth queues (shadows)
Here are the first couple of articles I read on Style tiles which is when the light switched on. They're still my go-to resources when explaining the what's and why's of Stile tiles.
When combined with the rest of our design and development process of Live wireframes, Design components and Feature sprints, the release early, release often paradigm can incorporate the visual design process with very little friction and low wastage.