Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up