top of page

Creating Style Tiles With These 6 Foundational Elements

How style tiles could help take your next design project in a new direction.


FEB 21, 2021
Screen Shot 2021-02-26 at 6.42.58 PM.png

Style tile designer by JT Grauke for focuslab on Dribbble


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.

bottom of page