Style Guides with Samantha Warren

or

About Samantha Warren

Samantha Warren is an independent designer, and creator of Style Tiles. She has formerly worked at Twitter, Phase2, Viget Labs and Ogilvy.

The Transcript

Transcribed by Alison

Anna Welcome to the Style Guides Podcast. I'm your host, Anna Debenham and Brad Frost is in Australia at the moment, so it's just me and my lovely guest, Samantha Warren.

Samantha Hey Anna, how are ya?

Anna I'm doing great, thanks. How are you?

Samantha Excellent.

Anna Could you just tell me a bit about what you're doing at the moment and who you're working for?

Samantha Right now, I'm an independent designer, so I'm working for myself and I currently integrate into startups teams; specifically companies who have a product or an idea that they're trying to get off the ground. I'll come in and help them to figure out what they're trying to get out, using a designer's mind to wrap my head around what they're going for, and then help them to build that product from the ground up. So, I do that, in part with also I do a lot of consulting for other brands, agencies and also venture capital firms.

Anna That sounds fantastic. The reason I want to talk to you today is because you've built up a system called Style Tiles. The first time I heard about this was on Jen Simmons' podcast, The Web Ahead and you gave such a fantastic overview of it. Could you just explain what Style Tiles are and why you think that they're great?

Samantha Style Tiles are a tool to help facilitate conversation around a visual look and feel. Because they're a tool, they can be used in lots of different ways and one of the most marvellous things about watching Style Tiles catch on is seeing how people use them differently, but the way I got started using them was to work brands who had maybe an official style guide, maybe a print style guide or maybe an older style guide that they'd been using for a long time, and figure out how that applied to the web for them.

So, taking the translation of their style and figuring out how does that translate to buttons and colours and stuff and in that general process, a lot of it was also exploring the vast reaches of what that brand could be; maybe extending it or what it might be if we scaled it back and so Style Tiles was a way to facilitate a conversation around options without necessarily designing a picture of what their website would look like.

And over time that really began to evolve and also helping to facilitate a conversation around what their brand would look like across many devices, because there are so many devices in use now today, you know, we're not just designing for 960 pixels any more. It gave a frame of reference for a client or a person in charge of a brand to understand how that brand may look across all those devices without getting hung up on the specifics of that device.

Anna Because I guess you're not restricted to a canvas size; it can be as bit or as small as you want it to be?

Samantha Exactly, yeah.

Anna Sounds great!

Samantha Yeah, it's been really helpful, especially with just trying to involve clients. A large part of it is also the exploration and conversation that happens around it and listening and making people feel as if they're part of the process. It's not just feeling part of the process; clients and designers work together and they become a team, they become a unit, and this really bridges that gap that sometimes happens where it's like, I am the consultant and I will tell you want to do. It's more about really digging into this vast knowledge base that the client has and making them a part of the project, so I think that's a piece of what Styles Tiles does for me that's very special, which is taking what the client knows about their product or their brand and figuring out what that translates into as far as a visual, and being able to sort of use them as flash cards, almost, to narrow down where it is that they want to take their brand for the digital realm.

Anna So, how long does it take you to do, say, just one Style Tile?

Samantha It usually depends. With everything in design, it usually depends, but I tend to try and timebox four hours for a Style Tile. That's kind of like my given, that's my benchmark.

If I have a client who wants me to be really prolific and perhaps explore more than what normally I would do, I would maybe extend that to six hours, and then I've also had clients who have very small budgets who can't afford that of time, so I'll a lot of times time-box it and I just say, this is what I can do in an hour and that a lot of times works too because it's less about being specific and more about beginning a journey and taking the first step.

(5:33)

Anna Because I guess what you don't want to do is spend ages on a design, present it to the client and they say, that is totally not what we had in mind. It's much better to show them a range of Style Tiles so that they can immediately say, that's us.

Samantha Exactly. And sometimes I never specifically go into a project saying, you're going to get exactly X amount of Style Tiles because I've had situations where a client, usually they have a lot of different inputs that they've given me, a lot of different attributes and so maybe I would find that maybe three or four even Style Tiles may be good for them.

And then I've had clients who've come to me and they very specifically are giving me maybe a range of one or two attributes that is more specific; they know what they're looking for and they've already narrowed things down themselves, so in that situation I might actually do one or two.

