Now I have decided on my typography, considered what content I am going to use and considered the layout of my prototype, I need to create a Style Tile. This will allow me to collect all the visual grammar for my project in one place and I can start to see how it all works together. Before creating my own style tile I want to have a look at some examples, to give me a better idea of what to include in my own.
Style tiles sit between moodboards and mock-ups in terms of fidelity in the design process, they allow us to take what we have been inspired by and included on our moodboard and use this to start to define our visual grammar for the project. Style tiles also allow us to quickly experiment with different elements to compare and contrast them to see which work best and best fit the needs of our project.
Below you can see three iterations of style tile for the Washington Examiner’s 2012 Election coverage.
Source: https://styletil.es/ (Last Accessed 21/02/24)
I also read this article: https://careerfoundry.com/en/blog/ui-design/style-tiles/ which explained with examples exactly what I need to include in my style tile and why we use them. In industry they are used to show clients the visual direction the project is taking. They also are a chance to see what your ideas look like as a cohesive whole and whether or not the elements you have selected individually can work together. A style tile also offers a quick way to compare different options and to iterate on your visual grammar before you get into the work of developing hi-fi prototypes.
Source: https://careerfoundry.com/en/blog/ui-design/style-tiles/ (Last Accessed 21/02/24)
As you can see above style tiles can be minimalist containing only the basics of a visual grammar or they can be more in-depth, it really depends on the project and the elements it will contain.
For me the essentials include: