0:00:17.640,0:00:21.970
JENN SCHEER: All right. Good? Good. Welcome.

0:00:21.970,0:00:24.939
Welcome. I was just at the Sandi Metz talk.

0:00:24.939,0:00:26.289
Really awesome. Really excited to

0:00:26.289,0:00:28.180
follow up with no code.

0:00:28.180,0:00:32.348
There will be no code in this. I'm sorry.

0:00:32.348,0:00:34.710
I'm Jenn, and I'm here to tell you about

0:00:34.710,0:00:39.230
some elements of design. I always hear from[br]developers

0:00:39.230,0:00:40.780
that they don't know how to design. But I

0:00:40.780,0:00:45.079
don't think it's true. You're incredibly smart[br]people and

0:00:45.079,0:00:47.390
you can figure it out. And I'm here to

0:00:47.390,0:00:47.760
help.

0:00:47.760,0:00:50.100
Currently I'm a designer and frontend developer[br]at Rap

0:00:50.100,0:00:56.340
Genius. Perfect website. Designed it all myself.[br]That's not

0:00:56.340,0:00:58.190
true at all.

0:00:58.190,0:01:01.140
So, I think that we know, by now, you

0:01:01.140,0:01:03.320
know, we're living in a world of design. A

0:01:03.320,0:01:06.590
culture of design. Apple is number one, and[br]everyone

0:01:06.590,0:01:09.229
loves it. So, I think we have an idea

0:01:09.229,0:01:11.869
of why design is important, but we have to

0:01:11.869,0:01:14.390
remember that we're building these things,[br]all of the

0:01:14.390,0:01:16.479
things that we're programming every day. We're[br]building them

0:01:16.479,0:01:18.580
for people. And people have to be able to

0:01:18.580,0:01:23.450
use them as easily and as pleasantly as possible.

0:01:23.450,0:01:27.689
So, designing will set you apart from other[br]people.

0:01:27.689,0:01:29.590
It will buy you good will and trust from

0:01:29.590,0:01:32.270
users when they know that your site is well-designed.

0:01:32.270,0:01:34.610
It's easy to use and it's pleasant and it's

0:01:34.610,0:01:38.460
an enjoyable experience. Design can serve[br]as marketing for

0:01:38.460,0:01:41.220
you. You can use it to sell yourself to

0:01:41.220,0:01:45.200
people and have them trust you.

0:01:45.200,0:01:46.840
And I would say that design is not just

0:01:46.840,0:01:50.570
aesthetics. Design is also function. Form[br]follows function, and

0:01:50.570,0:01:53.500
we know this in programming. We program around[br]it,

0:01:53.500,0:01:57.649
and you have to use this to, to sell

0:01:57.649,0:02:00.270
your purpose. You can use design.

0:02:00.270,0:02:03.829
So, I also, as a developer, I don't want

0:02:03.829,0:02:04.920
you to feel like you have to throw things

0:02:04.920,0:02:07.460
over the wall to designers and say, I don't

0:02:07.460,0:02:09.030
have any say in this. I don't know what

0:02:09.030,0:02:11.860
I'm talking about. Because you do. And I want

0:02:11.860,0:02:14.209
to empower you to do so.

0:02:14.209,0:02:18.570
So, today I have seven principles here. Hierarchy,[br]contrast,

0:02:18.570,0:02:23.230
repetition, proximity, flow, typography, and[br]color. And with these

0:02:23.230,0:02:25.590
seven principles, I think that you can have[br]a

0:02:25.590,0:02:28.340
great base for, for working your way into[br]design

0:02:28.340,0:02:29.550
conversations.

0:02:29.550,0:02:32.620
So, a loose flow here is I'm gonna define

0:02:32.620,0:02:35.670
each principle. Look at some bad examples[br]countered with

0:02:35.670,0:02:38.230
some good examples. And then use these examples[br]to

0:02:38.230,0:02:40.840
give you some rules to use and fall back

0:02:40.840,0:02:41.790
on.

0:02:41.790,0:02:46.920
All right. So number one is hierarchy. Hierarchy[br]is

0:02:46.920,0:02:49.890
all about priority in your layouts. So you[br]can

0:02:49.890,0:02:51.920
see, from this slide itself, I'll use all[br]of

0:02:51.920,0:02:56.019
these slides to, to show you how hierarchy[br]works.

0:02:56.019,0:02:59.120
The word hierarchy is number one. It's bigger.[br]It's

0:02:59.120,0:03:01.569
greener. It's, it's the first thing that you're[br]gonna

0:03:01.569,0:03:03.180
look at on this page. And it is the

0:03:03.180,0:03:06.450
most important. It's what we're about to talk[br]about.

0:03:06.450,0:03:10.879
So, you can see, there's like a flow of

0:03:10.879,0:03:12.730
hierarchy. You look at this big thing at the

0:03:12.730,0:03:14.560
top. You look at the next biggest thing. You

0:03:14.560,0:03:17.060
look at the smaller things. You, before you[br]even

0:03:17.060,0:03:18.970
look at the browser, at the phone or whatever

0:03:18.970,0:03:21.450
you're designing, you want to ask yourself,[br]what am

0:03:21.450,0:03:23.560
I doing here? Why is someone coming to my

0:03:23.560,0:03:25.709
site? You have to ask these hard questions[br]so

0:03:25.709,0:03:29.190
you can have great answers and be prepared.

0:03:29.190,0:03:33.860
So, bad example. This site. There's no clear[br]hierarchy

0:03:33.860,0:03:35.379
here. The first thing that you see is the

0:03:35.379,0:03:37.780
logo. A good technique that you can use is

0:03:37.780,0:03:40.590
to blur out your site and see if anything

0:03:40.590,0:03:42.500
pops out. And the only thing we see here

0:03:42.500,0:03:45.959
is the logo. Because everything else, this[br]is the

0:03:45.959,0:03:48.870
reason that someone is coming to your site.[br]You,

0:03:48.870,0:03:51.400
you know, the headlines, the tags, the sidebar.[br]All