Anna On all your Style Tiles, you've got these words; they kind of invoke the style itself, so you've got say on one, I'm just looking at the one you've done for The Examiner, and on one style you've got "current, stimulating, comprehensive and smart" and the design kind of mirrors those words, and then on the next one you've got "authoritative, solid, insightful, conservative" and that's using a serif font and much bolder colours.

I really like how you've done that. Is that something you've done right from the start or is it something that you've started to blend into your Style Tiles?

(9:45)

Samantha That is in my opinion actually the most important part, because that's the piece of the puzzle that involves the client and the brand. Every brand has attributes; they have descriptors; they may be verbal, they may be visual, but a lot of times when someone is coming to me, a company or an organisation, they have an idea in their head of what they're looking for and they're trying to describe it; they're not necessarily a visual person, they may not be able to visualise what that thing is and that's why they're coming to me, so they use words, they use language to describe it and at that point I need to take a step back and try and figure out what it is that they're trying to describe.

And so Style Tiles to some degree is that: it's figuring out what the brand attributes look like and so there's no right or wrong answers, but what I tend to do here is I draw on my background in art and my background in design history and I do a lot of research around culture and a lot of times that's what helps me translate those words into visuals.

And that's just me personally, so you can do this process however you, the designer, want. But when I come to the table with this, I'm looking at the context of that brand. So, for example, The Examiner is a very old publication and they wanted to stay within their traditional roots while taking a new step forward in this century, really bringing it up to date and so I wanted to combine those two things, so I did a lot of research around where their brand had been, what type of typography was used in their original newspapers, for example, what type-faces were used for publications during the time period when they first came out and then thought about… I actually a lot of times turn to type as the first thing I investigate, mostly because type has such a really rich history and I can go and see, for example, there are a lot of typographers who draw on history as well, so I can begin to read up on different type-faces and see, OK, they were actually thinking about the same time period when they drew this font and it falls in the same time period of when my client wants to look back on their history and this is a modern take on that font so I try and find alignment in that way.

But those words don't necessarily have to be steeped in history or culture; they could just be also a way to connect with the emotion that the client or the brand has. I have, for example, had a client… when I get those words, the words come from questions that I ask and I try to get really abstract in the questions because anyone who runs a business or manages a brand, they can get stuck in their ways and so I try to get them thinking outside the box a bit and so for example, I had this one client, he wasn't able to really articulate a lot of his brand attributes using the traditional methods that I had done in the past, so he really didn't know how to articulate what his brand felt like.

A part of the Style Tiles for me is figuring out the soul of this brand; what is the core that makes this a unique brand and unique organisation and unique company? Whatever it is I'm designing for. And so for him, he had a very difficult time with this and that's fine, that's part of my job as a designer, to try and fish that stuff out, so one of my questions that I ask is, if your brand had a celebrity spokesperson… and then I give them examples like Priceline has William Shatner, so if your brand had a celebrity spokesperson, who would it be and why? And he immediately said Jennifer Garner.

Anna Wow!

Samantha I thought to myself, this was actually for a survey platform! So this product was a very utilitarian product, but he felt this connection with Jennifer Garner, this feeling that she had this versatility within her work and her range of acting abilities and so I wasn't as familiar with Jennifer Garner as I am now and I went online and I did quite a bit of research into the types of roles that she'd played and tried to get a sense for what he was getting at and I pulled up a lot of photos of her and I found this really… she's got a very classic fashion style, but she will wear very contemporary blocked out colours but she will accessorise a lot of times with bright colours, so I found this really bright yellow and green purse she had been wearing and so I took those colours as inspiration and I brought them to the Style Tile and I actually put a picture of her wearing the purse in the Style Tile and I explained to him, this is why I chose these colours; I see that Jennifer Garner is a very versatile, contemporary actress and I feel like that's also where you're trying to go with your brand. How do you feel about this colour palette?

And this really opened the client up quite a bit; it just kind of struck his creative nerve. All of a sudden, he understood where I was going and we could have a conversation and we were able to get a little bit more creative and touchy-feely and he loved it. He loved it mostly because he felt like he was also contributing; it was allowing him to be creative as well. And that can be really powerful when you're trying to convince a client of a design.

Anna There's something that reminds me… we talked to Dan Mall recently and he builds element collages which are kind of a step further on from Style Tiles and something he said is that every deliverable from now on has to come with a conversation and that's what I really like about Style Tiles; on their own, they're one thing but they really need to have a conversation that comes with them. Do you find that? How do you present these to a client?

