July 5, 2022
The Anatomy of a Style Tile
A style tile is a creative and straightforward way to present your website design to developers and clients alike. By mapping out the repeating elements and styles for your website in one singular page, you can present your design specifics in a way that doesn’t take months to develop and isn’t redundant (this is also perfect for situations where you anticipate some client edits.) Here is a step-by-step tutorial on how to create our DCS version of a style tile!
1. Narrow down your color palette.
This section should be familiar for your designers, as it is usually the first step in most of their design projects! This will be the first section at the top of your page. You can create this document in almost any program; Indesign, Illustrator, XD, photoshop etc. Make sure to list your colors in Hex.
2. Establish your site navigation
Build out a simple top navigation underneath your color bar with the pages you want to include and one example of a hover state and/or drop-down menu. This will minimize any questions on what that should look like and keeps you from having to repeat yourself in the design. On every element from here on out, you’ll need to include any colors in use and font specifications.
3. Font pairings
For your font choices, as they appear on your webpage you’ll specify what it would be in terms of code (H1,H2, etc) and list the font name, size, and hex color.
4. Creating elements and sections
Move down the page and create elements in order of the pages of your site. If an element such as a photo gallery would be on your ‘homepage’, build that out and list its specifications- then even if it appears on your ‘about’ or ‘testimonials’ page you won’t need to include it again. The easiest way to do this is to make a list of every element on each page and if there are any repeating elements (which there will be) simply choose which page you want to use it as an example for and put it in that section. You’ll have naturally separated sections of elements that make sense together. Instead of continuing to explain that concept, I’ll have you see it for yourself in the finished project:
