Create a design system and remove risk

Updating your website is a huge opportunity to shift perceptions and improve your brand’s digital presence. Whether it’s been a couple years or too many to count since your last website refresh, you need innovative and efficient practices at the table. Prioritizing needs can be difficult and there will be a lot of pressure to get it right the first time around.

One of the best ways to ensure success during a website project is to get internal stakeholders engaged and bought in by gaining their trust early and often. There are many tools that can help you build consensus along the way with a broad group. For example, we all know sitemaps and wireframes are the standard go-to’s. But what about the design phase? You know the question is coming sooner than later: “What is the new site going to look like?”

A great tool you can use in website design to reduce risk, generate trust and gain consensus is style tiles. So, what exactly are style tiles?

Style tiles are a planning tool for design, consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.

Style tiles provide a flexible and collaborative starting point to explore and refine design — without going too far into the process. Here’s why…

Think of a style tile like a half step to full design. As the project owner, it can feel risky asking for a limited number of design concepts for your new website. What if none of them are right?

Style tiles reduce that feeling of risk when it comes to the design phase. They are essentially mood boards for digital environments. Style tiles help form a common visual language between the designer and the client stakeholders. Think of them as the paint chips and fabric swatches an interior designer would use before designing a physical room.

 

style tile template

Example of a generic style tile template

With style tiles, you get to see foundational elements like fonts, colors, iconography, patterns, image treatments and the hierarchy of all of those things together. It’s not a website page design or a mock-up. Instead, you see what a button looks like in relationship to a form field. Or the design decision to have text overlay images and how that will come to life. A style tile is tailored to the needs of your content so you and your stakeholder team can see how things will come together and react to these critical design elements first.

Don’t like a font?

Not fond of a button color?

Maybe the image treatment isn’t working?

When using a style tile, adjustments can happen efficiently and with little-to-no risk to your redesign budget. Internal stakeholders will gain satisfaction knowing they have weighed in on the design early in the process. Everything is happening before it’s committed to code. Iteration and collaboration are the name of the game with style tiles.

 

style tile website design

Style tile applied to website design

Once the website redesign is complete, style tiles can live on and be very useful. Look at them as a design system post go-live, creating efficiencies as a digital design asset. They can be used for other digital platforms, such as:

  • Email marketing
  • App development
  • Digital advertising campaigns

Style tiles can help you define the core design elements of your brand’s new digital presence. This definition makes it easier to be consistent across multiple touchpoints moving forward.