[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:17.64,0:00:21.97,Default,,0000,0000,0000,,JENN SCHEER: All right. Good? Good. Welcome.
Dialogue: 0,0:00:21.97,0:00:24.94,Default,,0000,0000,0000,,Welcome. I was just at the Sandi Metz talk.
Dialogue: 0,0:00:24.94,0:00:26.29,Default,,0000,0000,0000,,Really awesome. Really excited to
Dialogue: 0,0:00:26.29,0:00:28.18,Default,,0000,0000,0000,,follow up with no code.
Dialogue: 0,0:00:28.18,0:00:32.35,Default,,0000,0000,0000,,There will be no code in this. I'm sorry.
Dialogue: 0,0:00:32.35,0:00:34.71,Default,,0000,0000,0000,,I'm Jenn, and I'm here to tell you about
Dialogue: 0,0:00:34.71,0:00:39.23,Default,,0000,0000,0000,,some elements of design. I always hear from\Ndevelopers
Dialogue: 0,0:00:39.23,0:00:40.78,Default,,0000,0000,0000,,that they don't know how to design. But I
Dialogue: 0,0:00:40.78,0:00:45.08,Default,,0000,0000,0000,,don't think it's true. You're incredibly smart\Npeople and
Dialogue: 0,0:00:45.08,0:00:47.39,Default,,0000,0000,0000,,you can figure it out. And I'm here to
Dialogue: 0,0:00:47.39,0:00:47.76,Default,,0000,0000,0000,,help.
Dialogue: 0,0:00:47.76,0:00:50.10,Default,,0000,0000,0000,,Currently I'm a designer and frontend developer\Nat Rap
Dialogue: 0,0:00:50.10,0:00:56.34,Default,,0000,0000,0000,,Genius. Perfect website. Designed it all myself.\NThat's not
Dialogue: 0,0:00:56.34,0:00:58.19,Default,,0000,0000,0000,,true at all.
Dialogue: 0,0:00:58.19,0:01:01.14,Default,,0000,0000,0000,,So, I think that we know, by now, you
Dialogue: 0,0:01:01.14,0:01:03.32,Default,,0000,0000,0000,,know, we're living in a world of design. A
Dialogue: 0,0:01:03.32,0:01:06.59,Default,,0000,0000,0000,,culture of design. Apple is number one, and\Neveryone
Dialogue: 0,0:01:06.59,0:01:09.23,Default,,0000,0000,0000,,loves it. So, I think we have an idea
Dialogue: 0,0:01:09.23,0:01:11.87,Default,,0000,0000,0000,,of why design is important, but we have to
Dialogue: 0,0:01:11.87,0:01:14.39,Default,,0000,0000,0000,,remember that we're building these things,\Nall of the
Dialogue: 0,0:01:14.39,0:01:16.48,Default,,0000,0000,0000,,things that we're programming every day. We're\Nbuilding them
Dialogue: 0,0:01:16.48,0:01:18.58,Default,,0000,0000,0000,,for people. And people have to be able to
Dialogue: 0,0:01:18.58,0:01:23.45,Default,,0000,0000,0000,,use them as easily and as pleasantly as possible.
Dialogue: 0,0:01:23.45,0:01:27.69,Default,,0000,0000,0000,,So, designing will set you apart from other\Npeople.
Dialogue: 0,0:01:27.69,0:01:29.59,Default,,0000,0000,0000,,It will buy you good will and trust from
Dialogue: 0,0:01:29.59,0:01:32.27,Default,,0000,0000,0000,,users when they know that your site is well-designed.
Dialogue: 0,0:01:32.27,0:01:34.61,Default,,0000,0000,0000,,It's easy to use and it's pleasant and it's
Dialogue: 0,0:01:34.61,0:01:38.46,Default,,0000,0000,0000,,an enjoyable experience. Design can serve\Nas marketing for
Dialogue: 0,0:01:38.46,0:01:41.22,Default,,0000,0000,0000,,you. You can use it to sell yourself to
Dialogue: 0,0:01:41.22,0:01:45.20,Default,,0000,0000,0000,,people and have them trust you.
Dialogue: 0,0:01:45.20,0:01:46.84,Default,,0000,0000,0000,,And I would say that design is not just
Dialogue: 0,0:01:46.84,0:01:50.57,Default,,0000,0000,0000,,aesthetics. Design is also function. Form\Nfollows function, and
Dialogue: 0,0:01:50.57,0:01:53.50,Default,,0000,0000,0000,,we know this in programming. We program around\Nit,
Dialogue: 0,0:01:53.50,0:01:57.65,Default,,0000,0000,0000,,and you have to use this to, to sell
Dialogue: 0,0:01:57.65,0:02:00.27,Default,,0000,0000,0000,,your purpose. You can use design.
Dialogue: 0,0:02:00.27,0:02:03.83,Default,,0000,0000,0000,,So, I also, as a developer, I don't want
Dialogue: 0,0:02:03.83,0:02:04.92,Default,,0000,0000,0000,,you to feel like you have to throw things
Dialogue: 0,0:02:04.92,0:02:07.46,Default,,0000,0000,0000,,over the wall to designers and say, I don't
Dialogue: 0,0:02:07.46,0:02:09.03,Default,,0000,0000,0000,,have any say in this. I don't know what
Dialogue: 0,0:02:09.03,0:02:11.86,Default,,0000,0000,0000,,I'm talking about. Because you do. And I want
Dialogue: 0,0:02:11.86,0:02:14.21,Default,,0000,0000,0000,,to empower you to do so.
Dialogue: 0,0:02:14.21,0:02:18.57,Default,,0000,0000,0000,,So, today I have seven principles here. Hierarchy,\Ncontrast,
Dialogue: 0,0:02:18.57,0:02:23.23,Default,,0000,0000,0000,,repetition, proximity, flow, typography, and\Ncolor. And with these
Dialogue: 0,0:02:23.23,0:02:25.59,Default,,0000,0000,0000,,seven principles, I think that you can have\Na
Dialogue: 0,0:02:25.59,0:02:28.34,Default,,0000,0000,0000,,great base for, for working your way into\Ndesign
Dialogue: 0,0:02:28.34,0:02:29.55,Default,,0000,0000,0000,,conversations.
Dialogue: 0,0:02:29.55,0:02:32.62,Default,,0000,0000,0000,,So, a loose flow here is I'm gonna define
Dialogue: 0,0:02:32.62,0:02:35.67,Default,,0000,0000,0000,,each principle. Look at some bad examples\Ncountered with
Dialogue: 0,0:02:35.67,0:02:38.23,Default,,0000,0000,0000,,some good examples. And then use these examples\Nto
Dialogue: 0,0:02:38.23,0:02:40.84,Default,,0000,0000,0000,,give you some rules to use and fall back
Dialogue: 0,0:02:40.84,0:02:41.79,Default,,0000,0000,0000,,on.
Dialogue: 0,0:02:41.79,0:02:46.92,Default,,0000,0000,0000,,All right. So number one is hierarchy. Hierarchy\Nis
Dialogue: 0,0:02:46.92,0:02:49.89,Default,,0000,0000,0000,,all about priority in your layouts. So you\Ncan
Dialogue: 0,0:02:49.89,0:02:51.92,Default,,0000,0000,0000,,see, from this slide itself, I'll use all\Nof
Dialogue: 0,0:02:51.92,0:02:56.02,Default,,0000,0000,0000,,these slides to, to show you how hierarchy\Nworks.
Dialogue: 0,0:02:56.02,0:02:59.12,Default,,0000,0000,0000,,The word hierarchy is number one. It's bigger.\NIt's
Dialogue: 0,0:02:59.12,0:03:01.57,Default,,0000,0000,0000,,greener. It's, it's the first thing that you're\Ngonna
Dialogue: 0,0:03:01.57,0:03:03.18,Default,,0000,0000,0000,,look at on this page. And it is the
Dialogue: 0,0:03:03.18,0:03:06.45,Default,,0000,0000,0000,,most important. It's what we're about to talk\Nabout.
Dialogue: 0,0:03:06.45,0:03:10.88,Default,,0000,0000,0000,,So, you can see, there's like a flow of
Dialogue: 0,0:03:10.88,0:03:12.73,Default,,0000,0000,0000,,hierarchy. You look at this big thing at the
Dialogue: 0,0:03:12.73,0:03:14.56,Default,,0000,0000,0000,,top. You look at the next biggest thing. You
Dialogue: 0,0:03:14.56,0:03:17.06,Default,,0000,0000,0000,,look at the smaller things. You, before you\Neven
Dialogue: 0,0:03:17.06,0:03:18.97,Default,,0000,0000,0000,,look at the browser, at the phone or whatever
Dialogue: 0,0:03:18.97,0:03:21.45,Default,,0000,0000,0000,,you're designing, you want to ask yourself,\Nwhat am
Dialogue: 0,0:03:21.45,0:03:23.56,Default,,0000,0000,0000,,I doing here? Why is someone coming to my
Dialogue: 0,0:03:23.56,0:03:25.71,Default,,0000,0000,0000,,site? You have to ask these hard questions\Nso
Dialogue: 0,0:03:25.71,0:03:29.19,Default,,0000,0000,0000,,you can have great answers and be prepared.
Dialogue: 0,0:03:29.19,0:03:33.86,Default,,0000,0000,0000,,So, bad example. This site. There's no clear\Nhierarchy
Dialogue: 0,0:03:33.86,0:03:35.38,Default,,0000,0000,0000,,here. The first thing that you see is the
Dialogue: 0,0:03:35.38,0:03:37.78,Default,,0000,0000,0000,,logo. A good technique that you can use is
Dialogue: 0,0:03:37.78,0:03:40.59,Default,,0000,0000,0000,,to blur out your site and see if anything
Dialogue: 0,0:03:40.59,0:03:42.50,Default,,0000,0000,0000,,pops out. And the only thing we see here
Dialogue: 0,0:03:42.50,0:03:45.96,Default,,0000,0000,0000,,is the logo. Because everything else, this\Nis the
Dialogue: 0,0:03:45.96,0:03:48.87,Default,,0000,0000,0000,,reason that someone is coming to your site.\NYou,
Dialogue: 0,0:03:48.87,0:03:51.40,Default,,0000,0000,0000,,you know, the headlines, the tags, the sidebar.\NAll
Dialogue: 0,0:03:51.40,0:03:55.34,Default,,0000,0000,0000,,of those have the same priority. Totally boring.
Dialogue: 0,0:03:55.34,0:04:00.28,Default,,0000,0000,0000,,So, better example of hierarchy is this site.\NThe
Dialogue: 0,0:04:00.28,0:04:02.93,Default,,0000,0000,0000,,first thing that we see here when we're blurred
Dialogue: 0,0:04:02.93,0:04:05.81,Default,,0000,0000,0000,,out is this knowledge headline. The content\Nthe people
Dialogue: 0,0:04:05.81,0:04:07.83,Default,,0000,0000,0000,,are coming to the site for. The number one
Dialogue: 0,0:04:07.83,0:04:10.37,Default,,0000,0000,0000,,most important article. We do see the logo\Nhere,
Dialogue: 0,0:04:10.37,0:04:12.31,Default,,0000,0000,0000,,and it's important to let people know that\Nthis
Dialogue: 0,0:04:12.31,0:04:14.66,Default,,0000,0000,0000,,is where they are. So that they feel comfortable
Dialogue: 0,0:04:14.66,0:04:16.77,Default,,0000,0000,0000,,here. And then the third thing that we see.
Dialogue: 0,0:04:16.77,0:04:19.35,Default,,0000,0000,0000,,So we've got the headline, the logo, and then
Dialogue: 0,0:04:19.35,0:04:20.96,Default,,0000,0000,0000,,the other actions that you can do on page.
Dialogue: 0,0:04:20.96,0:04:22.82,Default,,0000,0000,0000,,Say, I don't want to do that one thing.
Dialogue: 0,0:04:22.82,0:04:25.15,Default,,0000,0000,0000,,Give people another option. It's the second\Nthing that
Dialogue: 0,0:04:25.15,0:04:27.70,Default,,0000,0000,0000,,they see. Third thing that they see. They\Nsee
Dialogue: 0,0:04:27.70,0:04:30.32,Default,,0000,0000,0000,,lots of things all at the same time.
Dialogue: 0,0:04:30.32,0:04:32.28,Default,,0000,0000,0000,,BuzzFeed. They definitely see lots of things\Nall that
Dialogue: 0,0:04:32.28,0:04:35.82,Default,,0000,0000,0000,,the same time. It's so much going on. There's
Dialogue: 0,0:04:35.82,0:04:37.22,Default,,0000,0000,0000,,nowhere to look. I mean, you have these big
Dialogue: 0,0:04:37.22,0:04:40.73,Default,,0000,0000,0000,,pictures, but they're everywhere. Everything\Nis asking for your
Dialogue: 0,0:04:40.73,0:04:43.23,Default,,0000,0000,0000,,attention, and if you tell the user that everything
Dialogue: 0,0:04:43.23,0:04:45.32,Default,,0000,0000,0000,,is the number one priority, then what you're\Nreally
Dialogue: 0,0:04:45.32,0:04:48.26,Default,,0000,0000,0000,,saying is that nothing is important. You're\Nsaying that
Dialogue: 0,0:04:48.26,0:04:49.33,Default,,0000,0000,0000,,this is all throwaway.
Dialogue: 0,0:04:49.33,0:04:51.36,Default,,0000,0000,0000,,And, of course, BuzzFeed, you know, they have\Nto
Dialogue: 0,0:04:51.36,0:04:53.50,Default,,0000,0000,0000,,go down this rabbit hole. That's. They're\Nlooking for
Dialogue: 0,0:04:53.50,0:04:56.59,Default,,0000,0000,0000,,the page views. But I don't think that's the
Dialogue: 0,0:04:56.59,0:04:58.39,Default,,0000,0000,0000,,way to get users to trust your brand. And
Dialogue: 0,0:04:58.39,0:05:01.86,Default,,0000,0000,0000,,I don't think people trust BuzzFeed. They\Nknow what
Dialogue: 0,0:05:01.86,0:05:03.52,Default,,0000,0000,0000,,BuzzFeed's doing.
Dialogue: 0,0:05:03.52,0:05:06.16,Default,,0000,0000,0000,,So I would go. I would go look at
Dialogue: 0,0:05:06.16,0:05:11.47,Default,,0000,0000,0000,,the stalwart. Like, New York Times, for better\Nhierarchy.
Dialogue: 0,0:05:11.47,0:05:13.77,Default,,0000,0000,0000,,You know, you blur this out. There are fewer
Dialogue: 0,0:05:13.77,0:05:16.13,Default,,0000,0000,0000,,things catching your eye. We're humans. We're\Ngonna look
Dialogue: 0,0:05:16.13,0:05:18.51,Default,,0000,0000,0000,,at photographs. These look like, oh, these\Nlook like
Dialogue: 0,0:05:18.51,0:05:23.40,Default,,0000,0000,0000,,things I know. We, we sort of are tuned
Dialogue: 0,0:05:23.40,0:05:26.58,Default,,0000,0000,0000,,to, to blur out ads. We don't look at
Dialogue: 0,0:05:26.58,0:05:29.16,Default,,0000,0000,0000,,ads anymore. So you've got these two pieces\Nof
Dialogue: 0,0:05:29.16,0:05:32.29,Default,,0000,0000,0000,,content. And then we're going to look at the
Dialogue: 0,0:05:32.29,0:05:35.09,Default,,0000,0000,0000,,text that is associated with the images. And\Nthen
Dialogue: 0,0:05:35.09,0:05:36.79,Default,,0000,0000,0000,,we're going to look at the big headlines,\Nwhich
Dialogue: 0,0:05:36.79,0:05:39.64,Default,,0000,0000,0000,,is, you know, the biggest stories of today.\NAnd
Dialogue: 0,0:05:39.64,0:05:41.91,Default,,0000,0000,0000,,then sort of everything else. But there's\Na path
Dialogue: 0,0:05:41.91,0:05:45.37,Default,,0000,0000,0000,,here and there is a flow that they use
Dialogue: 0,0:05:45.37,0:05:48.88,Default,,0000,0000,0000,,to, to guide you around the page.
Dialogue: 0,0:05:48.88,0:05:51.38,Default,,0000,0000,0000,,And by telling people that, you know, like,\Nour
Dialogue: 0,0:05:51.38,0:05:54.53,Default,,0000,0000,0000,,priority here is news. And we want to be
Dialogue: 0,0:05:54.53,0:05:57.72,Default,,0000,0000,0000,,serious here. You tell a great story for the
Dialogue: 0,0:05:57.72,0:05:59.45,Default,,0000,0000,0000,,user.
Dialogue: 0,0:05:59.45,0:06:03.65,Default,,0000,0000,0000,,Contrast. So contrast creates interest on\Nthe page. And
Dialogue: 0,0:06:03.65,0:06:06.62,Default,,0000,0000,0000,,by creating interesting differences for a\Nreason, you engage
Dialogue: 0,0:06:06.62,0:06:09.21,Default,,0000,0000,0000,,the audience. So there is some contrast here.\NYou
Dialogue: 0,0:06:09.21,0:06:12.26,Default,,0000,0000,0000,,know, we have the bigger text. The greener\Ntext.
Dialogue: 0,0:06:12.26,0:06:15.05,Default,,0000,0000,0000,,It could be a lot more blinged out, but
Dialogue: 0,0:06:15.05,0:06:16.96,Default,,0000,0000,0000,,this is just an intro slide. It's not that
Dialogue: 0,0:06:16.96,0:06:19.06,Default,,0000,0000,0000,,important.
Dialogue: 0,0:06:19.06,0:06:21.71,Default,,0000,0000,0000,,So we can use things like line, shape, texture,
Dialogue: 0,0:06:21.71,0:06:25.63,Default,,0000,0000,0000,,color, and patterns to create contrast on\Nthe page.
Dialogue: 0,0:06:25.63,0:06:27.83,Default,,0000,0000,0000,,So here we have lines versus shape. WE have
Dialogue: 0,0:06:27.83,0:06:30.16,Default,,0000,0000,0000,,opposite colors on the color wheel. We have\Nthis
Dialogue: 0,0:06:30.16,0:06:34.39,Default,,0000,0000,0000,,textured pattern versus a blank space.
Dialogue: 0,0:06:34.39,0:06:37.39,Default,,0000,0000,0000,,And there's also contrast with typography.\NSo we have
Dialogue: 0,0:06:37.39,0:06:41.20,Default,,0000,0000,0000,,a huge headline, colorful, balanced by a much\Nsmaller
Dialogue: 0,0:06:41.20,0:06:42.77,Default,,0000,0000,0000,,piece of text.
Dialogue: 0,0:06:42.77,0:06:46.82,Default,,0000,0000,0000,,So, some, like, this site I would not say
Dialogue: 0,0:06:46.82,0:06:51.50,Default,,0000,0000,0000,,has great contrast. It's GitHub. Great website.\NBut they're
Dialogue: 0,0:06:51.50,0:06:53.56,Default,,0000,0000,0000,,not really pushing it to the limit. And, of
Dialogue: 0,0:06:53.56,0:06:55.57,Default,,0000,0000,0000,,course, it's not maybe in GitHub's best interest\Nto
Dialogue: 0,0:06:55.57,0:06:58.71,Default,,0000,0000,0000,,really worry about that. But they're going\Nwith some
Dialogue: 0,0:06:58.71,0:07:02.45,Default,,0000,0000,0000,,defaults. Black, white, and blue links. Not\Nvery exciting.
Dialogue: 0,0:07:02.45,0:07:04.18,Default,,0000,0000,0000,,And this I think is a bigger problem. You
Dialogue: 0,0:07:04.18,0:07:06.74,Default,,0000,0000,0000,,know, there's the contrast of these examples\Nthat they're
Dialogue: 0,0:07:06.74,0:07:08.29,Default,,0000,0000,0000,,trying to show you, but they're too small\Nto
Dialogue: 0,0:07:08.29,0:07:11.58,Default,,0000,0000,0000,,really sell themselves to you. You know, you\Ncan't
Dialogue: 0,0:07:11.58,0:07:14.43,Default,,0000,0000,0000,,see the actual features. So you want to be
Dialogue: 0,0:07:14.43,0:07:15.74,Default,,0000,0000,0000,,really bold.
Dialogue: 0,0:07:15.74,0:07:17.76,Default,,0000,0000,0000,,I think this is a better example of contrast.
Dialogue: 0,0:07:17.76,0:07:22.29,Default,,0000,0000,0000,,They're using this bright blue background,\Nthis actual photograph
Dialogue: 0,0:07:22.29,0:07:25.22,Default,,0000,0000,0000,,paired with sort of geometric text. So we\Nhave
Dialogue: 0,0:07:25.22,0:07:28.62,Default,,0000,0000,0000,,like the geometric layout and this organic\Nthing happening
Dialogue: 0,0:07:28.62,0:07:32.63,Default,,0000,0000,0000,,next to it. And we have flat white shapes
Dialogue: 0,0:07:32.63,0:07:36.01,Default,,0000,0000,0000,,versus blue and brown colors. It makes a really
Dialogue: 0,0:07:36.01,0:07:39.38,Default,,0000,0000,0000,,compelling argument for the idea that this\Nproduct has
Dialogue: 0,0:07:39.38,0:07:42.01,Default,,0000,0000,0000,,their shit together. And they know what they're\Ntrying
Dialogue: 0,0:07:42.01,0:07:45.80,Default,,0000,0000,0000,,to sell you. They know how to sell you
Dialogue: 0,0:07:45.80,0:07:47.13,Default,,0000,0000,0000,,something.
Dialogue: 0,0:07:47.13,0:07:50.55,Default,,0000,0000,0000,,This isn't, this is a Yahoo widget section.\NIt
Dialogue: 0,0:07:50.55,0:07:53.11,Default,,0000,0000,0000,,doesn't have great contrast. The headlines\Nbarely stand out.
Dialogue: 0,0:07:53.11,0:07:55.34,Default,,0000,0000,0000,,There are a lot of different types of content
Dialogue: 0,0:07:55.34,0:07:57.98,Default,,0000,0000,0000,,here but they all look the same, and you
Dialogue: 0,0:07:57.98,0:08:00.44,Default,,0000,0000,0000,,can't really interact with them in different\Nways.
Dialogue: 0,0:08:00.44,0:08:02.69,Default,,0000,0000,0000,,So, you know, you could, you can push it
Dialogue: 0,0:08:02.69,0:08:04.94,Default,,0000,0000,0000,,a lot further than this, I think. This is
Dialogue: 0,0:08:04.94,0:08:07.68,Default,,0000,0000,0000,,an evernote screen where the different types\Nof action
Dialogue: 0,0:08:07.68,0:08:10.30,Default,,0000,0000,0000,,that you can take have totally different designs.\NThey
Dialogue: 0,0:08:10.30,0:08:13.37,Default,,0000,0000,0000,,have this dark background with the lighter\Ngreen color.
Dialogue: 0,0:08:13.37,0:08:16.25,Default,,0000,0000,0000,,It's a good contrast.
Dialogue: 0,0:08:16.25,0:08:17.95,Default,,0000,0000,0000,,You can tell that they, they give better love.
Dialogue: 0,0:08:17.95,0:08:20.71,Default,,0000,0000,0000,,You know, the section for creating content\Nlooks different
Dialogue: 0,0:08:20.71,0:08:22.38,Default,,0000,0000,0000,,than the section for looking through the content\Nyou've
Dialogue: 0,0:08:22.38,0:08:27.18,Default,,0000,0000,0000,,already created. And there's a new way to\Nlook
Dialogue: 0,0:08:27.18,0:08:29.22,Default,,0000,0000,0000,,at each thing.
Dialogue: 0,0:08:29.22,0:08:34.34,Default,,0000,0000,0000,,So, another not great example of contrast.\NThere is
Dialogue: 0,0:08:34.34,0:08:36.20,Default,,0000,0000,0000,,some stuff here, you know. There's big, you\Nknow,
Dialogue: 0,0:08:36.20,0:08:39.62,Default,,0000,0000,0000,,there's big text, there's small text. There's\Ncolorful buttons.
Dialogue: 0,0:08:39.62,0:08:41.34,Default,,0000,0000,0000,,But it's sticking to the defaults and it's\Nnot
Dialogue: 0,0:08:41.34,0:08:44.09,Default,,0000,0000,0000,,really engaging the user in a way that they're,
Dialogue: 0,0:08:44.09,0:08:47.73,Default,,0000,0000,0000,,that's either new, fresh, or memorable to\Nthem.
Dialogue: 0,0:08:47.73,0:08:49.83,Default,,0000,0000,0000,,So I'm gonna say that they're falling into\Nthe
Dialogue: 0,0:08:49.83,0:08:52.87,Default,,0000,0000,0000,,Bootstrap Trap. We all know it. We all love
Dialogue: 0,0:08:52.87,0:08:56.21,Default,,0000,0000,0000,,it. It's great. I mean, no. It's. It is
Dialogue: 0,0:08:56.21,0:08:59.63,Default,,0000,0000,0000,,great. No, I messed the joke up. The Bootstrap
Dialogue: 0,0:08:59.63,0:09:02.49,Default,,0000,0000,0000,,Trap, it's terrible! I'm just kidding. It's\Nawesome.
Dialogue: 0,0:09:02.49,0:09:06.25,Default,,0000,0000,0000,,I am saying that you can use it wisely.
Dialogue: 0,0:09:06.25,0:09:09.40,Default,,0000,0000,0000,,There are basics there. There are tons of\Nkey
Dialogue: 0,0:09:09.40,0:09:12.30,Default,,0000,0000,0000,,and amazing design features there that you\Ndon't have
Dialogue: 0,0:09:12.30,0:09:13.81,Default,,0000,0000,0000,,to worry about. That you can go on to
Dialogue: 0,0:09:13.81,0:09:17.16,Default,,0000,0000,0000,,build the fun parts of your product. But I'm
Dialogue: 0,0:09:17.16,0:09:19.65,Default,,0000,0000,0000,,saying that this is also a Bootstrap site,\Nand
Dialogue: 0,0:09:19.65,0:09:21.95,Default,,0000,0000,0000,,they've done a ton more work here to make
Dialogue: 0,0:09:21.95,0:09:24.05,Default,,0000,0000,0000,,it really memorable.
Dialogue: 0,0:09:24.05,0:09:26.33,Default,,0000,0000,0000,,They use a lot of different elements. They\Nuse
Dialogue: 0,0:09:26.33,0:09:29.24,Default,,0000,0000,0000,,texture. They use an illustrated background.\NThey use this
Dialogue: 0,0:09:29.24,0:09:34.43,Default,,0000,0000,0000,,yellow color and the scale to set themselves\Napart
Dialogue: 0,0:09:34.43,0:09:36.84,Default,,0000,0000,0000,,from other services that you might want to\Nuse.
Dialogue: 0,0:09:36.84,0:09:38.71,Default,,0000,0000,0000,,And you can still use Bootstrap if it's really
Dialogue: 0,0:09:38.71,0:09:41.02,Default,,0000,0000,0000,,important to you.
Dialogue: 0,0:09:41.02,0:09:42.65,Default,,0000,0000,0000,,It's really important to build on top of it
Dialogue: 0,0:09:42.65,0:09:45.00,Default,,0000,0000,0000,,to make. This is also a Bootstrap site. But
Dialogue: 0,0:09:45.00,0:09:47.46,Default,,0000,0000,0000,,they use this, like, image in the background.\NThey
Dialogue: 0,0:09:47.46,0:09:49.71,Default,,0000,0000,0000,,sort of break out of a grid to call
Dialogue: 0,0:09:49.71,0:09:52.51,Default,,0000,0000,0000,,out certain elements of their product. It\Nmakes it
Dialogue: 0,0:09:52.51,0:09:56.51,Default,,0000,0000,0000,,much more compelling for people.
Dialogue: 0,0:09:56.51,0:10:00.93,Default,,0000,0000,0000,,Number three is repetition. Repetition creates\Npatterns and expectations,
Dialogue: 0,0:10:00.93,0:10:04.28,Default,,0000,0000,0000,,which unify and strengthen your message. So,\Nhere we
Dialogue: 0,0:10:04.28,0:10:08.31,Default,,0000,0000,0000,,have a bullet list. We have an ordered list.
Dialogue: 0,0:10:08.31,0:10:11.57,Default,,0000,0000,0000,,This is something that we're, is a tool that
Dialogue: 0,0:10:11.57,0:10:14.70,Default,,0000,0000,0000,,we're familiar with grouping things together.\NEverything looks the
Dialogue: 0,0:10:14.70,0:10:16.49,Default,,0000,0000,0000,,same except for the one thing that we're calling
Dialogue: 0,0:10:16.49,0:10:18.41,Default,,0000,0000,0000,,out, which is the section we're about to start.
Dialogue: 0,0:10:18.41,0:10:22.21,Default,,0000,0000,0000,,So there are different things that you can\Nuse
Dialogue: 0,0:10:22.21,0:10:27.17,Default,,0000,0000,0000,,to create repetition, like spatial relationships,\Nbullets, similar colors,
Dialogue: 0,0:10:27.17,0:10:29.81,Default,,0000,0000,0000,,formatting. And all of these great patterns\Nthat let
Dialogue: 0,0:10:29.81,0:10:33.04,Default,,0000,0000,0000,,people know that they are, you know, safe\Nin
Dialogue: 0,0:10:33.04,0:10:36.57,Default,,0000,0000,0000,,your, in your website. In your website? On\Nyour
Dialogue: 0,0:10:36.57,0:10:37.06,Default,,0000,0000,0000,,website?
Dialogue: 0,0:10:37.06,0:10:40.17,Default,,0000,0000,0000,,So we all know, don't repeat yourself. But\Nthat's
Dialogue: 0,0:10:40.17,0:10:42.25,Default,,0000,0000,0000,,not true with design. And it's not really\Ntrue
Dialogue: 0,0:10:42.25,0:10:45.58,Default,,0000,0000,0000,,with code either. You do need to repeat yourself,
Dialogue: 0,0:10:45.58,0:10:48.85,Default,,0000,0000,0000,,but in ways that are purposeful and ways that
Dialogue: 0,0:10:48.85,0:10:51.24,Default,,0000,0000,0000,,you can, you know, you can do it once
Dialogue: 0,0:10:51.24,0:10:52.35,Default,,0000,0000,0000,,and then you never have to do it again.
Dialogue: 0,0:10:52.35,0:10:54.18,Default,,0000,0000,0000,,You set up a system and it's like, oh,
Dialogue: 0,0:10:54.18,0:10:55.67,Default,,0000,0000,0000,,we have a new button. I guess it needs
Dialogue: 0,0:10:55.67,0:10:57.88,Default,,0000,0000,0000,,to be a different color because it's more\Nimportant.
Dialogue: 0,0:10:57.88,0:10:58.26,Default,,0000,0000,0000,,No.
Dialogue: 0,0:10:58.26,0:11:01.27,Default,,0000,0000,0000,,I mean, set up, set up some basics and
Dialogue: 0,0:11:01.27,0:11:04.17,Default,,0000,0000,0000,,then never have to code them again. Well,\Nyou
Dialogue: 0,0:11:04.17,0:11:06.79,Default,,0000,0000,0000,,know, that's, that's always the dream, right.\NSo this
Dialogue: 0,0:11:06.79,0:11:09.48,Default,,0000,0000,0000,,is a Best Buy list of products. But they
Dialogue: 0,0:11:09.48,0:11:11.41,Default,,0000,0000,0000,,have a ton of different ways that you can
Dialogue: 0,0:11:11.41,0:11:15.73,Default,,0000,0000,0000,,interact here. There's so many different buttons\Nand dropdowns
Dialogue: 0,0:11:15.73,0:11:19.14,Default,,0000,0000,0000,,and check boxes. And imagine having to code\Nthis,
Dialogue: 0,0:11:19.14,0:11:20.48,Default,,0000,0000,0000,,and every time you try to add this new
Dialogue: 0,0:11:20.48,0:11:21.74,Default,,0000,0000,0000,,feature, you have to design a new way to
Dialogue: 0,0:11:21.74,0:11:23.17,Default,,0000,0000,0000,,put it on there. And you tack it on
Dialogue: 0,0:11:23.17,0:11:25.44,Default,,0000,0000,0000,,and it doesn't really fit.
Dialogue: 0,0:11:25.44,0:11:29.51,Default,,0000,0000,0000,,So, it's, it's confusing for these. Whereas\Nthis site,
Dialogue: 0,0:11:29.51,0:11:32.27,Default,,0000,0000,0000,,you know, you see the links across the top.
Dialogue: 0,0:11:32.27,0:11:33.61,Default,,0000,0000,0000,,They all look the same. If you have to
Dialogue: 0,0:11:33.61,0:11:36.01,Default,,0000,0000,0000,,add a new one it just goes in there.
Dialogue: 0,0:11:36.01,0:11:40.72,Default,,0000,0000,0000,,It's using a grid, which is comfortable for\Nusers.
Dialogue: 0,0:11:40.72,0:11:43.96,Default,,0000,0000,0000,,And they use similar elements to create consistency.\NSo
Dialogue: 0,0:11:43.96,0:11:45.44,Default,,0000,0000,0000,,they have these icons that are all the same
Dialogue: 0,0:11:45.44,0:11:49.26,Default,,0000,0000,0000,,design, the same matching typography, one,\Ntwo, three, four.
Dialogue: 0,0:11:49.26,0:11:51.85,Default,,0000,0000,0000,,We know what we're doing. We're not surprised\Nhere.
Dialogue: 0,0:11:51.85,0:11:56.13,Default,,0000,0000,0000,,This is an old version of the Facebook feed.
Dialogue: 0,0:11:56.13,0:11:57.62,Default,,0000,0000,0000,,And they figured it out by now. They figured
Dialogue: 0,0:11:57.62,0:11:59.52,Default,,0000,0000,0000,,it out a lot better. But you can see
Dialogue: 0,0:11:59.52,0:12:01.44,Default,,0000,0000,0000,,here when you drill into this content, it's\Nreally
Dialogue: 0,0:12:01.44,0:12:03.21,Default,,0000,0000,0000,,hard to see what the pattern is. It's like,
Dialogue: 0,0:12:03.21,0:12:06.28,Default,,0000,0000,0000,,I think this is a link that's attached, but
Dialogue: 0,0:12:06.28,0:12:08.47,Default,,0000,0000,0000,,there's so many different things going on\Nthat users
Dialogue: 0,0:12:08.47,0:12:11.48,Default,,0000,0000,0000,,can't learn the pattern, and then as they\Nflow
Dialogue: 0,0:12:11.48,0:12:16.15,Default,,0000,0000,0000,,down the feed, move smoothly down it.
Dialogue: 0,0:12:16.15,0:12:19.42,Default,,0000,0000,0000,,And this is an alternate example, where, where\Nit's
Dialogue: 0,0:12:19.42,0:12:21.76,Default,,0000,0000,0000,,a much better sense, there's a much better\Nsense
Dialogue: 0,0:12:21.76,0:12:24.96,Default,,0000,0000,0000,,of repetition here. We have this bar along\Nthe
Dialogue: 0,0:12:24.96,0:12:27.12,Default,,0000,0000,0000,,top. You know where you are. You're in this
Dialogue: 0,0:12:27.12,0:12:30.63,Default,,0000,0000,0000,,context. And then each headline looks exactly\Nthe same.
Dialogue: 0,0:12:30.63,0:12:32.67,Default,,0000,0000,0000,,Each set of metadata looks exactly the same,\Nand
Dialogue: 0,0:12:32.67,0:12:35.98,Default,,0000,0000,0000,,they use icons and alignment and different\Ncolors to
Dialogue: 0,0:12:35.98,0:12:39.57,Default,,0000,0000,0000,,create a pattern and stick to it.
Dialogue: 0,0:12:39.57,0:12:46.57,Default,,0000,0000,0000,,So number four is proximity. One second.
Dialogue: 0,0:12:48.23,0:12:50.30,Default,,0000,0000,0000,,So delicious. OK.
Dialogue: 0,0:12:50.30,0:12:52.88,Default,,0000,0000,0000,,Proximity is about grouping related elements\Ntogether by using
Dialogue: 0,0:12:52.88,0:12:56.48,Default,,0000,0000,0000,,space to create associations between them,\Nor using empty
Dialogue: 0,0:12:56.48,0:13:00.37,Default,,0000,0000,0000,,space to disconnect unrelated elements. So\Nhere we have
Dialogue: 0,0:13:00.37,0:13:04.04,Default,,0000,0000,0000,,one concrete group of elements. We have a\Nlist.
Dialogue: 0,0:13:04.04,0:13:05.84,Default,,0000,0000,0000,,That's all there is on the page. There's nothing
Dialogue: 0,0:13:05.84,0:13:08.02,Default,,0000,0000,0000,,else distracting you. You know that we're\Nin the
Dialogue: 0,0:13:08.02,0:13:10.43,Default,,0000,0000,0000,,section and we're about to start something\Nnew.
Dialogue: 0,0:13:10.43,0:13:13.61,Default,,0000,0000,0000,,So, some, some tools that you can use to
Dialogue: 0,0:13:13.61,0:13:17.61,Default,,0000,0000,0000,,create proximity are using columns. You can\Ngroup, you
Dialogue: 0,0:13:17.61,0:13:21.06,Default,,0000,0000,0000,,need to group similar action items together.\NAnd using
Dialogue: 0,0:13:21.06,0:13:24.39,Default,,0000,0000,0000,,white space to separate space. So, this is\Nan
Dialogue: 0,0:13:24.39,0:13:28.61,Default,,0000,0000,0000,,example where proximity is not being used.\NIt's overwhelming.
Dialogue: 0,0:13:28.61,0:13:32.17,Default,,0000,0000,0000,,There's too much information on this ESPN\Nsite. There's
Dialogue: 0,0:13:32.17,0:13:34.39,Default,,0000,0000,0000,,all different kinds of information just packed\Non top
Dialogue: 0,0:13:34.39,0:13:37.57,Default,,0000,0000,0000,,of each other. And it's, it's very, it's very
Dialogue: 0,0:13:37.57,0:13:40.70,Default,,0000,0000,0000,,confusing to parse. There's no white space\Nhere. They're
Dialogue: 0,0:13:40.70,0:13:43.99,Default,,0000,0000,0000,,just trying to shove it all in your face.
Dialogue: 0,0:13:43.99,0:13:46.20,Default,,0000,0000,0000,,And a place where proximity is really important\Nis
Dialogue: 0,0:13:46.20,0:13:48.26,Default,,0000,0000,0000,,for forums. So this is a much better and
Dialogue: 0,0:13:48.26,0:13:51.41,Default,,0000,0000,0000,,clear way to sort of get some information\Nand
Dialogue: 0,0:13:51.41,0:13:54.26,Default,,0000,0000,0000,,input some information. So it tells you what\Nsection
Dialogue: 0,0:13:54.26,0:13:57.10,Default,,0000,0000,0000,,you're in. There are, you know, some basic\Nform
Dialogue: 0,0:13:57.10,0:14:00.11,Default,,0000,0000,0000,,patterns. All of these fields are required.\NYou know,
Dialogue: 0,0:14:00.11,0:14:04.15,Default,,0000,0000,0000,,lining the labels up together. And they use\Nwhite
Dialogue: 0,0:14:04.15,0:14:07.78,Default,,0000,0000,0000,,space and they're grouping elements in the\Nsmall number
Dialogue: 0,0:14:07.78,0:14:10.42,Default,,0000,0000,0000,,to make it easy to use.
Dialogue: 0,0:14:10.42,0:14:15.97,Default,,0000,0000,0000,,So, we're all familiar with Craigslist. Great\Nwebsite. We've
Dialogue: 0,0:14:15.97,0:14:19.38,Default,,0000,0000,0000,,all gotten, you know, maybe your apartment\Non Craigslist.
Dialogue: 0,0:14:19.38,0:14:20.62,Default,,0000,0000,0000,,You know you can get there and it gets
Dialogue: 0,0:14:20.62,0:14:23.26,Default,,0000,0000,0000,,the job done. But when you drill down, it's
Dialogue: 0,0:14:23.26,0:14:25.04,Default,,0000,0000,0000,,like, what am I looking for? There are so
Dialogue: 0,0:14:25.04,0:14:27.48,Default,,0000,0000,0000,,many things here and they're all jumbled together.\NThis
Dialogue: 0,0:14:27.48,0:14:31.19,Default,,0000,0000,0000,,is forty things, and they're not alphabetically\Nordered even
Dialogue: 0,0:14:31.19,0:14:35.24,Default,,0000,0000,0000,,top to bottom. They're ordered left to right.\NVery
Dialogue: 0,0:14:35.24,0:14:39.80,Default,,0000,0000,0000,,hard to see where, what you're looking for.
Dialogue: 0,0:14:39.80,0:14:42.62,Default,,0000,0000,0000,,A good rule is to only group elements together
Dialogue: 0,0:14:42.62,0:14:45.27,Default,,0000,0000,0000,,in groups of three to five. It's the easiest
Dialogue: 0,0:14:45.27,0:14:48.52,Default,,0000,0000,0000,,way for humans to understand and it's going\Nto
Dialogue: 0,0:14:48.52,0:14:53.31,Default,,0000,0000,0000,,make users much more happy to use your product.
Dialogue: 0,0:14:53.31,0:14:57.62,Default,,0000,0000,0000,,Craigslist, you know, the listings all have\Na ton
Dialogue: 0,0:14:57.62,0:15:00.51,Default,,0000,0000,0000,,of information right here. They're all jumbled\Nin together.
Dialogue: 0,0:15:00.51,0:15:03.48,Default,,0000,0000,0000,,It's really important stuff, you know. It's\Nsomething that's
Dialogue: 0,0:15:03.48,0:15:05.77,Default,,0000,0000,0000,,going to, you just need to skip this whole
Dialogue: 0,0:15:05.77,0:15:09.09,Default,,0000,0000,0000,,listing because it doesn't apply to you. But\Nthis
Dialogue: 0,0:15:09.09,0:15:11.29,Default,,0000,0000,0000,,is all different kinds of information. There's\Ninformation about
Dialogue: 0,0:15:11.29,0:15:13.74,Default,,0000,0000,0000,,the apartment. There's information about the\Nlisting on the
Dialogue: 0,0:15:13.74,0:15:16.01,Default,,0000,0000,0000,,site. The price, which is the most important\Nthing.
Dialogue: 0,0:15:16.01,0:15:17.22,Default,,0000,0000,0000,,But they all look the same and they're all
Dialogue: 0,0:15:17.22,0:15:19.39,Default,,0000,0000,0000,,grouped together.
Dialogue: 0,0:15:19.39,0:15:20.85,Default,,0000,0000,0000,,So a better example of this is Air B
Dialogue: 0,0:15:20.85,0:15:23.78,Default,,0000,0000,0000,,and B's site ??. They separate these things\Nout
Dialogue: 0,0:15:23.78,0:15:26.69,Default,,0000,0000,0000,,in them, in a better way. At the top,
Dialogue: 0,0:15:26.69,0:15:29.42,Default,,0000,0000,0000,,they have the information about the booking,\Nthe comments.
Dialogue: 0,0:15:29.42,0:15:31.43,Default,,0000,0000,0000,,You can book it now. And then below they
Dialogue: 0,0:15:31.43,0:15:34.13,Default,,0000,0000,0000,,have the information about the apartment.\NSo it makes
Dialogue: 0,0:15:34.13,0:15:36.23,Default,,0000,0000,0000,,it much more pleasant to scan down. And they
Dialogue: 0,0:15:36.23,0:15:40.45,Default,,0000,0000,0000,,also have the big images. That helps. And\Nit
Dialogue: 0,0:15:40.45,0:15:44.17,Default,,0000,0000,0000,,makes better use of proximity here.
Dialogue: 0,0:15:44.17,0:15:46.16,Default,,0000,0000,0000,,And I would say, a word of warning, is
Dialogue: 0,0:15:46.16,0:15:49.68,Default,,0000,0000,0000,,to really make sure that your forms are fun
Dialogue: 0,0:15:49.68,0:15:53.50,Default,,0000,0000,0000,,and very straightforward to use. And proximity\Nis the
Dialogue: 0,0:15:53.50,0:15:56.75,Default,,0000,0000,0000,,best way to make sure that's happening. You\Nknow,
Dialogue: 0,0:15:56.75,0:15:59.68,Default,,0000,0000,0000,,put the credit card information in a different\Nplace
Dialogue: 0,0:15:59.68,0:16:02.19,Default,,0000,0000,0000,,than the, than the shipping address. You know,\Nyou
Dialogue: 0,0:16:02.19,0:16:05.65,Default,,0000,0000,0000,,don't want. You don't want to overload users\Nor
Dialogue: 0,0:16:05.65,0:16:08.73,Default,,0000,0000,0000,,have them be unclear, like, how much further\Nthey
Dialogue: 0,0:16:08.73,0:16:12.26,Default,,0000,0000,0000,,have to go, how much they've already completed.\NProximity
Dialogue: 0,0:16:12.26,0:16:16.16,Default,,0000,0000,0000,,is a great way to use that.
Dialogue: 0,0:16:16.16,0:16:19.49,Default,,0000,0000,0000,,Number five is flow. So, flow, you're flowing\Ndown
Dialogue: 0,0:16:19.49,0:16:21.60,Default,,0000,0000,0000,,this list. You're not paying attention to\Nthe things
Dialogue: 0,0:16:21.60,0:16:24.74,Default,,0000,0000,0000,,you've already learned, and then you hit flow.\NAnd
Dialogue: 0,0:16:24.74,0:16:27.52,Default,,0000,0000,0000,,that's where you stop and you're excited for\Nthe
Dialogue: 0,0:16:27.52,0:16:30.83,Default,,0000,0000,0000,,new section. And that's an example of flow.
Dialogue: 0,0:16:30.83,0:16:33.53,Default,,0000,0000,0000,,So site's are not pages. They are experiences\Nwith
Dialogue: 0,0:16:33.53,0:16:36.22,Default,,0000,0000,0000,,many states and possibilities. So you think\Nof where
Dialogue: 0,0:16:36.22,0:16:37.62,Default,,0000,0000,0000,,you want the user to end up, and you
Dialogue: 0,0:16:37.62,0:16:39.83,Default,,0000,0000,0000,,let that influence design.
Dialogue: 0,0:16:39.83,0:16:42.56,Default,,0000,0000,0000,,So, I would say there are two types of
Dialogue: 0,0:16:42.56,0:16:44.87,Default,,0000,0000,0000,,flow, and we're just going to talk about one
Dialogue: 0,0:16:44.87,0:16:47.46,Default,,0000,0000,0000,,today. There's flow within one page. So what\Nthe
Dialogue: 0,0:16:47.46,0:16:49.40,Default,,0000,0000,0000,,user does on just one page. And then there's
Dialogue: 0,0:16:49.40,0:16:53.02,Default,,0000,0000,0000,,flow between many pages, like in an Amazon\Ncheckout
Dialogue: 0,0:16:53.02,0:16:55.31,Default,,0000,0000,0000,,process. You go through many different pages\Nbut they
Dialogue: 0,0:16:55.31,0:16:57.56,Default,,0000,0000,0000,,make that as smooth as possible so they don't
Dialogue: 0,0:16:57.56,0:16:59.17,Default,,0000,0000,0000,,lose you along the way.
Dialogue: 0,0:16:59.17,0:17:02.70,Default,,0000,0000,0000,,So, we'll talk about flow within one page\Ntoday.
Dialogue: 0,0:17:02.70,0:17:07.38,Default,,0000,0000,0000,,It's a little simpler. So, one sample idea\Nfor
Dialogue: 0,0:17:07.38,0:17:09.35,Default,,0000,0000,0000,,flow, is that you're looking at a product,\Nyou're
Dialogue: 0,0:17:09.35,0:17:10.98,Default,,0000,0000,0000,,looking at the details, and then you add to
Dialogue: 0,0:17:10.98,0:17:12.68,Default,,0000,0000,0000,,cart. So this is the first step of the
Dialogue: 0,0:17:12.68,0:17:15.72,Default,,0000,0000,0000,,checkout process. And it's most important\Nfor you, as
Dialogue: 0,0:17:15.72,0:17:17.68,Default,,0000,0000,0000,,the seller, to make sure that they click that
Dialogue: 0,0:17:17.68,0:17:20.35,Default,,0000,0000,0000,,buy button. So you don't want to put anything
Dialogue: 0,0:17:20.35,0:17:23.58,Default,,0000,0000,0000,,that's going to distract them in between the\Nbeautiful
Dialogue: 0,0:17:23.58,0:17:26.30,Default,,0000,0000,0000,,image and the headline and the buy button.
Dialogue: 0,0:17:26.30,0:17:29.25,Default,,0000,0000,0000,,And it's customer service. It's customer service\Nthat makes
Dialogue: 0,0:17:29.25,0:17:32.53,Default,,0000,0000,0000,,it easy and fun for someone and that people
Dialogue: 0,0:17:32.53,0:17:34.83,Default,,0000,0000,0000,,have trust that they know how to get there
Dialogue: 0,0:17:34.83,0:17:39.03,Default,,0000,0000,0000,,and there's good will when something goes\Nwrong.
Dialogue: 0,0:17:39.03,0:17:41.98,Default,,0000,0000,0000,,Another example of flow is, you're reading\Na story
Dialogue: 0,0:17:41.98,0:17:43.84,Default,,0000,0000,0000,,on a site and you want someone to read
Dialogue: 0,0:17:43.84,0:17:47.86,Default,,0000,0000,0000,,another story. I would say that a bad example
Dialogue: 0,0:17:47.86,0:17:51.39,Default,,0000,0000,0000,,is Hacker News. We all love it and we're
Dialogue: 0,0:17:51.39,0:17:53.19,Default,,0000,0000,0000,,all there all the time, but what happens when
Dialogue: 0,0:17:53.19,0:17:55.35,Default,,0000,0000,0000,,you click a link. You leave the page. It
Dialogue: 0,0:17:55.35,0:17:58.55,Default,,0000,0000,0000,,overwrites the page you're writing on. You're,\Nyou're sitting
Dialogue: 0,0:17:58.55,0:17:59.61,Default,,0000,0000,0000,,on.
Dialogue: 0,0:17:59.61,0:18:01.89,Default,,0000,0000,0000,,You read this. You click away. Every single\Nthing
Dialogue: 0,0:18:01.89,0:18:05.21,Default,,0000,0000,0000,,takes you away from the site. And I, instead
Dialogue: 0,0:18:05.21,0:18:08.24,Default,,0000,0000,0000,,of incentivizing you to stay on the site or,
Dialogue: 0,0:18:08.24,0:18:10.91,Default,,0000,0000,0000,,or to leave and come back, it just incentivizes
Dialogue: 0,0:18:10.91,0:18:12.66,Default,,0000,0000,0000,,you to leave. I mean, you know to come
Dialogue: 0,0:18:12.66,0:18:15.02,Default,,0000,0000,0000,,back because of the freshness, but I think\Nthere
Dialogue: 0,0:18:15.02,0:18:16.88,Default,,0000,0000,0000,,are better flow options there.
Dialogue: 0,0:18:16.88,0:18:18.19,Default,,0000,0000,0000,,Something that we're starting to see a lot\Nmore
Dialogue: 0,0:18:18.19,0:18:20.43,Default,,0000,0000,0000,,often is that you get to end, to the
Dialogue: 0,0:18:20.43,0:18:22.51,Default,,0000,0000,0000,,end of a story and then you go immediately
Dialogue: 0,0:18:22.51,0:18:24.69,Default,,0000,0000,0000,,to a new story. And it makes that flow
Dialogue: 0,0:18:24.69,0:18:26.80,Default,,0000,0000,0000,,seamless so you don't even have to think about
Dialogue: 0,0:18:26.80,0:18:28.70,Default,,0000,0000,0000,,it.
Dialogue: 0,0:18:28.70,0:18:32.10,Default,,0000,0000,0000,,Another, you know, not great flow, is like\NI'm
Dialogue: 0,0:18:32.10,0:18:34.14,Default,,0000,0000,0000,,looking at this infograph, and I'm like, where\Ndo
Dialogue: 0,0:18:34.14,0:18:36.07,Default,,0000,0000,0000,,I go? Do I go from one to six?
Dialogue: 0,0:18:36.07,0:18:39.88,Default,,0000,0000,0000,,Am I supposed to read down? It's pretty aesthetically
Dialogue: 0,0:18:39.88,0:18:43.23,Default,,0000,0000,0000,,pleasing, but it's very contradictory in the\Nways that
Dialogue: 0,0:18:43.23,0:18:45.66,Default,,0000,0000,0000,,you're supposed to scan the information.
Dialogue: 0,0:18:45.66,0:18:48.03,Default,,0000,0000,0000,,A better way for flow is to give people
Dialogue: 0,0:18:48.03,0:18:51.38,Default,,0000,0000,0000,,one path. One path that they have to follow,
Dialogue: 0,0:18:51.38,0:18:53.76,Default,,0000,0000,0000,,and make sure that's very clear. So we're,\Nwe're
Dialogue: 0,0:18:53.76,0:18:57.25,Default,,0000,0000,0000,,familiar with this idea of timelines. With\Nthis, you
Dialogue: 0,0:18:57.25,0:18:59.42,Default,,0000,0000,0000,,know, you're zigzagging down the page, which\Nis not
Dialogue: 0,0:18:59.42,0:19:01.48,Default,,0000,0000,0000,,sort of the normal flow of just going straight
Dialogue: 0,0:19:01.48,0:19:04.37,Default,,0000,0000,0000,,down or straight to the side. But they make
Dialogue: 0,0:19:04.37,0:19:06.49,Default,,0000,0000,0000,,it very clear with the icons, with the, with
Dialogue: 0,0:19:06.49,0:19:10.98,Default,,0000,0000,0000,,the marks along this timeline. And so you\Nfeel
Dialogue: 0,0:19:10.98,0:19:14.66,Default,,0000,0000,0000,,very comfortable and you know where you're\Ngoing next.
Dialogue: 0,0:19:14.66,0:19:16.10,Default,,0000,0000,0000,,Here's a forum that's missing a ton of the
Dialogue: 0,0:19:16.10,0:19:18.30,Default,,0000,0000,0000,,helpers that we've come to know and love in
Dialogue: 0,0:19:18.30,0:19:21.92,Default,,0000,0000,0000,,forms. And you, there's no special stylings\Nhere. But
Dialogue: 0,0:19:21.92,0:19:24.04,Default,,0000,0000,0000,,the worst part of this flow, that it gives
Dialogue: 0,0:19:24.04,0:19:26.28,Default,,0000,0000,0000,,you the information and instructions for how\Nto fill
Dialogue: 0,0:19:26.28,0:19:28.46,Default,,0000,0000,0000,,out the form two-thirds of the way down the
Dialogue: 0,0:19:28.46,0:19:29.32,Default,,0000,0000,0000,,form.
Dialogue: 0,0:19:29.32,0:19:32.48,Default,,0000,0000,0000,,So you have to go back and, and revisit
Dialogue: 0,0:19:32.48,0:19:33.96,Default,,0000,0000,0000,,all of the stuff that you've already done\Nand
Dialogue: 0,0:19:33.96,0:19:36.90,Default,,0000,0000,0000,,be like, did I do this right? The best
Dialogue: 0,0:19:36.90,0:19:39.11,Default,,0000,0000,0000,,way to do these sorts of things is to
Dialogue: 0,0:19:39.11,0:19:42.47,Default,,0000,0000,0000,,give feedback, too. You, you can give feedback\Nfor
Dialogue: 0,0:19:42.47,0:19:44.49,Default,,0000,0000,0000,,when someone's filling out a password. You\Nsay this
Dialogue: 0,0:19:44.49,0:19:47.42,Default,,0000,0000,0000,,is a terrible password. Keep going, keep going,\Nyou're
Dialogue: 0,0:19:47.42,0:19:50.43,Default,,0000,0000,0000,,getting there. And then you've reached the\Nend and
Dialogue: 0,0:19:50.43,0:19:53.61,Default,,0000,0000,0000,,you're ready to go.
Dialogue: 0,0:19:53.61,0:19:58.91,Default,,0000,0000,0000,,So number six is typography. A whole generation\Nof
Dialogue: 0,0:19:58.91,0:20:01.31,Default,,0000,0000,0000,,designers on the web have made it very easy
Dialogue: 0,0:20:01.31,0:20:04.36,Default,,0000,0000,0000,,to access good typography and good web fonts.\NAnd
Dialogue: 0,0:20:04.36,0:20:06.45,Default,,0000,0000,0000,,there are really small changes that you can\Nmake
Dialogue: 0,0:20:06.45,0:20:09.40,Default,,0000,0000,0000,,to default settings that make a big difference\Nand
Dialogue: 0,0:20:09.40,0:20:12.65,Default,,0000,0000,0000,,a big impact on readers and readability.
Dialogue: 0,0:20:12.65,0:20:14.81,Default,,0000,0000,0000,,This is a simple presentation. I'm using one\Ntype
Dialogue: 0,0:20:14.81,0:20:18.55,Default,,0000,0000,0000,,face the whole time. I would recommend one\Nor
Dialogue: 0,0:20:18.55,0:20:22.26,Default,,0000,0000,0000,,two type faces are a really great start for,
Dialogue: 0,0:20:22.26,0:20:25.13,Default,,0000,0000,0000,,for defining your, your product and your sort\Nof
Dialogue: 0,0:20:25.13,0:20:27.46,Default,,0000,0000,0000,,personality that you want to give for, give\Nto
Dialogue: 0,0:20:27.46,0:20:30.40,Default,,0000,0000,0000,,people. Show to people.
Dialogue: 0,0:20:30.40,0:20:32.28,Default,,0000,0000,0000,,So this is, this is a condensed typeface.\NIt's
Dialogue: 0,0:20:32.28,0:20:34.83,Default,,0000,0000,0000,,very load. Trying to like throw all these\Nthings
Dialogue: 0,0:20:34.83,0:20:38.77,Default,,0000,0000,0000,,in your face really quickly. It was originally\Ndesigned
Dialogue: 0,0:20:38.77,0:20:41.98,Default,,0000,0000,0000,,for highway signs and industrial machines.\NSo you can
Dialogue: 0,0:20:41.98,0:20:44.71,Default,,0000,0000,0000,,sort of think about these and what, what impact
Dialogue: 0,0:20:44.71,0:20:47.88,Default,,0000,0000,0000,,that might have. So there's a, you know, a
Dialogue: 0,0:20:47.88,0:20:50.70,Default,,0000,0000,0000,,sexier headline on the left and a sillier\Nheadline
Dialogue: 0,0:20:50.70,0:20:52.55,Default,,0000,0000,0000,,on the right. It's, you know, you can be
Dialogue: 0,0:20:52.55,0:20:55.27,Default,,0000,0000,0000,,very playful with typography, too.
Dialogue: 0,0:20:55.27,0:20:59.25,Default,,0000,0000,0000,,A couple of services you are perhaps familiar\Nwith.
Dialogue: 0,0:20:59.25,0:21:03.02,Default,,0000,0000,0000,,Google web fonts. Typekit. Myfonts. Some things\Nare free.
Dialogue: 0,0:21:03.02,0:21:05.25,Default,,0000,0000,0000,,Some are paid. But it's not that much money
Dialogue: 0,0:21:05.25,0:21:06.45,Default,,0000,0000,0000,,and it makes a big difference.
Dialogue: 0,0:21:06.45,0:21:11.88,Default,,0000,0000,0000,,So, another, love to, no. Love to love. Wikipedia
Dialogue: 0,0:21:11.88,0:21:15.26,Default,,0000,0000,0000,,actually. Tons of information. Spent hours\Nand days of
Dialogue: 0,0:21:15.26,0:21:17.33,Default,,0000,0000,0000,,my life reading it. But it's so hard to
Dialogue: 0,0:21:17.33,0:21:20.87,Default,,0000,0000,0000,,read sometimes. The lines are so long across.\NYou
Dialogue: 0,0:21:20.87,0:21:22.40,Default,,0000,0000,0000,,get to the end of the line and you
Dialogue: 0,0:21:22.40,0:21:23.90,Default,,0000,0000,0000,,lose your place. How do I get back to
Dialogue: 0,0:21:23.90,0:21:26.39,Default,,0000,0000,0000,,the beginning? They have the footnotes, which\Ncan be
Dialogue: 0,0:21:26.39,0:21:28.48,Default,,0000,0000,0000,,distracting sometimes.
Dialogue: 0,0:21:28.48,0:21:34.06,Default,,0000,0000,0000,,So, a better way to look at typography is,
Dialogue: 0,0:21:34.06,0:21:37.47,Default,,0000,0000,0000,,is set some rules. You know, the base line
Dialogue: 0,0:21:37.47,0:21:44.47,Default,,0000,0000,0000,,length is thirty-five. Sorry. Thirty-five\Nto sixty-five characters long.
Dialogue: 0,0:21:45.00,0:21:48.10,Default,,0000,0000,0000,,Just count them. And that's, that's the best\Nhuman
Dialogue: 0,0:21:48.10,0:21:51.56,Default,,0000,0000,0000,,readable length for people. And the minimum\Nfont size
Dialogue: 0,0:21:51.56,0:21:53.63,Default,,0000,0000,0000,,to line height ratio is about one to one
Dialogue: 0,0:21:53.63,0:21:57.15,Default,,0000,0000,0000,,and a half. This is, these are just, write
Dialogue: 0,0:21:57.15,0:21:59.42,Default,,0000,0000,0000,,it down and don't worry about doing anything\Nelse
Dialogue: 0,0:21:59.42,0:22:01.78,Default,,0000,0000,0000,,because this is the best way. And if you're
Dialogue: 0,0:22:01.78,0:22:03.14,Default,,0000,0000,0000,,going to have a lot of reading on your
Dialogue: 0,0:22:03.14,0:22:06.56,Default,,0000,0000,0000,,site, look at other sites that do reading\Nexperiences
Dialogue: 0,0:22:06.56,0:22:07.31,Default,,0000,0000,0000,,in a great way.
Dialogue: 0,0:22:07.31,0:22:09.78,Default,,0000,0000,0000,,This is readability. They have a lot of different
Dialogue: 0,0:22:09.78,0:22:13.83,Default,,0000,0000,0000,,styles going on so that they can, they can
Dialogue: 0,0:22:13.83,0:22:19.91,Default,,0000,0000,0000,,handle different kinds, types of content.\NAnd you know,
Dialogue: 0,0:22:19.91,0:22:21.83,Default,,0000,0000,0000,,just, just a little love goes a long way
Dialogue: 0,0:22:21.83,0:22:25.89,Default,,0000,0000,0000,,with typography. An example. I've just, like,\NI love
Dialogue: 0,0:22:25.89,0:22:27.14,Default,,0000,0000,0000,,these like, love to hate things.
Dialogue: 0,0:22:27.14,0:22:30.93,Default,,0000,0000,0000,,Drudge Report. Drudge Report. Impossible to\Nread. Everything looks
Dialogue: 0,0:22:30.93,0:22:35.53,Default,,0000,0000,0000,,exactly the same. There's the headlines. There's\Nsections or
Dialogue: 0,0:22:35.53,0:22:39.36,Default,,0000,0000,0000,,categories. There's social links. You can't\Neven tell what
Dialogue: 0,0:22:39.36,0:22:41.60,Default,,0000,0000,0000,,you're looking at or why any of them are
Dialogue: 0,0:22:41.60,0:22:44.21,Default,,0000,0000,0000,,different. Why something should call, should\Nbe called out
Dialogue: 0,0:22:44.21,0:22:45.34,Default,,0000,0000,0000,,to you.
Dialogue: 0,0:22:45.34,0:22:47.47,Default,,0000,0000,0000,,I'll bring up the New York Times, again, as
Dialogue: 0,0:22:47.47,0:22:50.61,Default,,0000,0000,0000,,a great example. There is tons of information\Nhere.
Dialogue: 0,0:22:50.61,0:22:52.14,Default,,0000,0000,0000,,As much as there was on the Drudge Report
Dialogue: 0,0:22:52.14,0:22:54.95,Default,,0000,0000,0000,,page. But they've broken it up into different\Nsections
Dialogue: 0,0:22:54.95,0:22:57.09,Default,,0000,0000,0000,,and they do a lot of different typographic\Ntreatments
Dialogue: 0,0:22:57.09,0:22:59.83,Default,,0000,0000,0000,,that tell you how, how important or how not
Dialogue: 0,0:22:59.83,0:23:01.15,Default,,0000,0000,0000,,important something is.
Dialogue: 0,0:23:01.15,0:23:04.56,Default,,0000,0000,0000,,They have section headlines to differentiate\Nthis section. They
Dialogue: 0,0:23:04.56,0:23:08.68,Default,,0000,0000,0000,,call out certain articles. They have whole\Ncategory overviews
Dialogue: 0,0:23:08.68,0:23:10.75,Default,,0000,0000,0000,,with a different style, and then they have\Nlistings
Dialogue: 0,0:23:10.75,0:23:14.44,Default,,0000,0000,0000,,which is user-generated content. They're all\Nsomething different, and
Dialogue: 0,0:23:14.44,0:23:17.32,Default,,0000,0000,0000,,they do use a custom type face. They're a
Dialogue: 0,0:23:17.32,0:23:19.27,Default,,0000,0000,0000,,site for reading and they, they need to make
Dialogue: 0,0:23:19.27,0:23:23.79,Default,,0000,0000,0000,,sure that they give that love.
Dialogue: 0,0:23:23.79,0:23:27.56,Default,,0000,0000,0000,,So, this is another site you can use. You
Dialogue: 0,0:23:27.56,0:23:29.86,Default,,0000,0000,0000,,can use typography in interesting ways. You\Ncan layer
Dialogue: 0,0:23:29.86,0:23:33.00,Default,,0000,0000,0000,,things, you know, in a way to create a
Dialogue: 0,0:23:33.00,0:23:34.97,Default,,0000,0000,0000,,personality. This is, you know, it seems like\Na
Dialogue: 0,0:23:34.97,0:23:38.74,Default,,0000,0000,0000,,very elegant site. And just think of some\Nadjectives
Dialogue: 0,0:23:38.74,0:23:41.21,Default,,0000,0000,0000,,that you want to convey to people and, and
Dialogue: 0,0:23:41.21,0:23:43.17,Default,,0000,0000,0000,,go from there.
Dialogue: 0,0:23:43.17,0:23:49.06,Default,,0000,0000,0000,,So the last element, principle for today,\Nis color.
Dialogue: 0,0:23:49.06,0:23:52.22,Default,,0000,0000,0000,,I would say color with an asterisk, because\NI,
Dialogue: 0,0:23:52.22,0:23:54.01,Default,,0000,0000,0000,,I don't think you should rely on color too
Dialogue: 0,0:23:54.01,0:23:56.07,Default,,0000,0000,0000,,heavily, and I think it's one of the lesser
Dialogue: 0,0:23:56.07,0:23:59.93,Default,,0000,0000,0000,,important things. There are accessibility\Nreasons. Like, if you
Dialogue: 0,0:23:59.93,0:24:03.17,Default,,0000,0000,0000,,have colorblind users or you, you know, your,\Nyour
Dialogue: 0,0:24:03.17,0:24:05.20,Default,,0000,0000,0000,,user base is on a ton of different monitors.
Dialogue: 0,0:24:05.20,0:24:07.87,Default,,0000,0000,0000,,The colors could look super wacky.
Dialogue: 0,0:24:07.87,0:24:10.19,Default,,0000,0000,0000,,And semantic reasons. Colors mean different\Nthings to different
Dialogue: 0,0:24:10.19,0:24:12.68,Default,,0000,0000,0000,,people. We have a lot of sort of like,
Dialogue: 0,0:24:12.68,0:24:15.37,Default,,0000,0000,0000,,western culture. Green means go, red means\Nstop, white
Dialogue: 0,0:24:15.37,0:24:17.61,Default,,0000,0000,0000,,means this, black. You know. You want to be
Dialogue: 0,0:24:17.61,0:24:22.06,Default,,0000,0000,0000,,sensitive about your target audience, and\Nplay up, play
Dialogue: 0,0:24:22.06,0:24:23.33,Default,,0000,0000,0000,,into that.
Dialogue: 0,0:24:23.33,0:24:27.09,Default,,0000,0000,0000,,So, three ways that you can adjust color to
Dialogue: 0,0:24:27.09,0:24:30.12,Default,,0000,0000,0000,,stand out are hue. The actual color it is.
Dialogue: 0,0:24:30.12,0:24:32.36,Default,,0000,0000,0000,,Saturation - how bold it is. And value -
Dialogue: 0,0:24:32.36,0:24:34.53,Default,,0000,0000,0000,,how light or dark it is. And I would
Dialogue: 0,0:24:34.53,0:24:38.66,Default,,0000,0000,0000,,recommend using all three together to create\Ndifferent color
Dialogue: 0,0:24:38.66,0:24:40.11,Default,,0000,0000,0000,,combinations.
Dialogue: 0,0:24:40.11,0:24:44.62,Default,,0000,0000,0000,,So, Facebook. We're all familiar with the\NFacebook blue.
Dialogue: 0,0:24:44.62,0:24:48.24,Default,,0000,0000,0000,,It's so boring. It's so sterile. It's not\Nthat
Dialogue: 0,0:24:48.24,0:24:51.03,Default,,0000,0000,0000,,exciting, and, and we, we're not there for\Nthe
Dialogue: 0,0:24:51.03,0:24:54.23,Default,,0000,0000,0000,,color. We're not, you know, Facebook has to\Ntarget
Dialogue: 0,0:24:54.23,0:24:57.27,Default,,0000,0000,0000,,every person in the world. Facebook is for\Neveryone.
Dialogue: 0,0:24:57.27,0:24:59.04,Default,,0000,0000,0000,,And so they can't, you know, they can't go
Dialogue: 0,0:24:59.04,0:25:05.97,Default,,0000,0000,0000,,bright orange. And, or purpose, or whatever\Ncolor. Blue
Dialogue: 0,0:25:05.97,0:25:07.59,Default,,0000,0000,0000,,is a very generic color and that's what they
Dialogue: 0,0:25:07.59,0:25:10.10,Default,,0000,0000,0000,,have to do because that's, that's targeting\Ntheir audience.
Dialogue: 0,0:25:10.10,0:25:12.67,Default,,0000,0000,0000,,So I'd say it's bad color, but it's, you
Dialogue: 0,0:25:12.67,0:25:15.08,Default,,0000,0000,0000,,know, you have to be thoughtful of that. So,
Dialogue: 0,0:25:15.08,0:25:17.14,Default,,0000,0000,0000,,a site to counter it is V-Files which is
Dialogue: 0,0:25:17.14,0:25:22.77,Default,,0000,0000,0000,,a shopping offshoot of V-Magazine. So it's\Nvery fashion-related.
Dialogue: 0,0:25:22.77,0:25:25.94,Default,,0000,0000,0000,,Very young audience. Very urban. So they have\Nyellow
Dialogue: 0,0:25:25.94,0:25:30.01,Default,,0000,0000,0000,,as their, as their color that they use everywhere.
Dialogue: 0,0:25:30.01,0:25:32.70,Default,,0000,0000,0000,,And they use that to entice themselves to\Ntheir
Dialogue: 0,0:25:32.70,0:25:33.36,Default,,0000,0000,0000,,target audience.
Dialogue: 0,0:25:33.36,0:25:36.25,Default,,0000,0000,0000,,If they did the Facebook blue, people would\Nnot
Dialogue: 0,0:25:36.25,0:25:39.40,Default,,0000,0000,0000,,think it was as cool or as interesting. So
Dialogue: 0,0:25:39.40,0:25:42.41,Default,,0000,0000,0000,,you can use a color to, to be bold,
Dialogue: 0,0:25:42.41,0:25:45.42,Default,,0000,0000,0000,,and pick one or two and go with them.
Dialogue: 0,0:25:45.42,0:25:50.78,Default,,0000,0000,0000,,Don't pick ten. You're gonna look like BuzzFeed\Nprobably.
Dialogue: 0,0:25:50.78,0:25:57.78,Default,,0000,0000,0000,,So, other color concepts are to use cultural\Ncolors
Dialogue: 0,0:25:58.75,0:26:01.15,Default,,0000,0000,0000,,that people are familiar with. Like I said,\Nred
Dialogue: 0,0:26:01.15,0:26:03.78,Default,,0000,0000,0000,,and green. For some reason, Reddit uses orange\Nand
Dialogue: 0,0:26:03.78,0:26:06.15,Default,,0000,0000,0000,,purple for their up and down votes. It's kind
Dialogue: 0,0:26:06.15,0:26:09.36,Default,,0000,0000,0000,,of cute and it's, it's Reddit, where, I'm\Nnot
Dialogue: 0,0:26:09.36,0:26:11.34,Default,,0000,0000,0000,,surprised. But in a lot of cases, that could
Dialogue: 0,0:26:11.34,0:26:13.12,Default,,0000,0000,0000,,be very confusing for users.
Dialogue: 0,0:26:13.12,0:26:15.75,Default,,0000,0000,0000,,And they also use the sort of basic standard
Dialogue: 0,0:26:15.75,0:26:17.95,Default,,0000,0000,0000,,blue link. And I think we can do better
Dialogue: 0,0:26:17.95,0:26:23.98,Default,,0000,0000,0000,,than that. So here's an Etsy listing. Etsy,\NI
Dialogue: 0,0:26:23.98,0:26:26.72,Default,,0000,0000,0000,,would say, is like a pleasant, easy to use
Dialogue: 0,0:26:26.72,0:26:32.08,Default,,0000,0000,0000,,website. It's not super edgy. But that's,\Nthat's to
Dialogue: 0,0:26:32.08,0:26:33.82,Default,,0000,0000,0000,,their advantage. That's what they're trying\Nto do.
Dialogue: 0,0:26:33.82,0:26:35.52,Default,,0000,0000,0000,,So they have these blue links. You know, that
Dialogue: 0,0:26:35.52,0:26:38.33,Default,,0000,0000,0000,,is the sort of standard. You sort of skim
Dialogue: 0,0:26:38.33,0:26:39.95,Default,,0000,0000,0000,,over that because you're used to seeing that.\NAnd
Dialogue: 0,0:26:39.95,0:26:42.45,Default,,0000,0000,0000,,then they have the green around the actual\Nproduct
Dialogue: 0,0:26:42.45,0:26:46.22,Default,,0000,0000,0000,,information, and the green, go buy this button.\NGreen
Dialogue: 0,0:26:46.22,0:26:48.91,Default,,0000,0000,0000,,means give you my money.
Dialogue: 0,0:26:48.91,0:26:51.15,Default,,0000,0000,0000,,So, it's enticing. You know, a red button\Nwould
Dialogue: 0,0:26:51.15,0:26:53.46,Default,,0000,0000,0000,,be like, oh, maybe this is not good to
Dialogue: 0,0:26:53.46,0:26:58.00,Default,,0000,0000,0000,,do. I work for Rap Genius. Rap Genius has
Dialogue: 0,0:26:58.00,0:27:01.87,Default,,0000,0000,0000,,a black background and our, our bold color\Nis
Dialogue: 0,0:27:01.87,0:27:07.33,Default,,0000,0000,0000,,this sort of marygold yellow orange gold color.\NIt's
Dialogue: 0,0:27:07.33,0:27:09.74,Default,,0000,0000,0000,,very bold. But we think that it makes a
Dialogue: 0,0:27:09.74,0:27:12.94,Default,,0000,0000,0000,,big impact to have a black background and\Nstick
Dialogue: 0,0:27:12.94,0:27:14.89,Default,,0000,0000,0000,,with a black background. And we have this\Nargument
Dialogue: 0,0:27:14.89,0:27:16.94,Default,,0000,0000,0000,,all the time, like, is it too much? Are
Dialogue: 0,0:27:16.94,0:27:20.64,Default,,0000,0000,0000,,we, are we alienating people? But we're, we're\Ngonna
Dialogue: 0,0:27:20.64,0:27:22.38,Default,,0000,0000,0000,,continue on with it and keep trying to do
Dialogue: 0,0:27:22.38,0:27:25.05,Default,,0000,0000,0000,,it. And I think that it, it sets us
Dialogue: 0,0:27:25.05,0:27:27.79,Default,,0000,0000,0000,,apart in a really incredible way.
Dialogue: 0,0:27:27.79,0:27:31.54,Default,,0000,0000,0000,,I might be biased.
Dialogue: 0,0:27:31.54,0:27:38.54,Default,,0000,0000,0000,,So. So now what? Very fast, maybe too fast.
Dialogue: 0,0:27:38.74,0:27:40.85,Default,,0000,0000,0000,,It's hard. It's hard. There's a lot to design
Dialogue: 0,0:27:40.85,0:27:41.71,Default,,0000,0000,0000,,and you kind of have to think of all
Dialogue: 0,0:27:41.71,0:27:43.94,Default,,0000,0000,0000,,of these things at the same time. But I
Dialogue: 0,0:27:43.94,0:27:46.38,Default,,0000,0000,0000,,really do want you to be in these design
Dialogue: 0,0:27:46.38,0:27:49.73,Default,,0000,0000,0000,,conversations and feel like you know what\Nyou're talking
Dialogue: 0,0:27:49.73,0:27:52.18,Default,,0000,0000,0000,,about, because you do. You're on the internet\Nevery
Dialogue: 0,0:27:52.18,0:27:54.84,Default,,0000,0000,0000,,day. You see things. You like things. You\Ndon't
Dialogue: 0,0:27:54.84,0:27:57.42,Default,,0000,0000,0000,,like things. And you might not know why, but
Dialogue: 0,0:27:57.42,0:27:59.00,Default,,0000,0000,0000,,I hope that this gives you a little bit
Dialogue: 0,0:27:59.00,0:28:01.67,Default,,0000,0000,0000,,more vocabulary to talk about it and engage\Nin
Dialogue: 0,0:28:01.67,0:28:03.21,Default,,0000,0000,0000,,these conversations.
Dialogue: 0,0:28:03.21,0:28:07.00,Default,,0000,0000,0000,,So, every, every design that you work on is
Dialogue: 0,0:28:07.00,0:28:08.88,Default,,0000,0000,0000,,going to have elements of all seven, and you
Dialogue: 0,0:28:08.88,0:28:11.35,Default,,0000,0000,0000,,can sort of twist the knobs on, on things
Dialogue: 0,0:28:11.35,0:28:15.16,Default,,0000,0000,0000,,to turn them up, turn them down. And, and
Dialogue: 0,0:28:15.16,0:28:17.72,Default,,0000,0000,0000,,say, like, you know, we, we don't need that
Dialogue: 0,0:28:17.72,0:28:21.15,Default,,0000,0000,0000,,much contrast because we have a really great\Nflow
Dialogue: 0,0:28:21.15,0:28:22.89,Default,,0000,0000,0000,,and we want it to be really easy and
Dialogue: 0,0:28:22.89,0:28:24.90,Default,,0000,0000,0000,,we just want someone to go down the page
Dialogue: 0,0:28:24.90,0:28:27.21,Default,,0000,0000,0000,,and spend the rest of their lives on our
Dialogue: 0,0:28:27.21,0:28:29.64,Default,,0000,0000,0000,,website.
Dialogue: 0,0:28:29.64,0:28:31.76,Default,,0000,0000,0000,,You can use intuition. You know, you might\Ncode
Dialogue: 0,0:28:31.76,0:28:33.98,Default,,0000,0000,0000,,something and put it in the browser, and it's
Dialogue: 0,0:28:33.98,0:28:37.36,Default,,0000,0000,0000,,like, oh. Maybe this, this, you know. Technically\Nspeaking,
Dialogue: 0,0:28:37.36,0:28:39.36,Default,,0000,0000,0000,,this has the right amount of padding all around
Dialogue: 0,0:28:39.36,0:28:41.72,Default,,0000,0000,0000,,it. But something about it looks off. Like,\Nthere's
Dialogue: 0,0:28:41.72,0:28:43.22,Default,,0000,0000,0000,,a lot of tweaking and a lot of love
Dialogue: 0,0:28:43.22,0:28:47.92,Default,,0000,0000,0000,,that is worth giving that shows to people\Nthat's
Dialogue: 0,0:28:47.92,0:28:50.48,Default,,0000,0000,0000,,it's very well put together.
Dialogue: 0,0:28:50.48,0:28:53.16,Default,,0000,0000,0000,,And that's it. Thank you.