Episode 13: Develop the Graphic and Interface Design (w/ Sam Otis)

Hello. This is the Web Project Guide podcast, and this is episode 13, Develop the Graphic and Interface Design. I'm Corey Vilhauer, Director of Strategy at Blend Interactive and co-author of the Web Project Guide. Our guest today is Sam Otis, lead designer and front end developer at Blend Interactive and the designer and illustrator of the Web Project Guide. But first, I'm joined by the other Web Project Guide co-author, Deane Barker, senior director of content management research at Optimizely. Hi, Deane.

Hi, Corey.

Design is your favorite topic, isn't it?

No, design [inaudible 00:00:39].

Tell me. I know what the answer is, but remind me what you used to tell me. The perfect design would be.

Black text, white background, 12 point times New Roman with bright blue underlined hyperlinks. I maintain CSS ruined the web.

Every time. I think it's wonderful whenever you, we talk through that. The funny thing is you're not completely wrong.

I'm not completely wrong and here's why I know that I'm not completely wrong because CSS didn't ruin the web. CSS is great and everything, the design is good. Good design is good, but the fact is there's a hell of a lot of bad design out there. There's design I call, and forgive me in advance and may my late mother never hear this, but I have a theory I called masturbatory web design. And masturbatory web design is when a designer makes something that makes them happy and only them happy. They design something solely for their own pleasure. The design is, shall we say, masturbatory, and you see that way too often. A good designer doesn't design for themselves, they design for the information and for the interaction and for the purpose. But that sadly few and far between, especially among new designers.

I just skimmed through Mike Monterro's Design as a Job. It was either that one or it was his other one. You're my favorite client, one of those two. I just looked through it yesterday. And this is funny because there is a note in there, and he feels very strongly about this. He feels very strongly about a lot of things, but specifically on this idea of design requiring essentially a set of goals and requiring a solution. And this idea of masturbatory design is not actually designed at all. It's just drawing. It's just creating a file, but it's not designed because it doesn't actually solve an issue. It makes sense that that's the type of thing where you look at and be like, "This doesn't seem right." And it's because it's not actually design. It's not solving any actual problems, it's just being done for its own sake.

If I could expound stupidly on philosophy, which really have made a career doing. The point of a designer is twofold. Number one, to make something usable at the same time while invoking an emotion. We talk about making something pretty, making something look good. Really it's not what they're doing. They're sort of like time shifted psychologists, right? What they're trying to do is they're trying to evoke an emotion in you. And it may just be an emotion like, "This is beautiful. I'm very receptive to the information." Or it may be very specific, You may want to evoke anger or you may want to evoke tranquility or something like that. And so what a designer really has to do and the needle that they have to thread there is making the information accessible or the task accessible or the interaction accessible. Well, at the same time, kind of psychologically manipulating you to feel the emotion that the owner of the information, the owner of the web property wants you to feel.

(03:53)
And the guy that we are interviewing today, I have said this before and I will say this again and I will die on the sale, is the single best designer I have ever known in my career. And I've worked with a lot of designers. Sam Otis is absolutely amazing to the point where I could tell Sam... I didn't have to tell Sam, make the interaction clear, make the information clear. That was just a given. But I could tell Sam my goals for the site in a psychological social sense. I could say, "This is what we want user to feel. This is what we want them to do. This is what action we want to prompt them." And Sam would just get it, man. And he could take the information, make it very, very usable, very, very clear, very, very easy to absorb. But he could also do some Sam Magic and he could wave a wand and he could get the user in the mindset that I wanted them in to consume the information. That is the mark of a great designer. Absolutely. And Sam Otis for my money is the best there is.

Well, let's get into it. Sam Otis is lead designer at Blend Interactive, and he is also lead designer and artist for the Web Project Guide, both on the web and as the physical book. But first, this episode of the Web Project Guide is brought to you by Blend Interactive, a web strategy design and development shop dedicated to guiding teams through complicated web and content projects. Blend's been building great websites for over 17 years. Sam has been there for 15 of them, and we're always looking for our next partnership. So visit us at blendinteractive.com. All right, let's welcome our guest, Sam Otis. Hi, Sam.