0:03:51.400,0:03:55.340
of those have the same priority. Totally boring.

0:03:55.340,0:04:00.280
So, better example of hierarchy is this site.[br]The

0:04:00.280,0:04:02.930
first thing that we see here when we're blurred

0:04:02.930,0:04:05.810
out is this knowledge headline. The content[br]the people

0:04:05.810,0:04:07.830
are coming to the site for. The number one

0:04:07.830,0:04:10.370
most important article. We do see the logo[br]here,

0:04:10.370,0:04:12.310
and it's important to let people know that[br]this

0:04:12.310,0:04:14.659
is where they are. So that they feel comfortable

0:04:14.659,0:04:16.769
here. And then the third thing that we see.

0:04:16.769,0:04:19.349
So we've got the headline, the logo, and then

0:04:19.349,0:04:20.959
the other actions that you can do on page.

0:04:20.959,0:04:22.820
Say, I don't want to do that one thing.

0:04:22.820,0:04:25.150
Give people another option. It's the second[br]thing that

0:04:25.150,0:04:27.700
they see. Third thing that they see. They[br]see

0:04:27.700,0:04:30.320
lots of things all at the same time.

0:04:30.320,0:04:32.280
BuzzFeed. They definitely see lots of things[br]all that

0:04:32.280,0:04:35.820
the same time. It's so much going on. There's

0:04:35.820,0:04:37.219
nowhere to look. I mean, you have these big

0:04:37.219,0:04:40.729
pictures, but they're everywhere. Everything[br]is asking for your

0:04:40.729,0:04:43.229
attention, and if you tell the user that everything

0:04:43.229,0:04:45.320
is the number one priority, then what you're[br]really

0:04:45.320,0:04:48.260
saying is that nothing is important. You're[br]saying that

0:04:48.260,0:04:49.330
this is all throwaway.

0:04:49.330,0:04:51.360
And, of course, BuzzFeed, you know, they have[br]to

0:04:51.360,0:04:53.500
go down this rabbit hole. That's. They're[br]looking for

0:04:53.500,0:04:56.589
the page views. But I don't think that's the

0:04:56.589,0:04:58.390
way to get users to trust your brand. And

0:04:58.390,0:05:01.860
I don't think people trust BuzzFeed. They[br]know what

0:05:01.860,0:05:03.520
BuzzFeed's doing.

0:05:03.520,0:05:06.159
So I would go. I would go look at

0:05:06.159,0:05:11.469
the stalwart. Like, New York Times, for better[br]hierarchy.

0:05:11.469,0:05:13.770
You know, you blur this out. There are fewer

0:05:13.770,0:05:16.130
things catching your eye. We're humans. We're[br]gonna look

0:05:16.130,0:05:18.510
at photographs. These look like, oh, these[br]look like

0:05:18.510,0:05:23.399
things I know. We, we sort of are tuned

0:05:23.399,0:05:26.580
to, to blur out ads. We don't look at

0:05:26.580,0:05:29.159
ads anymore. So you've got these two pieces[br]of

0:05:29.159,0:05:32.289
content. And then we're going to look at the

0:05:32.289,0:05:35.089
text that is associated with the images. And[br]then

0:05:35.089,0:05:36.789
we're going to look at the big headlines,[br]which

0:05:36.789,0:05:39.640
is, you know, the biggest stories of today.[br]And

0:05:39.640,0:05:41.909
then sort of everything else. But there's[br]a path

0:05:41.909,0:05:45.370
here and there is a flow that they use

0:05:45.370,0:05:48.880
to, to guide you around the page.

0:05:48.880,0:05:51.380
And by telling people that, you know, like,[br]our

0:05:51.380,0:05:54.529
priority here is news. And we want to be

0:05:54.529,0:05:57.719
serious here. You tell a great story for the

0:05:57.719,0:05:59.450
user.

0:05:59.450,0:06:03.649
Contrast. So contrast creates interest on[br]the page. And

0:06:03.649,0:06:06.620
by creating interesting differences for a[br]reason, you engage

0:06:06.620,0:06:09.210
the audience. So there is some contrast here.[br]You

0:06:09.210,0:06:12.260
know, we have the bigger text. The greener[br]text.

0:06:12.260,0:06:15.050
It could be a lot more blinged out, but

0:06:15.050,0:06:16.959
this is just an intro slide. It's not that

0:06:16.959,0:06:19.060
important.

0:06:19.060,0:06:21.709
So we can use things like line, shape, texture,

0:06:21.709,0:06:25.630
color, and patterns to create contrast on[br]the page.

0:06:25.630,0:06:27.830
So here we have lines versus shape. WE have

0:06:27.830,0:06:30.159
opposite colors on the color wheel. We have[br]this

0:06:30.159,0:06:34.390
textured pattern versus a blank space.

0:06:34.390,0:06:37.390
And there's also contrast with typography.[br]So we have

0:06:37.390,0:06:41.200
a huge headline, colorful, balanced by a much[br]smaller

0:06:41.200,0:06:42.770
piece of text.

0:06:42.770,0:06:46.820
So, some, like, this site I would not say

0:06:46.820,0:06:51.500
has great contrast. It's GitHub. Great website.[br]But they're

0:06:51.500,0:06:53.560
not really pushing it to the limit. And, of

0:06:53.560,0:06:55.570
course, it's not maybe in GitHub's best interest[br]to

0:06:55.570,0:06:58.709
really worry about that. But they're going[br]with some

0:06:58.709,0:07:02.450
defaults. Black, white, and blue links. Not[br]very exciting.

0:07:02.450,0:07:04.180
And this I think is a bigger problem. You

0:07:04.180,0:07:06.740
know, there's the contrast of these examples[br]that they're

0:07:06.740,0:07:08.289
trying to show you, but they're too small[br]to

0:07:08.289,0:07:11.580
really sell themselves to you. You know, you[br]can't

0:07:11.580,0:07:14.430
see the actual features. So you want to be

