1
00:00:00,000 --> 00:00:05,702
[MUSIC]

2
00:00:05,702 --> 00:00:10,470
Well, hey everybody.
I'm Nick Pettit @nickrp on twitter.

3
00:00:10,470 --> 00:00:14,100
And I'm a web design teacher here at
Treehouse, which of course is the

4
00:00:14,100 --> 00:00:15,820
best way to learn about web design,

5
00:00:15,820 --> 00:00:19,560
web development, mobile business, and so
much more.

6
00:00:19,560 --> 00:00:23,120
You can check us out at teamtreehouse.com.

7
00:00:23,120 --> 00:00:27,610
Today we have a very special guest here
with us in the studio today.

8
00:00:27,610 --> 00:00:28,790
This is Sarah Parmenter.

9
00:00:28,790 --> 00:00:30,710
Sarah, for people that don't

10
00:00:30,710 --> 00:00:34,790
know who you are, how would you describe
yourself in, in your own words?

11
00:00:34,790 --> 00:00:37,940
>> I'd say I'm a user interface
designer.

12
00:00:37,940 --> 00:00:40,840
But for people who aren't really in our
industry

13
00:00:40,840 --> 00:00:42,595
or if I'm out and about I sometimes just

14
00:00:42,595 --> 00:00:45,490
I'm a graphic designer, for ease of people
not

15
00:00:45,490 --> 00:00:48,370
understanding what a user interface
designer is sometimes I say.

16
00:00:48,370 --> 00:00:49,480
>> I know what you mean, sometimes I
just

17
00:00:49,480 --> 00:00:51,500
say like, I'm a web designer and don't get
specific.

18
00:00:51,500 --> 00:00:53,530
>> Yeah, sometimes I say that but then
people go along

19
00:00:53,530 --> 00:00:56,393
the lines of, oh you must be really geeky
and [INAUDIBLE] and

20
00:00:56,393 --> 00:00:59,150
then I'm like oh, it's just easier to say
graphic designer.

21
00:00:59,150 --> 00:01:00,438
But, I kinda do lots of things

22
00:01:00,438 --> 00:01:03,270
but predominantly I'm a user interface
designer.

23
00:01:03,270 --> 00:01:04,180
>> Okay, cool.

24
00:01:05,440 --> 00:01:09,240
Now you got your start in design when you
were pretty young.

25
00:01:09,240 --> 00:01:11,450
And so how, how did that happen?

26
00:01:11,450 --> 00:01:14,140
How did you stumble into design?

27
00:01:14,140 --> 00:01:16,770
>> In web design, I started when I was
little.

28
00:01:16,770 --> 00:01:21,460
Well, I was quite small I guess.
I was in about 13, 14 when I started in

29
00:01:21,460 --> 00:01:25,620
web design and that was just because.
Geocities was quite big.

30
00:01:25,620 --> 00:01:26,910
I don't know if you remember it.

31
00:01:26,910 --> 00:01:27,780
>> Sure.
Oh yeah, I do.

32
00:01:27,780 --> 00:01:28,132
>> Yeah.

33
00:01:28,132 --> 00:01:31,000
Geocities making your own homepage and
stuff like

34
00:01:31,000 --> 00:01:34,130
that was quite a thing when I was younger.

35
00:01:34,130 --> 00:01:36,760
And the interface for actually uploading
your own

36
00:01:36,760 --> 00:01:40,310
pictures and changing texts, it was kind
of clunky.

37
00:01:40,310 --> 00:01:42,270
And it used to take an age to load.

38
00:01:42,270 --> 00:01:45,720
It when the internet was like charged per
minute to go on.

39
00:01:45,720 --> 00:01:46,460
So I,

40
00:01:46,460 --> 00:01:52,400
I started learning HTML just cuz it was
faster to get my stuff up, basically.

41
00:01:52,400 --> 00:01:55,680
So I started from there, and taught myself
HTML.

42
00:01:55,680 --> 00:02:01,060
And when CSS came along, and stuff like
that, I, I kinda just kept bolting it on.

43
00:02:01,060 --> 00:02:04,540
So I've seen lots of eras of, of the web
come and go.

44
00:02:04,540 --> 00:02:08,960
But yeah, I was self taught from a young
age, and just was lucky that

45
00:02:08,960 --> 00:02:11,580
when all of these new trends came in, I
was at a point where I could

46
00:02:11,580 --> 00:02:14,890
keep bolting them on to my existing skill
set.

47
00:02:14,890 --> 00:02:17,900
>> So, so, that's what I was gonna ask
you, you.

48
00:02:17,900 --> 00:02:20,910
It sounds like you're self taught.
Did you attend university at all?

49
00:02:20,910 --> 00:02:24,870
>> No, I'm, or actually was going along
different lines.

50
00:02:24,870 --> 00:02:27,470
When I was younger, I was thinking I
wanted to go into acting.

51
00:02:27,470 --> 00:02:30,380
And I worked for a casting agent for a
while, but made more

52
00:02:30,380 --> 00:02:33,970
money out of updating her website than I
did out of doing actual casting.

53
00:02:33,970 --> 00:02:36,320
So, at that point when I was going to,

54
00:02:36,320 --> 00:02:38,200
college, I'm not sure what the equivalent
is out here,

55
00:02:38,200 --> 00:02:41,860
it's between like 16 and 18 I was going on

56
00:02:41,860 --> 00:02:43,660
along the the lines of doing like English
literature, and

57
00:02:43,660 --> 00:02:46,990
acting, and then just keeping the web
stuff on the side.

58
00:02:46,990 --> 00:02:49,870
Cuz I didn't really understand, career
wise, what it

59
00:02:49,870 --> 00:02:52,730
could do until I kind of stumbled into
using it.

60
00:02:52,730 --> 00:02:53,070
>> Sure.

61
00:02:53,070 --> 00:02:56,160
>> In a, in a professional environment.
And I was kinda like, hm.

62
00:02:56,160 --> 00:02:58,700
I wonder if this is a thing, like if she

63
00:02:58,700 --> 00:03:01,460
needs her website updating then other
people must need websites

64
00:03:01,460 --> 00:03:03,870
updating and it kinda went from there
really.

65
00:03:03,870 --> 00:03:05,040
>> That's interesting.

66
00:03:05,040 --> 00:03:06,651
We actually took pretty similar paths.
I was...

67
00:03:06,651 --> 00:03:07,623
[CROSSTALK]
>> Oh, okay.

68
00:03:07,623 --> 00:03:09,931
>> I was acting until I was acting up
until I was about 18

69
00:03:09,931 --> 00:03:13,390
years old and then I got more interested
in like being behind the camera...

70
00:03:13,390 --> 00:03:13,650
>> Yeah.

71
00:03:13,650 --> 00:03:16,350
>> And that sort of led to web stuff.
That's fascinating.

72
00:03:16,350 --> 00:03:18,960
I didn't know that.
so.

73
00:03:18,960 --> 00:03:22,820
So do you exclusively design stuff for
mobile cuz

74
00:03:22,820 --> 00:03:24,504
that, that is kind of what you're known
for.

75
00:03:24,504 --> 00:03:24,840
>> Yeah.

76
00:03:24,840 --> 00:03:26,690
>> Or, or do you design for

77
00:03:26,690 --> 00:03:27,780
all sorts of different platforms.

78
00:03:27,780 --> 00:03:30,020
>> I design for all different
platforms.

79
00:03:30,020 --> 00:03:34,140
I've gone back to doing print work
recently for different things.

80
00:03:34,140 --> 00:03:35,980
But mobile design.

81
00:03:35,980 --> 00:03:37,930
Is what I've been doing for some bigger
companies

82
00:03:37,930 --> 00:03:40,600
for the last actually, the last three
years now.

83
00:03:40,600 --> 00:03:42,940
I've been designing some apps, kind of
hush

84
00:03:42,940 --> 00:03:45,770
hush under their kind of umbrella of
teams.

85
00:03:45,770 --> 00:03:49,370
I've been doing stuff for them, so that's
all been mobile design.

86
00:03:49,370 --> 00:03:52,290
And I think I was just lucky in that when
the

87
00:03:52,290 --> 00:03:57,100
iPhone came out in 2006, I was really, I
was a really early adopter

88
00:03:57,100 --> 00:04:01,090
of the iPhone, luckily, and I got really
interested in designing for the platform.

89
00:04:01,090 --> 00:04:03,930
So I was blogging about a lot of the stuff
that other people, when it came

90
00:04:03,930 --> 00:04:05,620
to them picking up and saying, well
actually,

91
00:04:05,620 --> 00:04:07,800
I think I want to design for this
platform.

92
00:04:07,800 --> 00:04:11,010
I'd already documented a lot of stuff, so
that's, I became known for

93
00:04:11,010 --> 00:04:16,020
that early on just purely because I was
learning and documenting it early on.

94
00:04:16,020 --> 00:04:17,340
>> What, what attracted you to

95
00:04:17,340 --> 00:04:19,770
that platform?
Why mobile, why not?

96
00:04:19,770 --> 00:04:22,730
>> Honestly, the fixed canvas type
stuff.

97
00:04:22,730 --> 00:04:24,990
I really like working with a fixed
canvass,

98
00:04:24,990 --> 00:04:27,330
so, the iPhone, it just seemed perfect
that