How's it going?

Good. How are you?

I think it's fair to say, this is a weird one for several reasons, right?

Why is that, Deane?

Because we have long... you and I have history, we have long history with Sam.

That makes us sound really scary. We have history with you, Sam.

Well, should we expound upon that a little bit just to give people some context?

Go for it. Sure. Go ahead, Deane.

Blend Interactive, was founded in 2005, and Sam Otis was employee number two. I mean, if you take out the three partners that founded it, you were external employee number two, right?

Yep, that's right.

I was involved in the hiring of Sam... Actually, honestly, I wasn't that involved. You were hired by somebody else entirely. But I was involved in the hiring of Sam in 2007, and here we are 15 years later. But this even goes back further because the company that is behind the Web Project Guide, which is Blend Interactive, was founded by myself, another guy and a woman named Carlos Santi. And Sam, why don't you explain how you knew Carlos Santi?

Well, we actually went to college together briefly, and then she came back and taught my very first web design course in college. So from that point on, I was aware of her and I did an internship and some things like that. And then later on I actually hired her when she was doing some freelance work and did interactive CDs back in the day when that was a thing. So physical media, if you can imagine. And then when Blend was a thing, I came on board doing some freelance banner ads and things like that. Flash work, lots of work with flash. And then we ended up... you couldn't get rid of me, I guess, came on full time.

We moved you from Eastern Iowa to Sioux Falls, I remember back in the day. Now, Corey, what don't you explain other than Sam's affiliation with Blend, Sam has an affiliation with the Web Project Guide.

Well, obviously, Sam was the designer for the Web Project Guide, both the book and the website. And so pretty much anything that you see that's visual with the Web Project Guide, down to a handful of the diagrams that Sam thankfully fixed from the random, essentially MS Word art level.

I use PowerPoint.

I think I sent you over stuff from Sketch. I was like, "I'm going to make this a look like something that a designer did." And then you took it and went, "No."

When it comes to design, it's safe to say Corey and I are utterly untalented. But I also want to point out that I've written four books and Sam has designed three of them. The only one Sam didn't have any part in was the O'Reilly book, the original one, but the three books that came after that, Sam designed the covers or the interiors, or both. Sam, let's go back in time. Let's go back in time to the heady days of 2003, 2004. Back then, when you first got on the web and started designing, what were you working with? What were the mediums back then?

Well, it's funny thinking back. Things have obviously changed over and over again. Things seem to cycle around. Screens have gotten bigger, responsive design's kind of a thing. Web 2.0 is the thing. Everybody had to have shiny buttons and certain aesthetics come and go.

What was Web 2.0, again?

I just remember they had a lot of shiny buttons and a lot of logos had little cartoon characters in them.

Let's go back to actual tools. I mean, you had mentioned Flash. Did you do most of your work in flash back then?

Well, there was a lot of flash work, but most people were building websites in Photoshop. So you take a photo editing software and you're doing layouts for the web in it. And really you'd then cut up little graphic pieces and kind of hodgepodge them together back with the code to try to reassemble the slices of the Photoshop file back into a functioning website. But there wasn't a lot of the tools that you'd think of now with that are a little more vector based. Everything was kind of a glorified photographs that you were trying to turn into a website.

I remember you used to talk about cutting up designs, right? So we would get a comp in Photoshop or something. Well, you would export it like a jpeg and then someone would need to cut it up. And I remember the utter joy and horror of dealing with rounded corners, nightmarish before we had border radius in CSS, we had to use graphics, see rounded corners. And every webpage was basically HTML, desperately trying to hold graphics together and in the right place. Now, there were some automated tools. I remember Adobe had some automated tool that would take a Photoshop design and cut it up into the most atrocious HTML anybody had ever seen.

