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