0:07:14.430,0:07:15.740
really bold.

0:07:15.740,0:07:17.760
I think this is a better example of contrast.

0:07:17.760,0:07:22.289
They're using this bright blue background,[br]this actual photograph

0:07:22.289,0:07:25.219
paired with sort of geometric text. So we[br]have

0:07:25.219,0:07:28.620
like the geometric layout and this organic[br]thing happening

0:07:28.620,0:07:32.630
next to it. And we have flat white shapes

0:07:32.630,0:07:36.010
versus blue and brown colors. It makes a really

0:07:36.010,0:07:39.380
compelling argument for the idea that this[br]product has

0:07:39.380,0:07:42.010
their shit together. And they know what they're[br]trying

0:07:42.010,0:07:45.800
to sell you. They know how to sell you

0:07:45.800,0:07:47.130
something.

0:07:47.130,0:07:50.550
This isn't, this is a Yahoo widget section.[br]It

0:07:50.550,0:07:53.110
doesn't have great contrast. The headlines[br]barely stand out.

0:07:53.110,0:07:55.339
There are a lot of different types of content

0:07:55.339,0:07:57.979
here but they all look the same, and you

0:07:57.979,0:08:00.440
can't really interact with them in different[br]ways.

0:08:00.440,0:08:02.690
So, you know, you could, you can push it

0:08:02.690,0:08:04.940
a lot further than this, I think. This is

0:08:04.940,0:08:07.680
an evernote screen where the different types[br]of action

0:08:07.680,0:08:10.300
that you can take have totally different designs.[br]They

0:08:10.300,0:08:13.370
have this dark background with the lighter[br]green color.

0:08:13.370,0:08:16.250
It's a good contrast.

0:08:16.250,0:08:17.950
You can tell that they, they give better love.

0:08:17.950,0:08:20.709
You know, the section for creating content[br]looks different

0:08:20.709,0:08:22.380
than the section for looking through the content[br]you've

0:08:22.380,0:08:27.180
already created. And there's a new way to[br]look

0:08:27.180,0:08:29.219
at each thing.

0:08:29.219,0:08:34.339
So, another not great example of contrast.[br]There is

0:08:34.339,0:08:36.200
some stuff here, you know. There's big, you[br]know,

0:08:36.200,0:08:39.620
there's big text, there's small text. There's[br]colorful buttons.

0:08:39.620,0:08:41.339
But it's sticking to the defaults and it's[br]not

0:08:41.339,0:08:44.089
really engaging the user in a way that they're,

0:08:44.089,0:08:47.730
that's either new, fresh, or memorable to[br]them.

0:08:47.730,0:08:49.830
So I'm gonna say that they're falling into[br]the

0:08:49.830,0:08:52.870
Bootstrap Trap. We all know it. We all love

0:08:52.870,0:08:56.210
it. It's great. I mean, no. It's. It is

0:08:56.210,0:08:59.630
great. No, I messed the joke up. The Bootstrap

0:08:59.630,0:09:02.490
Trap, it's terrible! I'm just kidding. It's[br]awesome.

0:09:02.490,0:09:06.250
I am saying that you can use it wisely.

0:09:06.250,0:09:09.400
There are basics there. There are tons of[br]key

0:09:09.400,0:09:12.300
and amazing design features there that you[br]don't have

0:09:12.300,0:09:13.810
to worry about. That you can go on to

0:09:13.810,0:09:17.160
build the fun parts of your product. But I'm

0:09:17.160,0:09:19.650
saying that this is also a Bootstrap site,[br]and

0:09:19.650,0:09:21.950
they've done a ton more work here to make

0:09:21.950,0:09:24.050
it really memorable.

0:09:24.050,0:09:26.330
They use a lot of different elements. They[br]use

0:09:26.330,0:09:29.240
texture. They use an illustrated background.[br]They use this

0:09:29.240,0:09:34.430
yellow color and the scale to set themselves[br]apart

0:09:34.430,0:09:36.840
from other services that you might want to[br]use.

0:09:36.840,0:09:38.710
And you can still use Bootstrap if it's really

0:09:38.710,0:09:41.020
important to you.

0:09:41.020,0:09:42.650
It's really important to build on top of it

0:09:42.650,0:09:45.000
to make. This is also a Bootstrap site. But

0:09:45.000,0:09:47.460
they use this, like, image in the background.[br]They

0:09:47.460,0:09:49.710
sort of break out of a grid to call

0:09:49.710,0:09:52.510
out certain elements of their product. It[br]makes it

0:09:52.510,0:09:56.510
much more compelling for people.

0:09:56.510,0:10:00.930
Number three is repetition. Repetition creates[br]patterns and expectations,

0:10:00.930,0:10:04.280
which unify and strengthen your message. So,[br]here we

0:10:04.280,0:10:08.310
have a bullet list. We have an ordered list.

0:10:08.310,0:10:11.570
This is something that we're, is a tool that

0:10:11.570,0:10:14.700
we're familiar with grouping things together.[br]Everything looks the

0:10:14.700,0:10:16.490
same except for the one thing that we're calling

0:10:16.490,0:10:18.410
out, which is the section we're about to start.

0:10:18.410,0:10:22.210
So there are different things that you can[br]use

0:10:22.210,0:10:27.170
to create repetition, like spatial relationships,[br]bullets, similar colors,

0:10:27.170,0:10:29.810
formatting. And all of these great patterns[br]that let

0:10:29.810,0:10:33.040
people know that they are, you know, safe[br]in

0:10:33.040,0:10:36.570
your, in your website. In your website? On[br]your

0:10:36.570,0:10:37.060
website?

0:10:37.060,0:10:40.170
So we all know, don't repeat yourself. But[br]that's

0:10:40.170,0:10:42.250
not true with design. And it's not really[br]true

0:10:42.250,0:10:45.580
with code either. You do need to repeat yourself,

0:10:45.580,0:10:48.850
but in ways that are purposeful and ways that

