Designing for the web is much like the web itself; it’s constantly evolving into something better.

The old way of web design went something like this: sketch out the homepage and a standard content page (you know the one, a giant column of text and a sidebar with all the widgets), fire up Photoshop and create a complete mockup of both pages, select fonts and colors, and maybe explore some different style treatments on the hero image. Once version one is finished, go ahead and repeat that. Use a serif font for this round, and maybe a dark color scheme. If you’re feeling really ambitious, go through this exercise a third time and try out the really crazy ideas. Present all three mockups to the client and prepare for the great “frankencomping”: the mashing of all three designs together into one beautiful monster.

Related Content: How Nurturing the Creative Process Will Generate Unexpected Results

Sounds fine, right? It was…until responsive design blew everything up.

Once sites could shift and change to match the screen sizes of a variety of devices, there was no way a single fixed-width mockup could represent an entire site’s design. A simple solution was to mock up large, medium, and small screen variations for multiple design options, but that introduced a significant time increase.

Worse yet, it was time spent on a design option that might end up on the cutting room floor. The process became more about rote production of every size and less about the important stuff, like, you know, how a user interacts with the page. Simply put, as designers, we had to do better.

What are Style Tiles?

Style tiles provide enough detail to settle on a specific direction without the time intensity required for a full comp.

Enter the solution: style tiles. A concept introduced in 2012 by designer Samantha Warren, a style tile is a collection of visual elements that make up a site’s design. At its most basic, a style tile includes fonts, colors, typography treatments, icon style, and interactive elements like buttons and forms.

Warren describes it as the Goldilocks between a moodboard and a mockup: enough detail to settle on a specific direction, but without the time intensity required for a full comp. Another way to think of it is like the paint swatches and carpet samples for remodeling a room. You don’t need to build an entire room (let alone three times!) to get an idea of what color you want to paint on the walls.

STYLE TILES

Two style tile examples by Warren.

We’ve adopted style tiles as an integral part of our web design process at DEG and actually evolved the methodology to suit our component-based approach to site design. I’ll cover the benefits and (very few) potential drawbacks of the style tile method.

Style Tile Benefits

Building the building blocks. The greatest strength of a style tile is that it immediately sets the stage for creating a system, instead of just one pretty page. An effective website is continuously being updated, so we naturally need a design approach that fits that.

Designing a site is always a fine balance between doing justice to specific, existing content and creating a flexible framework for adding or changing content in the future. With a mockup, it’s sometimes easy to get caught up in specifics and lose sight of the bigger picture. A style tile flips that notion on its head. For example, a headline is no longer a single artifact beautifully typeset and designed in isolation, but a tool for emphasizing text throughout the site. These considerations are, of course, always in the back of your mind when you design anything, but a style tile makes that thought process more obvious and deliberate.

Don’t worry, we’re not abandoning comps completely. Creating a full-page comp is a necessary step in the process, and there absolutely needs to be time spent perfecting details. A style tile simply helps direct attention to the right details. It keeps the designer in the mindset of building a foundation and then scaling in a purposeful way. It’s much easier to craft really solid building blocks and construct solutions as needed, rather than reverse-engineer a finished product into usable pieces later down the road.

Using style tiles helps keep designers in the mindset of building a foundation and scaling in a purposeful way.

style tiles

Style tile example for Close Market. Dribble image.

Collaborate earlier. Ugh, surprises—no one likes to be caught off-guard with something they’re not expecting. Imagine being given a minivan when you were looking forward to a motorcycle. The van is great and all for getting you from point A to point B, but not exactly in the way you were hoping. Likewise, a style tile is a great solution for providing that “gut check” to make sure things are on track and heading in the right direction.

Style tiles distill down the overall mood and look of a site. If a client is looking for “bright, happy, and upbeat” or “upscale and luxurious,” just a simple glance should immediately capture that feeling. If it doesn’t, a designer can immediately start fine-tuning the specifics to get a better match. Little changes, like a font that doesn’t seem quite right or an accent color that’s too bold, can easily be identified and tweaked when viewed as a snapshot. It can sometimes be harder to pinpoint these details when viewing a full-page mockup.

