Style tiles consist of a page of reusable design assets that communicate the essence of a visual brand for a website. They are formed by translating the client’s branding materials into interface elements. Tiles help form an understanding between designers and stakeholders to facilitate discussions about the goals and expectations of how a website will look.
01. What do style tiles contain?
A style tile should contain define a color scheme, illustrate typography, demonstrate layout options and image treatments, and highlight the relationship between the client’s branding and the proposed website design. Common elements that might be represented on a style tile are:
- Typography
- A headline (H1)
- A subheader (H2)
- Body copy
- Text links
- Color
- Palette
- Application
- Buttons
- Primary
- Secondary
- Interactive elements such as dropdowns or search bars
- Images
- Usage
- Mask shape
- Treatment
- Patterns
- Icons
- Style
- Usage
- Section Layout
- Header and hero
- Image with a paragraph
- Gallery
- Icon or card set
02. Why use style tiles?
Style tiles establish a direct connection from branding materials to actual interface elements and allow designers to try out several visual styles for a website before taking the time and effort to build out a full website design. Style tiles are useful not only for streamlining the design process and making it more efficient but for creating a consistent reference to communicate how the website will look both for stakeholders and other designers. Tiles help everyone involved in the website design process stay on the same page when discussing expectations and create a “guidebook” to refer back to when designing additional pages. They facilitate easy critiques and feedback, setting the design up for success at the very beginning of the process.
03. What will the tiles look like?
Style tiles are always delivered in groups of three unique directions, each with different element styling and layout. Although tiles can be formatted in many ways, a common method is to display elements like the top section of a homepage, with a header section, sample paragraph and image, and a set of cards or gallery. Each tile demonstrates how fonts, colors, buttons, images, and other elements might mingle together in a design within the sample layout. A set of three sample style tiles can be viewed directly through the Adobe XD browser preview here. Simply use your mouse to scroll in order to view the full tiles.
Tiles work especially well for clients with well-established branding by showing a direct translation to the web through real interface elements. Each style tile is typically based on an adjective or set of descriptors taken from a client’s branding and focuses on a different visual approach from the same provided elements. For example, if the client wants the website to appear “friendly” and “playful,” the bright colors from the brand’s palette may be prioritized, and images can be masked in an organic shape. Each board will have the same colors and fonts but different button styles, image treatments, color ratios and applications, and layout options in order to adjust the same brand to communicate a different message.
04. What to expect after choosing a style tile?
When deciding on a style tile it is important to keep in mind that a webpage is not being proposed. The tile is merely a set of styling that will later be reorganized depending on the wireframe’s sections. Although most elements are reusable as they are presented in the tile, they will be rearranged to fit the content of the wireframe. Some sections on the tile may be customized or not on every page of the wireframe if there wasn’t a place for them to logically be included in the flow of that particular page.