They had Adobe Go Live was one that would generate HTML for you. And all of those kinds of tools were things that just, it was something that basically tried to make an image map or... it was totally inflexible, just chop it up. And a lot of the code it wasn't even human readable by the time it got done with it.

Barely machine readable.

Barely machine readable.

Like you said, HTML. And I know there's no video here, but I want to air quote the word HTML there. It was pretty inhuman back in the day now. But let's talk about flash, because back in the day, if you were awesome, you were working with flash. Were you doing a lot of flash work? A lot of shockwave work?

Yep, lots of flash. I mean, there was the whole era of when every good website had a flash intro, some experience that the person would get when you land on the homepage and you get probably sound and this big animation happening. But a lot of the work I did with flash was with banner ads and animating that kind of promotional pieces for lots and lots of campaigns of that, lots of ad driven websites.

I still remember the days before we had web fonts. If you wanted to use some fancy font, you could. Sam, you created us a flash file that you could pass in the query string, the text you wanted it to render and the font you wanted it to render.

I forgot about that. That was, I think it was called Sifer. But it was a flash work around for trying to get fancy looking tight before web fonts was the thing.

Sam, when you say you forgot about it, is that just the effects of time or is there a post traumatic stress reaction there?

My therapist really doesn't want me to go into that at this point.

Good therapy can really help. In the past you would just do designs and Photoshop or whatever and then turn them over to a developer, which would then put them into HTML. But I think the role of the designer and the role of the front end developer have collided in some ways. I remember when at Blend there was a point where had to stop thinking of you as a guy who worked in Photoshop because you were actually doing quite a bit of [inaudible 00:12:25] work. How did that morph your career? How did that change over time?

I mean, it's really been a game changer. I mean, coming from that world where you're just basically making pictures of websites and somebody else is actually making a website. From my perspective, the benefits are huge because the creative process can bleed over into the coding process. So especially when you're dealing with responsive design or other kind of interaction things, you can really expand on what you showed in the picture of the website and actually make it the next level of refined when you're actually able to build what's closer to the final product. When you're handing over a Photoshop file to someone, it's really just, it's the blueprint, it's the drawing of what you're trying to make. There's the creativity and the level of refinement keeps going beyond that point.

Sam, can you best explain the idea of responsive web design? How do you explain that to a client or somebody who maybe isn't a web person?

Sure, absolutely. I just use all the jargon and then expect everybody to know. No, I mean, responsive design basically is the idea that a website adapts and re-flows to fit the size of the screen or device that you're on. So regardless if you're on a phone or on a giant 4K monitor, the page you're on uses the available space, tries to give you good experience that. And that's kind of related to mobile first design, which when you're trying to figure out what you want to, how you want the page laid out, if you start with the smallest screen and you can make those hard choices to distill the layout down into something that works in the minimum amount of space. And then it's easier to add and enhance that as you get bigger. Rather than doing the trash compactor method where you have something that looks good on your laptop, but then you just mashed it down onto a phone.

That's funny. I think I used the Star Wars trash compactor scene as a metaphor, which I realized just recently when I reread the design chapter. I mean, that was all a response to... I mean, it was a response to a lot of things. But what we've seen go away because of that is the mobile, separate mobile app, the mdot something site that's completely separate. It might have the same content, but kind of it doesn't.

It usually didn't have the same content. You had some really truncated version of half of what you wanted.

Let's talk about the mind of a designer when it comes to responsive design. You were neck deep in that transition. I remember talking to Carla once, I had visited a website that had an mdot, it had a customized mobile site. And I remember thinking, "Oh, this is so easy to use, this is great." And I went to Carla, said, "Hey Carla, we should do this." And she goes, "No, everybody's using responsive design now." And I was like, "What the hell was that?"And so Sam, you were ground zero for this. You were neck deep in this. As a designer, how stressful was it? Because you had been raised from a toddler, but you had come into the age of very, very specific rigid designs. This is how it's going to look. And with responsive design, I feel like designers all over the world were told, "Okay, now let it go and just let it go and understand that it'll change." And how stressful was that for you?