99
00:04:27,330 --> 00:04:30,410
you have this perfect kind of rectangle to

100
00:04:30,410 --> 00:04:33,540
work within and, and I like constraints
like that.

101
00:04:33,540 --> 00:04:37,320
Whereas the web, even when it was, I
dunno, 960 pixels and fairly

102
00:04:37,320 --> 00:04:40,560
fixed, I still felt like that was kind of
big canvas to work with.

103
00:04:40,560 --> 00:04:41,995
I really like the restriction.

104
00:04:41,995 --> 00:04:42,490
>> Sure.

105
00:04:42,490 --> 00:04:45,770
>> Working and, and it was, okay the
operating

106
00:04:45,770 --> 00:04:48,290
system's different now but back then it
was really new.

107
00:04:48,290 --> 00:04:50,580
And I remember the first time, probably
everyone remembers the

108
00:04:50,580 --> 00:04:53,430
first time they saw an iPhone and saw the
operating system.

109
00:04:53,430 --> 00:04:55,480
It was just like, magic.

110
00:04:55,480 --> 00:04:57,840
And really like, the colors were really
vibrant.

111
00:04:57,840 --> 00:04:59,790
And I was just thinking yeah, I'd really
love

112
00:04:59,790 --> 00:05:01,980
to design for this, this is my sort of
thing.

113
00:05:01,980 --> 00:05:04,890
>> Now did you start out designing web
apps for that

114
00:05:04,890 --> 00:05:07,650
or did you get into it later when the app
store came

115
00:05:07,650 --> 00:05:08,710
along or?

116
00:05:08,710 --> 00:05:12,140
>> I went straight into designing an,
an app,

117
00:05:12,140 --> 00:05:13,680
an app that was going on the app store.

118
00:05:13,680 --> 00:05:15,770
Someone took a chance on me because I
designed

119
00:05:15,770 --> 00:05:17,365
the mock up and they took a chance on

120
00:05:17,365 --> 00:05:19,675
me designing their mock up because I'd
done their

121
00:05:19,675 --> 00:05:22,447
website, which was like a strange thing
that happened.

122
00:05:22,447 --> 00:05:27,849
But he he sorta said, I've, I've got this,
this app that I want to put on this new

123
00:05:27,849 --> 00:05:32,659
thing called the, the App Store for the
iPhone, and would you like to have a go

124
00:05:32,659 --> 00:05:33,910
at designing it?

125
00:05:33,910 --> 00:05:37,960
And I, I was very honest, and I just said,
I've not designed for this before.

126
00:05:37,960 --> 00:05:39,870
I want to design for it.

127
00:05:39,870 --> 00:05:44,460
If you're happy with me charging for a
couple of weeks, but giving me

128
00:05:44,460 --> 00:05:47,990
six weeks to do it in, therefore you're
not paying for my learning curve.

129
00:05:47,990 --> 00:05:51,370
>> Right.
>> But, you still get an app out of it.

130
00:05:51,370 --> 00:05:52,510
>> Sure.

131
00:05:52,510 --> 00:05:54,790
>> yeah, it was really lucky that we
got

132
00:05:54,790 --> 00:05:57,850
a, an excellent, really, really nice email
back from Apple,

133
00:05:57,850 --> 00:06:00,530
saying it was really well designed, but
please

134
00:06:00,530 --> 00:06:02,872
don't use this email as any form of
endorsement,

135
00:06:02,872 --> 00:06:03,351
>> [LAUGH]

136
00:06:03,351 --> 00:06:05,169
>> we can't been seen to endorse any
single

137
00:06:05,169 --> 00:06:07,300
designer so I found myself right in the
early

138
00:06:07,300 --> 00:06:10,880
inception of iPhone design holding this
email that said

139
00:06:10,880 --> 00:06:13,160
Apple liked it but couldn't do anything
with it.

140
00:06:13,160 --> 00:06:13,470
>> Right.

141
00:06:13,470 --> 00:06:16,310
>> But it gave me enough confidence to,
to carry

142
00:06:16,310 --> 00:06:18,290
on with it and know that I was doing
something right.

143
00:06:18,290 --> 00:06:20,450
So yeah it was good.
>> Wow that's amazing.

144
00:06:20,450 --> 00:06:23,330
So what's your process like?
Do you,

145
00:06:23,330 --> 00:06:25,660
you know, obviously you must talk to the
client.

146
00:06:25,660 --> 00:06:27,780
And then, what happens after that?

147
00:06:27,780 --> 00:06:29,790
Do you wireframe in pencil?

148
00:06:29,790 --> 00:06:31,650
Or in some sort of app?
>> Yeah.

149
00:06:31,650 --> 00:06:33,480
>> Do you jump into Illustrator?

150
00:06:33,480 --> 00:06:37,460
Do you use Interface Builder at all?
>> I have used Interface Builder.

151
00:06:37,460 --> 00:06:38,680
And, to be honest.

152
00:06:38,680 --> 00:06:40,750
I, because I've been working with larger
teams that

153
00:06:40,750 --> 00:06:43,900
process changes slightly depending on the
team around you.

154
00:06:43,900 --> 00:06:45,660
So when I've been working for larger
teams, I

155
00:06:45,660 --> 00:06:48,190
found that it's helpful to do stuff on
paper.

156
00:06:48,190 --> 00:06:52,030
Because you're normally in an environment
where you need to express ideas maybe

157
00:06:52,030 --> 00:06:55,430
differently to the way that they've set it
or thought that the output goes.

158
00:06:55,430 --> 00:06:58,770
And normally I get pulled in to kind of
rip apps apart and go.

159
00:06:58,770 --> 00:07:02,850
Is this really the best way that, that
we're doing this as an app.

160
00:07:02,850 --> 00:07:06,430
So the process changes on, depending on
who it is.

161
00:07:06,430 --> 00:07:09,010
If it's a small team of people then I tend

162
00:07:09,010 --> 00:07:12,210
to just go straight into sort of fairly, I
guess,

163
00:07:12,210 --> 00:07:16,930
high-fidelity wireframes in some form of
like, Photoshop, Illustrator.

164
00:07:16,930 --> 00:07:18,810
I've actually mostly used Fireworks.

165
00:07:18,810 --> 00:07:21,891
The only thing I ever used Fireworks for
was that.

166
00:07:21,891 --> 00:07:25,041
If it's, if it's something for just maybe
a

167
00:07:25,041 --> 00:07:28,116
smaller type app or something, that even
maybe a

168
00:07:28,116 --> 00:07:30,366
web app, I tend to just, go crazy on

169
00:07:30,366 --> 00:07:33,700
my sketchbook and scan them and send them
to people.

170
00:07:33,700 --> 00:07:34,980
>> You find that people.

171
00:07:34,980 --> 00:07:37,640
Are much happier to comment on sketches

172
00:07:37,640 --> 00:07:41,030
than they when they feel like the, the
level of polish is higher.

173
00:07:41,030 --> 00:07:41,580
>> Is, is finished.

174
00:07:41,580 --> 00:07:41,790
Yeah.

175
00:07:41,790 --> 00:07:44,720
>> Cuz they feel, even if it is still
in a wire-frame stage.

176
00:07:44,720 --> 00:07:48,340
So it depends sometimes I always start
things on paper even if it's just for my

177
00:07:48,340 --> 00:07:51,600
benefit but these beautiful sketches that
you see

178
00:07:51,600 --> 00:07:53,730
sometimes people put in Dribble and things
like that.

179
00:07:53,730 --> 00:07:55,190
Mine don't look anything like that.
>> [LAUGH]

180
00:07:55,190 --> 00:07:58,840
>> It's the more crazy like rubbed out
Everywhere, but yeah.

181
00:07:58,840 --> 00:08:00,080
>> I, I think some people are feeling

182
00:08:00,080 --> 00:08:01,980
very encouraged [LAUGH] to hear that right
now.

183
00:08:01,980 --> 00:08:02,720
>> Yeah, if people

184
00:08:02,720 --> 00:08:05,250
saw my sketchbook, it's like a complete
mess.

185
00:08:05,250 --> 00:08:07,420
But I think that's what it's there for, a
sketchbook isn't meant

186
00:08:07,420 --> 00:08:11,070
to be a work of art, it's meant to be a
thinking process.

187
00:08:11,070 --> 00:08:12,500
And that's why I'm always a bit dubious
when

188
00:08:12,500 --> 00:08:15,090
people put out these like perfect sketches
of things.

189
00:08:15,090 --> 00:08:17,770
I'm like, did you just sit and draw that
for twenty minutes

190
00:08:17,770 --> 00:08:21,570
to then post on Dribble, cuz that's not
really how I use it.

191
00:08:21,570 --> 00:08:22,770
But to each his own.

192
00:08:22,770 --> 00:08:28,074
>> But, okay so my next question is
what are some of the biggest challenges

193
00:08:28,074 --> 00:08:31,974
for designing for smaller screens because
a lot of people,

194
00:08:31,974 --> 00:08:35,620
I find seem to be more challenged by a
smaller screen.

195
00:08:35,620 --> 00:08:37,750
You're saying that you think it's actually
easier.

196
00:08:37,750 --> 00:08:42,530
>> Yeah easier to design for but not
maybe in terms of