0:10:48.850,0:10:51.240
you can, you know, you can do it once

0:10:51.240,0:10:52.350
and then you never have to do it again.

0:10:52.350,0:10:54.180
You set up a system and it's like, oh,

0:10:54.180,0:10:55.670
we have a new button. I guess it needs

0:10:55.670,0:10:57.880
to be a different color because it's more[br]important.

0:10:57.880,0:10:58.260
No.

0:10:58.260,0:11:01.270
I mean, set up, set up some basics and

0:11:01.270,0:11:04.170
then never have to code them again. Well,[br]you

0:11:04.170,0:11:06.790
know, that's, that's always the dream, right.[br]So this

0:11:06.790,0:11:09.480
is a Best Buy list of products. But they

0:11:09.480,0:11:11.410
have a ton of different ways that you can

0:11:11.410,0:11:15.730
interact here. There's so many different buttons[br]and dropdowns

0:11:15.730,0:11:19.140
and check boxes. And imagine having to code[br]this,

0:11:19.140,0:11:20.480
and every time you try to add this new

0:11:20.480,0:11:21.740
feature, you have to design a new way to

0:11:21.740,0:11:23.170
put it on there. And you tack it on

0:11:23.170,0:11:25.440
and it doesn't really fit.

0:11:25.440,0:11:29.510
So, it's, it's confusing for these. Whereas[br]this site,

0:11:29.510,0:11:32.270
you know, you see the links across the top.

0:11:32.270,0:11:33.610
They all look the same. If you have to

0:11:33.610,0:11:36.010
add a new one it just goes in there.

0:11:36.010,0:11:40.720
It's using a grid, which is comfortable for[br]users.

0:11:40.720,0:11:43.960
And they use similar elements to create consistency.[br]So

0:11:43.960,0:11:45.440
they have these icons that are all the same

0:11:45.440,0:11:49.260
design, the same matching typography, one,[br]two, three, four.

0:11:49.260,0:11:51.850
We know what we're doing. We're not surprised[br]here.

0:11:51.850,0:11:56.130
This is an old version of the Facebook feed.

0:11:56.130,0:11:57.620
And they figured it out by now. They figured

0:11:57.620,0:11:59.520
it out a lot better. But you can see

0:11:59.520,0:12:01.440
here when you drill into this content, it's[br]really

0:12:01.440,0:12:03.210
hard to see what the pattern is. It's like,

0:12:03.210,0:12:06.280
I think this is a link that's attached, but

0:12:06.280,0:12:08.470
there's so many different things going on[br]that users

0:12:08.470,0:12:11.480
can't learn the pattern, and then as they[br]flow

0:12:11.480,0:12:16.150
down the feed, move smoothly down it.

0:12:16.150,0:12:19.420
And this is an alternate example, where, where[br]it's

0:12:19.420,0:12:21.760
a much better sense, there's a much better[br]sense

0:12:21.760,0:12:24.960
of repetition here. We have this bar along[br]the

0:12:24.960,0:12:27.120
top. You know where you are. You're in this

0:12:27.120,0:12:30.630
context. And then each headline looks exactly[br]the same.

0:12:30.630,0:12:32.670
Each set of metadata looks exactly the same,[br]and

0:12:32.670,0:12:35.980
they use icons and alignment and different[br]colors to

0:12:35.980,0:12:39.570
create a pattern and stick to it.

0:12:39.570,0:12:46.570
So number four is proximity. One second.

0:12:48.230,0:12:50.300
So delicious. OK.

0:12:50.300,0:12:52.880
Proximity is about grouping related elements[br]together by using

0:12:52.880,0:12:56.480
space to create associations between them,[br]or using empty

0:12:56.480,0:13:00.370
space to disconnect unrelated elements. So[br]here we have

0:13:00.370,0:13:04.040
one concrete group of elements. We have a[br]list.

0:13:04.040,0:13:05.840
That's all there is on the page. There's nothing

0:13:05.840,0:13:08.020
else distracting you. You know that we're[br]in the

0:13:08.020,0:13:10.430
section and we're about to start something[br]new.

0:13:10.430,0:13:13.610
So, some, some tools that you can use to

0:13:13.610,0:13:17.610
create proximity are using columns. You can[br]group, you

0:13:17.610,0:13:21.060
need to group similar action items together.[br]And using

0:13:21.060,0:13:24.390
white space to separate space. So, this is[br]an

0:13:24.390,0:13:28.610
example where proximity is not being used.[br]It's overwhelming.

0:13:28.610,0:13:32.170
There's too much information on this ESPN[br]site. There's

0:13:32.170,0:13:34.390
all different kinds of information just packed[br]on top

0:13:34.390,0:13:37.570
of each other. And it's, it's very, it's very

0:13:37.570,0:13:40.700
confusing to parse. There's no white space[br]here. They're

0:13:40.700,0:13:43.990
just trying to shove it all in your face.

0:13:43.990,0:13:46.200
And a place where proximity is really important[br]is

0:13:46.200,0:13:48.260
for forums. So this is a much better and

0:13:48.260,0:13:51.410
clear way to sort of get some information[br]and

0:13:51.410,0:13:54.260
input some information. So it tells you what[br]section

0:13:54.260,0:13:57.100
you're in. There are, you know, some basic[br]form

0:13:57.100,0:14:00.110
patterns. All of these fields are required.[br]You know,

0:14:00.110,0:14:04.150
lining the labels up together. And they use[br]white

0:14:04.150,0:14:07.779
space and they're grouping elements in the[br]small number

0:14:07.779,0:14:10.420
to make it easy to use.

0:14:10.420,0:14:15.970
So, we're all familiar with Craigslist. Great[br]website. We've

0:14:15.970,0:14:19.380
all gotten, you know, maybe your apartment[br]on Craigslist.

0:14:19.380,0:14:20.620
You know you can get there and it gets

0:14:20.620,0:14:23.260
the job done. But when you drill down, it's

0:14:23.260,0:14:25.040
like, what am I looking for? There are so

