{"id":26570,"date":"2023-06-12T13:11:25","date_gmt":"2023-06-12T11:11:25","guid":{"rendered":"https:\/\/careerfoundry.inbearbeitung.de\/en\/?p=26570"},"modified":"2023-06-12T14:15:56","modified_gmt":"2023-06-12T12:15:56","slug":"style-tiles","status":"publish","type":"post","link":"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ui-design\/style-tiles\/","title":{"rendered":"Style Tiles: Everything You Need to Know"},"content":{"rendered":"

If you\u2019re an aspiring UI designer starting to get familiar with the industry, you might have heard a lot of talk about creating and presenting a style tile.<\/span><\/p>\n

But there\u2019s also a good chance you won\u2019t know exactly what a style tile is and when and how to use one.<\/span><\/p>\n

Gaining a full understanding of what a style tile is\u2014and its application\u2014is a crucial part of learning UI design<\/span><\/a><\/span> and will give you more confidence that you\u2019re in a good place as you start your career.<\/span><\/p>\n

Naturally, the best way to learn about style tiles is to get hands-on experience creating and explaining them, which will happen organically as your career grows.<\/span><\/p>\n

In the meantime, we\u2019ve written this blog to give you a comprehensive overview of style tiles, why they\u2019re important, and how and when you should use them. We\u2019ll also share some examples for your reference.<\/span><\/p>\n

Use the clickable menu to skip ahead to any section:<\/span><\/p>\n

    \n
  1. What are style tiles?<\/span><\/a><\/li>\n
  2. What\u2019s in a style tile?\u00a0<\/span><\/a><\/li>\n
  3. When to use style tiles<\/span><\/a><\/li>\n
  4. How to use style tiles in 5 steps<\/span><\/a><\/li>\n
  5. Key takeaways<\/span><\/a><\/li>\n<\/ol>\n

    1. What are style tiles?<\/span><\/h2>\n

    A style tile is a design deliverable that brings together the styles and assets\u2014colors, fonts, and <\/span>interface elements<\/span><\/a>\u2014that are used in a UI design.\u00a0<\/span><\/p>\n

    Style tiles are used to quickly and effectively communicate the core of the visual brand that\u2019s used digitally.<\/span><\/p>\n

    To understand their context in the design landscape, you can think of them as a useful middle ground for when a mood board is too vague and a comp is too literal and time-consuming to create.<\/span><\/p>\n

    This example from the Figma Community shows how collating colors, fonts, and basic interface elements can come together in a simple yet effective style tile.<\/span><\/p>\n

    \"Example<\/p>\n

    Source: <\/span><\/em>GoStop on the Figma Community<\/span><\/em>
    \n<\/span><\/a><\/p>\n

    Styletil.es<\/span><\/a>, one of the authorities on the subject, compare style tiles to similar tools used by interior designers, noting that they\u2019re \u201csimilar to the paint chips and fabric swatches an interior designer gets approval on before designing a room.\u201d<\/span><\/p>\n

    In the same way that an interior designer wouldn\u2019t design three different rooms for a client at the kick-off meeting, a UI designer wouldn\u2019t create three complete UI mocks. Instead, a style tile can be used to show a client the essence of what their visual brand could be.\u00a0<\/span><\/p>\n

    By doing this, it can be the foundation of the common visual language that needs to exist between UI designers and the client or any other stakeholders involved. The style tile can help spark conversations about client and stakeholder preferences and goals and be iterated as those conversations progress.<\/span><\/p>\n

    On top of this, they can also be super practical as a way of handing off work to other UI designers and know they\u2019ll be able to create designs that are consistent with the overarching brand.<\/span><\/p>\n

    Now that we\u2019ve looked at what style tiles are and what purposes they can serve, we\u2019ll quickly go over what\u2019s actually in a style tile.<\/span><\/p>\n

    2. What\u2019s in a style tile?\u00a0<\/span><\/h2>\n

    So, what actually goes in a style tile? Let\u2019s talk about some of the key elements you\u2019ll find in there:<\/span><\/p>\n

    Color palette<\/span><\/h3>\n

    Your color palette is one of the most essential elements in your style tile. Whether you use UI elements or just the colors alone, make sure to stick to your main color palette. <\/span><\/p>\n

    There\u2019s normally no need to stress about showcasing all the different shades of black your UI uses for example, but if you do want to showcase those shades, find a concise way to display them.<\/span><\/p>\n

    Typography<\/span><\/h3>\n

    Remember to include the important font weights and show them in the sizes they appear. Don\u2019t underestimate the impact that font size has on the personality of your design\u2014it’s essential to get it right. <\/span><\/p>\n

    If you want to sharpen your knowledge on this, Jaye Hannah\u2019s <\/span>Beginner\u2019s Guide to Typography<\/span><\/a> is an excellent place to start.<\/span><\/p>\n

    CTA and\/or button styles<\/span><\/h3>\n

    Show off your button and link styling examples. Two or three examples will often be enough, as you\u2019ll typically have a consistent style for all the interactive elements in your UI.<\/span><\/p>\n

    Shape and layout <\/span><\/h3>\n

    You don\u2019t need to explain every single element’s layout explicitly in your style tile. Instead, demonstrate them by incorporating your grid and layout strategies into your style tile and showing how elements can be spaced and aligned in your overall design.<\/span><\/p>\n

    Photography\/Illustration<\/span><\/h3>\n

    Images play a huge role in defining your brand’s personality\u2014don\u2019t underestimate this. Decide whether you’ll use photography, illustration, or a mix of both, and showcase them accordingly.<\/span><\/p>\n

    Iconography <\/span><\/h3>\n

    Icons vary a lot from brand to brand. If your brand has its own unique icon designs, make sure to include them in your style tile. They can add a powerful touch and make your brand stand out from the rest.<\/span><\/p>\n

    This example from Dutch design agency LEVEL LEVEL for the bank ABN AMRO ticks off all of the above style tile ingredients impressively. In a matter of just a few seconds, it manages to convey both the brand identity and give you a feel for how the website would look:\u00a0<\/span><\/p>\n

    \"An<\/p>\n

    Source: <\/span>level-level blog: Why making a style tile is part of our design process.<\/span><\/a>\u00a0<\/span><\/em><\/p>\n

    Now that you know what can go in a style tile, we\u2019ll have a look at when you should use a style tile.<\/span><\/p>\n

    3. When to use style tiles<\/span><\/h2>\n

    As Courtney Pester says in her excellent blog for UX Collective, <\/span>An Overview of Style Tiles<\/span><\/a>, the main objective when creating style tiles is to \u201cvisually explore unique aesthetics before diving headfirst into designing a ton of high-fidelity mockups.\u201d<\/span><\/p>\n

    Style tiles are a great tool for early design exploration because they let you try out different colors, typography, and visual elements without committing to a full design. <\/span><\/p>\n

    Showing style tiles to clients or stakeholders means you can get feedback and agree on a visual direction before diving into detailed work.<\/span><\/p>\n

    Often they are the starting point for building the common visual language we referred to earlier.<\/span><\/p>\n

    But style tiles aren\u2019t only for this early stage of design exploration. Here are five other things you might find them extremely useful for:<\/span><\/b><\/p>\n