197
00:08:44,620 --> 00:08:46,570
content is the main problem.

198
00:08:46,570 --> 00:08:50,460
I find that the main problem is that
people, don't necessarily understand

199
00:08:50,460 --> 00:08:52,950
the medium as well so they have a website
that has a

200
00:08:52,950 --> 00:08:55,320
large volume of content on it, and then
you need to have

201
00:08:55,320 --> 00:08:57,290
this conversation where it's like okay,

202
00:08:57,290 --> 00:09:00,890
especially if it's mobile, like responsive
stuff.

203
00:09:00,890 --> 00:09:02,290
You need to have a conversation of

204
00:09:02,290 --> 00:09:04,575
what's the most important thing, because
otherwise you're

205
00:09:04,575 --> 00:09:09,740
gonna have reams and reams and a huge
amount of swipes to get to the information

206
00:09:09,740 --> 00:09:11,610
that you feel is the core.

207
00:09:11,610 --> 00:09:14,380
That seems to be the recurring theme,

208
00:09:14,380 --> 00:09:18,950
is just content transition between screen
sizes, which

209
00:09:18,950 --> 00:09:22,040
is something that I think we're all gonna
have to get really, really good at.

210
00:09:22,040 --> 00:09:25,610
But that is always the main problem.
Or advertising.

211
00:09:25,610 --> 00:09:27,110
Companies that I've worked for, they want
to

212
00:09:27,110 --> 00:09:30,030
insert advertising into stuff and it
breaks the flow.

213
00:09:30,030 --> 00:09:30,300
>> Yeah.

214
00:09:30,300 --> 00:09:31,110
>> Of what you're doing.

215
00:09:31,110 --> 00:09:32,310
I don't think anyone has completely

216
00:09:32,310 --> 00:09:35,180
cracked how to get advertising into
something

217
00:09:35,180 --> 00:09:38,810
that seems seamless and actually nice.
Some part of the experience.

218
00:09:38,810 --> 00:09:41,260
It always seems like it kind of breaks,
and

219
00:09:41,260 --> 00:09:44,080
then comes back together, for something
that you're viewing.

220
00:09:44,080 --> 00:09:48,320
So, yeah I think advertising and, content
transition are the hardest things.

221
00:09:48,320 --> 00:09:50,080
I think the graphical thing is less so

222
00:09:50,080 --> 00:09:54,210
now, especially since we've got away from
skeuomorphic design.

223
00:09:54,210 --> 00:09:56,270
Everything's a lot, kind of, can be done
in Interface

224
00:09:56,270 --> 00:09:59,620
Builder a lot easier, there's less
exporting of graphics, so.

225
00:09:59,620 --> 00:10:00,330
I think it just

226
00:10:00,330 --> 00:10:05,470
comes down to advertising and content
becomes the hardest things to port across.

227
00:10:05,470 --> 00:10:10,570
>> Now, when you design apps in Illus
in Interface Builder obviously

228
00:10:10,570 --> 00:10:15,611
you're restricted to Apple's Human
Interface guidelines for the most part.

229
00:10:15,611 --> 00:10:15,974
>> Mm-hm.

230
00:10:15,974 --> 00:10:18,090
>> Unless you're importing your own
assets.

231
00:10:18,090 --> 00:10:22,940
Do you, do you usually design very
customized looking apps?

232
00:10:22,940 --> 00:10:25,960
Or do you actually prefer to go with
Apple's

233
00:10:25,960 --> 00:10:27,460
style guidelines?

234
00:10:27,460 --> 00:10:30,500
>> I prefer a mix of both, if I'm being
honest.

235
00:10:30,500 --> 00:10:33,460
I'm not completely sold on some of the
elements of, of

236
00:10:33,460 --> 00:10:36,170
iOS 7, I'm not convinced that they're
right for us right now.

237
00:10:36,170 --> 00:10:38,120
I don't like the line icons.
I, I.

238
00:10:38,120 --> 00:10:39,445
>> I don't think you're alone.
>> No.

239
00:10:39,445 --> 00:10:42,240
[LAUGH] There's some, I mean, it's grown
on me.

240
00:10:42,240 --> 00:10:43,300
It's definitely grown on me.

241
00:10:43,300 --> 00:10:46,880
But there's certain things that I think
it's good to question the conventions

242
00:10:46,880 --> 00:10:50,595
that Apple put out because I think
everyone's so quick to kind of go,

243
00:10:50,595 --> 00:10:52,830
Apple's throwing this new thing at us.

244
00:10:52,830 --> 00:10:55,480
Which means the web also has to follow
this theme.

245
00:10:55,480 --> 00:10:57,840
And you suddenly see it pop up everywhere,

246
00:10:57,840 --> 00:11:01,190
without questioning whether it's actually
making good sense.

247
00:11:01,190 --> 00:11:03,960
I think some of the things that I
personally would

248
00:11:03,960 --> 00:11:07,740
change about the new operating system is
the, the buttons.

249
00:11:07,740 --> 00:11:09,720
The buttons don't look like buttons
anymore.

250
00:11:09,720 --> 00:11:10,870
>> They look more like links.

251
00:11:10,870 --> 00:11:11,870
>> They look more like.
>> Without underlines.

252
00:11:11,870 --> 00:11:13,010
>> Yeah, they do.

253
00:11:13,010 --> 00:11:14,100
>> You know.
>> They're more like links.

254
00:11:14,100 --> 00:11:15,880
And, and you have to read a lot more,

255
00:11:15,880 --> 00:11:19,360
be aware of what the text Says rather than
knowing that it's a button.

256
00:11:19,360 --> 00:11:23,880
I, I personally, would love to see buttons
come back even if they are flat.

257
00:11:23,880 --> 00:11:28,910
That's just me.
And the line icons that are everywhere.

258
00:11:28,910 --> 00:11:31,940
They, they do take longer to register what
it is.

259
00:11:31,940 --> 00:11:34,650
If you follow someones eye pattern, it's
like follow the whole thing

260
00:11:34,650 --> 00:11:37,850
and then say that's what it is, rather
than the solid ones.

261
00:11:37,850 --> 00:11:41,560
Line icons are really not loving at the
way but.

262
00:11:41,560 --> 00:11:41,750
Yeah.
>> Too.

263
00:11:41,750 --> 00:11:42,280
>> I have to agree.

264
00:11:42,280 --> 00:11:43,870
And you see them everywhere too.
>> Yeah.

265
00:11:43,870 --> 00:11:44,430
>> I don't understand it.

266
00:11:44,430 --> 00:11:45,440
>> They certainly popped up everywhere.

267
00:11:46,950 --> 00:11:50,930
But it's, it's not my favorite thing right
now, and I think it's good to sometimes

268
00:11:50,930 --> 00:11:54,360
question whether those things are done to
be

269
00:11:54,360 --> 00:11:57,870
different or whether it's actually good
user experience.

270
00:11:57,870 --> 00:12:01,500
And, and so sometimes my apps sit
in-between the two.

271
00:12:01,500 --> 00:12:03,610
I follow conventions because we need to
get

272
00:12:03,610 --> 00:12:05,850
through the app approval process and stuff
like that.

273
00:12:05,850 --> 00:12:06,380
>> Sure.

274
00:12:06,380 --> 00:12:06,850
>> But then

275
00:12:06,850 --> 00:12:09,060
try and bend the rules in that if you've
got a

276
00:12:09,060 --> 00:12:12,590
good, good bit of information as to why
you shouldn't use stuff.

277
00:12:12,590 --> 00:12:15,830
Because it just doesn't make good UX
sense, then I think it's good to bend

278
00:12:15,830 --> 00:12:17,830
the rules of the design, even if it

279
00:12:17,830 --> 00:12:20,220
comes out of the Apple Human Interface
Guidelines.

280
00:12:20,220 --> 00:12:23,440
>> So, so you're saying you do that to
get it approved initially, are you saying?

281
00:12:23,440 --> 00:12:24,150
>> No, no.

282
00:12:24,150 --> 00:12:28,050
I source it between the, so, you can't,
you can't go completely crazy

283
00:12:28,050 --> 00:12:32,360
on apps sometimes, because they'll come
back and say, it's so outside of what

284
00:12:32,360 --> 00:12:36,290
every other app does or feels like, that
they don't want it to do that.

285
00:12:36,290 --> 00:12:37,060
>> Right.

286
00:12:37,060 --> 00:12:39,930
>> But, I mean with icons and things
like that, that's easy

287
00:12:39,930 --> 00:12:43,240
to swap out, and easy to have a
conversation with a client about.

288
00:12:43,240 --> 00:12:45,140
Actually it's the better user experience.

289
00:12:45,140 --> 00:12:48,470
So, they, they wait for out for that, but
some and

290
00:12:48,470 --> 00:12:52,390
following most conventions helps, except
with things like that, I think.

291
00:12:52,390 --> 00:12:54,076
>> Sure, that's interesting.

292
00:12:54,076 --> 00:12:57,520
Okay so my next question is,

293
00:12:57,520 --> 00:12:59,500
is there, do you think there's any kinda

294
00:12:59,500 --> 00:13:04,620
difference between designing native apps
and web apps?

295
00:13:04,620 --> 00:13:07,770
Or, you know, cuz you were saying earlier
that, you