Well, very, very much. Coming from a print background doing brochures and other things like that, you spend a lot of... I remember one of the things that annoyed me and a lot of people was, and on the web in generally this is true but responsive design made it completely untenable, which is, you have word wrapping. Anybody that's doing a brochure or something, you make sure that stuff flows nice. You don't have orphans and widows in the tech typography and all this detail there that just as completely uncontrolled on the web. It's just going to wrap how it fills the space. So a lot of those details you had to let go of. And I know there's the phrase pixel perfect design that everybody wanted something pixel perfect. It had to be exactly where you wanted it.

(16:25)
And I think for me it was realizing the things that you can control and the things you can't control. And some of that is making the transition from designing this page, this is a brochure, and thinking more about design patterns and reusable pieces that within that are controlled. But the overall thing is a much more dynamic.

I feel like there was probably designers that never made the transition. I feel like it was such a huge transition to move from, it needs to look this way all the time. And you me mentioned coming from print because your background prior to working in digital was working in print that is print to web 1.0 is shocking and painful for many designers. And now from 1.0 to responsive design, you're basically being told you can really only suggest things. Now the browser's going to do what the browser's going to do. Did you look at that as a pain in the or did you look at that as a challenge of something new you could learn? And I know I framed that terribly, but be honest.

I mean, I think that was... It's like the web in general. Everything's a learning process and a lot of that was painful at the beginning. That's one reason people, not to mention flash again, but people like flash because everything was locked in and it wasn't nearly as dynamic. And so you could do a lot more like, "Hey, this is a print design in flash that works." But I think it's about figuring out where to apply your effort and what things you can't worry about.

What, now I'm going to not mention your age, but you've reached that sage level where, what do they call design management or design leadership? There are a lot of incoming designers. I've noticed that a lot of people with artistic talent very much want to get into digital design. What do you say to those people? I mean, is there a single personal or professional quality that would serve designers well? I mean, if you had to sit them down and give some incoming advice, what would that be?

Well, that's a big question. I would have to say that design principles are design principles. So no matter what medium you're in, stuff visually works one way or another and it's either going to work or not. But when you're dealing with digital media in the web, it's a lot more about interaction design than just aesthetics. So thinking about how people are going to interact with things and the context, what they understand is as big a part as of the design as what it looks like. I think there's just keeping both those two pieces in mind would be my starting point.

Did you see that as a career transition when you were first brought in, it's just, "Hey, make this pretty," and now are you being asked to do more in terms of understanding the user's mental model of the domain of information? I always think that design... there's a blurry line between design and information architecture because information architecture is always translated through some kind of visual metaphor. Do you find yourself drifting across that line?

I mean, especially from way back in the dark age is that definitely there's a lot more thinking about that information architecture kind of thing where you're understanding where people are coming from and what they're trying to achieve. Design is visual communication and solving those problems anyway. But I think because there's that interaction piece beyond just reading or scanning a page or something, I think there's a lot more multi-step how do you get goals achieved thinking than just like you said, color in pictures and making it look pretty.

I think we see that at Blend in that we have people who... We have this group of people who ends up having to branch out beyond their pieces. We're a smaller team, so we don't have five designers and seven cotton strategists and a team of people managing that at the top level. It's you know design and you know front end, but you also... your professional development almost becomes reaching out into the opposite sides of it. It's understanding how front end turns into back end or the opposite way, understanding the research process and the content process that pulls design decisions in. And I found that myself, diving closer into interaction design, reaching back into, even back to the sales process, it's that idea of multidisciplinary knowledge being the next step in the process. Because I mean, at some point you're still always bound by the technology. You can only go so far into, I don't want to say getting better at design.

(21:03)
I suppose you can always get better at design, but with all these things, there's a certain point where you reach... you hit the point where that you've learned everything you can learn around the technology, around the process and stuff like that. And you just start spreading out to the other disciplines.