0:14:25.040,0:14:27.480
many things here and they're all jumbled together.[br]This

0:14:27.480,0:14:31.190
is forty things, and they're not alphabetically[br]ordered even

0:14:31.190,0:14:35.240
top to bottom. They're ordered left to right.[br]Very

0:14:35.240,0:14:39.800
hard to see where, what you're looking for.

0:14:39.800,0:14:42.620
A good rule is to only group elements together

0:14:42.620,0:14:45.270
in groups of three to five. It's the easiest

0:14:45.270,0:14:48.520
way for humans to understand and it's going[br]to

0:14:48.520,0:14:53.310
make users much more happy to use your product.

0:14:53.310,0:14:57.620
Craigslist, you know, the listings all have[br]a ton

0:14:57.620,0:15:00.510
of information right here. They're all jumbled[br]in together.

0:15:00.510,0:15:03.480
It's really important stuff, you know. It's[br]something that's

0:15:03.480,0:15:05.770
going to, you just need to skip this whole

0:15:05.770,0:15:09.089
listing because it doesn't apply to you. But[br]this

0:15:09.089,0:15:11.290
is all different kinds of information. There's[br]information about

0:15:11.290,0:15:13.740
the apartment. There's information about the[br]listing on the

0:15:13.740,0:15:16.010
site. The price, which is the most important[br]thing.

0:15:16.010,0:15:17.220
But they all look the same and they're all

0:15:17.220,0:15:19.390
grouped together.

0:15:19.390,0:15:20.850
So a better example of this is Air B

0:15:20.850,0:15:23.779
and B's site ??. They separate these things[br]out

0:15:23.779,0:15:26.690
in them, in a better way. At the top,

0:15:26.690,0:15:29.420
they have the information about the booking,[br]the comments.

0:15:29.420,0:15:31.430
You can book it now. And then below they

0:15:31.430,0:15:34.130
have the information about the apartment.[br]So it makes

0:15:34.130,0:15:36.230
it much more pleasant to scan down. And they

0:15:36.230,0:15:40.450
also have the big images. That helps. And[br]it

0:15:40.450,0:15:44.170
makes better use of proximity here.

0:15:44.170,0:15:46.160
And I would say, a word of warning, is

0:15:46.160,0:15:49.680
to really make sure that your forms are fun

0:15:49.680,0:15:53.500
and very straightforward to use. And proximity[br]is the

0:15:53.500,0:15:56.750
best way to make sure that's happening. You[br]know,

0:15:56.750,0:15:59.680
put the credit card information in a different[br]place

0:15:59.680,0:16:02.190
than the, than the shipping address. You know,[br]you

0:16:02.190,0:16:05.649
don't want. You don't want to overload users[br]or

0:16:05.649,0:16:08.730
have them be unclear, like, how much further[br]they

0:16:08.730,0:16:12.260
have to go, how much they've already completed.[br]Proximity

0:16:12.260,0:16:16.160
is a great way to use that.

0:16:16.160,0:16:19.490
Number five is flow. So, flow, you're flowing[br]down

0:16:19.490,0:16:21.600
this list. You're not paying attention to[br]the things

0:16:21.600,0:16:24.740
you've already learned, and then you hit flow.[br]And

0:16:24.740,0:16:27.520
that's where you stop and you're excited for[br]the

0:16:27.520,0:16:30.830
new section. And that's an example of flow.

0:16:30.830,0:16:33.529
So site's are not pages. They are experiences[br]with

0:16:33.529,0:16:36.220
many states and possibilities. So you think[br]of where

0:16:36.220,0:16:37.620
you want the user to end up, and you

0:16:37.620,0:16:39.830
let that influence design.

0:16:39.830,0:16:42.560
So, I would say there are two types of

0:16:42.560,0:16:44.870
flow, and we're just going to talk about one

0:16:44.870,0:16:47.460
today. There's flow within one page. So what[br]the

0:16:47.460,0:16:49.399
user does on just one page. And then there's

0:16:49.399,0:16:53.020
flow between many pages, like in an Amazon[br]checkout

0:16:53.020,0:16:55.310
process. You go through many different pages[br]but they

0:16:55.310,0:16:57.560
make that as smooth as possible so they don't

0:16:57.560,0:16:59.170
lose you along the way.

0:16:59.170,0:17:02.700
So, we'll talk about flow within one page[br]today.

0:17:02.700,0:17:07.380
It's a little simpler. So, one sample idea[br]for

0:17:07.380,0:17:09.349
flow, is that you're looking at a product,[br]you're

0:17:09.349,0:17:10.980
looking at the details, and then you add to

0:17:10.980,0:17:12.679
cart. So this is the first step of the

0:17:12.679,0:17:15.720
checkout process. And it's most important[br]for you, as

0:17:15.720,0:17:17.679
the seller, to make sure that they click that

0:17:17.679,0:17:20.349
buy button. So you don't want to put anything

0:17:20.349,0:17:23.579
that's going to distract them in between the[br]beautiful

0:17:23.579,0:17:26.300
image and the headline and the buy button.

0:17:26.300,0:17:29.250
And it's customer service. It's customer service[br]that makes

0:17:29.250,0:17:32.530
it easy and fun for someone and that people

0:17:32.530,0:17:34.830
have trust that they know how to get there

0:17:34.830,0:17:39.030
and there's good will when something goes[br]wrong.

0:17:39.030,0:17:41.980
Another example of flow is, you're reading[br]a story

0:17:41.980,0:17:43.840
on a site and you want someone to read

0:17:43.840,0:17:47.860
another story. I would say that a bad example

0:17:47.860,0:17:51.390
is Hacker News. We all love it and we're

0:17:51.390,0:17:53.190
all there all the time, but what happens when

0:17:53.190,0:17:55.350
you click a link. You leave the page. It

0:17:55.350,0:17:58.550
overwrites the page you're writing on. You're,[br]you're sitting

0:17:58.550,0:17:59.610
on.

0:17:59.610,0:18:01.890
You read this. You click away. Every single[br]thing

0:18:01.890,0:18:05.210
takes you away from the site. And I, instead

0:18:05.210,0:18:08.240
of incentivizing you to stay on the site or,

0:18:08.240,0:18:10.910
or to leave and come back, it just incentivizes

0:18:10.910,0:18:12.660
you to leave. I mean, you know to come

0:18:12.660,0:18:15.020
back because of the freshness, but I think[br]there

0:18:15.020,0:18:16.880
are better flow options there.

0:18:16.880,0:18:18.190
Something that we're starting to see a lot[br]more

0:18:18.190,0:18:20.429
often is that you get to end, to the

0:18:20.429,0:18:22.510
end of a story and then you go immediately

0:18:22.510,0:18:24.690
to a new story. And it makes that flow

0:18:24.690,0:18:26.800
seamless so you don't even have to think about

0:18:26.800,0:18:28.700
it.

0:18:28.700,0:18:32.100
Another, you know, not great flow, is like[br]I'm

0:18:32.100,0:18:34.140
looking at this infograph, and I'm like, where[br]do

0:18:34.140,0:18:36.070
I go? Do I go from one to six?

0:18:36.070,0:18:39.880
Am I supposed to read down? It's pretty aesthetically

0:18:39.880,0:18:43.230
pleasing, but it's very contradictory in the[br]ways that

0:18:43.230,0:18:45.660
you're supposed to scan the information.

0:18:45.660,0:18:48.030
A better way for flow is to give people

0:18:48.030,0:18:51.380
one path. One path that they have to follow,

0:18:51.380,0:18:53.760
and make sure that's very clear. So we're,[br]we're

0:18:53.760,0:18:57.250
familiar with this idea of timelines. With[br]this, you

0:18:57.250,0:18:59.420
know, you're zigzagging down the page, which[br]is not

0:18:59.420,0:19:01.480
sort of the normal flow of just going straight

0:19:01.480,0:19:04.370
down or straight to the side. But they make

0:19:04.370,0:19:06.490
it very clear with the icons, with the, with

0:19:06.490,0:19:10.980
the marks along this timeline. And so you[br]feel

0:19:10.980,0:19:14.660
very comfortable and you know where you're[br]going next.

0:19:14.660,0:19:16.100
Here's a forum that's missing a ton of the

0:19:16.100,0:19:18.300
helpers that we've come to know and love in

0:19:18.300,0:19:21.920
forms. And you, there's no special stylings[br]here. But

0:19:21.920,0:19:24.040
the worst part of this flow, that it gives

0:19:24.040,0:19:26.280
you the information and instructions for how[br]to fill

0:19:26.280,0:19:28.460
out the form two-thirds of the way down the

0:19:28.460,0:19:29.320
form.

0:19:29.320,0:19:32.480
So you have to go back and, and revisit

0:19:32.480,0:19:33.960
all of the stuff that you've already done[br]and

0:19:33.960,0:19:36.900
be like, did I do this right? The best

0:19:36.900,0:19:39.110
way to do these sorts of things is to

0:19:39.110,0:19:42.470
give feedback, too. You, you can give feedback[br]for

0:19:42.470,0:19:44.490
when someone's filling out a password. You[br]say this

0:19:44.490,0:19:47.420
is a terrible password. Keep going, keep going,[br]you're

0:19:47.420,0:19:50.429
getting there. And then you've reached the[br]end and

0:19:50.429,0:19:53.610
you're ready to go.

0:19:53.610,0:19:58.910
So number six is typography. A whole generation[br]of

0:19:58.910,0:20:01.309
designers on the web have made it very easy

0:20:01.309,0:20:04.360
to access good typography and good web fonts.[br]And

0:20:04.360,0:20:06.450
there are really small changes that you can[br]make

0:20:06.450,0:20:09.400
to default settings that make a big difference[br]and

0:20:09.400,0:20:12.650
a big impact on readers and readability.

0:20:12.650,0:20:14.809
This is a simple presentation. I'm using one[br]type

0:20:14.809,0:20:18.550
face the whole time. I would recommend one[br]or

0:20:18.550,0:20:22.260
two type faces are a really great start for,

0:20:22.260,0:20:25.130
for defining your, your product and your sort[br]of

0:20:25.130,0:20:27.460
personality that you want to give for, give[br]to

0:20:27.460,0:20:30.400
people. Show to people.

0:20:30.400,0:20:32.280
So this is, this is a condensed typeface.[br]It's

0:20:32.280,0:20:34.830
very load. Trying to like throw all these[br]things

0:20:34.830,0:20:38.770
in your face really quickly. It was originally[br]designed

0:20:38.770,0:20:41.980
for highway signs and industrial machines.[br]So you can

0:20:41.980,0:20:44.710
sort of think about these and what, what impact

0:20:44.710,0:20:47.880
that might have. So there's a, you know, a

0:20:47.880,0:20:50.700
sexier headline on the left and a sillier[br]headline

0:20:50.700,0:20:52.549
on the right. It's, you know, you can be

0:20:52.549,0:20:55.270
very playful with typography, too.

0:20:55.270,0:20:59.250
A couple of services you are perhaps familiar[br]with.

0:20:59.250,0:21:03.020
Google web fonts. Typekit. Myfonts. Some things[br]are free.

0:21:03.020,0:21:05.250
Some are paid. But it's not that much money

0:21:05.250,0:21:06.450
and it makes a big difference.

0:21:06.450,0:21:11.880
So, another, love to, no. Love to love. Wikipedia

0:21:11.880,0:21:15.260
actually. Tons of information. Spent hours[br]and days of

0:21:15.260,0:21:17.330
my life reading it. But it's so hard to

0:21:17.330,0:21:20.870
read sometimes. The lines are so long across.[br]You

0:21:20.870,0:21:22.400
get to the end of the line and you

0:21:22.400,0:21:23.900
lose your place. How do I get back to

0:21:23.900,0:21:26.390
the beginning? They have the footnotes, which[br]can be