296
00:13:07,770 --> 00:13:11,980
know, the web shouldn't always follow the
conventions of native applications.

297
00:13:11,980 --> 00:13:14,820
I mean, what are the differences there,
for you?

298
00:13:14,820 --> 00:13:15,850
>> It's a difficult one.

299
00:13:15,850 --> 00:13:18,690
I think it depends on whether you're
actually trying to mimic the

300
00:13:18,690 --> 00:13:23,220
experience of an app using the web or
whether you're actually accessing

301
00:13:23,220 --> 00:13:24,490
a website.

302
00:13:24,490 --> 00:13:25,660
With the intention of it being an

303
00:13:25,660 --> 00:13:29,040
informational website, it depends on the
two contexts.

304
00:13:29,040 --> 00:13:31,900
I've had apps that I've thought or have
been

305
00:13:31,900 --> 00:13:34,910
told apps that would be downloaded through
the app

306
00:13:34,910 --> 00:13:37,020
store, and when it's actually come to it,
it's

307
00:13:37,020 --> 00:13:41,140
basically been a, a, wrapped website with
tons of JavaScript.

308
00:13:41,140 --> 00:13:41,410
>> Right.

309
00:13:41,410 --> 00:13:42,620
>> So that becomes a problem when

310
00:13:42,620 --> 00:13:45,160
people try and scroll and they're
expecting it

311
00:13:45,160 --> 00:13:48,370
to smooth scroll like it does within an
app and then it freezes and breaks

312
00:13:48,370 --> 00:13:49,610
and, all sorts of stuff, see.

313
00:13:51,690 --> 00:13:54,260
yeah, the two, the two, I think

314
00:13:54,260 --> 00:13:56,640
once upon a time were designed extremely
differently.

315
00:13:56,640 --> 00:13:59,520
Especially in the previous operating
system.

316
00:13:59,520 --> 00:14:02,450
But now, because everything again, I hate
using the word flat.

317
00:14:02,450 --> 00:14:03,590
I hate that, whole term.

318
00:14:03,590 --> 00:14:05,273
>> That's what everybody says.
[LAUGH]

319
00:14:05,273 --> 00:14:07,297
>> [LAUGH] Because we've gone through
this.

320
00:14:07,297 --> 00:14:11,930
Flat thing it actually makes it easier to
kind of make this, standardized look about

321
00:14:11,930 --> 00:14:16,690
everything, even if it is a web app, or
website or anything it, it's, all looking

322
00:14:16,690 --> 00:14:19,590
a little similar at the moment.
>> Right.

323
00:14:19,590 --> 00:14:22,840
Okay Now do you code at all?

324
00:14:22,840 --> 00:14:26,230
>> I do.
Not for, for iOS.

325
00:14:26,230 --> 00:14:26,340
>> Okay.

326
00:14:26,340 --> 00:14:28,370
>> I tried it and it completely fried
my brain.

327
00:14:28,370 --> 00:14:30,534
And I wasn't a very nice person for about
three weeks.

328
00:14:30,534 --> 00:14:32,360
>> [LAUGH] Yeah, memory management is a
little tough.

329
00:14:32,360 --> 00:14:32,980
>> Yeah.

330
00:14:32,980 --> 00:14:35,100
Yeah I find objectives in coco very

331
00:14:35,100 --> 00:14:37,770
mathematical and I'm not mathematically
brained at all.

332
00:14:37,770 --> 00:14:41,570
I'm creative so like every, everything is
in colors and shapes to me.

333
00:14:42,780 --> 00:14:46,060
I do HTML and CSS, some JavaScript, some
PHP.

334
00:14:46,060 --> 00:14:48,720
I've done Ruby in the past, as well.

335
00:14:48,720 --> 00:14:52,140
But really, I love being able to make
stuff with it.

336
00:14:52,140 --> 00:14:54,200
I love that freedom that it gives you

337
00:14:54,200 --> 00:14:57,770
but I'd rather hand something over, almost
like

338
00:14:57,770 --> 00:14:59,860
really good comp of some sort that a

339
00:14:59,860 --> 00:15:02,510
developer can take and actually like, plug
it in.

340
00:15:02,510 --> 00:15:04,320
For me, that's what I'd prefer.

341
00:15:04,320 --> 00:15:06,290
But I have knowledge of CoCo and

342
00:15:06,290 --> 00:15:08,440
objectives in, and how it works, and
object-orientated

343
00:15:08,440 --> 00:15:11,900
programming and everything like that, but
it just, it's

344
00:15:11,900 --> 00:15:14,610
one of those things that I just personally
don't touch.

345
00:15:14,610 --> 00:15:17,780
>> I, I tried it a long time ago,

346
00:15:17,780 --> 00:15:22,150
and I agree, it seemed very difficult at
the time.

347
00:15:22,150 --> 00:15:27,150
I picked it back up just recently, and I'm
finding it not as hard.

348
00:15:27,150 --> 00:15:28,160
>> Okay, that's interesting.

349
00:15:28,160 --> 00:15:29,840
>> Yeah, there's hope.
>> Okay.

350
00:15:30,880 --> 00:15:34,280
>> But yeah, I'm, I'm the same way, you
know, I'm very very

351
00:15:34,280 --> 00:15:36,290
visually oriented, I've, I've done some

352
00:15:36,290 --> 00:15:39,040
programming actually quite a bit of
programming.

353
00:15:39,040 --> 00:15:41,220
But Objective C isn't that bad.

354
00:15:41,220 --> 00:15:43,412
You, you, you can learn it.
[LAUGH]

355
00:15:43,412 --> 00:15:46,630
>> Okay, good sign.
>> so.

356
00:15:46,630 --> 00:15:49,390
My last question, and then we have some
questions from our viewers

357
00:15:49,390 --> 00:15:55,350
is, what's kind of the, the next frontier
in design for you?

358
00:15:55,350 --> 00:15:59,300
I mean, you're saying that you don't like
flat design, and I

359
00:15:59,300 --> 00:16:00,900
think a lot of people would agree with
you.

360
00:16:00,900 --> 00:16:02,599
Or at least you hate the term.

361
00:16:02,599 --> 00:16:03,206
>> Yeah.

362
00:16:03,206 --> 00:16:05,960
>> what, what do you think is kinda the
next

363
00:16:05,960 --> 00:16:10,750
I guess big challenge for web designers,
I'm pretty sure.

364
00:16:10,750 --> 00:16:12,700
>> I think it, I think it comes back to
content again.

365
00:16:12,700 --> 00:16:17,760
I think we're gonna have to be really
smart about putting out multiple forms of

366
00:16:17,760 --> 00:16:20,910
content because the devices that are gonna

367
00:16:20,910 --> 00:16:24,300
access different sorts of content, could
be anything.

368
00:16:24,300 --> 00:16:26,040
I think we truly have to start thinking.

369
00:16:26,040 --> 00:16:28,100
Although we probably all once laughed at
the

370
00:16:28,100 --> 00:16:30,980
fact that our refrigerator might have
something in it.

371
00:16:30,980 --> 00:16:31,220
>> Right.

372
00:16:31,220 --> 00:16:34,490
>> That could be, I think we actually
have to start thinking in terms of what

373
00:16:34,490 --> 00:16:36,730
screens are gonna exist that don't exist
now,

374
00:16:36,730 --> 00:16:39,040
that are gonna need certain forms of
content.

375
00:16:39,040 --> 00:16:40,750
That aren't gonna make us have to go back
to the

376
00:16:40,750 --> 00:16:44,270
drawing board and rewrite tons of content
at a later date.

377
00:16:44,270 --> 00:16:49,860
I think it was Karen McGrane who's like,
amazing content person, was saying that,

378
00:16:49,860 --> 00:16:53,140
the best example of that is like tv
listings.

379
00:16:53,140 --> 00:16:57,650
So when you have a tv listing, some needs,
some need a long form, others need short

380
00:16:57,650 --> 00:16:59,170
form because they're going if you think of
the

381
00:16:59,170 --> 00:17:01,630
way you access it on your television it's
restricted.

382
00:17:01,630 --> 00:17:02,310
>> Hm.
Yes.

383
00:17:02,310 --> 00:17:03,540
>> If you're, if you're accessing it on

384
00:17:03,540 --> 00:17:06,740
the web, you might have longer versions
available.

385
00:17:06,740 --> 00:17:08,790
So I think, I think the key is gonna

386
00:17:08,790 --> 00:17:12,280
be in content management systems that
don't exist right now.

387
00:17:12,280 --> 00:17:15,230
They're gonna need to have a form of
sending

388
00:17:15,230 --> 00:17:16,780
different forms of content.

389
00:17:16,780 --> 00:17:18,590
And that's not, I don't mean restricted in

390
00:17:18,590 --> 00:17:20,790
terms of character where it will just
break.

391
00:17:20,790 --> 00:17:21,065
>> Right.

392
00:17:21,065 --> 00:17:23,780
>> Actual different forms of content
where the content

393
00:17:23,780 --> 00:17:26,510
reformats with the most important thing at
the top.

394
00:17:26,510 --> 00:17:28,600
Or the most interesting thing at the top,
or anything like that

395
00:17:28,600 --> 00:17:31,260
where it actually restructures itself,
rather

396
00:17:31,260 --> 00:17:33,150
than just being truncated through
characters.

