Responsive Web Design Style Prototype

Transcript from the "Style Prototype" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Ben Callahan: Okay, so let's talk a little bit about style deliverables. We've been doing creating something now for a few months called a style prototype. Which actually has, probably even more so than that the content priority prototype has change the way we work, too. Anybody familiar with style tiles?

[00:00:25] Samantha Warren's sort of moodboard for the web is I think is kind of how she calls it. Anyway, style tiles are the same concept but it's done in Photoshop and presented to the user as a picture, a static image. So what we've been doing is, we've been actually, we've got sort of a single common markup, common document.

[00:00:47] No real content in it. It's literally just some simple, very simple items and it's the combination that we can use for anybody's style prototype. We run this part of our process in tandem with prioritization deliverables, okay? We're kind of split into two roads and were running a couple of things at once, making progress here.

[00:01:08] Incredibly fast to build these things. We're not designing a comp, okay? All we're doing is getting some concepts down in the browser, some concepts down that would indicate colors and textures, maybe some styles for links. You can show real web typography. And again, this is the deliverable that they get a link to, okay?

[00:01:27] Okay, they're gonna open it in whatever browser they use. So if they're using old IE and you wanna have rounded corners and you wanna use CSS to round those corners. That customer is gonna open it up in their browser and they're gonna see it without those rounded corners.

[00:01:42] And now you don't have to have a conversation with them about the picture of rounded corners that you showed them before. And why it doesn't work in their browser. They're seeing it, their expectations are already established. So there's some real benefits to this. Incredibly easy to show web interaction.

[00:01:59] I mean how many times are you trying to do that crap in Photoshop, and like exploiting multiple images to show what color something changes at a different state. I mean that's just doesn't, that's a pain. You can just do it in the browser. It's really simple to do those things.

[00:02:14] Literally, I can sit with a client in our conversation with a style pro prototype on the projector and get their feedback. And in real time, just make some changes to it. I mean it's happened so fast and we get through a lot of the challenging conversations about their preferences for style early in the process.

[00:02:37] And then we'll get into more detailed comps in designing in and we'll talk a lot about how we do that, but the thing is we don't miss later. We get it right because we've already had some of those interesting conversations about what their preferences are. These things we can build in less than a day.

[00:02:55] I mean it's so simple and we may do one or two of these. We may make some modifications to one. But literally in a couple days time, we can have a really solid direction on where we're headed with the with the visual side of the site. So let's take a look at a couple these.

[00:03:11] Actually, I wanna show you, so we are gonna show you a couple of ours. One for our old site the see sparkbox.com that's out there now and one for the Dress Responsibly. Yeah, for another one of our ideas. And then I'm gonna show you what has started cropping up all over the web and a handful of other people who are doing something kind of like this, okay?

[00:03:39]
>> Ben Callahan: So this is an example of a style prototype, okay? This is this was built for our site, sparkbox.com. You can kinda see we're indicating some of these big bold kinds of headlines, full width kind of bleeding black color bars or black bars. You can see it's responsive in nature, but it's just very simply responsive.

[00:04:04] We're not doing anything crazy here. What we're starting to imply to our users or our clients, that they can. Actually, like if CEO, or whatever, gets the thing on his Blackberry, he can open this up and look at it on his phone. He can look at it. And it's really nice because we can start those conversations about trying to build stuff that works regardless of the view port with.

[00:04:27] We've we're showing some iconography, some hover states, some of the illustrations style. Our side is a little bit quirky and so this kind of indicated some of those things, really simple right. You can imagine that this doesn't take long to build especially after you've built a dozen of them.

[00:04:44] You're really just going in and kind of changing some colors. You've already got some of the responsiveness in there. It's very simple to do. Here's another one for the Dress Responsively project, okay? Same kind of thing. Again, indicating some of the responsiveness here and starting to see a little tags that hang, some typography.

[00:05:03] This is web type. So we can show them what this type is gonna look like in their browser, right? Pretty simple. Now Steve Fisher is a buddy of mine. He works at Yellow Pencil and I saw him tweet this a few months back. This is sort of maybe combination of the two things that we just that we just talked about.

[00:05:25] This is one of his deliverables. It's sort of a priority. I don't think he's implying style with this, but you can see he's doing the same kinds of things. This is more of like an interactive wireframe is kind of what this is, right? You'll also notice that he's got these little guys.

[00:05:42] So he's kind of worked in. What he's found I think probably from his previous version of this was probably done statically and like Illustrator or Keynote or some wireframing too. And they probably had a section where you could kinda indicate something and provide some notes about those elements, right?

[00:05:57] So he's built that in with a sort of a modal system here. Pretty simple, main navigation, a simple one level bubble block, okay? Pretty cool. Again, what this is doing is trying to get into the browser, using the actual medium that we're gonna be delivering in. So this isn't throwaway stuff.

[00:06:16] And you use something like Bootstrap if you want. Just some framework to just to kind of quickly get things laid out. Here's Brad Frost's version. Same kind of thing. Brad's a great guy. This feels a bit too designed to me. I feel like, again, this is sort of that mentality of we feel like we need to keep getting closer and closer to that final deliverable.

[00:06:42] And really what we should be doing is identifying the earlier the process the design preferences and style preferences and then also priority. But he's got this idea of annotation they're turned off here. And if I turn them on, I start to get this little it's hard to see probably for you guys but that little question mark icon.

[00:07:01] And I can click things and it pops up a little annotation about the element that I clicked. So same kind of idea trying to sort of help a user understand some of the things that are important these resolutions in terms of priority. Again, it's responsive, works pretty well.

