Creating Style Tiles With These 6 Foundational Elements
How style tiles could help take your next design project in a new direction.
A
BY
ALEXIS PARKER
FEB 21, 2021
Style tile designer by JT Grauke for focuslab on Dribbble
S
tyle tiles consist of UI design elements to convey to other designers, creative directors, and potentially stakeholders/clients the visual brand direction. Style tiles consist of fonts, colors and other interface elements which I will explain
later in the post. Oftentimes with moodboards and styles tiles you can create multiple style directions. It helps to convey the design direction without fully having to create mockups which are more precise in detail. Here the UI elements you want to include in your next style tile.
Color: Be sure to include the color palette in the style tile. It doesn’t matter if it’s blatantly displayed or the colors are used throughout the design.
Typography: When including the typography be sure to use different font weights and fonts sizes.
CTA/ Buttons: The style tile is when the designer includes the interactive elements such as links and button styling. Be consistent when styling these elements it will make future designing a lot smoother.
Layout: The layout of the style tile can be a possible design layout of the website or app. The layout could also just be a header with a two sentenced paragraph to show the typography and how it will be used.
Illustrations/Photography: Style tile photography and illustrations are used to display the imagery that reflects the desired style direction. It also conveys the brand’s personality.
Iconography: Typically iconography is used in style tiles. Especially if the style tile is for an app. Iconography can often tie in the character and the style of the app.
Remember style tiles give the design direction, whereas moodboards give a mood or vibe. Use this as your next checklist to incorporate the above 6 UI elements into your next style tile.