397
00:17:33,150 --> 00:17:36,950
>> Almost like using some sort of
artificial intelligence.

398
00:17:36,950 --> 00:17:38,080
Is that what you're discussing, or?

399
00:17:38,080 --> 00:17:40,450
>> Yeah, some, some.
I don't know.

400
00:17:40,450 --> 00:17:41,740
I don't know.
I don't have the answer.

401
00:17:41,740 --> 00:17:43,972
I think we would all be very very rich if
we did.

402
00:17:43,972 --> 00:17:46,380
[LAUGH] But I think that's going to be the
biggest challenge.

403
00:17:46,380 --> 00:17:47,050
For us.

404
00:17:47,050 --> 00:17:49,270
It won't necessarily come in, in form of
design

405
00:17:49,270 --> 00:17:51,520
cuz I think we're stripping back on that
now.

406
00:17:51,520 --> 00:17:56,270
And when, we're realizing that, asset
creation maybe isn't the way forward.

407
00:17:57,550 --> 00:18:00,350
>> Do you, do you think that has
anything to do with, accessibility?

408
00:18:01,700 --> 00:18:05,330
>> Yeah, huge part.
>> Because I you know you're,

409
00:18:05,330 --> 00:18:08,040
you're talking about smart appliances,
and.

410
00:18:08,040 --> 00:18:13,350
Sometimes it's hard to teach beginners
the, the

411
00:18:13,350 --> 00:18:16,840
good reasons behind forming, you know,
well-structured HTML.

412
00:18:16,840 --> 00:18:17,650
Why would you want to do that?

413
00:18:17,650 --> 00:18:20,080
I mean, the browser renders it just fine
if you, you don't.

414
00:18:20,080 --> 00:18:20,350
>> Yeah.

415
00:18:20,350 --> 00:18:22,180
>> Why do you have to use all these new
tags, right.

416
00:18:22,180 --> 00:18:24,450
And the example I always use is, yeah,

417
00:18:24,450 --> 00:18:30,640
these, these far flung household
appliances that you

418
00:18:30,640 --> 00:18:33,055
know, can pull information down from the
internet.

419
00:18:33,055 --> 00:18:33,500
>> Mm-hm.

420
00:18:33,500 --> 00:18:36,170
>> I've always imagined like, this
blender that

421
00:18:36,170 --> 00:18:38,600
could like, talk to you like Siri, you
know.

422
00:18:38,600 --> 00:18:42,240
And tell you, you know, all the different
kinds of smoothies you can make.

423
00:18:42,240 --> 00:18:43,440
And, and it needs to pull down

424
00:18:43,440 --> 00:18:45,610
that information in some sort of
structured format.

425
00:18:45,610 --> 00:18:45,980
>> Yeah.

426
00:18:45,980 --> 00:18:48,720
So that But that's interesting, I, I
totally agree with

427
00:18:48,720 --> 00:18:54,250
you, okay so we got a bunch of questions
already.

428
00:18:54,250 --> 00:18:55,180
>> Okay.
>> This is good.

429
00:18:56,300 --> 00:18:59,590
The first question says, what do you think
about Fireworks?

430
00:18:59,590 --> 00:19:02,910
Sarah mentioned having use it, used it
before.

431
00:19:02,910 --> 00:19:04,460
Do you still use it for anything?

432
00:19:04,460 --> 00:19:07,100
>> No, I've actually just switched to
using something

433
00:19:07,100 --> 00:19:11,120
called Sketch, which is an app by Bohemian
Coding.

434
00:19:11,120 --> 00:19:14,380
It's super cheap, really, considering what
a great app it is.

435
00:19:14,380 --> 00:19:16,720
I think it's about 50 bucks.

436
00:19:16,720 --> 00:19:21,410
And it does everything that, that
Fireworks and Photoshop and

437
00:19:21,410 --> 00:19:24,760
Illustrator would do, so its kind of a
three in one program.

438
00:19:24,760 --> 00:19:27,650
I used to be a Photoshop monkey for years.

439
00:19:27,650 --> 00:19:32,240
Years like ten years of Photoshop and I
recently switched to Sketch about

440
00:19:32,240 --> 00:19:36,020
a month, maybe six weeks ago and I haven't
really touched Photoshop since.

441
00:19:36,020 --> 00:19:36,100
>> Wow.

442
00:19:36,100 --> 00:19:37,860
>> Except for editing photos, which is
what

443
00:19:37,860 --> 00:19:39,401
is was meant for in the first place
[LAUGH]

444
00:19:39,401 --> 00:19:39,675
>> [LAUGH] Right, right.

445
00:19:39,675 --> 00:19:45,230
[LAUGH] Well that's very cool.
What's your opinion of skeuomorphism?

446
00:19:46,720 --> 00:19:48,690
>> I used to love it.

447
00:19:48,690 --> 00:19:51,340
I used to, I used to really enjoy
designing for it.

448
00:19:51,340 --> 00:19:52,000
>> I think everyone did.

449
00:19:52,000 --> 00:19:54,150
>> But once you've done one too many
leather stitches

450
00:19:54,150 --> 00:19:56,390
too far and you start to lose the will to
live.

451
00:19:57,590 --> 00:19:59,810
I, I don't think it's a bad thing.

452
00:19:59,810 --> 00:20:03,230
I think it's a, an interesting thing to
look at the concepts of

453
00:20:03,230 --> 00:20:06,040
mimicking, user interface design that
mimics stuff

454
00:20:06,040 --> 00:20:07,570
that you would use in real life.

455
00:20:07,570 --> 00:20:11,576
I think some apps took it too far.
Find Friends was like,

456
00:20:11,576 --> 00:20:13,380
the most awful.
[LAUGH]

457
00:20:13,380 --> 00:20:15,710
>> That's the one I always pick out

458
00:20:15,710 --> 00:20:18,570
too, because that doesn't exist in real
life.

459
00:20:18,570 --> 00:20:18,850
>> No.

460
00:20:18,850 --> 00:20:21,150
>> Like, is that leather stitching and
this map?

461
00:20:21,150 --> 00:20:22,100
Even supposed to be, you know?

462
00:20:22,100 --> 00:20:24,810
>> Yeah, that was an interesting one
and I can't remember what

463
00:20:24,810 --> 00:20:28,250
app it was that had wooden buttons in it,
which I always loved.

464
00:20:28,250 --> 00:20:30,410
>> Oh yeah, I know what you're talking
about.

465
00:20:30,410 --> 00:20:33,338
>> I kind of love the idea of wooden
buttons but, some things

466
00:20:33,338 --> 00:20:36,632
take it too far but I think it, it's maybe
about scaling back and

467
00:20:36,632 --> 00:20:40,353
just looking at what, what can mimic stuff
in real life that people would

468
00:20:40,353 --> 00:20:42,305
then find easier from a UX perspective

469
00:20:42,305 --> 00:20:45,770
rather than actually physically making it
look similar.

470
00:20:45,770 --> 00:20:45,930
>> Right.

471
00:20:45,930 --> 00:20:49,660
>> As similar as having leather bound
stuff and things.

472
00:20:49,660 --> 00:20:51,360
>> So, so this is, an interesting one.

473
00:20:51,360 --> 00:20:54,640
I'm actually personally, interested in
this, as well.

474
00:20:54,640 --> 00:21:00,570
Does Sarah have any thoughts that's you
about designing for television screens?

475
00:21:00,570 --> 00:21:02,120
>> Oh,

476
00:21:02,120 --> 00:21:02,710
yes.

477
00:21:02,710 --> 00:21:07,620
I actually pitched for a project for this
that they never, they never did.

478
00:21:07,620 --> 00:21:10,470
I pitched for a project for this company
who

479
00:21:10,470 --> 00:21:13,600
take Apple TVs, hack them, sell them back
to hotel

480
00:21:13,600 --> 00:21:16,490
chains, and then rebrand the kind of, when
you

481
00:21:16,490 --> 00:21:18,500
walk into a hotel and you see the welcome
message.

482
00:21:18,500 --> 00:21:19,780
>> Right.
>> And stuff like that.

483
00:21:19,780 --> 00:21:22,870
It was really interesting.
What you have to do to do that.

484
00:21:22,870 --> 00:21:27,120
The, the assets that you need to create.
Completely alien DPI

485
00:21:27,120 --> 00:21:29,290
versions of things that I've never dealt
with.

486
00:21:29,290 --> 00:21:29,770
>> Oh my gosh.

487
00:21:29,770 --> 00:21:32,160
>> It was yeah, it's really
interesting.

488
00:21:32,160 --> 00:21:34,680
I was kind of sad that that never came
off, cuz I used

489
00:21:34,680 --> 00:21:38,460
a, a single template, and just recolored
it for each hotel in the end.

490
00:21:38,460 --> 00:21:41,230
But, that was a really interesting one
because you had static

491
00:21:41,230 --> 00:21:43,630
elements and then you had to design things
that would change.

492
00:21:43,630 --> 00:21:48,020
So, weather sections it would change so it
was almost like bringing together

493
00:21:48,020 --> 00:21:51,810
all the best parts of designing for iOS,
but on one giant screen.

494
00:21:51,810 --> 00:21:52,210
>> Right.