Early client involvement also ensures that their ideas are being heard, and sets up a dynamic of working together and collectively shaping the final product. By bridging the gap between the ambiguous “here’s what I’m looking for” and “ta-da, here it is!”, we can course correct quickly and easily without waiting until we’re too far off course. The result is a much smoother process for everyone.

Early collaboration includes not only the client, but internal project team members as well. Walking through ideas in style tiles can spark ideas with the UI and CMS development teams and call out ideas for enhanced functionality. Collecting input at this stage better informs the actual site design, and ultimately results in a better final product.

So much time saved. It’s not so much about saving time as it is about making better use of it. Rather than investing time on an entire homepage design destined for the trash, we can instead put that effort toward higher-return, bigger-picture elements like refining the layout to streamline a user’s checkout process or perfecting a memorable onboarding experience.

Working with styles also builds in some saved time down the road. Style tiles get a designer in the mindset of setting up general placeholders and then refining them as needed for particular content needs. Again, this often happens naturally as you’re working through a single-page mockup, but it can be easy to lose the common threads if you’re not consciously focusing on the bigger picture.

Any successful design is a collection of details that have been combined in an artful, thoughtful way. When the time is spent upfront establishing details, that polish and thoughtfulness will carry through to the final product.

Any successful design is a collection of details that have been combined in an artful, thoughtful way. When the time is spent upfront establishing those details, that polish and thoughtfulness will carry through to the final product. There will still be a fair amount of time spent balancing style tile elements to work in the context of a full-page design, but better to spend time refining rather than recreating. Establishing a system will also make it easier to add additional pieces down the road as the need for new pages and components arises.

Ok, now onto the not-so-fun parts. These aren’t cons necessarily, just challenges you need to keep in mind when working with the style tile process. A lot of this boils down to setting up the right expectations and establishing good communication.

Style Tile Drawbacks

Abstract, difficult to imagine, too vague. I’ll admit when I first started working with style tiles, I had difficulty breaking my mindset from “how should this hero look exactly?” to “how should this image flex across multiple breakpoints?” I would find myself designing navigation bars or footer treatments off to the side of my document, to make sure what I was recommending in the style tile actually made sense when put in practice. Even some of our project team members weren’t quite sure what to make of a style tile when we first started working with them. It was a good reminder that while it might feel obvious and easy to a designer, others outside our discipline need more explanation.

When you’re reviewing a style tile, it’s important to remember that it is not the final site design, much as paint swatches are not the same as the actual paint on the walls of your room. It takes a bit of imagining, but the overall vibe should feel right. Full-page mockups will still happen in the process, so just keep that in mind.

style tiles

MailChimp’s pattern library is used to define its grid, typography, and page elements. Hongkiat image.

Locked in too early, taken literally. When creating a system, as much as you might try to account for every content scenario, sometimes you goof up. It’s a natural part of the process. That shade of orange that looked great as a swatch now happens to clash horribly when used with actual product photos. That idea you had for a content pod now doesn’t make any sense in the context of a page with three other content pods. It’s ok, it happens.

When designing something normally, you’d refine and the user would be none the wiser, having never seen version one. But if you happened to document all of that early thinking into a style tile and present it to a client, they might assume all those pieces are simply going to be arranged on a page and the job is done.

Related: Experiential Technology: A Not So Trivial Pursuit

That’s why it is really important to set expectations that a style tile is part of an iterative process, not a representation of the final result. When we work with clients, we always make sure to be clear that it is the direction for the general look and feel, but it’s not verbatim. Based on real content and the full-page layout, tweaks and adjustments will be made. Probably nothing drastic, but it likely won’t match the style tile exactly. Remember that a style tile is a tool for working through the process, not official documentation.

Comparing how we used to work to how we use style tiles today, it’s hard to imagine how we ever worked without them. They solve some inherent difficulties for designing responsively, and the benefits of time saved and increased collaboration far outweigh the potential hurdles. Full-page mockups will probably always be necessary and have their place, but style tiles provide a nice bridge between ideas and the final site.

In part two, I’ll walk through an example of how we actually build one. Stay tuned.

Keep In Touch

Stay up-to-date on the latest digital trends, DEG news, and upcoming events by subscribing to DEG's newsletter.

Subscribe

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comments