Design Process: 9) Create Style Tiles
Once you are set with the scaffolding and structure of your project, you identify certain aspects that you need to specify how they should look. Typography, color, style of icons, photography, and various background patterns are some examples of elements that should be defined as you build your library for your project.
People generally like to shop. Whether it’s a particular make and model of a car, a particular house style or new shoes, having options makes people feel like they are making a good decision.
Style Tiles is basically like shopping for the visual design of a project.
Typically, a designer will compose a mock-up pulling all of the intended elements into a page or collection so that he or she can get feedback on which direction to peruse with their design.
Budgetary management can also play a role, as certain fonts, icon sets, and photography can get pricey depending on the licensing available for each one. What a proposed design costs — and will cost in the future —should be conveyed at the point of displaying the Tiles to the decision maker. A designer should be prepared to show 3-5 options of Tiles. I always try to have at least two options in what I show the the decision maker: My Favorite and No Added Cost.
Using Style Tiles serves a few different purposes:
- It aids in the creative process for visual designers.
- It allows the development team (if it is a web-based project) in building the necessary style sheets.
- It gives the client a sense of visual direction.
- It gives the designer a reference point to come back to if disagreements arise.
- It helps anytime there is a discrepancy in what is developed vs what was designed.
- It helps solidify the budget.
Once a style is chosen, you then meet with your staff to assess all of the planned and agreed upon specifics.
Potential Pitfalls
This step is where you (and the stakeholder) can dictate the look and feel of the site, but more importantly, it is the start of your design system for your project. Things like typography and color should be determined in this phase, and your visual styles for your project can start to be developed here. If you skip this step, you will have inconsistent styles and a bloated style library that will add time to design and development of your project.