495
00:21:52,210 --> 00:21:55,380
>> So it was like, having a utility app
for weather in one section and

496
00:21:55,380 --> 00:21:59,000
then having a, a rolling news feed on the
other and then having other sections.

497
00:21:59,000 --> 00:22:03,310
It was really, really interesting but, but
really steep learning curve.

498
00:22:03,310 --> 00:22:05,800
>> Well, maybe if those Apple
television rumors ever

499
00:22:05,800 --> 00:22:08,680
come true we'll all be designing for TVs
again.

500
00:22:08,680 --> 00:22:09,760
>> Let's hope so.

501
00:22:09,760 --> 00:22:14,660
>> We'll see.
So Edward says, love your glasses Sarah.

502
00:22:14,660 --> 00:22:17,630
>> Well thanks, Edward.
>> Other than Treehouse,

503
00:22:17,630 --> 00:22:22,200
of course, how can a beginner get more
involved in the industry?

504
00:22:23,830 --> 00:22:25,260
>> Conferences.

505
00:22:25,260 --> 00:22:28,560
I know that's probably a really cliche
answer but I would say.

506
00:22:28,560 --> 00:22:29,290
>> That's what I always say.

507
00:22:29,290 --> 00:22:31,420
>> Getting involved in the conferences

508
00:22:31,420 --> 00:22:34,820
and understanding that our industry is
wonderful

509
00:22:34,820 --> 00:22:39,500
in the sense of most of our networking,
networking is not really networking.

510
00:22:39,500 --> 00:22:42,850
But it happens in bars after conferences,
or

511
00:22:42,850 --> 00:22:46,170
it happens during coffee breaks at
conferences.

512
00:22:46,170 --> 00:22:48,260
Even if you're not a particularly
confident

513
00:22:48,260 --> 00:22:50,075
person I think learning how to just hold

514
00:22:50,075 --> 00:22:54,050
yourself in a conference environment where
you feel you can go up and talk to people.

515
00:22:54,050 --> 00:22:57,850
Maybe people who you see online, see
teaching Treehouse stuff.

516
00:22:57,850 --> 00:23:03,170
Having the confidence, in a non-creepy
way, to walk up and just say,

517
00:23:03,170 --> 00:23:08,010
hey, you know, I really love this that
you've put out or I'm really looking

518
00:23:08,010 --> 00:23:10,190
to get into something.

519
00:23:10,190 --> 00:23:13,600
One thing I have learnt is people really
love

520
00:23:13,600 --> 00:23:17,550
people who are clearly trying their
hardest to do something.

521
00:23:17,550 --> 00:23:20,880
So if you are a beginner and you're trying
with all your might

522
00:23:20,880 --> 00:23:24,450
to get into the industry or you're stuck
on something, everyone kind of

523
00:23:24,450 --> 00:23:27,220
takes you under their wing and really just
looks after you and says,

524
00:23:27,220 --> 00:23:31,120
look, have you've seen this resource, or
have you seen this website or.

525
00:23:31,120 --> 00:23:32,000
You've got this book.

526
00:23:33,050 --> 00:23:38,340
But then, it's also a weird balance of
learning when, to leave as well.

527
00:23:38,340 --> 00:23:40,770
Otherwise, you end up that creepy guy
who's,stood

528
00:23:40,770 --> 00:23:42,668
next to everyone not knowing what to do.

529
00:23:42,668 --> 00:23:44,211
>> Right, right.

530
00:23:44,211 --> 00:23:45,690
Conferences, yeah.

531
00:23:45,690 --> 00:23:48,650
Conferences are a wonderful place to, to
network.

532
00:23:48,650 --> 00:23:50,860
>> Well, I think, I think everybody
wants to talk.

533
00:23:50,860 --> 00:23:51,200
>> Yeah.

534
00:23:51,200 --> 00:23:52,160
>> And that's the thing that nobody
thinks

535
00:23:52,160 --> 00:23:53,780
about is, you know, everybody wants to
talk.

536
00:23:53,780 --> 00:23:57,470
So llike, I find it really easy to go up
to people.

537
00:23:57,470 --> 00:23:58,770
I didn't used to,

538
00:23:58,770 --> 00:24:02,340
but yeah if you just go up and talk to
people, everybody's so nice.

539
00:24:02,340 --> 00:24:04,410
>> Yeah, yeah definitely.

540
00:24:04,410 --> 00:24:06,980
>> Like, nobody's going to bite your
head off.

541
00:24:06,980 --> 00:24:09,930
Alright so, Steve asks.

542
00:24:09,930 --> 00:24:15,580
What sizes or break points do you design
for when starting a new mobile design?

543
00:24:17,070 --> 00:24:22,100
>> Okay so that's responsive design
rather than actual fixed native stuff.

544
00:24:22,100 --> 00:24:24,010
>> Yes.
>> In terms of break

545
00:24:24,010 --> 00:24:28,090
points, I don't really believe they exist
sometimes.

546
00:24:28,090 --> 00:24:30,460
So, they do, the standard ones exist.

547
00:24:30,460 --> 00:24:30,620
>> Sure.

548
00:24:30,620 --> 00:24:32,840
>> But then anything outside of that, I
think

549
00:24:32,840 --> 00:24:35,120
a break point is exactly what it says it
is.

550
00:24:35,120 --> 00:24:39,370
A break point should be when the design
breaks and not a set size.

551
00:24:39,370 --> 00:24:41,890
So, as long as you've designed in
percentages, and

552
00:24:41,890 --> 00:24:43,550
you can kind of do that thing that we will

553
00:24:43,550 --> 00:24:46,050
do of pulling in the browser in and out,
your

554
00:24:46,050 --> 00:24:49,160
content will reformat to a certain point,
if you've done

555
00:24:49,160 --> 00:24:49,780
that properly.

556
00:24:49,780 --> 00:24:52,090
It then becomes an, an issue of whether

557
00:24:52,090 --> 00:24:53,950
you're gonna take something full screen,
whether you're going

558
00:24:53,950 --> 00:24:55,640
to remove it, whether you're gonna break
that into

559
00:24:55,640 --> 00:24:58,385
parts that are smaller, or that becomes
the issue.

560
00:24:58,385 --> 00:24:59,820
>> Right.

561
00:24:59,820 --> 00:25:04,590
>> And normally that will happen at a
breakpoint that's outside the normal ones.

562
00:25:04,590 --> 00:25:08,670
Which are like the iPhone, iPad, other
tablets, et cetera, et cetera.

563
00:25:08,670 --> 00:25:11,000
So, my breakpoints are always a bit
strange cuz they're

564
00:25:11,000 --> 00:25:14,250
just where the design breaks and not
actually a particular

565
00:25:14,250 --> 00:25:15,270
set size.

566
00:25:15,270 --> 00:25:17,250
>> Gosh, that's a really great way to
think of it.

567
00:25:17,250 --> 00:25:19,360
I don't think I've ever heard that before.

568
00:25:19,360 --> 00:25:19,960
Maybe I have.

569
00:25:19,960 --> 00:25:23,960
But, just thinking of it in terms of yeah,
where the design breaks.

570
00:25:23,960 --> 00:25:26,570
>> Yeah.
To me it was just one of those things.

571
00:25:26,570 --> 00:25:28,820
I, I found responsive design quite a hard

572
00:25:28,820 --> 00:25:31,150
learning curve again because it was quite
mathematical.

573
00:25:31,150 --> 00:25:31,510
>> Yeah.

574
00:25:31,510 --> 00:25:35,860
>> So, and I'd been doing iOS design
for the, the entire time

575
00:25:35,860 --> 00:25:37,860
that everyone was going, responsive
design,

576
00:25:37,860 --> 00:25:39,450
I was kind of that charlatan sitting

577
00:25:39,450 --> 00:25:42,100
in my office [LAUGH] going, please, no one
ask me about

578
00:25:42,100 --> 00:25:44,630
it cuz I haven't even read the book or
anything right now.

579
00:25:44,630 --> 00:25:44,800
>> Right.

580
00:25:44,800 --> 00:25:47,270
>> And then when I did dig into it, It
just

581
00:25:47,270 --> 00:25:51,220
made sense that break points shouldn't be,
shouldn't be device points.

582
00:25:51,220 --> 00:25:54,020
Otherwise, you're just designing for
design specific.

583
00:25:54,020 --> 00:25:54,240
>> Right.

584
00:25:54,240 --> 00:25:55,020
You're defeating the purpose.

585
00:25:55,020 --> 00:25:56,760
>> Break points and you're defeating
the purpose of it.

586
00:25:56,760 --> 00:26:00,010
So then, it just becomes well, break
points should be where the design breaks.

587
00:26:01,210 --> 00:26:04,610
>> Very cool.
So Romain asks:

588
00:26:04,610 --> 00:26:07,130
Do you have any advice for freelancers?

589
00:26:09,570 --> 00:26:12,180
>> Get out of bed.
Take your pajamas off.

590
00:26:12,180 --> 00:26:13,448
Have a good shower.

591
00:26:13,448 --> 00:26:15,830
[LAUGH] No, I'm being serious.
That's the one thing

592
00:26:15,830 --> 00:26:15,980
>> No.

593
00:26:15,980 --> 00:26:17,860
>> I think is.
>> I know, I know you're being serious.