0:21:26.390,0:21:28.480
distracting sometimes.

0:21:28.480,0:21:34.059
So, a better way to look at typography is,

0:21:34.059,0:21:37.470
is set some rules. You know, the base line

0:21:37.470,0:21:44.470
length is thirty-five. Sorry. Thirty-five[br]to sixty-five characters long.

0:21:45.000,0:21:48.100
Just count them. And that's, that's the best[br]human

0:21:48.100,0:21:51.559
readable length for people. And the minimum[br]font size

0:21:51.559,0:21:53.630
to line height ratio is about one to one

0:21:53.630,0:21:57.150
and a half. This is, these are just, write

0:21:57.150,0:21:59.420
it down and don't worry about doing anything[br]else

0:21:59.420,0:22:01.780
because this is the best way. And if you're

0:22:01.780,0:22:03.140
going to have a lot of reading on your

0:22:03.140,0:22:06.559
site, look at other sites that do reading[br]experiences

0:22:06.559,0:22:07.309
in a great way.

0:22:07.309,0:22:09.780
This is readability. They have a lot of different

0:22:09.780,0:22:13.830
styles going on so that they can, they can

0:22:13.830,0:22:19.910
handle different kinds, types of content.[br]And you know,

0:22:19.910,0:22:21.830
just, just a little love goes a long way

0:22:21.830,0:22:25.890
with typography. An example. I've just, like,[br]I love

0:22:25.890,0:22:27.140
these like, love to hate things.

0:22:27.140,0:22:30.929
Drudge Report. Drudge Report. Impossible to[br]read. Everything looks

0:22:30.929,0:22:35.530
exactly the same. There's the headlines. There's[br]sections or

0:22:35.530,0:22:39.360
categories. There's social links. You can't[br]even tell what

0:22:39.360,0:22:41.600
you're looking at or why any of them are

0:22:41.600,0:22:44.210
different. Why something should call, should[br]be called out

0:22:44.210,0:22:45.340
to you.

0:22:45.340,0:22:47.470
I'll bring up the New York Times, again, as

0:22:47.470,0:22:50.610
a great example. There is tons of information[br]here.

0:22:50.610,0:22:52.140
As much as there was on the Drudge Report

0:22:52.140,0:22:54.950
page. But they've broken it up into different[br]sections

0:22:54.950,0:22:57.090
and they do a lot of different typographic[br]treatments

0:22:57.090,0:22:59.830
that tell you how, how important or how not

0:22:59.830,0:23:01.150
important something is.

0:23:01.150,0:23:04.559
They have section headlines to differentiate[br]this section. They

0:23:04.559,0:23:08.679
call out certain articles. They have whole[br]category overviews

0:23:08.679,0:23:10.750
with a different style, and then they have[br]listings

0:23:10.750,0:23:14.440
which is user-generated content. They're all[br]something different, and

0:23:14.440,0:23:17.320
they do use a custom type face. They're a

0:23:17.320,0:23:19.270
site for reading and they, they need to make

0:23:19.270,0:23:23.790
sure that they give that love.

0:23:23.790,0:23:27.559
So, this is another site you can use. You

0:23:27.559,0:23:29.860
can use typography in interesting ways. You[br]can layer

0:23:29.860,0:23:33.000
things, you know, in a way to create a

0:23:33.000,0:23:34.970
personality. This is, you know, it seems like[br]a

0:23:34.970,0:23:38.740
very elegant site. And just think of some[br]adjectives

0:23:38.740,0:23:41.210
that you want to convey to people and, and

0:23:41.210,0:23:43.170
go from there.

0:23:43.170,0:23:49.059
So the last element, principle for today,[br]is color.

0:23:49.059,0:23:52.220
I would say color with an asterisk, because[br]I,

0:23:52.220,0:23:54.010
I don't think you should rely on color too

0:23:54.010,0:23:56.070
heavily, and I think it's one of the lesser

0:23:56.070,0:23:59.929
important things. There are accessibility[br]reasons. Like, if you

0:23:59.929,0:24:03.169
have colorblind users or you, you know, your,[br]your

0:24:03.169,0:24:05.200
user base is on a ton of different monitors.

0:24:05.200,0:24:07.870
The colors could look super wacky.

0:24:07.870,0:24:10.190
And semantic reasons. Colors mean different[br]things to different

0:24:10.190,0:24:12.679
people. We have a lot of sort of like,

0:24:12.679,0:24:15.370
western culture. Green means go, red means[br]stop, white

0:24:15.370,0:24:17.610
means this, black. You know. You want to be

0:24:17.610,0:24:22.059
sensitive about your target audience, and[br]play up, play

0:24:22.059,0:24:23.330
into that.

0:24:23.330,0:24:27.090
So, three ways that you can adjust color to

0:24:27.090,0:24:30.120
stand out are hue. The actual color it is.

0:24:30.120,0:24:32.360
Saturation - how bold it is. And value -

0:24:32.360,0:24:34.530
how light or dark it is. And I would

0:24:34.530,0:24:38.660
recommend using all three together to create[br]different color

0:24:38.660,0:24:40.110
combinations.

0:24:40.110,0:24:44.620
So, Facebook. We're all familiar with the[br]Facebook blue.

0:24:44.620,0:24:48.240
It's so boring. It's so sterile. It's not[br]that

0:24:48.240,0:24:51.030
exciting, and, and we, we're not there for[br]the

0:24:51.030,0:24:54.230
color. We're not, you know, Facebook has to[br]target

0:24:54.230,0:24:57.270
every person in the world. Facebook is for[br]everyone.

0:24:57.270,0:24:59.040
And so they can't, you know, they can't go

0:24:59.040,0:25:05.970
bright orange. And, or purpose, or whatever[br]color. Blue

0:25:05.970,0:25:07.590
is a very generic color and that's what they

0:25:07.590,0:25:10.100
have to do because that's, that's targeting[br]their audience.

0:25:10.100,0:25:12.669
So I'd say it's bad color, but it's, you