[00:07:20] He's demonstrating how the nab might work. Really cool.
>> Ben Callahan: And then Dan Mall just, he and his team are doing a public redesign right now of an organization. That's intended to help with reading. And so this is something he just put out the other day. This is sort of their design round two, okay?

[00:07:45] You can see the URL up there. All these will be in the slides, too, these links, so you can play with them. But he's kind of taken time to really design out a deliverable here that's being viewed in the browser. But a lot of this stuff is just sort of static.

[00:08:00] But you can see, it's he's trying to indicate how type might look. A couple different options for typefaces. I mean, it's very nice design, a nice concept. Again, this feels like this could take a lot of time to build this. And in this context, it's really sort of static, it's pictures of a website.

[00:08:26] So it's interesting. The further down you go even starts to show some websites literally in this is more like a moodboard on the web it's kind of what this is. So anyway some pretty cool. Pretty cool deliverables that are starting to pop up.
>> Ben Callahan: Questions about any of those concepts?

[00:08:52]
>> Ben Callahan: So I'll pop through these quickly. So a couple articles for you guys on this. My Creative Director Jeremy Lloyd wrote this a month or two back. Called Our New Responsive Web Design Deliverable The Style Prototype. This goes into much, much greater detail on this, on the subject of style prototype, our specific implementation.

[00:09:12] It's out on our blog The Foundry. And then, my buddy Matt Griffin at Bearded in Pittsburgh wrote this recently on a list a part called Responsive Comping Obtaining Signoff without Mockups. This is a really good article. I mean go read this if you haven't read it yet. He goes into really great detail on the process they use to avoid doing all of their design straight in Photoshop.

[00:09:40] And what he says and what we've kind of started to see as well is that we're not ditching Photoshop. I mean we still use Photoshop or whatever design tool your preference is. But we're just finding that it's necessary to use Photoshop almost more as a scratchpad for getting some of these textures and getting some of these elements created.

[00:10:02] And then pulling those in as quickly as we can into the browser into the actual medium that we're going to be delivering in. The big takeaway here is you cannot throw the stuff over the wall anymore, all right? We literally have I mean collaboration is key for us.

[00:10:18] We, like I said, we have content people writing markup. They are sitting with content management backend devs and trying to figure out what a good architecture for that would be. We take the idea of sort of pair programming. But we apply it across our organization, so that we have designers in front end sitting together.

[00:10:36] UX people in front-end dev sitting together and really trying to solve these problems and thinking from a planning perspective throughout the process. Those are the kind of things that I think are necessary for us to build good experiences across resolutions.
>> Speaker 2: I have a quick question.
>> Ben Callahan: Yeah, what's up?

[00:10:51]
>> Speaker 2: If you're showing this stuff in the browser to the client this early, are you running into a situation with the client where they expecting you to be further along than you actually are and much closer to a final deliverable?
>> Ben Callahan: Yeah, that's a good question. He asked, if we're finding that because we're showing these things in the browser early in the process, they're expecting us to be further along.

[00:11:12] It's funny because this all has to come with some sort of client education. And so what happens a lot of times if we're answering a request for a proposal or something is they dictate out the process they expect to be used. They're reading great literature that was written maybe two years ago.

[00:11:32] But it was before responsive came on the scene. And so the things that they're saying a really good things. But we try and meet, before I even spend time writing an estimate for somebody, I have a conversation with them where I say, listen, our process is a little bit different.

[00:11:47] And in the end, it generates really good results, but you're gonna have to trust me through this. Is that something that you're open to? And so, those are the kind of conversations I have. And to be honest, you notice I didn't put a big process diagram up here, right?

[00:12:00] Because every project is different. I could throw some really general buckets up here, but that's not how it works. Our medium is too flexible, too dynamic. The needs of our customers are so different. And so we just take the appropriate deliverables from our part of the pile of options.

[00:12:21] And we think we say okay this is gonna be what would really help them to understand what's next for their site. And we try to pick and choose those so that we kind of in the end have a really good experience. And I'm also constantly talking to our clients about users always saying to them if they push back on something.

[00:12:40] I'll say you know what, I appreciate that you like that color or whatever or you want your logo to be bigger or whatever. But let's talk about the usability of this thing. Cuz to be honest with you, I don't really care that your favorite color is green. What I wanna know is what's gonna work for your clients?

[00:12:56] And that's, I mean that's that simple. A client, a smart customer of mine gets that. And so that simple conversation happens once or twice, and then they start to get it. But you definitely have to find sort of forward thinking folks. So especially if they've been around the block.

[00:13:14] They've built a few sites all ready and they're very used to the process, yeah. So other questions on process? Okay, I didn't wanna spend too much time here, but I do think it's really relevant for us to cover some of these things. And then the final point the smaller you get in terms of the viewport or the resolution of the of the browsing device.

[00:13:37] The more important priority becomes and the fewer ways you have to communicate priority, right? I don't have the ability to sort of set things out in a nice wide area, but make one in the top right really bold and important and different colors. I don't have that ability if I'm severely limited on the viewport.

[00:13:54] So you have to start to think about ways to reserve screen real estate, you know, vertically. That's one the biggest challenges I see. We'll take a look at some of those issues a little later on. Content priority prototype, style prototype, these are just a couple ways that you can start to to get your customers into the browser quicker.

[00:14:15] Get your work into the browser sooner. And I think that they they've actually dramatically changed the way we build sites so any other questions? Okay.