594
00:26:17,860 --> 00:26:18,710
That's why I'm laughing.

595
00:26:18,710 --> 00:26:21,530
>> As freelancers, I think you get so
comfortable with this

596
00:26:21,530 --> 00:26:25,420
whole notion of I can just work at home in
my pajamas.

597
00:26:25,420 --> 00:26:27,180
I don't have to have a shower until 3:00
in the

598
00:26:27,180 --> 00:26:30,560
afternoon, but I think that mindset is
really dangerous to get into.

599
00:26:30,560 --> 00:26:35,030
So, actually just getting up and having a
normal routine like a normal

600
00:26:35,030 --> 00:26:36,660
working person.

601
00:26:36,660 --> 00:26:39,870
Or come out, I sometimes, if I'm feeling
really like, ugh.

602
00:26:39,870 --> 00:26:42,200
It's Monday morning or yeah.

603
00:26:42,200 --> 00:26:45,563
I just take a walk round the, round the
block and come back into my house

604
00:26:45,563 --> 00:26:49,470
again and feel like oh, I've taken my walk
to work and now I'm at work.

605
00:26:49,470 --> 00:26:49,790
>> Right.

606
00:26:49,790 --> 00:26:51,830
>> It's, I think it's more of a mindset
thing.

607
00:26:51,830 --> 00:26:53,220
If you're the sort of person who's gonna

608
00:26:53,220 --> 00:26:55,860
get distracted by the latest Grand Theft
Auto sitting

609
00:26:55,860 --> 00:27:00,170
in the corner and wanting to play with
that then you just have to change the way

610
00:27:00,170 --> 00:27:02,660
that you have a mindset about work.

611
00:27:02,660 --> 00:27:05,240
You just have to be aware that you're the
sort of person who will naturally want to

612
00:27:05,240 --> 00:27:10,210
gravitate off work and try and bring it
back, every so often that, is a hard one.

613
00:27:10,210 --> 00:27:13,250
Freelancing is, is tough, it's really
tough.

614
00:27:13,250 --> 00:27:17,350
>> I've found that having a separate
physical space helps me work at home.

615
00:27:17,350 --> 00:27:17,760
>> Yeah.

616
00:27:17,760 --> 00:27:21,620
>> You know if, if he can do that, like
that's really one of the greatest things

617
00:27:21,620 --> 00:27:25,400
you can do for yourself, is just having a
separate room, go in there, you work, and

618
00:27:25,400 --> 00:27:27,266
when you come out, work's over.
>> Yeah.

619
00:27:27,266 --> 00:27:28,860
>> You know, I think.

620
00:27:28,860 --> 00:27:31,340
>> Also, I think with working from
home,

621
00:27:31,340 --> 00:27:33,870
you have to be more aware of when you

622
00:27:33,870 --> 00:27:35,340
do that thing where you're sitting in
front

623
00:27:35,340 --> 00:27:37,980
of your computer and, actually, you're not
working anymore.

624
00:27:37,980 --> 00:27:40,820
You've, you've gravitated towards Twitter
or Facebook.

625
00:27:40,820 --> 00:27:44,010
And you think because you've sat at your
desk, you're working.

626
00:27:44,010 --> 00:27:46,460
And it took me a while to, to understand
when I

627
00:27:46,460 --> 00:27:49,610
was actually just, what I thought was like
even passively working.

628
00:27:49,610 --> 00:27:50,440
It's not passively working.
>> You're just,

629
00:27:50,440 --> 00:27:52,380
you're just doing social media marketing.
>> You just, yeah.

630
00:27:52,380 --> 00:27:52,750
>> Yeah, totally.

631
00:27:52,750 --> 00:27:53,920
>> You find yourself sat there and

632
00:27:53,920 --> 00:27:56,000
you're like, actually I'm not working at
all.

633
00:27:56,000 --> 00:27:58,300
I should have a break and then come back.

634
00:27:58,300 --> 00:28:00,520
It's understanding those kind of nuances
of

635
00:28:00,520 --> 00:28:04,100
design, of, of working from home, I think.

636
00:28:04,100 --> 00:28:05,230
>> Absolutely.

637
00:28:05,230 --> 00:28:06,590
So, Andy asks.

638
00:28:07,810 --> 00:28:10,050
What was your thought process behind the

639
00:28:10,050 --> 00:28:12,970
footer navigation on the You Know Who
website?

640
00:28:12,970 --> 00:28:14,730
Was it purely for aesthetics?

641
00:28:15,940 --> 00:28:17,630
>> Hm, no.

642
00:28:17,630 --> 00:28:21,590
I'll honestly answer, I quite liked it
because it was different.

643
00:28:21,590 --> 00:28:25,500
I wanted to think more mobile first
concept and, and so it

644
00:28:25,500 --> 00:28:30,925
was navigation that changes and reformats
for iPhone beautifully and any other.

645
00:28:30,925 --> 00:28:31,480
Mm-hm.

646
00:28:31,480 --> 00:28:33,790
>> Any other phone or tablet.

647
00:28:33,790 --> 00:28:36,450
So, it was me actually trying to
experiment with the

648
00:28:36,450 --> 00:28:39,720
whole notion of mobile first and then
coming up to desktop.

649
00:28:39,720 --> 00:28:41,740
And wondering whether people would,

650
00:28:41,740 --> 00:28:45,250
would see or understand that the
navigation was flipped.

651
00:28:46,460 --> 00:28:47,870
It's just one of those things.

652
00:28:47,870 --> 00:28:49,280
Was just trying to be different.

653
00:28:49,280 --> 00:28:50,533
>> It seems to work.
[CROSSTALK]

654
00:28:50,533 --> 00:28:50,628
>> So.

655
00:28:50,628 --> 00:28:52,378
>> I looked at it and I think it looks
pretty nice.

656
00:28:52,378 --> 00:28:53,470
>> Oh, thank you.
[CROSSTALK]

657
00:28:53,470 --> 00:28:54,942
>> But.
>> So, that's all changing anyway.

658
00:28:54,942 --> 00:28:57,940
[LAUGH] So, it's irrelevant.
But oh, thank you.

659
00:28:57,940 --> 00:29:00,530
Yeah, nice.
It was just me trying to be different.

660
00:29:00,530 --> 00:29:03,945
So, I think we only have a couple more
questions here.

661
00:29:03,945 --> 00:29:07,113
Oll, Ollie asks, You've had success

662
00:29:07,113 --> 00:29:10,390
outside the web with Blush Bar.

663
00:29:10,390 --> 00:29:16,430
Is there anything within the industry you
want to challenge as a personal project?

664
00:29:16,430 --> 00:29:18,190
I guess you should probably explain what
Blush Bar is?

665
00:29:18,190 --> 00:29:21,830
>> Okay, Blush Bar is my personal
project.

666
00:29:21,830 --> 00:29:24,170
It's actually a blow dry bar, which seems

667
00:29:24,170 --> 00:29:27,330
so random, but I have my reasons behind
it.

668
00:29:29,010 --> 00:29:30,350
Repeat the last section of the question.

669
00:29:30,350 --> 00:29:32,180
Sorry, so what?
>> Ollie says,

670
00:29:32,180 --> 00:29:36,950
is there anything within the industry you
want to challenge as a personal

671
00:29:36,950 --> 00:29:42,400
project?
>> Oh I guess on a, broader level

672
00:29:42,400 --> 00:29:48,630
I really wanna crack Ruby on Rails just
because I really like the idea of,

673
00:29:48,630 --> 00:29:53,790
of being able to fully design out and
develop anything.

674
00:29:53,790 --> 00:29:57,602
And I would really like to do the same
with Objective C and Coco, to be honest.

675
00:29:57,602 --> 00:30:00,340
>> Oh, Treehouse is a wonderful place
to learn all of those things.

676
00:30:00,340 --> 00:30:01,265
>> Yeah, it is.

677
00:30:01,265 --> 00:30:01,430
>> [LAUGH]

678
00:30:01,430 --> 00:30:01,550
>> True.

679
00:30:01,550 --> 00:30:02,870
It's true, I've been working my

680
00:30:02,870 --> 00:30:07,016
way through, actually on the [INAUDIBLE]
course.

681
00:30:07,016 --> 00:30:11,330
yeah, in terms of, of bigger industry
stuff, I don't know, I have something in

682
00:30:11,330 --> 00:30:15,860
the pipeline at the moment, but I'm
keeping shh on it at the moment, but.

683
00:30:15,860 --> 00:30:17,240
Yeah, there's, there's always.
>> Understandable.

684
00:30:17,240 --> 00:30:19,510
>> But there's always, that's the great
thing about our industry though, right?

685
00:30:19,510 --> 00:30:21,860
There's always a problem that anyone can
solve.

686
00:30:21,860 --> 00:30:22,680
Not just anyone

687
00:30:22,680 --> 00:30:26,940
who's like seen as the head of their game
in whatever they do.

688
00:30:26,940 --> 00:30:29,230
There are problems are in our industry
that, that

689
00:30:29,230 --> 00:30:31,210
anyone can solve, whether you're a
freelancer, whether you're

690
00:30:31,210 --> 00:30:33,880
just starting out, there's ways of
collaborating with people

691
00:30:33,880 --> 00:30:36,700
that you meet at conferences who do have
the skills.

