 I was just at the Sandy Metz talk, really awesome, really excited to follow up with no code. There will be no code in this. I'm sorry. I'm Jen, and I'm here to tell you about some elements of design. I always hear from developers that they don't know how to design, but I don't think it's true. You're incredibly smart people, and you can figure it out, and I'm here to help. Currently, I'm a designer and front-end developer at Rap Genius, a perfect website, designed it all myself. That's not true at all. So I think that we know by now we're living in a world of design, a culture of design. Apple is number one, and everyone loves it. So I think we have an idea of why design is important, but we have to remember that we're building these things, all of the things that we're programming every day. We're building them for people, and people have to be able to use them as easily and as pleasantly as possible. So designing will set you apart from other people. It will buy you goodwill and trust from users when they know that your site is well-designed. It's easy to use, and it's pleasant, and it's enjoyable experience. Design can serve as marketing for you. You can use it to sell yourself to people and have them trust you. And I would say that design is not just aesthetics. Design is also function. Form follows function. We know this in programming. We program around it, and you have to use this to sell your purpose. You can use design. So I also, as a developer, I don't want you to feel like you have to throw things over the wall to designers and say, I don't have any say in this. I don't know what I'm talking about, because you do. And I want to empower you to do so. Today I have seven principles here. Hierarchy, contrast, repetition, proximity, flow, typography, and color. And with these seven principles, I think that you can have a great base for working your way into design conversations. So a loose flow here is I'm going to define each principle, look at some bad examples, counter with some good examples, and then use these examples to give you some rules to use and fall back on. All right. So number one is hierarchy. Hierarchy is all about priority in your layouts. So you can see from this slide itself, I'll use all of these slides to show you how hierarchy works. The word hierarchy is number one. It's bigger. It's greener. It's the first thing that you're going to look at on this page. And it is the most important. It's what we're about to talk about. So you can see here's like a flow of hierarchy. You look at this big thing at the top. You look at the next biggest thing. You look at the smaller things. Before you even look at the browser or the phone or whatever you're designing, you want to ask yourself, what am I doing here? Why is someone coming to my site? You have to ask these hard questions so you can have great answers and be prepared. So bad example. This site, there's no clear hierarchy here. The first thing that you see is the logo. A good technique that you can use is to blur out your site and see if anything pops out. And the only thing we see here is the logo. There's everything else. This is the reason that someone is coming to your site. The headlines, the tag, the sidebar, all of this have the same priority. Totally boring. So a better example of hierarchy is this site. The first thing that we see here when we blur it out is this knowledge headline. The content the people are coming to the site for. The number one most important article. We do see the logo here, and it's important to let people know that this is where they are so that they feel comfortable here. And then the third thing that we see, so we've got the headline, the logo, and then the other actions that you can do on the page, say, I don't want to do that one thing, give people another option. That's the second thing that they see, third thing that they see. They see lots of things all at the same time. Buzzfeed, they definitely see lots of things all at the same time. It's so much going on. There's nowhere to look. I mean, you have these big pictures, but they're everywhere. Everything is asking for your attention. And if you tell the user that everything is the number one priority, then what you're really saying is that nothing is important. You're saying that this is all throwaway. And of course, Buzzfeed, they have to go down this rabbit hole. They're looking for the page views. But I don't think that's the way to get users to trust your brand. And I don't think people trust Buzzfeed. They know what Buzzfeed's doing. So I would go look at the stalwart like New York Times for a better hierarchy. You blur this out. There are fewer things catching your eye. We're humans. We're going to look at photographs. These look like, oh, these look like things I know. We sort of are tuned to blur out ads. We don't look at ads anymore. So we've got these two pieces of content. And then we're going to look at the text that is associated with the images. Then we're going to look at the big headlines, which is the biggest stories of today. And then sort of everything else. But there's a path here. And there's a flow that they use to guide you around the page. And by telling people that, like our priority here, is news. And we want to be serious here. You tell a great story for the user. Contrast. So contrast creates interest on the page. And by creating interesting differences for a reason, you engage the audience. So there is some contrast here. We have the bigger text, the greener text. It could be a lot more blinged out. But this is just an intro slide. It's not that important. So we can use things like line, shape, texture, color, and patterns to create contrast on the page. So here we have lines versus shape. We have opposite colors on the color wheel. We have this textured pattern versus a blank space. And there's also contrast with typography. So we have a huge headline, colorful, balanced by a much smaller piece of text. So something like this site, I would not say has great contrast. It's GitHub, great website. But they're not really pushing into the limit. And of course, it's not maybe in GitHub's best interest to really worry about that. But they're going with some defaults, black, white, and blue links. Not very exciting. And this, I think, is a bigger problem. There's the contrast of these examples that they're trying to show you, small to really sell themselves to you. You know, you can't see the actual features. So you want to be really bold. I think this is a better example of contrast. They're using this bright blue background, this actual photograph paired with sort of geometric text. So we have the geometric layout and this organic thing happening next to it. And we have flat white shapes versus blue and brown colors. It makes a really compelling argument for the idea that this product has their shit together and they know what they're trying to sell you. They know how to sell you something. This is a Yahoo widget section. It doesn't have great contrast. The headlines barely stand out. There are a lot of different types of content here, but they all look the same. And you can't really interact with them in different ways. So you can push it a lot further than this, I think. This is an Evernote screen where the different types of actions that you can take have totally different designs. They have this dark background with the lighter green color. There's a good contrast. You can tell that they give better love. You know, the section for creating content looks different for the section for looking through the content you've already created. And there's a new way to look at each thing. So another not great example of contrast. There is some stuff here. You know, there's big. There's big techs. There's small techs. There are colorful buttons. But it's sticking to the defaults. And it's not really engaging the user in a way that might be new, fresh, or memorable to them. So I'm going to say that they're falling into the bootstrap trap. We all know it. We all love it. It's great. I mean, no, it is great. No, I messed the joke up. The bootstrap trap. It's terrible. I'm just kidding. It's awesome. I'm saying that you can use it wisely. There are basic there. There are tons of key and amazing design features there that you don't have to worry about, that you can go on to build the fun parts of your product. But I'm saying that this is also a bootstrap site. And they've done a ton more work here to make it really memorable. They use a lot of different elements. They use texture. They use an illustrated background. They use this yellow color and scale to set themselves apart from other services that you might want to use. And you can still use bootstrap, and it's really important to. It's really important to build on top of it to make this is also a bootstrap site. But they use this image in the background. They sort of break out of a grid to call out certain elements of their product. It makes it much more compelling for people. Number three is repetition. Repetition creates patterns and expectations which unify and strengthen your message. So here we have a bullet list. We have an ordered list. This is something that is a tool that we're familiar with grouping things together. Everything looks the same, except for the one thing that we're calling out, which is the section we're about to start. So there are different things that you can use to create repetition, like spatial relationships, bullets, similar colors, formatting. And all of these create patterns that let people know that they are safe in your website, in your website, on your website. So you all know, don't repeat yourself, but that's not true with design. And it's not really true with code either. You do need to repeat yourself, but in ways that are purposeful and ways that you can do it once, and then you never have to do it again. You set up a system and it's like, oh, we have a new button. I guess it needs to be a different color because it's more important. No, I mean, set up some basics and then never have to code them again. Well, you know, that's always the dream, right? So this is a Best Buy list of products, but they have a ton of different ways that you can interact here. There's so many different buttons and dropdowns and checkboxes, and imagine having to code this. And every time you try to add this new feature, you have to design a new way to put it on there and you tack it on and it doesn't really fit. So it's confusing for the user, whereas this site, you know, you see the links across the top. They all look the same. If you have to add a new one, it just goes in there. It's using a grid, which is comfortable for users, and they use similar elements to create consistency. So they have these icons that are all the same design, the same matching typography, one, two, three, four. We know what we're doing, we're not surprised here. This is an old version of the Facebook feed and they figured it out by now. They figured it out a lot better, but you can see here when you drill into this content, it's really hard to see what the pattern is. It's like, I think this is a link that's attached, but there's so many different things going on that users can't learn the pattern and then as they float on the feed, move smoothly down it. This is an alternate example where it's a much better sense, there's a much better sense of repetition here. We have this bar along the top. You know where you are, you're in this context, and then each headline looks exactly the same, each set of metadata looks exactly the same and they use icons and alignment and different colors to create a pattern and stick to it. So number four is proximity. One second. So delicious. Okay, proximity is about grouping related elements together by using space to create associations between them or using empty space to disconnect unrelated elements. So here we have one concrete group of elements. We have a list and that's all there is on the page. There's nothing else distracting you. Know that we're in this section, we're about to start something new. So some tools that you can use to create proximity are using columns, you need to group similar action items together and using white space to separate things. So this is an example where proximity is not being used, it's overwhelming. There's too much information on this ESPN site. There's all different kinds of information just packed on top of each other and it's very confusing to parse. There's no white space here, they're just trying to shove it all on your face. And a place where proximity is really important is for form. So this is a much better and clearer way to sort of get some information and input some information. So that tells you what section you're in, there's some basic form patterns, all of these fields are required, lining the labels up together. And they use white space and they're grouping elements in a small number to make it easy to use. So we're all familiar with Craigslist, great website, we've all gotten, maybe your apartment on Craigslist. You can get there and it gets the job done but when you drill down it's like, what am I looking for? There are so many things here and they're all jumbled together. This is 40 things and they're not alphabetically ordered even top to bottom, they're ordered left to right. It's very hard to see what you're looking for. A good rule is to only group elements together in groups of three to five. It's the easiest way for humans to understand and it's going to make users much more happy to use your product. Craigslist, the listings, also have a ton of information right here. They're all jumbled in together. It's really important stuff. It's something that's going to, you just need to skip this whole listing because it doesn't apply to you. But this is all different kinds of information, there's information about the apartment, there's information about the listing on the site, the price, which is the most important thing, but they all look the same and they're all grouped together. So a better example of this is Airbnb's site. They separate these things out in a better way. At the top, they have the information about the booking, the comments, you can book it now, and then below they have the information about the apartment. So it makes it much more pleasant to scan down and they also have the big images that helps. And it makes better use of proximity here. And I would say a word of warning is to really make sure that your forums are fun and very straightforward to use and proximity is the best way to make sure that's happening. Put the credit card information in a different place than the shipping address. You don't want to overload users or have them be unclear like how much further they have to go, how much they've already completed. Proximity is a great way to use that. Number five is flow. So you're flowing down this list, you're not paying attention to the things you've already learned and then you hit flow. And that's where you stop and you're excited for the new section. And that's an example of flows. So sites are not pages. They are experiences with many states and possibilities. So you think of where you want the user to end up and you let that influence the design. So I would say there are two types of flow and we're just going to talk about one today. There's flow within one page. So what the user does on just one page and then there's flow between many pages like in an Amazon checkout process. You go through many different pages but they make that as smooth as possible so they don't lose you along the way. So we'll talk about flow within one page today. It's a little simpler. So one sample idea for flow is that you're looking at a product, you're looking at the details and then you add to cart. So this is the first step of the checkout process. And it's most important for you as the seller to make sure that they click that buy button. So you don't want to put anything that's going to distract them in between the beautiful image and the headline and the buy button. And it's customer service. It's customer service that makes it easy and fun for someone and that people have trust that they know how to get there and there's goodwill when something goes wrong. Another example of flow is you're reading a story on a site and you want someone to read another story. I would say that a bad example is Hacker News. We all love it and we're all there all the time but what happens when you click a link? You leave the page. It overwrites the page you're writing on. You're sitting on. You read this, you click away. Every single thing takes you away from the site. And instead of incentivizing you to stay on the site or to leave and come back, it just incentivizes you to leave. I mean you know to come back because of the freshness but I think there are better flow options there. Something that we're starting to see a lot more often is that you get to the end of a story and then you go immediately to a new story and it makes that flow seamless so you don't even have to think about it. Another not great flow is like I'm looking at this infographic and like where do I go? Do I go from one to six? Am I supposed to read down? It's pretty aesthetically pleasing but it's very contradictory in the ways that you're supposed to scan the information. A better way for flow is to give people one path, one path that they have to follow and make sure that it's very clear. So we're familiar with this idea of timelines. With this, you know, you're zigzagging down the page which is not sort of the normal flow of just going straight down or straight to the side. But they make it very clear with the icons, with the marks along this timeline. And so you feel very comfortable and you know where you're going next. Here's a form that's missing a ton of the helpers that we've come to know and love in forms and there's no special stylings here but the worst part of this flow is that it gives you the information and instructions for how to fill out the form two thirds of the way down the form. So you have to go back and revisit all of the stuff that you've already done and be like did I do this right? The best way to do these sorts of things is to give feedback too. You can give feedback for when someone's filling out a password. You say this is a terrible password. Keep going, keep going, you're getting there and then you've reached the end and you're ready to go. So number six is typography. A whole generation of designers on the web have made it very easy to access good typography and good web fonts and there are really small changes that you can make to default settings that make a big difference and a big impact on readers and readability. This is a simple presentation. I'm using one typeface the whole time. I would recommend one or two typefaces are a really great start for defining your product and your sort of personality that you want to give to people, show to people. So this is a condensed typeface. It's very loud. Trying to like throw all these things in your face really quickly. It was originally designed for highway signs and industrial machines. So you can sort of think about these and what impact that might have. So there is a sexier headline on the left and a sillier headline on the right. You can be very playful with typography too. Couple of services you are perhaps familiar with. Google web fonts, Typekit, MyFont, some things are free, some are paid, but it's not that much money and it makes a big difference. So another love to love Wikipedia actually, tons of information, spend hours and days of my life reading it, but it's so hard to read sometimes. The lines are so long across. You get to the end of the line and you lose your place. How do I get back to the beginning? They have the footnotes, which can be distracting sometimes. So a better way to look at typography is set some rules. The base line length is 35 to care. Sorry. 35 to 65 characters long, just count them. And that's the best human readable length for people. And the minimum font size to line high ratio is about one to one and a half. These are just write it down and don't worry about doing anything else because this is the best way. And if you're going to have a lot of reading on your site, look at other sites that do reading experiences in a great way. This is readability. They have a lot of different styles going on so that they can handle different types of content. And just a little love goes a long way to typography. An example, I love these love to hate things. Drudge report. Drudge report, impossible to read. Everything looks exactly the same. There's the headlines, there's sections or categories. There's social links. You can't even tell what you're looking at or why any of them are different, why something should be called out to you. I'll bring up the New York Times again as a great example. There is tons of information here as much as there was on the Drudge report page but they've broken it up into different sections and they do a lot of different typographic treatments that tell you how important or how not important something is. So they have section headlines to differentiate this section. They call out certain articles. They have whole category overviews with a different style and then they have listings which is user-generated content. They're all something different and they do use a custom typeface. They're a site for reading and they need to make sure that they give that love. So this is another site. You can use typography in interesting ways. You can layer things in a way to create a personality. This seems like a very elegant site. And just think of some adjectives that you want to convey to people and go from there. So the last element principle for today is color. I would say color with an asterisk because I don't think you should rely on color too heavily and I think it's one of the lesser important things. There are accessibility reasons like if you have colorblind users or your user base is on a ton of different monitors, the colors could look super wacky. And semantic reasons. Colors mean different things to different people. We have a lot of sort of like Western culture, green means go, red means stop, white means this, black. You want to be sensitive about your target audience and play into that. So three ways that you can adjust color to stand out are hue, the actual color it is, saturation, how bold it is, and value, how light or dark it is. And I would recommend using all three together to create different color combinations. So Facebook, we're all familiar with the Facebook blue. It's so boring, it's so sterile. It's not that exciting and we're not there for the color. We're not, you know, Facebook has to target every person in the world. Facebook is for everyone and so they can't, you know, they can't go bright orange and or purple or whatever color. Blue is a very generic color and that's what they have to do because that's targeting their audience. So I'd say it's bad color, but it's, you know, you have to be thoughtful of that. So a site to counter it is V-Files, which is a shopping offshoot of V-Magazine. So it's very fashion-related, very young audience, very urban. So they have yellow as their color that they use everywhere and they use that to entice themselves to their target audience. If they did the Facebook blue, people would not think it was as cool or as interesting. So you can use a color to be bold and pick one or two and go with them. Don't pick 10, it's gonna look like BuzzFeed probably. So other color concepts are to use cultural colors that people are familiar with. Like I said, red and green. For some reason red, it uses orange and purple for their up and down votes. It's kind of cute and it's red, I'm not surprised, but in a lot of cases that could be very confusing for users and they also use the sort of basic standard blue link and I think we can do better than that. So here's an Etsy listing. Etsy I would say is like a pleasant, easy to use website. It's not super edgy, but that's to their advantage. That's what they're trying to do. So they have these blue links, that is the sort of standard. You sort of skim over that because you're used to seeing that and then they have the green around the actual product information and the green go by this button. Green means give you my money. So it's enticing, a red button would be like, oh maybe this is not good to do. I work a rap genius. Rap genius has a black background and our bold color is this sort of merry gold, yellow, orange, gold color. It's very bold, but we think that it makes a big impact to have a black background and stick with a black background. And we have this argument all the time like, is it too much? Are we alienating people? But we're gonna continue on with it and keep trying to do it. And I think that it sets us apart in a really incredible way. I might be biased. So now what? Very fast, maybe too fast, it's hard. It's hard, there's a lot to design and you kind of have to think of all of these things at the same time. But I really do want you to be in these design conversations and feel like you know what you're talking about because you do. You're on the internet every day. You see things, you like things, you don't like things and you might not know why but I hope that this gives you a little bit more vocabulary to talk about it and engage in these conversations. So every design that you work on is going to have elements of all seven and you can sort of twist the knobs on things to turn them up, turn them down and say like you know we don't need that much contrast because we have a really great flow and we want it to be really easy and we just want someone to go down the page and spend the rest of their lives on our website. You can use intuition, you know, you might code something and put it in the browser and it's like oh maybe this, you know, technically speaking this has the right amount of padding all around it but something about it looks off. Like there's a lot of tweaking and a lot of love that is worth giving that shows to people that it's very well put together. And that's it. Thank you.