Yeah, and I mean, you touched on a point where all these steps in the process of creating website are interconnected and they build on each other. So even if you're not doing backend development or you're not doing interviews with users or something like that, having an understanding of how that all works is going to help you with the actual piece that you are doing. Try not to step on everybody's toes by doing their job.

Sam, what do you think people get wrong about web design?

Let's see. I think the-

I like that you're prepared to give a big long list like, "Which of these should I point out first?"

All right, everybody grab a pencil, take notes. The obvious is basically how to look at design. When someone's presenting design, what do you look at? We're not really talking about what the actual content of the page is. You show a mock up and somebody's going to inevitably say, "Hey, this title isn't how I would say it. We should change the copy or something." And that's not the thing we're looking at. And I think if we're talking about wire frames, you're trying to figure out the main structure of a page and what's most important and where things are organized. And then when you're looking at a more high fidelity mock up, you're hopefully have solved those problems. And you're looking at maybe branding and contrast and accessibility concerns. A lot of times people haven't looked at design and don't know how to respond and give good feedback. That's a common thing.

This is your chance to tell clients to stop doing something. What is it you want them to stop doing?

One thing that I think would help the design process is related to what we just talked about where you have design feedback and a lot of people want to... Design's very accessible. Everybody sees it, they know if they like it, they know if they don't like it, but they may not know the language to explain why. And that's fine. But I think one of the things that often happens is people will try to suggest a solution to a design problem rather than helping the design team understand what the problems their users need to solve and let the designers solve the design problem. And the reason that becomes a problem is because if a client comes to you and says, "Hey, we need all the buttons to be circles." That doesn't necessarily have anything to do with the site goals or anything like that, but it ends up being treated as a requirement for the design.

(23:37)
Now all of a sudden everything has to have circles, even if that causes lots of technical problems or extra work or impedes the other site goals, just because the client has the final say in what has to happen and what they want. So having the client be the designer becomes they have more weight than they should even if they're just trying to suggest an idea. So help us understand the problem rather than try to give us an answer.

Sam, what are you working on right now?

Besides our stuff?

All of your stuff.

What stuff is competing with your attention on our stuff?

In all of my free time... I have a side project. I'm working on a children's book right now, which is... As I did illustrations for the Web Project Guide book. This is just me diving into the illustration world a little bit and making a book mostly for my own kids, but also just as a project. So if you're interested in that kind of thing, you could go check that out at verysamish.com and see the project unfold over there.

I know this because I'm friends with you on Facebook and I follow you on Instagram and I saw you post pictures from it and I saw you complaining. I don't want to say complaining, but I saw you talking about how shadows are hard and there are some people dancing around a fire and you have shadows and they're difficult. But what I've always loved about you, Sam, is that you're not a... Ooh, I want to say you're not a digital first designer. And in saying that, I don't want to impune your digital design credentials, but many times at Blend it would just be you and a piece of paper and a pencil. You literally would draw things out. And I think that there were a lot of designers who probably can't design away from Photoshop or Sketch or Figma, whatever, whereas you really seemed more at home with a pencil and a piece of paper and some of the designs that you had on your wall at your desk at Blend were just things that you had freehand drawn and they were wonderful and amazing. That children's book looks absolutely spectacular.

Thanks.

It's very samish on Instagram, right? V-E-R-Y-S-A-M-I-S-H.

Correct.

I think it's interesting because Sam-ish, I mean ish is a suffix means sort of, but you're saying very sort of Sam, which I just don't feel like that fits. Grammatically, I think you're way off there, but you have great design credentials, semantically, you got some issues.

No, it's because it's online, so it's not really me. It's like an avatar. It's not really me, but now it's very almost me.

All right. That's what we got, Sam. Thank you.

Appreciate it. Thanks guys.

All right, we are back. That was Sam.