Samantha One of the reasons I started using Style Tiles; Style Tiles were an evolution of my process over a period of time. I'd been working with clients for a while before I started using Style Tiles in particular with the name Style Tiles.

Anna You mentioned having an art background. Was it an extension from mood boards?

Samantha Yes, actually, that's exactly where it came from. I had been working quite a bit with mood boards as an option because it was clear very early on when I began doing client services that if you begin your conversation with mock-ups, you're investing a lot of time up front…

(15:14)

Anna Yeah, and making a lot of assumptions.

Samantha …Making a lot of assumptions, but also I feel like it's almost wasting your client's money to some degree; they're paying you and you're basically saying, I'm going to do throw-away work. This work and time will be thrown away and you're not going to get anything out of it.

So to some degree it was stepping back and figuring out how to be more efficient with the client's time and money and that seems to resonate! That tends to resonate with clients when you tell them that and so mood boards was a first step and I was introduced to mood boards originally by a woman named Jayna Wallace and she is the queen of mood boards: she has amazing mood boards that she originally started doing, she was working at AOL at the time, as a way to bring more personality to their products and so working with mood boards was great; however, it did not work for every client and the feedback that I was getting with the PMs that I was working with was that mood boards a lot of times, (a) a client may have already been to a brand agency, so I was working specifically at an agency that did web design, so if they've already invested X amount of dollars in a brand agency doing a mood board exploration for them, to say, hey, we're going to do that again by the way; everything they did doesn't count any more. That doesn't tend to go over too well.

And then the second reason was really, a lot of clients are having a hard time understanding the connection between that exercise and the vagueness of a mood board and what it would mean for their website and so Style Tiles… there's a couple of steps in between there.

I also did this thing I called Simple Comps for a while too, which was basically just like the header and top of your site. Just trying to do a very quick sketch of what the site would look like but that even too was a little bit too much investment and since Style Tiles was a way to begin to actually show the direct connection, a lot of clients really liked the name Style Tiles because it resonated with Cascading Style Sheets, so they were beginning to already see, OK, this is what's going to influence the Cascading Style Sheet that you are going to eventually build for me, because a lot of the clients coming to us were coming to us because they knew that we were going to build them a website.And so that was the evolution that Style Tiles came out of.

But a lot of it also had to do with… the story goes that I went to… my husband has a cousin who is an interior designer in Alexandria, Virginia and she had an open house and we went to her open house and it looked very much like a web design studio, but she had this room that she made, what is essentially a Style Tile for interior design.

She explained that she had her background in architecture and so the entire beautiful studio was covered in these big really impressive architectural drawings but then she had this room dedicated to the style of the interior design and she explained to us how, when it comes to the architectural drawings, you're talking about functionality and usability and all the things we talk about with web design; it's all of the things that require constraints and when her and her team worked through those architectural drawings, but when it was time for style, because it was so subjective, she wanted to bring her clients in, because they have to live with these things, it has to be something that resonates with them and how they're going to use or live in the space.

And so she talked about how she had these trays basically that she would take paint chips and carpet samples and tiles and she would assemble these trays for her clients and walk through them. Again, it wasn't like they were just willy-nilly picking: I want this colour and that piece of carpet, but she had gone through a process of research to figure out that client's taste and how it would work with the architectural decisions they had made up until that point and so I saw a direct connection immediately with what she was doing there.

Web design is still in its infancy; it's a really interesting practice. It's not quite advertising, it's not quite print design; it falls so far outside of the realm of these things but many of us are coming from the background of more two-dimensional design where architecture and interior design has a really interesting parallel and some may say it's a bit cliché, but anything really where you're using it but also enjoying it, I think, has a closer relationship to the web than possibly a print magazine layout.

(20:38)

Anna Absolutely. Do you use these for every client?

Samantha Well, no. Everything is "it depends". However, I have been really fortunate that a lot of my clients now come to me because they want to use Style Tiles.

