Samantha Warren started the style tile craze back in 2012 with an article on A List Apart and The Washington Examiner case study.

Style Tiles and How They Work
How do you involve your client in a successful design process? Many of our processes date back to print design and advertising. It’s time we evolved our deliverables to make clients a more ac…
Samantha Toy Warren | The Washington Examiner
The personal site of Samantha Toy Warren. This is her project for The Washington Examiner.
Style Tiles: The Flip Side of Wireframes
Style Tiles provide a fresh and productive way to approach the design process. They allow you to specifically hone in and focus on a project’s personality and mood without worrying about specific layout decisions. Today we’re going to show you exactly what Style Tiles are, why ...

At the time, we were trying to solve a problem. Clients came to our web agency asking for a responsive web design. They would say, “We want something clean and modern. You know, something that looks like Apple, but with our logo instead.”

Usually, they would have some grand ideas about how this new site would be all that they would need to help people find them and discover what they could do for them. They might have a terrible logo and a brochure that talked about their products or services. “Can you make this catalogue a website?”

The client would give you a JPEG of their logo. We might ask, “Do you have a vector-based version, like an AI file or an EPS?” And they would reply, “What’s that?”

Invariably, we would take whatever we were given and try to create something beautiful: a home page and a content page design. We would use some Lorem Ipsum placeholder copy and we would throw in some stock imagery, because we could only guess at what they wanted to say on their website. They had no content.

Then, they would say, “That looks great. I’ll get our office manager to write some text and get a smart phone to take some photos of our staff.”

This is the sort of situation that would lead Jeffrey Zeldman to say, “Content precedes design. Design in the absence of content is not design, it’s decoration.”—not long after Twitter was invented.

It would also lead Stephen Hay to say, “We’re not designing pages, we’re designing systems of components.” And Brad Frost would write about atomic design as a way to understand the design systems we were building as libraries of UI elements, components, and design patterns.

BDConf: Stephen Hay presents Responsive Design Workflow
In Responsive Design Workflow, Stephen Hay (@stephenhay) talks how we have to adapt our workflow as well as we adapt our experiences. The landscape has changed, but our workflows have not. We need to change that. Updating Photoshop documents for web designs is immensely inefficient, especially f
Atomic Design
Hey there! I wrote a book called Atomic Design that dives into this topic in more detail, which you can buy as an ebook. We’re not designing pages, we’re designing systems of components.—Stephen Hay As the craft of Web design continues to evolve, we’re recognizing the need to develop thoughtful de

Style Tiles

Maybe a year after finishing the first page layout concepts for the website, the client might come back to us with a CD-ROM of images and a Word document, and we would throw out those designs we had made a year ago and start over with actual content.

At that point, we decided that creating page layouts for a desktop site was short-sighted. The work would get thrown out as soon as we had real content to work with. So, why don’t we alleviate the fears that clients had about seeing a lot of boxy and boring site maps and wireframe layouts by giving them a little taste of the visual design at the beginning of the process with a style tile? We would be able to get on the same page by defining the basic visual elements of the brand: logo, imagery, texture, color, typography, and some basic user interface (UI) elements, such as form fields and buttons. Then, we would be able to extrapolate from there to create the rest of the UI kit. From there we could build an entire design system.

Content Strategy

We would try to educate the client about how there is nothing worse than stale content on a website. You thought you were in the widget business, but now you are in the content marketing business. You need to generate and maintain content. So, the content strategy business was born, led by Kristina Halvorson of Brain Traffic, who wrote the book on Content Strategy, and the foreword to The Elements of Content Strategy.

The Elements of Content Strategy by Erin Kissane
Explore content strategy’s roots, and quickly learn not only how it’s done, but how you can do it well.

Responsive Web Design

People were still in the mode of trying to recreate print designs on the web, but the responsive web design movement, championed by Ethan Marcotte, really messed them up. What do you do when the screen sizes keep changing? One single design is not going to work across all these devices. The web is not print. An app is not a PDF viewer.

Karen McGrane, in her book Content Strategy for Mobile, would try to help people understand that our WordPress sites were making a mess of the web. Content was being thrown indiscriminately into fancy, pixel-perfect page layouts without a thought to how that information might be used across multiple media channels.

Content Strategy for Mobile by Karen McGrane
Adapt your workflow to a world of emerging devices, platforms, screen sizes, and resolutions.

She would describe the zombie apocalypse of problems that we were creating for ourselves by building stuff that would be unusable in a few years because we hadn’t planned for the reality that technologies change and fancy new systems become obsolete over time.

How should we future-proof our work, then? Karen McGrane recommended the approach that NPR had proven. How can we COPE with this situation? Create once, publish everywhere.

Years later, we are still trying to figure this out.

scrabble, scrabble pieces, lettering, letters, white background, wood, scrabble tiles, wood, words, refine, pause, observe, consider, repeat, creative process, create, think, don't rush, repetition, iteration, iterative,
Photo by Brett Jordan / Unsplash

In 2019, I travelled to San Francisco to participate in a conference that explored the ways that developers are finding to figure out how we COPE using the JAMstack. It is a model that holds a lot of promise, and enterprises are picking up on this and sharing what they are learning. Notably, Nicole Sullivan, Product Manager for Chrome at Google, was speaking at the conference about design systems, frameworks and browsers.

(A warning: these videos might get technical, because they are speaking primarily to developers who are pushing at the edges of what is possible with the latest technologies.)

Resources