0:25:12.669,0:25:15.080
know, you have to be thoughtful of that. So,

0:25:15.080,0:25:17.140
a site to counter it is V-Files which is

0:25:17.140,0:25:22.770
a shopping offshoot of V-Magazine. So it's[br]very fashion-related.

0:25:22.770,0:25:25.940
Very young audience. Very urban. So they have[br]yellow

0:25:25.940,0:25:30.010
as their, as their color that they use everywhere.

0:25:30.010,0:25:32.700
And they use that to entice themselves to[br]their

0:25:32.700,0:25:33.360
target audience.

0:25:33.360,0:25:36.250
If they did the Facebook blue, people would[br]not

0:25:36.250,0:25:39.400
think it was as cool or as interesting. So

0:25:39.400,0:25:42.410
you can use a color to, to be bold,

0:25:42.410,0:25:45.419
and pick one or two and go with them.

0:25:45.419,0:25:50.780
Don't pick ten. You're gonna look like BuzzFeed[br]probably.

0:25:50.780,0:25:57.780
So, other color concepts are to use cultural[br]colors

0:25:58.750,0:26:01.150
that people are familiar with. Like I said,[br]red

0:26:01.150,0:26:03.780
and green. For some reason, Reddit uses orange[br]and

0:26:03.780,0:26:06.150
purple for their up and down votes. It's kind

0:26:06.150,0:26:09.360
of cute and it's, it's Reddit, where, I'm[br]not

0:26:09.360,0:26:11.340
surprised. But in a lot of cases, that could

0:26:11.340,0:26:13.120
be very confusing for users.

0:26:13.120,0:26:15.750
And they also use the sort of basic standard

0:26:15.750,0:26:17.950
blue link. And I think we can do better

0:26:17.950,0:26:23.980
than that. So here's an Etsy listing. Etsy,[br]I

0:26:23.980,0:26:26.720
would say, is like a pleasant, easy to use

0:26:26.720,0:26:32.080
website. It's not super edgy. But that's,[br]that's to

0:26:32.080,0:26:33.820
their advantage. That's what they're trying[br]to do.

0:26:33.820,0:26:35.520
So they have these blue links. You know, that

0:26:35.520,0:26:38.330
is the sort of standard. You sort of skim

0:26:38.330,0:26:39.950
over that because you're used to seeing that.[br]And

0:26:39.950,0:26:42.450
then they have the green around the actual[br]product

0:26:42.450,0:26:46.220
information, and the green, go buy this button.[br]Green

0:26:46.220,0:26:48.910
means give you my money.

0:26:48.910,0:26:51.150
So, it's enticing. You know, a red button[br]would

0:26:51.150,0:26:53.460
be like, oh, maybe this is not good to

0:26:53.460,0:26:58.000
do. I work for Rap Genius. Rap Genius has

0:26:58.000,0:27:01.870
a black background and our, our bold color[br]is

0:27:01.870,0:27:07.330
this sort of marygold yellow orange gold color.[br]It's

0:27:07.330,0:27:09.740
very bold. But we think that it makes a

0:27:09.740,0:27:12.940
big impact to have a black background and[br]stick

0:27:12.940,0:27:14.890
with a black background. And we have this[br]argument

0:27:14.890,0:27:16.940
all the time, like, is it too much? Are

0:27:16.940,0:27:20.640
we, are we alienating people? But we're, we're[br]gonna

0:27:20.640,0:27:22.380
continue on with it and keep trying to do

0:27:22.380,0:27:25.049
it. And I think that it, it sets us

0:27:25.049,0:27:27.790
apart in a really incredible way.

0:27:27.790,0:27:31.540
I might be biased.

0:27:31.540,0:27:38.540
So. So now what? Very fast, maybe too fast.

0:27:38.740,0:27:40.850
It's hard. It's hard. There's a lot to design

0:27:40.850,0:27:41.710
and you kind of have to think of all

0:27:41.710,0:27:43.940
of these things at the same time. But I

0:27:43.940,0:27:46.380
really do want you to be in these design

0:27:46.380,0:27:49.730
conversations and feel like you know what[br]you're talking

0:27:49.730,0:27:52.179
about, because you do. You're on the internet[br]every

0:27:52.179,0:27:54.840
day. You see things. You like things. You[br]don't

0:27:54.840,0:27:57.419
like things. And you might not know why, but

0:27:57.419,0:27:59.000
I hope that this gives you a little bit

0:27:59.000,0:28:01.669
more vocabulary to talk about it and engage[br]in

0:28:01.669,0:28:03.210
these conversations.

0:28:03.210,0:28:07.000
So, every, every design that you work on is

0:28:07.000,0:28:08.880
going to have elements of all seven, and you

0:28:08.880,0:28:11.350
can sort of twist the knobs on, on things

0:28:11.350,0:28:15.160
to turn them up, turn them down. And, and

0:28:15.160,0:28:17.720
say, like, you know, we, we don't need that

0:28:17.720,0:28:21.150
much contrast because we have a really great[br]flow

0:28:21.150,0:28:22.890
and we want it to be really easy and

0:28:22.890,0:28:24.900
we just want someone to go down the page

0:28:24.900,0:28:27.210
and spend the rest of their lives on our

0:28:27.210,0:28:29.640
website.

0:28:29.640,0:28:31.760
You can use intuition. You know, you might[br]code

0:28:31.760,0:28:33.980
something and put it in the browser, and it's

0:28:33.980,0:28:37.360
like, oh. Maybe this, this, you know. Technically[br]speaking,

0:28:37.360,0:28:39.360
this has the right amount of padding all around

0:28:39.360,0:28:41.720
it. But something about it looks off. Like,[br]there's

0:28:41.720,0:28:43.220
a lot of tweaking and a lot of love

0:28:43.220,0:28:47.919
that is worth giving that shows to people[br]that's

0:28:47.919,0:28:50.480
it's very well put together.

0:28:50.480,0:28:53.160
And that's it. Thank you.