I've been following, like I mentioned in the interview with Sam. I follow Sam on various social media and he's been posting pictures and Sam is a very rare... Sam's not a designer, Sam's an artist. He could sit down with a pencil and a piece of paper and draw the most amazing things. And the artwork you've done for this children's book is just really lovely and amazing.

You got any other thoughts?

I didn't really have one to start with. I'm not picking on the thoughts.

In the script. I always have final thought from Deane.

Oh goodness. Do I have a final thought?

I don't know. Just say something smart.

I said that before the interview. I'll maintain again. A designer is a psychologist. A designer, a psychologist? No, I'm going to make another analogy. A great designer is a conman. A great designer is a con artist. A great designer is a master manipulator. They can have you understand in the information but understand it from a mental viewpoint that you would not have normally come at the information with. That's what a great designer can do. They are a consummate con artist and I mean that in the best possible

Okay, cool. Everyone's going to love hearing that. That's our show. Thanks to our guests, Sam Otis from Glen Interactive. He is working on a children's book. You can see progress on that at very samish on Instagram. That's V-E-R-Y-S-A-M-I-S-H. The Web Project Guide is a product of Blend Interactive web strategy, design and development shop that builds websites and guides teams through complicated web and content problems. Everything from design to actual launch. So we are dedicated to making great things for the web. And this is one of those things. Again, this is episode 13 of the Web Project Guide, which also corresponds with chapter 13 of the book, Develop the Graphic and Interface Design. I hate that chapter name. I still hate that chapter name, but it's a necessary chapter name, Deane. I was actually looking through the old outline of this book and it says Develop the Design, but we had to separate it for the book into graphic design and interact interface design, because we talk about them in separate ways.

And develop the design has a great alliteration that you just lost out on. That was an edit you made, my friend.

Probably. That's the only bad edit I made in the entire book. You can read the full text of the chapter, regardless of what you want to call it at webproject.guide/design. It would be horrible if you listened through this entire thing and didn't have a copy of Sam's design on your desk. So go ahead and get yourself a physical copy of the Web Project Guide. You can order directly from us at order.webproject.guide, or if you're shipping internationally, you'll find better rates ordering the book through Amazon. No jokes this week we just want you to give us those five star reviews, that Apple podcast or Spotify or if you've read a copy of the book, either online or in person, shoot us a five star review on Amazon. Deane, Isaac signed up for the podcast and follows the podcast on his phone so that he... specifically to give us a five star rating.

How old is Isaac?

He's 13. I walked in there and I heard my own voice coming out of his room, which was the first weird thing. And then I asked him... I walked in, I was expecting him to be listening to it and really what it was is that he had left his phone in there and it was just accidentally playing and he immediately turned it off and was like, "No, no, I wasn't actually listening to that."

Here's what he is doing. He's accumulating MP3s and he is going to recut them and then call the school and play it. And it's going to be like, "Isaac can not come to school today," and that's what he is going to do. He's basically just collecting sound clips of your voice to use in nefarious ways later.

It's like that scene from Sneakers.

But if he gives us a five star review, I'm on board.

Absolutely. And we just gave him the Isaac, so this was the last word he needed in the entire puzzle.

You should just come out and say it. Isaac will not be at school today. Just say it. Make his life easier.

I won't. I can't. Anyway, subscribe by whichever podcaster you use. Next month we're shifting into the world of development. Finally, we get to stop talking about users and just start talking about code.

So this is my half of the book now?

Yeah. This is the point where I'm going to have to stop you a lot and be like, "I don't know what you're talking about." I wrote and edited and helped write some of these chapters. I still don't know what half of the stuff is. I'll be the VOX pop. I will represent the standard user.

I'll just say this one time. Your understanding is not a requirement.

Cool. Perfect. Anyway, you'll be able to find more content and design focused episodes in our archive, so subscribe wherever that is. Anyway, thank you for joining us for another month. Subscribe, share. Check us out next month when we talk about integrations with Greg Dunlap. Until then, go do amazing things. Good luck.