The interesting thing for me has been how Style Tiles fall into different scenarios It's interesting because a lot of people immediately think that Style Tiles are for websites but I use them for everything now and it's less about because I think they work for everything; it's because I have developed a process that helps me to organise chaos really well within Style Tiles and so, for example, the product that I've been working on most recently, it's an early stage start-up video-conferencing in the education space and so we actually did Style Tiles but it wasn't until mid-project where we did a full exploration. The project's name is One Room and we did a full exploration; we did all of the user experience work and I even built in this situation more polished wireframes that could almost be interpreted as mock-ups. We needed something that looked a little bit more substantial than wireframes because we needed a lot of buy-in from investors and potential users before we got to the stage where we were ready to develop a brand and so I did essentially an entire exploration just around the product's usefulness and how it would be applied to people's lives and then, it's funny, because my clients were like, well we think it looks beautiful the way it is, and I was like well, let's talk about how it might be different and so Style Tiles opened up this really great avenue for us to explore what would be unique about the product, so we kind of talked about how it was useful up until then and how it fit into people's lives and why users need it. And then all of a sudden we got into this discussion about what makes it different, what makes it stand out? And it became a process of then going back and taking what we did in the Style Tiles exploration and re-applying it.

So it's funny, because it does not necessarily work for every client but I find that again, it's like a tool; it's a very simple tool that has lots of applications and you can use it very differently, depending on you as a designer and how you work, it may be applicable more often than you think, depending on how you decide to use it.

Anna Yeah; I've been working on a project that uses a Style Tile and it's been fantastic because that design up front, it's not a finished thing, but the UX design can be going on after that's been done and I can be building stuff and just getting ideas from that Style Tile; maybe the background colour, things like that, and then the designer can come in and make changes to the design in the browser. So it's a really nice thing to start with up-front before any of the UX has started.

Samantha Yeah, absolutely. I think that's the biggest piece of the puzzle for me is that it's less about creating something that's permanent and more about creating a conversation.

Anna Yes. I think with Style Tiles they're very different to other forms of Style Guide because they are just a starting point; they're just something that gets people talking, that gets people involved in the conversation.

Samantha And I think one of the most interesting things is, again because you could use it in so many ways, a place where I think that it's really strong is actually after someone does have a Style Guide, in exploring what the evolution of maybe a sub-brand may be as well.

Anna Oh, that's interesting, yeah.

(24:98)

Samantha I actually did a project where I did quite a bit of that recently. If you think about big brands and let's talk about, say Nike, for example. Nike has a really strong brand. Everyone recognises it when they see it. However, if you dig into the specifics of what that brand means, there's a lot of variation. Every sub-brand of Nike has a bit of a different look and feel, but you know it's Nike when you see it and so I feel like where Style Tiles can also be really strong is figuring out where a brand changes and how it changes and when it needs to change too.

Anna That's really interesting. How has how you build Style Tiles changed over the past few years? Say from when you were talking to Jen Simmons on The Web Ahead, what's changed since then?

Samantha Well, I think for me the elements that I use within the Tile itself, they are constantly evolving and changing and again, depending on what kind of… I used to design mostly sites; content-heavy large, dynamic text CMS websites whereas now I'm doing a lot more product work and so the types of elements that I use within the Tiles has evolved quite a bit.

I tend to like to… and in these situations I'm also a lot of times doing the user experience work as well, so a lot of times while I'm doing that user experience work, I'm thinking through what elements would be best to showcase in the Tiles. And that actually is really helpful because I can begin to think about interface elements as having very specific brand attributes.

So, for example, one of the attributes of One Room is that it's a very open-feeling environment and we've really grasped this idea of the circle and it's a very simple brand attribute, but the circle can then begin to play into how we approach interface elements like buttons or rollover states, or even the video itself, and so I can begin to think about those things and exhibit them in the Style Tiles, which I find to be a pretty interesting change because before when I was working on the same time type of site pretty regularly, there's patterns you see emerge; you know there's going to be a search box; you know there's going to be maybe a tagging system or comments, but now thinking beyond those elements and so to some degree, it's interesting because Element Collages and Style Tiles, there's a very vague line between the two of them. It's less about picking specific elements and more about creating a style within the things that feel the most applicable to that situation.

Anna You mentioned about getting inspiration from celebrities. Where else do you get your ideas from? Do you ever bring in illustrators, get them to do a quick doodle or something, or maybe go to stock photos, that sort of thing?

Samantha This is actually something I've been thinking quite a lot about, because with the rise of responsive web design, was it months ago or a year ago? I have a hard time keeping up, but a lot of people were complaining…

