Blog

Better Design Solutions with Style Tiles, Content Patterns, and Components

Posted by in Content Strategy, Design, UX Design

Icons showing the flow of Style Tiles, Content Patterns and Component Design

In this post we’ll talk about how style tiles, content patterns, and component design can save time while creating a more flexible design system for your website or digital product.

Ye Olde Design Comp

Like many design firms, for years we delivered standard design comps—pixel-perfect visual renditions of key site pages—for website projects. Getting client approval on those comps was a critical part of moving projects forward. Yet design comps only represent a single state of a single page at a single point in time, so clients were often understandably confused by the process of reviewing just a static screen and projecting what the end result might entail. Design comps do little to help clients or users understand the broader implications of choices made long before there is anything to interact with.

Image of a design comp mocked up of a website

Design comps: a static look at not-so-static content.

Style Tiles

At Mightybytes, our earliest design deliverables are style tiles, which communicate the essence of an online visual brand without getting too mired in the details. According to the Style Tiles website, “Style tiles form the common visual language between the designers and the stakeholders and provide a catalyst for discussions around the preferences and goals of the client.”

Designed specifically for websites and applications, style tiles include the most common visual assets of a website: font, colors, image styling, interface elements, and so on. Their purpose is to help client and agency find consensus on the visual language used to design various components of a digital product or service. Because they are independent of layout or UX, style tiles can help everyone on a project better understand how site components will be styled.

An existing style guide or brand book is very helpful for creating style tiles. Font choices and color swatches already exist for other mediums. Design teams create style tiles to translate how those guidelines will work on the web. They also create styles for iconography, image treatments, buttons, and other common interface elements. Those elements then form the basis of styles defined in cascading stylesheets, which control the look and feel of an entire site.

 

Graphic of both versions of style tiles for the NACSA website

These style tiles helped the team at NACSA better understand color schemes, image stylings, and button treatments well before they were applied to site components.

 Content Patterns and Page Briefs

Every site is made up of different types of content: hero images, banners, news feeds, events, blog posts, videos, white papers, and so on. These content types are often displayed in different ways, depending on the page in which they exist. Content patterns show how the information for each content type is displayed.

Simplified vector graphic of two content pattern examples

Content patterns show how content types can be displayed on a site.

For example, let’s say you are a company that throws a lot of events. You may want event announcements on your homepage, in a sidebar on your blog, or in a footer on strategic key pages. While all these announcements could potentially promote the same event, they will each have unique content patterns that define their size, type, and layout.

To give you a better idea, the folks at Pebble Road have created a great list of nearly 30 common content patterns in writing and presentation categories. These patterns will seem instantly familiar, as they are commonly used on websites all over the internet.

Page briefs, on the other hand, do work at the page level rather than the individual content type level. A page brief works exactly like it sounds. It’s a short document that describes each page’s purpose and includes specific conversion goals. Page briefs help both client and agency answer several important questions:

  1. Why does the page exist?
  2. What is the page’s conversion goal?
  3. What is minimum amount of content that users need to make that conversion?
  4. What is the list of supporting info?

Page briefs help content creation teams achieve clarity about their own resources or constraints. In creating them the content workload becomes much clearer. Page briefs also give design teams a helpful set of guidelines by which to create page layouts with designed components.

Display Patterns and Component Design

A content pattern is different from a display pattern, which shows how that content type will be displayed to fit within the visual design system defined during the style tile process. Components are concrete implementation of design patterns. With display patterns and component design, rigid full-page templates are less necessary. By building a library of content and display patterns that can be applied to specific components, you can create a modular design system that lets you mix and match components for optimal flexibility.

Graphic showing component wireframes on the left and the final component designs with content on the right

Display patterns show how different components fit into a website’s overall visual system.

Once you have a library of approved patterns and components, directives from your page briefs will help you choose which are most relevant to suit the page’s conversion goals. Component design is beneficial to clients as well because once a site goes live, the flexibility inherent to this system makes the process of creating new unique pages much easier.

So how do we make this work for a team? Who does what? In a blog post titled Content and Display Patterns, author Daniel Mall notes, “When thinking about patterns, content strategists are primarily thinking about content patterns, designers are primarily thinking about display patterns, and front-end developers are responsible for bringing the two together.”

At Mightybytes, our content, design, and development teams work very closely with each other and with our clients to ensure that all parties clearly understand both the goals of and steps to execute a successful website visual design system using these artifacts.

Bringing It All Together

What does this look like in practice? In the example below, our client NACSA mixed and matched components from the visual system we designed to create a new page type without our help, saving them time and money in the process.

Graphic montage of screenshots showing the design of different pages on the NACSA website

Component design in action at NACSA.

Why This Process is More Efficient

This process works better than the age-old design comp process for a few reasons:

  1. Collaboration: iterative collaboration allows web teams and clients to reach consensus faster and at multiple times throughout the design process.
  2. Time-saving: the overall design process takes less time because as revisions come up they can be implemented faster.
  3. Testing throughout: testing methods validate decisions with real users throughout the process rather than at the end.
  4. Modular flexibility: these systems are meant to be flexible and modular. Individual components can be changed quickly without bringing the entire system down.

The process of creating a library of mix and match components informed by styles tiles and content patterns can cut down significantly on back-and-forth correspondence between client and agency like the design comp process described at the beginning of this post. This ultimately saves time and resources.

“It’s easy for people on both client and agency side to fall into the Stockholm Syndrome trap of waterfall-based design,” says designer Amber Vasquez. “It’s human nature to apply old methods to new mediums, but the reality is that rarely works. People still try to shoehorn the print design process into web projects, but time and time again they fail, or at the very least go wildly over budget. With this new process, we can create a design system that is more flexible, saves time, and yields better results.”

Tim Frick is the author of four books including, most recently, Designing for Sustainability: A Guide to Building Greener Digital Products and Services, from O'Reilly Media. He is @timfrick on Twitter. Mightybytes is a full-service creative firm for conscious companies and a certified B Corporation. Connect with us on Twitter or fill out our contact form.