How to Design Elegant Mobile Interfaces - with Dave Wiskus

[Treehouse Friends] 0:00 [Amit] I'm here with Dave Wiskus. He's an iOS and Mac designer. 0:03 [Dave] Experience design and visual design not just Photoshop work and not just wireframes 0:07 but from start-to-finish product design. 0:13 [Amit] And how did you get started? 0:16 [Dave] With design, I've always had--they say the eye. 0:18 I've always had like--I pick things apart, I see things that probably would annoy other people, 0:22 and when I repeat them often do annoy other people. 0:27 And I met some people who were in the app-making business, and they seemed 0:30 like cool people, and it seemed like they really loved what they were doing, 0:36 and I felt like I should get on board with that. 0:39 [Amit] Before you started designing apps, what were you doing? 0:41 [Dave] I was doing sales and business development for a very, very, very 0:45 large corporation. >>[Amit] You weren't doing anything related to design? 0:50 [Dave] No. I've always been a creative sort of person. 0:53 I was a musician for years--still am a musician--but no, nothing specifically design related. 0:56 I drew a lot of pictures when I was a kid, but-- 1:02 [Amit] Why design and why app design more specifically? 1:05 [Dave] I'm an Apple fan boy. I love my Mac. 1:09 I love my iPhone. When the iPhone came out--before the SDK became available-- 1:12 there was all this talk of will there be an SDK and what will that look like? 1:17 And seeing the potential future for apps--the idea of apps-- 1:20 things that you could do with your phone now that were never possible before-- 1:24 it was really exciting. I wanted to be a part of that. 1:27 [Amit] You started designing for the iPhone or the Mac after the iPhone apps 1:31 actually came out in the app store? 1:38 [Dave] I didn't start working on Mac stuff until later. 1:40 It was the SDK came out and months later I met some people who were app makers, 1:42 and they put me in touch with my friend Brad Ellis--Apple design award winner-- 1:46 worked for RogueSheep, worked for Square, and now he's off doing his own thing. 1:52 He took the time to teach me. 1:55 [Amit] Oh, wow. Okay. So, you had a mentor. 1:58 [Dave] I had a very, very strong, great mentor. 2:00 The guy took a lot of time and patience to walk me through some things 2:02 that you--with design, there's some things that you can understand intuitively, 2:07 but they need to be codified, they need to be-- 2:11 you need to develop frameworks mentally to understand 2:13 how A leads to B and how you can make that happen more seamlessly. 2:17 And there's a lot of moving parts--it's not just about how something looks, 2:21 but rather how does it feel and how do you feel while you're using it? 2:24 [Amit] Can you walk us through a bit of that process of A through B? 2:28 [Dave] There's a book I have on my coffee table-- 2:33 101 or 100 Things I Learned in Architecture School. 2:36 [Amit] One hundred things you learned in architecture school? 2:40 [Dave] I'm probably butchering that title, but it's a coffee table book, 2:42 and it's written by a guy--every page is another thing that he learned 2:45 in architecture school, and it's my favorite design book because it forces me-- 2:48 reading it, these are all things that apply to what I do, 2:53 but at no point does he talk about software. 2:56 And the best example I can give to answer your question is--I forget the term for it, 2:58 but when you're creating a space and a person is walking from point A to point B-- 3:02 like through a courtyard--if they're walking through the entryway towards the building-- 3:07 or whatever it is--if they can always see the building the walk feels longer 3:13 than if you were to wind the pathway around a little bit. 3:17 And it's the idea that by showing and obscuring your target you create a more 3:20 interesting journey and people complain less. 3:25 By the time they get there they feel like they've had a pleasant walk through a garden 3:27 rather than trying to get to something. 3:30 [Amit] How would you take that into the mobile app world? 3:32 [Dave] That's always the trick. 3:36 Sometimes it isn't about a person wants this, you just give it to them. 3:39 Sometimes it's a clever animation, or it's the way you present the information 3:42 that matters more than how quickly you present the information because the trick is 3:47 to remember that you're creating an experience. >>[Amit] Right. 3:52 [Dave] This isn't a simple, stupid machine that the person is using to do math. 3:54 They're trying to solve a problem, and if you can emotionally connect to them 3:58 and why they have this problem to begin with and why they're trying to solve-- 4:04 and how they're trying to solve this problem, you can make something that people 4:08 don't just use as a tool but something they enjoy using. 4:12 [Amit] It's interesting that you say emotionally connect because that's always 4:15 never talked about when you talk about design. 4:19 You yourself said that design does not happen in Photoshop. >>[Dave] Right. 4:22 [Amit] So, where does design really happen? 4:25 Is it happening when you're imagining the app? 4:28 What is the starting point? 4:32 If I'm to design an app--I kind of know the app that I want to create, 4:34 but how do I start designing that app? 4:38 Where's the starting point for that? 4:41 [Dave] The starting point-- >>[Amit] If it doesn't happen in Photoshop, where does it happen? 4:43 [Dave] It happens everywhere. It starts with the idea and you have to-- 4:46 you have to take the idea and turn it into something. 4:51 And the first step for me is to write down everything that I think the app should do. 4:53 I have field notes--a little booklet--I grab my pen, and I start writing down the problem 4:57 that I'm trying to solve because the better I understand the problem 5:02 the better I can create a solution. 5:06 And in doing so, I'll see things that I didn't see when I was just imagining 5:08 that it would be cool to have an app that did this. 5:11 Somewhere in that process, you get to a comfortable place and you have something 5:13 that--okay, it's ready to move to the next stage. 5:19 The next stage for me is I have a white board, 5:22 and on this white board I'll draw pictures of what the app-- 5:24 not will look like but how things might be laid out, and the idea there is to make sure 5:27 that every piece of functionality--every button, everything that could happen that takes you 5:32 from point A to point--is written down. 5:36 I'll draw lines--okay, this takes you here. 5:39 And seeing something a little bit more visually--seeing a button in the corner-- 5:41 maybe you decide, well, I kind of hate having a button there. 5:45 Maybe it would be better if there were some other way-- 5:48 maybe there's a gesture I could use to get the same functionality-- 5:50 and then you get to a certain point where you want to see the app-- 5:53 you want to start looking at something that looks like a piece of software, 5:57 so I'll go into Photoshop and decorate it up and get everything laid out 6:00 and get my documents prepared. 6:04 And the mistake is to think that once the Photoshopping is done and you hand it off 6:06 to developers then the design is done, and the truth is that once you hand it off 6:11 you're really just starting the design process. 6:14 Once it's handed off to developers, then you're creating, then you're making software. 6:19 Everything up until that is drawing pictures. 6:22 Then you're making software and-- >>[Amit] You're making it come to life. 6:24 [Dave] Right. Making software to me is the exciting part. 6:28 The Photoshop stuff--whatever. I mean it's cool. I love it. It's fun. 6:31 But the real meat of it is making software--making something that people can touch, 6:34 and I give the developers things that they turn into real software, 6:37 and then I get to touch it and play with it, and then I'm like-- 6:42 oh, and what if we did this? 6:44 And then I start getting all these ideas because I'm touching it. 6:46 It's a visceral experience. From there-- >>[Amit] Does that piss off the designers? 6:48 I mean the developers that--hey, you know--like your job's done. 6:52 [Dave] No, no. I've been fortunate enough to work with developers who have 6:56 an innate understanding of why design matters. 7:02 And they embrace that, so when they see me saying things like the animation is just 7:04 one-tenth of a second off--let me go in and fix it--or can we go in and fix it? 7:09 They say yes. >>[Amit] How do you communicate animation to a developer? 7:13 Because that's not their Photoshop, right? 7:18 [Dave] A whole lot of hand waving. 7:20 I want you to do this and you pull the thing down--it should go like this. It should bounce. 7:22 When it falls it should bounce like twice. 7:25 [Amit] You're almost like a director, not even just a designer. 7:28 [Dave] Very much so. I think of it very much like being a film director, yes. 7:31 And an animator, and there's all sorts of things that go into this, 7:34 but yeah, director is probably the best one because it's taking the people who are involved 7:38 in the creation of a thing, making sure they're all pointed in the same direction. 7:43 We all have the same goal, right? We all want to make something great. 7:47 We all want to make something that people enjoy using that solves their problem. 7:50 Nobody wants to make a crappy piece of software. 7:52 [Amit] I hope not. 7:55 [Dave] I'm sure somebody out there wants to, but most people don't want to 7:57 make a crappy piece of software, and the best thing to do is make sure that 7:59 everybody is still focused on that. 8:02 [Amit] And how do you guarantee that? >>[Dave] You can't guarantee it. 8:04 You can't fix other people, but you can surround yourself with people who are 8:07 good at what they do and really care about what they do, 8:10 and things tend to work out pretty well. 8:13 [Amit] I guess you do your wireframing on the white board, right? >>[Dave] Always. 8:15 [Amit] It is wireframing, and your wireframing I guess never happens electronically. 8:18 [Dave] No. For me, wireframing isn't a digital process. 8:23 Depending on the client or what other people need to see, 8:26 I will take pictures of things, or I will redraw it in OmniGraffle or something 8:29 so they have a picture to look at, and I can point at things, and we can talk through the 8:34 functionality, but that's not where I create. 8:38 [Amit] Don't you want to share that wireframe with other people if it's not digital? 8:40 You said you take pictures of it to share it. 8:44 [Dave] Or I'll redraw it, and I guess what I--it can be converted to digital, 8:46 but that's not where I create the wireframes--at least for me, I need a white board 8:51 because I need to pace around and do weird things with my hands and 8:55 think through things--and do a lot of staring at the ceiling, thinking-- 8:57 and if I'm in front of my computer then I can't pace around. 9:02 I can't feel the room the way that I can if I'm in front of my white board. 9:05 You get that like a beautiful mind thing where you need to feel like you're a crazy genius, 9:09 and there's some truth to that sense of motion and momentum--inertia-- 9:13 like the movement of it helps to keep me focused and motivated. 9:21 [Amit] What about prototyping tools, because there are a lot of these tools that are coming 9:24 out--they're saying you can have these interactive prototypes where you can take the 9:30 Photoshop and make it more visceral without having a developer code it. 9:33 [Dave] If you don't have a developer, then yeah, absolutely--that's a great way to go. 9:41 Anytime you can see something in the context of what it's going to be-- 9:45 so don't look at a Photoshop document and think of it as software because 9:48 you're never going to think of that as software. >>[Amit] Right. 9:52 [Dave] You're not going to think of it as software until you're using it because 9:54 what it looks like is only part of the bigger picture. 9:56 The sooner you can be touching something and seeing how it works and how people 9:59 will connect with it, the better off the end product will be. 10:02 So yeah, by all means--if you don't have a developer to begin the development process 10:05 earlier in the design process, find a way to prototype it--even if it is just as simple as 10:10 having a bunch of comps set up in--saved to a photos app 10:16 where you can just swipe through them. >>[Amit] Oh. Okay. 10:20 [Dave] Your fingers on glass is the important part. 10:22 The goal--it's always going to be fingers on glass. >>[Amit] Right. 10:24 [Dave] Pictures under glass. 10:28 When you're touching it, your hope is that the user forgets that they're touching glass. 10:30 When you use the calculator app, you're not thinking about your fingers touching glass. 10:35 You're thinking about touching the buttons on a calculator. 10:38 It becomes the object rather than just projecting something. 10:41 And you want to create that illusion. It's all magic at the end of the day. 10:46 It's all slight of hand. >>[Amit] It is giving that feel of hardware in a software form. 10:49 [Dave] Right. That's why skeumorphism is so popular right now. 10:54 [Amit] That was going to be one of my next questions, actually. 10:57 What do you think about it? Skeumorphism is basically what? 11:00 Can you first just define that? 11:05 [Dave] Presenting something digital as if it were something real 11:07 is the way I would define it. >>[Amit] Like the calendar app. 11:11 [Dave] The calendar app with its little torn edges of paper up at the top, 11:14 iBooks where you're flipping pages--that's a skeumorphic design. 11:19 Anything that emulates the real life equivalent would be considered skeumorphic. 11:22 [Amit] Or even the calculator app. 11:26 [Dave] Calculator--yeah, because it looks like a calculator. 11:28 It has a real life feel. 11:29 I think it's fine. I think it gets a bad rap because some designers have taken it too far, 11:32 and they've done a really terrible job at making things feel the way they look. 11:38 A good example of this is the address book where you can't turn the-- 11:42 maybe you can now, but you couldn't turn the pages. 11:46 It looked like a book with pages, but if you went to swipe, it tried to delete the information. 11:49 [Amit] Right. It still does that. >>[Dave] Swipe to edit. 11:54 Which is insane. You made it look like a book. 11:56 Why a skeumorphic visual design but but not skeumorphic interaction? 11:58 I think that that's the disconnect. 12:03 Find My Friends--that weird leather texture-- >>[Amit] I hate that. 12:05 [Dave] Everybody hates that. 12:08 But if you think about it from Apple's perspective, 12:10 if you're going to create something like that, you don't want it to look like 12:12 a creepy stalker tool, and you don't want it to look like a nerdy radar tool. 12:15 You want it to look like something that real people would use. 12:19 [Amit] There are a lot of designers that say it's a cop out. 12:21 [Dave] Skeumorphism? >>[Amit] Yes. 12:24 [Dave] I think it's a bridge. We live in a physical world. 12:28 It's becoming a digital world, but it's still a physical world. 12:31 People understand how a calculator works. 12:34 When you pick up a calculator you know that those are buttons and you can 12:40 press them, and your fingers would touch those. 12:42 My mother knows when she looks at a desktop calendar how that works. 12:44 Maybe the best way to present this information is in a way that people already understand. 12:50 We have to--as young technology people, we have to get over this idea that 12:55 everybody understands things the way that we do, because they don't. >>[Amit] They don't. 12:59 [Dave] For most people, the idea of technology or a computer is still kind of scary. 13:03 And to offer them a hand--an olive branch--to say things are going to be okay. 13:07 It's all going to work out. We are thinking about you. 13:12 That can go a long way to making people comfortable with the move to technology. 13:14 In my talk, I went over the floppy disk as save because it was a picture of the thing 13:18 that you're saving to. With the phone app there's a drawing--there's an outline of a phone. 13:27 It looks nothing like a modern phone, but we can recognize it as that was the 13:31 physical thing, now it's a digital thing. 13:35 The music app used to be called iPod, and there's a picture of an iPod. 13:38 The physical thing became software. Now it's no longer a picture of the iPod. 13:40 It's all showing us something that we understand and guiding us to the thing 13:44 that we don't yet understand so that we can. We can get there. 13:48 We just won't today. >>[Amit] Right. 13:52 And the new generation will probably never get those references, right? 13:54 [Dave] No. And that's okay because-- >>[Amit] They didn't grow up with those things. 13:58 [Dave] They're going to grow up using iPhones and using iPads and whatever else, 14:01 and it's just going to make sense to them in the same way that I'm sure you and I 14:06 grew up playing video games or watching TV. 14:09 My grandparents did neither of those things. 14:12 [Amit] What tips and tricks would you offer to someone that's starting out 14:15 designing iPhone apps? Or iPad apps, for that matter. 14:23 [Dave] Love what you do. 14:26 Whatever it is you're getting into this for, it should primarily be that you just love-- 14:28 if it's iOS design--love the phone. Love Apple. 14:33 Don't love them blindly but love what they're doing. 14:37 Love that vision. Love that sensibility about how you connect with people with technology. 14:39 Love the apps that you use on your phone. 14:44 Love the way you use your phone. 14:46 And then love it so much that you can't help but want to create something for it 14:48 and be a part of that. 14:51 More practically speaking, the best piece of advice I can give is get out there and 14:53 meet people. >>[Amit] Meet people? >>[Dave] Meet people. 14:57 Go to conferences. Go to meet ups. Go to designer meet ups. 14:59 Go to developer meet ups. 15:01 Even if you're not a developer, go meet developers because those guys will 15:03 have all sorts of stuff that needs to be designed, and you can probably find some work there. 15:08 [Amit] Do you recommend just doing design work for free in the beginning? 15:11 [Dave] I would recommend--free is the wrong word. 15:15 It's a bad word. I don't like anybody working for free. 15:19 But when you're learning--when you're just starting out, 15:22 you don't want to work for free but there's a different kind of payment-- 15:25 and that can be experience--where if you're a brand new designer and you've never 15:29 done this sort of thing before, if you partner up with a developer who's also fairly new 15:34 you can learn together. You're not creating something for them to go and use. 15:37 It's about learning and creating together. 15:40 Look for mentors. Look for people to--I had a mentor, and it served me tremendously. 15:42 [Amit] We wish we all had mentors like that. 15:48 [Dave] Find people who--it's not that hard. 15:52 If you go out, this community is really good about being open and embracing new people. 15:54 Because we're all kind of new people. There are no 30-year veterans of the iOS industry. 15:59 [Amit] It's not that old. >>[Dave] Right. Exactly. 16:03 There are no old school, I-remember-back-in-the-day people because there was no 16:05 back in the day. 16:09 This is still young enough that you can go and you can be the first big whatever. 16:11 There's still plenty of firsts to be had. 16:16 Or at least seconds. >>[Amit] Well, that's a beautiful note to end on. 16:19 Thanks a lot for doing this interview. 16:22 [Dave] Thank you. 16:25 [Treehouse Friends] 16:27