Anna Me too!

Samantha A lot of people were complaining that responsive web design is making the web all look the same and so this got me thinking quite a bit out why is that, because I really don't think it's responsive web design or style guides that create a cohesive look; I think it's more about this idea of inspiration and where people are going for inspiration and their exposure to things, so the word inspiration's kind of strange to me because inspiration's something I don't necessarily get from looking at a CSS gallery; it might be something I get from talking to somebody and I think where I tend to get my influence for where a style comes from or where the soul of a brand comes from is more in the exposure that I have to a wide variety of things within design and art and really just in fine arts in general. One of the interesting things I've been doing a lot of thought around is, I went to school for graphic design and in that, when you get a graphic design degree, you're actually required to take all sorts of fine art course that are pretty far removed from graphic design itself, so I took metal jewellery and fabric pattern design and photography…

Anna Wow!

(30:14)

Samantha And it wasn't necessarily about becoming great at those things; it was more about being exposed to them so that I can then have that exposure for when I'm thinking through the implementation of a design and so what I've been thinking a lot about is how as designers we become more and more specialised in user experience and specifically human computer interaction and what it's like to sit at this screen and while a lot of people say, oh you should get out and take a walk, I think it also is a little bit further beyond that; it's kind of about taking an interest and appreciation and curiosity in all sorts of different cultural aspects of things.

Anna Yes, it's not just looking on the screen for them.

Samantha Exactly. And it's also about history, for example. I tend to look a lot at cultural history for my so-called inspiration. Thinking whether it's inspiration within the specific world that that client or product is in or perhaps trying, within a specific time period, I tend to go to history quite a bit because people don't necessarily realise it but psychologically they're having these experiences over a period of time that they begin to file away in their head and make associations with and those associations are really powerful, and so when they see the same typeface used and associated with a specific genre, they begin to think of that genre with that typeface; the two things psychologically begin to work together and so while we don't necessarily perpetuate those trends, it's smart to be able to know when to reference them or not. So, I do a lot of history; for example, I love to go to the museum for example; I love furniture design…

Anna Do you have a scrapbook?

Samantha Well, I used to. I actually have all of my scrapbooks, especially from college, which my father so nicely boxed up and sent to me!

Anna Take these back!

Samantha Yeah, he was like, it's time for you to have them, which is actually great because it was a nice walk down memory lane, but I am a bit of a collector of books. I have a lot of books… it's funny, because a lot of them are design related but a lot of them also are art history books. I have this book I recently got that I am absolutely in love with, which is The Mid-Century Modern Complete which is all types of design that was done within the mid-century period so everything from ceramics to fabric design to graphic design. So, history is a big piece of it and culture is a large part of it but I tend to try and just think about things from a different perspective and not to jump in specifically.

It's hard because there is, I think, an importance in trends because clients do to some degree, they hook onto trends, but when you can actually dissect a trend and explain to them where its origin lies, that can be pretty powerful and impressive too; I've actually had clients where they've asked me specifically, it's funny, he held up a bag, I think it was potato chips, and he was like, "well, tell me why this bag of potato chips looks any different than any other bag of potato chips?"

It was really interesting; I think he was testing me and I immediately didn't necessarily recognise the typeface that was there but I could tell that it was a modern typeface and I knew the origins of the type family and so I could begin to talk through other scenarios where that was also used and how if's specifically used a lot in fashion and it has been for a long time because it adds a lot of contrast and I think that's a big piece of it; is that clients design seems to be magical to a lot of people; there's this kind of magic that goes on that is not true, that's the thing; there's no magic in design, that's a horrible misnomer. There's a lot of things that contribute to it, they may be pretty unclear if you don't necessarily know what it is and you haven't dissected it and that's kind of what Style Tiles is for me, this ability to dissect this bigger concept because concepts can be really mushy and begin to actually dissect it one little tiny piece at a time and deconstruct it and explain each of its smaller parts so that when the client and you talk about the bigger picture, they can understand how you got there.

Anna That's fantastic! I'm afraid that's all we've got time for, but it's been really great talking to you and I love Style Tiles, I love working with them; I'm so happy when I get a project where they're like, "Oh, we've done a Style Tile". Yes! Thank you! So, thank you for all the work that you've done on them and talking about them; it's really great.

Samantha Thank you so much for having me; this was a lot of fun.