Style Tiles and How They Work

by Samantha Warren

27 Reader Comments

Back to the Article
  1. One of the reasons I enjoy ALA is that compared to other sites about the craft, it’s written well and doesn’t suffer from marketing jargon. This piece, though, could have benefitted from being run through one of those filters that strips out meaningless MBA sales talk.
    Copy & paste the code below to embed this comment.
  2. Most clients wouldn’t know a design element if it jumped up and hit them over the head. Do you really want the client insisting on Comic Sans throughout the site?
    Copy & paste the code below to embed this comment.
  3. “Creating a mockup for every possible device or screen size is inefficient and confusing to a client.” Seems to me like we’re going through a ‘development’ or ‘maturing’ phase here. This is the 2nd or 3rd piece I’ve read where supposedly mockups—particularly of the Photoshop-derived variety—are supposedly a thing of the past. And why? Because you can’t deliver mockups for “every possible device or screen size”. Of course, if the goal is to avoid things that are “inefficient and confusing to the client”, you might still want to include one or two examples of how your wonderful creation is going to look—at least on a ‘generic’ tablet or smartphone. That way you’ll avoid grief further down the road when your design hits the fan. There are a whole lot worse things than doing mockups at maybe one or two levels. Nowadays, it’s simply part of the deal. Get used to it. The good news, is that once you’ve settled on a overall ‘look-and-feel’, developing subsets of that design ought not to be too difficult.
    Copy & paste the code below to embed this comment.
  4. Great article. We just started using these in the shop and the more I read about them, the more I like them. Leo brings up a good point though - does this mean the death of the mock-up? I think changing the way we work is challenging, but manageable. Changing the expectations of clients by removing full mock-ups from the equation could be a little trickier. I agree that in the long run this will set a much better foundation for quick iteration, responsive design and scalability but I’m interested to know how we might transition and educate clients who are used to seeing the whole room, not just the swatches.
    Copy & paste the code below to embed this comment.
  5. @IrishChieftain
    Style Tiles are a way to talk through recommendations for solving your client’s challenges not necessarily for giving them exactly what they are looking for. There are lots of alternatives to Comic Sans and there could be a Style Tile for each. @leoklein
    Style Tiles are not an end-all solution to mockups but an additional tool to help guide your client and team through the design process together. Style Tiles lead up to the selection of a style that is married with User Experience decisions. I have found that mockups are still a great tool, but the necessity to create one for multiple design options or for every page is less necessary with the Style Tile process. Efficiencies free up more time to spend on the detail later on in the process. @mhy
    Thanks! I have found that Style Tiles help set expectations early in the process that a web system is a journey. Mockups still have a place in the journey, but moving them farther along in the process helps your client understand the evolution of the problem being solved.
    Education has been the key to success. I have found that clients are really receptive to not receiving mockups up front if they understand the efficiencies and benefits of the entire process before engagement.
    Copy & paste the code below to embed this comment.
  6. Interesting piece and some good thoughts overall. Unfortunately very marketing copy heavy, as has been pointed out. Normally I wouldn’t care, but you’ve worked really hard here to brand the term style tiles while you’re basically talking about the time honored tradition of the brand board. After gathering your client’s thoughts, you put together a visual representation of their brand as you heard it, and have a discussion they can react to. Usually this includes a mock-up of a brochure, some letterhead, primary and secondary color choices, photo selections, and more recently a web or facebook page. The brand board is used as a tool to have the visual dialog. Typically you’ll prepare two or three different options to discuss with a client. This should be part of the branding process. These are then taken and adapted into the brand style guide, which these days should include all of the information you’ve specified, including web fonts, hex colors, and any special visual requirements. Even when you have a client without an offline presence, the brand board is still a powerful and important tool in the process. As a design community we have a term for this, and a long history of the process. I can appreciate you want to own a brand here, and you have a website already set up to reap the SEO rewards, but the industry is best served when we use common terminology. In the larger picture of the dialog, I guess it comes as a little concerning we’re talking about brand boards as if they are new trend to try out. They work, and they’ve been in practice for decades.
    Copy & paste the code below to embed this comment.
  7. It’s too bad the knee-jerk reaction to this article is so negative. One of the reasons I like ALA is that it offers genuine marketing (as well as design and code) insight. I direct our account executives to this site regularly. Hating on MBA language is misguided. The stereotype is that we creatives have their heads too far in the clouds to see the client-agency relationship as it truly exists. Comments like Victor Vacendak’s validate that stereotype. It seems to me that design tiles would be different from brand boards. Brand boards represent the brand overall from a graphic standpoint; in this case, we’re talking about a board filled with just design elements for the website (and different executions of them). @Wild, if brand (or mood) boards are already a part of your workflow, perhaps the suggestion here is to offer them more weight and importance so that you won’t need to mock up designs for every display scenario. Common terminology is an ideal, not a reality. As referenced above, I’ve heard brand boards referred to as “mood” boards. If I were to apply for jobs now, I’d be searching for titles including Web Designer, UI Designer, UX Designer, Front-End Developer, Graphic Designer, Web Art Director, Webmaster and a dozen others. Consistency doesn’t exist. Thanks for the article, Samantha. I enjoyed it. jP
    Copy & paste the code below to embed this comment.
  8. I enjoyed your article Samantha and throughly enjoyed reading about your process. @Wild
    What design professionals call “standard terminology” is only applicable to design professionals and then again by each subset within the design community. Print designers, web designers, storyboard artist, writers, photographers, etc. all have different methods of presenting design concepts to clients. And every one of them originated from traditional advertising and marketing. It makes no difference what a process is called. It only matters whether or not you find it’s application valuable in your own process. @Victor Vacendak
    Nearly every client pitch I’ve participated in over 17 years has required me to translate marketing mumbo jumbo into design-centric terms. It’s part of your job. Get used to it. @mhy
    And, no, it doesn’t mean the death of the mockup. Talk to me when painting or publishing dies.
    Copy & paste the code below to embed this comment.
  9. Sometimes designers are faced with a situation where they must prove that the web site is designed correctly. Communicating with clients on any issue, you should try to bring up their confidence, they should not doubt your abilities. Do not give reason to think, if you have lost interest in work or are not interested in cooperation. You can ask the client to show the design of Web site that he likes.
    Copy & paste the code below to embed this comment.
  10. you’re touched to good point. i tkink of that, designers must be look from end user eyes to. when designers blend with style and user needs, it will be good result…
    Copy & paste the code below to embed this comment.
  11. I’m behind you all the way Samantha! With the addition of style tiles in the design process (along with wireframing and other UX activities) no longer does a designer need to stare at blank Photoshop file and wonder where to start! I’ve found this makes my team a lot more efficient because once we have an approved wireframe and style tile, we only have to provide one design comp for the client to review before building out. Plus client feedback on the comp is more focused on the design as a whole rather than getting stuck on whether or not they like the fonts or colors.
    Copy & paste the code below to embed this comment.
  12. In the spirit of the companion article in this issue, please receive this and a following comment as constructive criticism. The second paragraph begins: “Websites are so much more than just usable interfaces: they *tell a story*”¦ a style tile illustrates how a designer translates a stakeholder’s brand to the web.” You can find adjective 9 times in this article, but verb is not found? To *tell a story*, consider page 108 in _Write to the Point_ by William Stott: “Here is one of the most painful paragraphs I know. It is from John McPhee’s book about frontier Alaska, _Coming into the Country_. Note that it never tries to describe what a bad toothache _feels like_. It simply tells us in cool, flat words, how an isolated trapper _reacted to_ a toothache.” [emphasis added]
    Copy & paste the code below to embed this comment.
  13. Continued from above. To meet user goals, consider pages 92-94 in _About Face 3_ by Cooper, Reimann, and Cronin. * Experience goals: “Visual language studies, as well as *mood or inspiration boards*, which attempt to establish visual themes based on personna attitudes and behaviors, are a useful tool”¦”
    * End goals: “End goals represent the user’s motivation for performing the tasks associated with using a specific product”¦end goals should be among the most significant factors in determining the overall product experience.”
    * Life goals: “Interaction designers must translate life goals into high-level system capabilities, formal design concepts, and brand strategy. *Mood boards* and context scenarios can be helpful in exploring different aspects of product concepts, and broad ethnographic research and cultural modeling are critical for discovering users’ behavior patterns and deeper motivations.” This article, published in Project Management and Workflow, begins: “When you engage in a new client project how do you get started? A solid process”¦” It would have improved this reader’s response if the introduction had said explicitly for which user goals it is relevant (one point for experience goals, half point for life goals) and for which goals it is not (one point for end goals, half point for life goals). Even so, a tie score is a good effort, so thank you for sharing with us.
    Copy & paste the code below to embed this comment.
  14. “Designing our design process “As web designers we craft experiences for _users_, *but* we often *overlook* the need to design the experience that _clients_ have during the web design process.” [emphasis and bold added] For a reader to interpret this article in the context of the entire design process, this sentence would have been better placed in the introduction paragraph than in the conclusion. Found in the body of the article:
    * 42 client
    * 15 stakeholder
    * 1 usable
    * 2 user
    * 1 reader
    Copy & paste the code below to embed this comment.
  15. Hi Paul and JP. Our terminology absolutely does matter when we’re changing it around only so we can start and sell a brand. If the idea really has merit, list all the possible names, acknowledge the idea is a riff from a standard practice, and don’t try to guide the audience to your own marketing initiative. Don’t come to an educated audience and pretend you have something new. Ending with a website all set up to reap the rewards of this commentary turned this piece from an interesting point of dialog to an advertisement. That isn’t why readers come to this site. Instead of acting shocked at the “knee-jerk reaction” to this article, maybe you should consider it is a very valid criticism. Stop shilling and start communicating.
    Copy & paste the code below to embed this comment.
  16. You might be interested in this backlink generation tools
    “online backlink generator”:http://www.backlinkgeneration.com
    “backlink generator”:http://www.backlinkgeneration.com
    “backlink tool”:http://www.backlinkgeneration.com
    “seo submission software”:http://www.backlinkgeneration.com
    “automatic backlink software”:http://www.backlinkgeneration.com
    “backlink building software”:http://backlinkgeneration.com
    Copy & paste the code below to embed this comment.
  17. The design has to appeal to the human eye so people can rate the style and it should have a good end result.
    Copy & paste the code below to embed this comment.
  18. Firstly, thank you, Samantha, really great post—even if some of the commenters missed the point.  To say that Style Tiles is a marketing initiative and that there is some sort of agenda to subvert another method is misguided and cynical.  Samantha has always been open about web designers sharing their process for the good of the industry. Style tiles can be called whatever you want them to be called—though “_Style Tile_” is catchy and to the point.  The idea of getting granular with visual design—separating style preferences from design goals—while involving the client early on frames the discussion in a way that doesn’t negatively impact the final design outcome.  It starts to build consensus and trust that propels the rest of the process along a smoother tack. Having a process that works is great and client education of that process is key. But, somewhere along the line, usually between wireframes and visual design comps, clients feel the creative process becomes nebulous. Likely, this is a result of legacy; the way ‘we’ve always done it’ or, a lack of respect for the client, playing a vital role success of the outcome. One commenter already proved that point when he said _that a client wouldn’t know design element if it hit them in the face_.  Evolving the process so that it becomes a partnership or a collaboration will net the best solutions to problems that can be solved by design. Style tiles accomplish this and have helped our shop become more efficient and nimble.
    Copy & paste the code below to embed this comment.
  19. Interestingly, the stile tiles do not include real content. My colleagues and I have recently switched to an approach that revolves around having as good real content as possible in all design phases. This both serves the designers — they really understand what they’re designing around — as well as the client — who better comprehends what the final design will look like.
    Copy & paste the code below to embed this comment.
  20. We too think that Google is getting smarter day by day and search engine optimization should be done meticulously and conciously. Not only variation in anchor texts are needed but your overall link profile should be diverse so that it looks natural.
    Copy & paste the code below to embed this comment.
  21. Hi the information was really helpful for me
    Specially I’m beginner in web design and always be confuse about the page layout
    Copy & paste the code below to embed this comment.
  22. Printnweb is an established UK provider of print design, company branding, promotional design, website development and SEO (Search Engine Optimization) in Birmingham and the Midlands. All our products are developed with purpose and goals in mind insuring that your marketing strategy achieves the results needed to drive business within your company. All aspects of design including, web, and e-commerce are entirely custom built to your specific needs.
    Copy & paste the code below to embed this comment.
  23. Thanks for your well thought out article Samantha. I do some similar processes that differ a bit in how I accomplish them… after my initial call or meeting with the client, I pick some existing sites and ask the client to comment on them and to pick design elements and color palettes they like. Once I have a solid idea of what they want I make a “Design and Content Worksheet” where all the job specs are detailed. I go back and forth with the client revising the document. Most of my “D & C"s are 6 pages but one went to 25 pages when we attached all our emails to it.  Then I frame out a simple mockup. Sometimes I’ll copy that mockup with different design iterations so the client can do side by side comparisons. And I continue to revise until they are satisfied with every detail and we add the content. I like your style tile concept… I personally find it faster to build simple mockups because I use WordPress and I’m more a developer than an artist. Regards - Mal
    Copy & paste the code below to embed this comment.
  24. I read the original article at http://styletil.es/ and I’m glad I followed the link here because this version filled in some of the gaps and answered some questions I had. I downloaded the template from the other site and was not quite sure what I needed to do with it. I think the concept is to use the right side for descriptive pieces and the left side as visual aids. My take away from this article is that the style tile is another communication tool, if you will, for aiding the process of a “mind meld” with the client - another way to walk in their shoes, get in their mind - in order to end up with something that will make them say, “That’s exactly what I was thinking!” It also seems that style tiles would help move through the style guide creation on a more visual level for the client. On another side of the coin, I see style tiles in the process right around questionnaires and wire frames for bringing more ‘reality’ or ‘life’ to a concept that is being conceived. I don’t think that mockups will go away because the typical client does not have the experience to translate a description, or just bits, into a fully imagined concept. A visual is important for them.  When working with clients I have to consider them holistically - beyond just design, organization, deadlines, and process - and include their comfort level with and for the duration of the project. When I can do something at the onset to ease their mind it bodes well for everyone involved. I see style tiles as tool for this as well, introducing visuals before jumping into full on mockups. I do like the idea of style tiles. I will work them into my process. Thanks for triggering the thoughts…
    K
    Copy & paste the code below to embed this comment.
  25. While style tiles are great in concept I think (at least for the projects I work on) it just adds a step to the process instead of making my time more effective. I think @lustigson actually added the most relevant comment so far in that it doesn’t show ‘real content’. How can you make design recommendations without seeing the element in context of the full page?
    - If I use a serif over a sans serif for body copy will that make my page look heavy when I have full content?
    - If i make large buttons (ie the Examiner examples) will that cause problems when I have 4 of them on a page?
    These things you probably won’t know until you design out the page. The other thing is that very few of my clients would be able to look at a style tile and be able to visualize the whole page, how the elements interact, how the weight of the text shifts the focus from the hero photo, how the banner ads make the page unbalanced within a certain palette. I feel this kind of item is helpful for the hand-off between designer and developer, but probably adds nothing more than just showing a full page design (other than a quick reference for hex codes which could be achieved much simpler than creating out a full style tile). I agree that designing out every page of a site is rather pointless once the base has been established, but what does this add that a full page design doesn’t? It also doesn’t alleviate any issues with responsive design, or designing for different platforms, since they still need their own specific considerations anyway.
    Copy & paste the code below to embed this comment.
  26. @nathansarlow Well put, that expresses my concerns better than I could have done myself! The idea of something to simplify the process of designing for multiple devices is obviously very appealing, as a developer I’ve found myself in the position of having to increasingly interpret designs out of their original context because of the variety of different devices out there. Increasingly, the days where you’d just slice a mock up and be done with it, are gone. Unless you’re in the happy position of having the time and budget to mock-up numerous versions of the same design at different screen dimensions, you either find yourself having to interpret designs, or else becoming more inventive in process. I think the key benefit of this “style tile” idea though is in aiding client communications, rather than developers or designers. It basically is a way of focussing the client on design without the distraction of content and layout. So as others have said, it’s not really so different from a brand board / mood board or whatever you want to call it. But sooner or later you’ll have to deal with layout and content, and I’m not sure if this technique is a fix for the complexities that we all tend to encounter there.
    Copy & paste the code below to embed this comment.
  27. Here’s the link to the case study with the final design that was created after this process. Helped me to see what it ended up like, not just how it got there.
    http://samanthatoy.com/washington-examiner/
    Copy & paste the code below to embed this comment.