692
00:30:36,700 --> 00:30:38,480
That's what I like about our industry is

693
00:30:38,480 --> 00:30:41,140
newbies can, can solve something that
people who've

694
00:30:41,140 --> 00:30:42,860
been in the industry for years have been

695
00:30:42,860 --> 00:30:45,690
struggling because they've got fresh
approach on it.

696
00:30:45,690 --> 00:30:48,170
So I think anything is up for the grabs.

697
00:30:48,170 --> 00:30:49,130
>> Very true.
Okay.

698
00:30:49,130 --> 00:30:50,270
Two more questions here.

699
00:30:50,270 --> 00:30:51,120
>> Okay.

700
00:30:51,120 --> 00:30:56,250
>> Going back to freelancing, is it
honestly possible for most freelancers

701
00:30:56,250 --> 00:31:01,120
to survive, so many jobs don't end up
paying a living wage?

702
00:31:01,120 --> 00:31:01,710
That's interesting.

703
00:31:03,780 --> 00:31:06,610
>> So, this one is a really hard one.

704
00:31:06,610 --> 00:31:12,080
I think actually, last week when I was
patterns, we were talking about this.

705
00:31:12,080 --> 00:31:13,920
We were saying that it's a really hard

706
00:31:13,920 --> 00:31:15,750
thing for everyone who's been in the
industry

707
00:31:15,750 --> 00:31:20,280
a while to then think back to how it was
when you didn't have any money.

708
00:31:20,280 --> 00:31:23,910
Every person who's now seen as being
someone who's good at

709
00:31:23,910 --> 00:31:26,950
what they do has done that and has done
those struggles.

710
00:31:28,060 --> 00:31:28,980
But it's very hard

711
00:31:28,980 --> 00:31:33,400
when you hear that whole follow your
dream, everything will turn out okay.

712
00:31:33,400 --> 00:31:36,980
It's hard to then think back to know
there's,

713
00:31:36,980 --> 00:31:39,670
you have to put in a lot of hard work.

714
00:31:39,670 --> 00:31:41,520
And I think maybe the only way for some

715
00:31:41,520 --> 00:31:43,710
people to start off on the freelancing
path is

716
00:31:43,710 --> 00:31:45,700
to start in a company first where you feel

717
00:31:45,700 --> 00:31:48,580
that you have that cushion of the wage
coming in.

718
00:31:48,580 --> 00:31:51,990
And then do freelancing on the side if you
can.

719
00:31:51,990 --> 00:31:54,900
We're also talking about how wages

720
00:31:54,900 --> 00:31:57,110
and, you know, if you are in a company
where you've been there a

721
00:31:57,110 --> 00:32:01,830
while and they can't raise your salary
because of the economic climate we're in.

722
00:32:01,830 --> 00:32:06,440
Try and barter to get days at home that
you can work, therefore you can

723
00:32:06,440 --> 00:32:08,070
work on side projects and you can

724
00:32:08,070 --> 00:32:11,130
work on building up freelance portfolios
and things.

725
00:32:11,130 --> 00:32:14,320
I think it's really hard for people to
just go, now I'm gonna be a

726
00:32:14,320 --> 00:32:18,710
freelancer, nowadays because there's a lot
of people who want to do it as well.

727
00:32:18,710 --> 00:32:19,920
So I think it's a, it's a

728
00:32:19,920 --> 00:32:23,070
really hard thing at the moment and it's

729
00:32:23,070 --> 00:32:25,280
a hard thing to survive amongst everyone
and be

730
00:32:25,280 --> 00:32:27,790
seen and heard amongst everyone as well,
but

731
00:32:27,790 --> 00:32:30,030
I think there is enough work to go around.

732
00:32:30,030 --> 00:32:32,800
So it's just putting yourself out there

733
00:32:32,800 --> 00:32:35,000
marketing yourself learning a bit about
personal

734
00:32:35,000 --> 00:32:39,240
branding and how you can, how you're seen
by other people is really important.

735
00:32:39,240 --> 00:32:45,620
>> Absolutely so last question here is,
what is the best or

736
00:32:45,620 --> 00:32:48,360
your favorite project that you've
designed?

737
00:32:49,630 --> 00:32:50,168
>> Oh.

738
00:32:50,168 --> 00:32:52,979
Interesting.

739
00:32:52,979 --> 00:32:57,310
I'm gonna go with two cuz they are very
different.

740
00:32:57,310 --> 00:32:59,070
one, I was working on an internal

741
00:32:59,070 --> 00:33:02,240
app for News International which was
really interesting.

742
00:33:03,310 --> 00:33:06,360
I haven't, I can't show any screenshots of
it cuz it was an internal app.

743
00:33:06,360 --> 00:33:08,590
But it was, it was really interesting
because

744
00:33:08,590 --> 00:33:11,870
it had to solve many problems about
content.

745
00:33:11,870 --> 00:33:15,980
And show who was maybe the best journalist
for that week.

746
00:33:15,980 --> 00:33:17,570
Who was really engaging on Twitter.

747
00:33:17,570 --> 00:33:19,920
It pulled in lots of different social
feeds.

748
00:33:19,920 --> 00:33:23,990
So it meant designing tons of dashboards,
which I've always wanted to design.

749
00:33:23,990 --> 00:33:27,360
I think anyone who's a designer's always
wanted to just get hold of a dashboard.

750
00:33:27,360 --> 00:33:30,750
And it meant designing about 18 different
dashboards.

751
00:33:30,750 --> 00:33:34,090
That all had to have a similar look and
feel that

752
00:33:34,090 --> 00:33:36,990
did very, very different things, so that
was like a dream project

753
00:33:36,990 --> 00:33:41,100
for me that I worked on for a year.
I was really, really lucky to do that.

754
00:33:41,100 --> 00:33:44,810
Second one would probably be my side
project back at home, because

755
00:33:44,810 --> 00:33:47,680
the blow dry bar, which is really random,
but what it meant

756
00:33:47,680 --> 00:33:51,800
I could do is actually take everything
that I'd learnt of, over

757
00:33:51,800 --> 00:33:55,400
the ten years of being in the industry,
and go back to.

758
00:33:55,400 --> 00:33:57,830
If I didn't have any clients at all
telling me

759
00:33:57,830 --> 00:34:00,690
what to do, how would I design something
like this.

760
00:34:00,690 --> 00:34:02,340
So it took me back to doing print

761
00:34:02,340 --> 00:34:06,990
work, branding work, websites, really
basic website stuff.

762
00:34:06,990 --> 00:34:10,070
But all without that kind of oppressive
client coming down

763
00:34:10,070 --> 00:34:12,420
on your shoulders saying no, no can we
move that.

764
00:34:12,420 --> 00:34:15,040
Ten pixels to the left yeah.

765
00:34:15,040 --> 00:34:18,510
So that was great because it gave me
complete creative freedom to go

766
00:34:18,510 --> 00:34:21,440
back and go oh, I wonder if I could still
do print work?

767
00:34:21,440 --> 00:34:23,270
Or wonder if I could still brand
something?

768
00:34:23,270 --> 00:34:27,410
So, that was my, the favorite of this
year.

769
00:34:27,410 --> 00:34:29,360
>> Very cool stuff.

770
00:34:29,360 --> 00:34:33,790
Well that's all the time we have for for
today.

771
00:34:33,790 --> 00:34:38,870
You are who on Twitter?
>> Yeah, sazzy on Twitter.

772
00:34:38,870 --> 00:34:43,070
>> So if we didn't get your question,
go ahead and tweet to Sarah.

773
00:34:43,070 --> 00:34:43,410
>> Yeah.

774
00:34:43,410 --> 00:34:45,750
>> Sure she'd be happy to answer.

775
00:34:45,750 --> 00:34:50,150
You're you're here at Treehouse because
you're actually shooting a

776
00:34:50,150 --> 00:34:52,650
course, can you tell us a little bit about
that?

777
00:34:52,650 --> 00:34:55,610
>> So, we, I just got finished shooting
in here, today.

778
00:34:56,660 --> 00:35:01,620
So I'm shooting a course for iOS designs,
it's mobile app design.

779
00:35:01,620 --> 00:35:05,650
It's a whole course about, we're actually
designing a diary app.

780
00:35:05,650 --> 00:35:08,725
So it takes you right from the start of
planning and doing the

781
00:35:08,725 --> 00:35:11,340
wireframes and writing certain
documentation that

782
00:35:11,340 --> 00:35:13,800
will help with developers, right through
to.

783
00:35:13,800 --> 00:35:18,080
Designing and exporting your artwork, so
it's like a full course on

784
00:35:18,080 --> 00:35:20,550
mobile app design.
>> Very cool stuff.

785
00:35:20,550 --> 00:35:24,830
Well, I'm sure we'll release that as soon
as we possibly can.

786
00:35:24,830 --> 00:35:27,290
It'll be coming very soon.

787
00:35:27,290 --> 00:35:32,480
If you'd like to learn more about us and
learn web design, web development mobile

788
00:35:32,480 --> 00:35:37,780
business and so much more.
You can check us out at teamtreehouse.com.

789
00:35:37,780 --> 00:35:40,835
Thanks so much for watching and we'll see
you real soon.

790
00:35:40,835 --> 00:35:47,117
[MUSIC]