 All right. So in the next 45 minutes or so, what I'm going to try and do is go through a real quick overview of some real basic design principles and techniques that you can use. And then we're going to look at some design elements that are real common in web design, things like type and color and images, and some real practical things you can do to use those things better in your designs. And then we're going to apply all this to a pretend website just to kind of see how this all comes together. And then I'd love to take any questions you guys have about applying these things or questions you may have about design. And one of the things that I think is great is that this is a really good time if you're getting into WordPress and you're trying to design things because the tools and frameworks have really made it a lot easier than it was five years ago to be able to do interesting visual stuff with a lot less experience. There's great frameworks. There's great themes. The CMS itself has all kinds of tools it didn't have that makes it easier. But the problem that I see with a lot of clients of mine is that they have to have all these tools that they're disposable. They don't know what to do with them. So they don't know what to do with all the type. They don't know what to do with these images. They don't know how to integrate all these things. And so they've got all these, all this power at their fingertips, but they don't necessarily know how to approach it. And so hopefully I'm going to be able to give you some tips to point you in the right direction. So real quickly about me, my name is Matt Puzetieri. I'm the owner of Flying Dog Creative. I've been a designer for about two decades, mostly an interactive web. Those are my two daughters and a gorilla from south of the border. Before I started running my own business, I was an art director for about eight years. And so I spent a lot of time working with designers, teaching designers. And so we spent a lot of time thinking about how to communicate things a little better, especially on the web. So last night I was talking to some of the speakers who were also presenting here. And someone raised this question about, you know, to a certain degree, does design even really matter? And I think it's actually a fair question, because I looked it up and there's 180 million websites currently live on the web. And this is the seventh most popular one, right? So almost everyone in this room has been to Wikipedia. And arguably it's not a pretty site, right? I mean, it's, it looks almost exactly like it looked 15 years ago. There isn't a lot of attention to splash or style. It's very functional. It's very plain. This is the 60th most popular website in the world. And I'm venturing that almost everyone in this room has been to Craigslist at some point. And they've been serving up big stacks of blue links forever, right? And yet it's massively popular. Almost every city in the world has some version of Craigslist. So some people make the argument, they say, you know, look, these sites are incredibly popular. Their design is almost non-existent. So if you have good content, you don't really need to have great design or great experience. So I'd have two counterarguments to that. And the first one is that both these sites, they do well. And they're very successful. Everybody knows them. But that's not to say that they couldn't do better if their design was improved in some ways. I use Craigslist all the time. I recently moved from Washington, D.C. to North Carolina. And Craigslist is very functional, but it can be a real pain to use. Posting things, editing things, browsing things is really difficult. So to some degree, just because you have a website that's kind of ugly and it's doing well, it doesn't mean that it couldn't do better if some things were improved. But secondly, the bigger argument is Craigslist and Wikipedia, inarguably, have tremendous content that people already want. And more than that, they already have a trusted brand and they have a trusted experience that most people already know about. And the bad news is, and I don't want anyone to take this personally, but this is the problem that everyone that I work with has. No one really has a website that has that kind of demand. Nobody shows up and everyone knows your product, everyone knows what you're doing. So for the rest of us who aren't Craigslist or aren't Wikipedia, we have to do a better job hooking visitors in when they come. Charpie did a study recently and they found that 15 seconds is about all you have at the most before someone is going to stay on your website or leave. And I've seen other research that says it's a lot less than that. It can be five seconds. So you don't have the benefit of the doubt that Craigslist might have where people are going to be willing to put up with kind of a mediocre design. So hopefully you want a design that's going to help hook people in. So there's a couple things that design does. And the first thing it does, especially if you're a website that's kind of trying to gain users or visitors, is that it builds credibility. There was research both by Google and Consumer Reports and Stanford in the last few years has shown that a better design site gives a sense of credibility and trustworthiness. So they show the same exact content but one is designed well, one is kind of just raw. And when they surveyed people they found that they automatically gave the better design one more credibility. They trusted it more because it looked better. Secondly and more importantly I think is that good design makes it more usable. So the design isn't necessarily about the aesthetics of it but if you do it well it guides users to do what you want them to do on your website. Whether that's read your articles, buy a product, subscribe to something, sign up for a service. If you have poor design you often lose people before they can get to those things. They don't find your calls to action, they don't find what you're looking for. There's a man named Don Norman and he's a cognitive scientist and he did this book called Emotion and Design and he did this research where they actually looked at the human brain and the reactions it has to looking at visual stimuli and he came up with this article called Attractive Things Work Better. And what that meant was they actually find that there are sort of endorphins that get released in the brain when people are stimulated with something they find beautiful or aesthetic. I mean in a way we all kind of know that instinctively. But what that meant in practice was and this applies to whether it's a sports car or an iPhone or a laptop or a website that's beautifully designed people are much more willing to be forgiving of it. They're more willing to stick around a little bit longer and they're willing to trust it does better. If it doesn't give them that sort of aesthetic attractive like I enjoy how this feels, the experience they're much more likely to give up on it and just click away to something else. So what is good design? I'll tell you what it's not. It's not pretty. So there's often a sense that designers are brought in to kind of make things look cute or add some splash or sizzle and that's really not what I think design means for at least most serious designers. This is Dieter Rams and he's sort of a towering revered figure in the world of design and he had influence on architecture, on industrial design, graphic design and even web. He had a lot of influence on Apple. And so he came down with these ten things of what design is and this is still taught in design schools and art schools as like a funnable way to think about the meaning of design. And I won't get into all these in depth. There's whole books written on this. But only one of these is what people typically think of as design and that's aesthetic, right? People tend to think of that as like this visual experience but really he talks about design as being innovative and useful, understandable. It doesn't get in the way. It's honest so you're not just trying to mislead people with a false presentation. It's sort of durable and long lasting. There's a lot of tension paid to the details of something. It's not wasteful. And the last one, which is part of my favorite, is as little design as possible. That you don't just have stuff there to get in the way. So that's Dean Aram and that's his sort of timeless definition of design. Now this is me and I'm going to break it down to one definition that took me a while to pose to get just the finger just like Dean Aram. So I would say those are all valid definitions of design but I would say for web design if you focus on just this making websites easier to use and understand that'll take you a long way. And as we're about to dive into some of these design principles and design elements I always want to suggest to people that I've worked with that anytime you're making a decision whether it's a graphic or a color or some kind of graphical element that you're putting on your website ask yourself is it making the site clearer to people? Is it making it easier to use? If it's just decorative or it's just splashy then usually you have to really question if it's worthwhile. So let's go ahead and dive into some of these principles of design. And again these things can be gone into depth but I'm just going to touch on some of these so you can get some ideas of these basic principles that people use all the time and I think you guys can apply to almost any project you're working on. And again people tend to think of like principles design as this lofty artistic thing but I tend to think of it more like this like the Swiss Army knife. These principles are things that you just take out and apply to clean up designs and make them more functional. And these are the eight ones I'm going to go through real quickly. Let's start with contrast. So contrast helps you kind of juxtapose things and it gives you a way to organize your content and sort of highlight the differences between things. If you're a designer one thing you call a time is can you make this thing pop? Can you make the logo pop or some graphic? And usually when a client is saying that what they really are kind of saying without really having the right vocabulary is that you don't have enough contrast that the stuff is all kind of mushing together and the things they're trying to call attention to aren't getting highlighted. So here's some examples of the kind of things you'd want to have. You might have light and dark elements on your website or black and white. You might have thin lines and thick lines or text that's different weight. You might have cool colors and warm colors contrasted side by side or near each other. You might just have the size of things whether it's the size of an image or the size of text that does that. There's a really great book and I'll mention it at the end of the talk too called the non-designers design book by Robin Williams. And it's a great resource if you're just looking to get into design. And one of her quotes about contrast is really helpful here. It says that there's two items that are not exactly the same that make them different, really different. So let's look at like a practical example of this in practice with type. Let's say this is in a newspaper or a website and you've got a headline giant robot is trying to crush Asheville. And then below that it's supposed to be a subtitle. It says police chief calls in National Guard. So what's kind of not right about this is that these aren't the same font. They're kind of a little bit off. It doesn't really work. It's hard to tell that this is a header and a subhead, right? And what I always think about is the shining. I don't know how many people remember this scene in the movie. So the little boy is writing his tricycle in this haunted mansion and he comes around this corner and there are these two girls that show up. Now they died like 50 years ago. This is a spoiler if you haven't seen the movie. But they show up in the hallway and they say come play with us. And it's incredibly creepy. And it's creepy one because these are ghost children. It's creepy also because these twins are sort of telling him to come play with them even though they're dead. But what I always notice about this that I think is really creepy and it's pertinent to what we're talking about here is they're not twins. If you look really closely, one is a little taller than the other one. And one of them, the dress comes to here instead of here. And so they're similar but not quite the same. And so it's kind of eerie. If they were just perfectly identical twins it'd be one thing. Or if it was one girl in a black dress and one girl in a white dress it'd be another. But the fact that they're almost the same but not makes it feel like something's not quite right with this. So that's kind of what we're seeing here. One of these is Gaudi font and one is times in Roman and they're almost the same size. And it almost looks like this is a mistake. I don't know how many people have ever worked on a document with other people like in Microsoft Word and a bunch of people pasted stuff in. And then there's like four different fonts and sizes because it's all jumbled up. So you don't want people to think on your website that you made a copy and paste there. And that's kind of what sometimes things like this look like because you haven't used contrast. So if instead you were to take that first line and make it larger and like a lighter font and then have that subtitle more bold, it stands out a lot more and you've got a much clearer sense of what you're trying to communicate here. The style doesn't really matter. You could do like a serif font here that's more blocky at the top and a different one at the bottom. But I think you see what I'm saying. It's clear enough that it's clear that you're distinguishing these things with contrast. And here are some real life examples. This is the Atlantic and they have a really big headline and the subhead is smaller but not quite as small as the body text. So it's really easy to scan this and the contrast helps you really understand how this article is put together. This is the New Republic and they have very similarly a really big headline, a subhead and they even have a little box surrounding that to really help it sort of stand out from the rest of the article so you can kind of scan it. And it isn't just text, you can do something like this where this is a nonprofit called Shafko and they, most of the site is very light and kind of open and clean and monochromatic but they use very judicious amounts of color. So the two things that really jump off besides the logo is this big red donate button on the top and then they've got this big blue box that's about this story about one of the people that this nonprofit has helped and it really guides the users to want to do one of these things. It just pulls you in with the contrast and color from the very kind of gray site. So let's talk about repetition. Repetition is another key principle that you want to try to apply and repeating things on a website helps give you this sense of consistency that again everything in your site isn't sort of randomly disconnected. It ties elements together and gives you sort of repeating patterns that people can kind of get signals by. And it also can add some visual interest to a page that might be a little too vanilla. I think we we're already used to this concept in everyday life. I recently had to get a North Carolina driver's license and they had this DMV test I had to take where they showed these symbols and they don't have this stuff in the middle and you have to explain what they are. And I think part of the thing is does anyone know what that yellow triangle is supposed to mean? Right. Or caution. That there's something you have to be learning for. Anyone know what that little yellow house is? Schools. So nobody can see the pictures that are supposed to be in this but we're conditioned from years of driving or just being around. Anyone in this country you'll see these signs and these colors and shapes are sort of ingrained in us to have meaning. And that's kind of what you want to do on a website. You want to try to create patterns that are familiar to people that help them understand that you're trying to convey on your website. And so the things that you want to repeat and be consistent with are things like type styles, borders, colors, shapes, icons. Let's look at a couple examples. This is Ben and Jerry's website. And Ben and Jerry even though they're owned by Unilever and they're a massive corporation now they still sort of have this small ice cream shop from Vermont kind of ethos. And so if you look at their website they take a big kind of puffy font from their logo and they use it for their navigation. It's a little hard to tell from here but it's also like on their headers. But they kind of put that in judicious places so you get the sense that this friendly Ben and Jerry's Vermont font is kind of their personality and they reuse it and they repeat it through the site. And it's a little hard to tell on this projector but these photos have like a thick white border around them. I'll kind of scroll this down a little bit. You might be able to see it a little bit. They're like these white borders like the photos, I'm kind of dating myself here, but you know the photos from like the 1970s that used to have the thick white line around them? I think it's not an accident. It's meant to kind of evoke that sense of kind of family old style things. And even these little ribbons that are down over their new flavors that has that same like, you know, a ribbon that you found at a country fair or something. Altogether they repeat these elements throughout their website to give you this sense of Ben and Jerry's as this comfortable friendly robot brand. This is Annie's. They do sort of organic natural foods and they do very similar stuff. They use this big heavy kind of old fashioned font that kind of goes in with their personality of being sort of a natural wholesome food provider. And because they're also very much in the organic products, they have these green colors throughout the website. It's really hard to tell. All these links by the way, I'll have a link to this presentation. You can go to all these websites through the presentation later. If you were able to look more closely like their little buttons have little trimmed edges, like it looked like someone cut it with like scissors. And again, it gives that sort of handcrafted style. And again, they just keep repeating these greens and those same buttons so that you get that same sense of style that kind of reinforces that. Another key principle of design is alignment. And alignment's one of those things that I think a lot of people just get wrong because they just don't pay attention to it. And it's really just making sure that there's a relationship between all the items on the page that kind of brings everything together and it kind of unifies the page by kind of connecting all the different pieces of a page. And I'll show you what I mean. This is from 538. And this is just a story on their web page. And at first glance, it looks like a nice tidy page. But if you start to look at it a little more closely, you'll see how much attention they get to making sure that everything kind of lines up. So first you get kind of these, you know, the navigation and the logo and the left side all line up with that image. And then they make sure that the head lines and the subheads and everything inside the star of the story is aligned very carefully. The side bar, the headlines, the little header, the images, they're all real clearly put together. And then the right side, same thing. And then even horizontally, you'll notice that all the alignment, all the things in the top of the story line up with the things in the top of the side bar. And then if you go further up, the logo itself, the line goes straight to the middle through the middle of those little social icon buttons. Like they're lined up kind of perfectly. So it ties them all together with this kind of invisible line. And then the same thing with that, I know it's hard to see, but that little hamburger icon on the left side, the middle one sort of is aligned with the middle of those words on the navigation. So again, well-designed websites have these kind of things all the time that tile those elements together with good alignment. And then when you take it all off, obviously you don't see these lines, but it gives you a sense that this website was very well kind of put together in a way that was sort of conscious. The next principle is proximity. And really, this is just about how far or close things are to each other. And basically, when things are close together, it implies that these things are related. And it kind of groups things and ties them together. It helps you organize the content on your website. And the converse of that is true also. So if things are separate, it helps you understand that these things aren't connected. And I'll give you like a quick example of kind of grouping items with proximity. I see this kind of thing all the time, I see this all the time on websites. So let's say you're on a staff page and they have developers, designers, and then they have a bunch of names. It's not that this is horrible, they actually bolded the headers so you can kind of follow it. But if you're glancing at this quickly, it's still not necessarily the most easy to follow presentation of this. If you just allow a little more space between these things, separating them with a little bit, it creates a more natural grouping of these items so you're able to understand how they're organized a lot better. And you can see a good example of this on the New Yorker. This is one of the sections where they're showing the previews of the page. They do a really good job here with these previews of the stories where the thumbnails, the date and author, and all the information about it is all very closely tied together with a good amount of space between them so that it's real clear where one story ends and another one begins. Hierarchy is another idea that I think a lot of times people miss. And a lot of websites, if you put them together, they just want to stack a bunch of stuff. They just have a whole bunch of stuff they want to pile together. And if you have good hierarchy on your page, it really allows people to focus on the most important things first. This can be a hard thing, but I worked at a lot of organizations where I know what it's like to have eight different teams coming to you saying that their thing is the most important thing to have on the home page and everyone's fighting for that space. But as much as possible, you want to fight to have a very clear hierarchy of what someone should do first or read first when they come to your website. It allows it to sort of emphasize those critical things. So you can have this in just stories. So this is like the most common thing, right? You have a headline and then a subtitle and then the text for a story. I mean we see this all the time. Another real common thing is a headline, some text, a subhead inside the story, a little more text and another subhead and a little more text. These are really important because Google sees these things and if they're formatted right, Google is better able to understand your content and distinguish a header from just text. But you also see this in the layouts as well, not just the stories. So this is the New Yorker again and they do a great job here where it's very clear what the first and most biggest story is on their page. Then you sort of get the secondary stories. The headers are a little bit bigger than the ones at the bottom and they still have a thumbnail image. And then you get three more stories that are smaller, they don't have an image, but they're still relatively prominent. But it's very clear what the intent is for the reader to do it. They're sort of signaling to you through like the visual hierarchy of this page which story is most important, what the next two are, and they kind of guide people down in a logical way. This is the Guardian and they do this with a very different kind of layout but it's the same idea. You've got a very bold, prominent first story. You've got two sort of secondary level stories and then you've got several stories that are below that with just a headline, no teaser, no big image. And again, this is really important because people often don't know where to go with your website and whether it's a clear call to action or guided into the most important articles, having a really clear hierarchy can really guide people in the right way. Let's talk for a minute about consistency. Consistency kind of, it's similar to the idea of repetition, but it's really more being really mindful of certain styles being applied consistently across your whole site. It provides visual cues, it establishes a style and feel, and again it kind of organizes your information in a really clear way. And these are the kind of things that you want to be consistent with. Type, links, images, image sizes, colors, buttons, forms, the space between things, having a consistent layout on certain similar kinds of pages and even the navigation. NPR does a really good job with this both on like the form and the style being really consistent. So if you look at NPR's logo, it's now these kind of blocky lowercase letters. And they've taken this and they've kept that style consistent with a lot of the other elements on the page. I know it's a little hard to see on the screen, but their navigation is all lowercase and it's the same style of font, that same blocky font. And then they've got these little kickers above headlines and they also have that same lowercase font that guides things along. The colors are very consistent. This is an inside web page, this is one of their blogs. And they have a different logo for all tech considered, but it also kind of echoes that lowercase thick slab font. And here the subhead or the sub navigation uses that same style that you have before. So stylistically they're being really consistent and there's been a real mindful effort throughout the website to sort of keep these things moving in a way that they're consistent from page to page. So it very doesn't feel like you've got an ad hoc design. The spacing also matters and if you look real closely they make a real good effort to make sure that everything is consistently spaced. The space between the sub navigation, between the navigation, the space between images. It's kind of, you often expect horizontal stuff to be this way, but they're really good about vertical space too. If you look there, all the spacing between these elements and it's a little hard to tell on the screen, but there's lines in between those elements. The spaces before and after those lines are real consistent so that it feels orderly. It feels like there's a real structure to what they're trying to do and you know what to expect when you're on these sites. A very different website is McSweeney's. I don't know how people have gone to McSweeney's but it's kind of like a literary journal and part of their whole personalities it's almost like a hand printed letter or something from 100 years ago. So they have this real old fashioned typeface. They have these thin lines throughout the website and they also have these hand drawn little symbols and icons. So if you go here to one of their inside pages, again they have these little lines they were dividing things and they feel like these old thin lines from the old printing days before you had digital publishing. They also have these little ornamental dividers that are kind of like something you'd see in a wedding invitation or something. Again you don't see these much on the web but it's part of their personality. It's part of their design and they use these throughout the site to separate some of their sections and again it's a small thing. It's the kind of thing you don't need to have but it kind of builds this brand and personality of McSweeney's being an old fashioned journal that just happens to be on the web. This is actually their store where you can buy some of their stuff and even here they've got these little dividers here, the same lines and throughout the website the whole thing feels like it's from one design put together. Simplicity, this is another key principle that can be a real tough battle a lot of times. You always want to keep your design to the essentials of what you really need to have on there. Going back to what I said at the start, what's really critical to make the site more useful and to communicate something. If you have stuff that doesn't do that you typically have clutter and distraction and so keeping your site as simple as possible really allows people to focus on the stuff that you're trying to get them to do. Zendesk is a service they do like customer service for people that don't have enough people to do it themselves and their website is like two headlines and a couple bits of text and a button to try their product. That's about all there is. If you're not interested in the service you're probably not going to stick around but they don't spend 600 words trying to explain to you on their homepage the benefits of what they do. It's incredibly straightforward and simple and it can be very effective just to get people to do the trial and get started. Dropbox is very much the same way and I'm imagining at least half the people are more in this room probably use Dropbox. One reason I think Dropbox has been really successful is that they make it incredibly easy to get started. This is their homepage and it's not much more than what you see here. There's a basic thing that explains what Dropbox is. It tells you how it works and then they let you sign up and there's a little bit if you were to scroll down that goes into it a little further but that's about it. Now Dropbox has tons of articles and how-to pages and resources for how to use Dropbox in a million ways but they don't bury that on the homepage. They don't put it there so that it overwhelms people. They keep it really simple so that the most important thing that they want is to get you to sign up and that's what the homepage is designed to do. One more example is Fitbit. Their website has tons of information as well but their homepage is really focused on just getting you to look at these products so they really showcase the Fitbit watches and a place to find out more about it and a real basic description of what it is. Again, it's real simple. It's focused and I think it can be very effective in getting people right away to what they want and that's to look at their products and hopefully buy one. Here's a couple of practical examples on simplifying your site that I think can be useful. The first one is just throwing out your extra boxes. This is Amtrak's website and it's kind of a nightmare because you can try and count but I know there's at least 16 boxes on this website right now and my guess is that 90% of people that came to Amtrak just wanted to use this one on the left to buy a ticket but they've got all these little things on the right that are like little ads. They've got stuff for the kids club. They've got smart fares and auto train tickets and it's just kind of overwhelming. There's so much going on here. There's so much noise that gets in the way. It seems to me that basically this thing on the left is the most critical. Maybe tracking a train status like if you want to go pick up your husband or wife from the train station and you want to know if it's on its way and this plan your trip thing is kind of a big deal because they have a real elaborate application that lets people do vacation planning with Amtrak but the rest of the stuff, it's not that it's not important it just doesn't have to be on the home page. It doesn't have to be overwhelming users with all these options. Interestingly I did a talk about two months ago at a conference and this is what Amtrak looked like then somehow in the last two weeks or so they just redid their site and now it looks like this. So they basically did what I was just sort of talking about which was really focusing on this, you know, their planning map and really simplifying it down to have the essentials of booking the ticket. If you look at some of the other stuff that they still have there's under there like if you look under deals there's now a navigation thing but they put all that stuff under the deals navigation and they wisely put some of the stuff elsewhere from the home page and personally I still think the ticket thing should be first but they're not my client but I think this is obviously probably going to make the users of Amtrak a lot happier and this is probably a better experience for them when they come to try and use Amtrak to get a ticket. The second way you can really kind of simplify your website is to tackle the navigation. This drives me crazy. This is Xfinity's website and I can't stand it because it's basically an entire page of navigation. It's like it's designed to create a seizure so there's like this big black navigation at the top then there's another navigation that I guess is under shop but it looks like it could be the main navigation but then on the right side there's a big set of options to pick for your products which I thought was what the stuff at the top was supposed to do but then they've got this deal finder thing that's kind of like another navigation with more options and it's just sort of overwhelming so that's horrible but what's even worse is if you look a little more closely there's things like my account and then two items over is my Xfinity so what does that mean? Like if I wanted to say add a service to my Xfinity service, which one do I go to? Do I go to my account or go to make my Xfinity? So they've got these ambiguous fuzzy labels that somehow must have come out of different divisions within their company but it's confusing to the users and it probably frustrates people when they're just trying to check their bill or they're just trying to cancel their cable. So I would say when it comes to navigation two things to keep in mind. One is use clear unambiguous navigation labels. I run into this problem sometimes with clients because they have their own terminology inside the organization and they really want to use these things like my Xfinity or something. And the clearer thing which was like a very straightforward way of describing what you get when you click on a link people sometimes feel like that's boring but I think you want to make it as useful and clear to people what these navigation items go to. And then secondly the fewer nav items you can have the better because the more options you have the easier it is for people to get lost going to the wrong place. Here's a couple websites that I think do this pretty well. Redbox basically has three navigation items. They have movies or games and then they have an item there for how you can find the nearest red box to where you live. You can go on the site and get lots of information about movies but when you get here they make it really easy to find a movie or game or find out where you can pick these things up. This is Oceana. They're a nonprofit that deals with water quality and ocean issues and it's an incredibly huge website. They have tons of articles. They have videos. They have research. It's massive. They have actions but they have basically the navigation in that white area are three things. What we do are campaigns and take action. And then there's a little sort of secondary nav at the top that has some other stuff that it's kind of small and it's out of the way and it's not meant to like compete real heavily with your main navigation. So I think they've done a really good job at least for the starting homepage making it an easy way to get into their content without being overwhelmed with all the content they have. The last principle I want to talk about is white space. There's actually a Latin term called horror vacui. I apologize if my Latin pronunciation isn't very good. But that translates into the fear of empty space. It's actually like a psychological condition that they fow of people. And you see this all the time. There's a tendency a lot of times with people that they feel like if there's open space on their website they've got to find clip art to put in there or some kind of pattern or some kind of gradient to slap in there to fill that empty space because it makes them feel kind of uncomfortable. But pretty consistently this is kind of a disaster. This is a real website. I took this screen grab two days ago. And this is an example of that to an extreme where someone literally doesn't want there to be any space for anything to breathe or anything to be allowed. But white space is really important because it's not just for designers who like clean open things. It actually makes websites more readable and legible. I mean they test these things and you kind of see that it makes it a lot easier for you to focus when there's not visual noise all around what they're trying to read. It also again getting back to one of the other principles it gives you a better sense of contrast and emphasis from the other things on the page. And again on the readability space if you have a lot of white space in between elements it gives you kind of a visual break between elements so you can kind of digest things a little better. This is Chrome's website. This goes back to real simplicity but it's also a good example of the white space. They could have a whole page explaining why Chrome is the best browser in their opinion and why it's better than Safari or Internet Explorer or whatever. But they have it real simple. You're seeing various iterations of Chrome on different devices and basically a button to download it. And they use the white space to make it really, really clear what they want you to focus on. This is Medium. I don't have people read Medium but it's a really growing popular publishing platform and it's really popular with readers and writers. And one of the reasons it's done really well I'd argue is because there are articles like this. They're a very bold headline. The type is really large and there's tons of white space around it so that the actual reading experience on the website is pretty comfortable. Let's switch gears and go into a couple of things about common design elements on websites and ways you can kind of improve those designs. Here's some quick tips on using type on websites. Basic rule of thumb I would start with is bigger is better. I will say after doing web design for years the number one complaint I've gotten after redesigns and web designs when we start to hear from customers or clients is that the type is too small. There's always a segment of the audience that feels like it's not as readable as it should be. Web browsers by default if you don't do anything to it, if you don't style anything, by default type is 16 pixels. That's like the 100% size of fonts. And it turns out that's actually a pretty good baseline. They find that that's readable to people of almost any age. That's a good size. I go to websites all the time where they default where it's small. There's a lot of WordPress things where they make the type smaller automatically because they feel that it looks more polished or modern. But really if you get below 16 pixels there's just going to be some segment where people feel like it's too small. The second basic typography rule of thumb, especially if you're kind of new and getting into this, is that two fonts are enough. Maybe I should call it two fonts are just right because if you just have one font on your website that's kind of a boring sameness to it, it's just the one font repeating in different sizes and weights, kind of a tedious monotony to it. On the other hand, sometimes you get people that go wild because they've got all these options in a theme or in WordPress and they use like eight fonts on a web page. And it just looks like a ransom note or it looks like someone got out of control. So a real basic rule of thumb if you're not a designer and you just want to try to get generally right is use one serif and one sans serif font. I'll explain what that means because I know that everyone is a design person. So these are the one on the top, that's Times New Roman and that's a serif font. And what a serif is, that's like the traditional old style newspaper fonts and they have little feet on the letters, little curves at the ends of the letters. So that's the way type used to be. And then sans serif font, that means no feet basically. Those are the more modern fonts, things like Helvetica and Ariel. And they're just kind of thin lines where they're usually just kind of straight and they don't have these little curves and hooks on the letters. And it's just kind of a really established practice that generally if you combine one sans serif font and one serif font, it works together pretty well. So it doesn't matter which two you pick. You can do Helvetica and Georgia or Garamond and Open Sans or Chaparral and Calibri. It doesn't really matter. They usually work together because they provide good contrast and they provide a little bit of distinction so that you can have them working together. Type also needs to really have contrast in terms of color. This is a real problem I see a lot. People will get, they love a background image or a color or a pattern and they'll put a blue text in front of it. And so you can see how that blue on black is almost unreadable. And that blue on red it almost creates like a buzzing effect. It actually kind of hurts the eyes to look at that too long. And it's the same thing when you've got these photos because the green text and that blue text, some parts of the photo might be light, some parts of the photo might be black and especially if you're doing something dynamic you don't know what it's going to be. But you never know if it's going to be readable or not. It's usually not going to be very readable. But at least if you stick with a bold white typeface like that you know it's going to have contrast. Just real quickly let's do a couple tips on photos and artwork. One thing I used to tell people on my design teams was if you're going to use an image and you want it to have a job, you want it to have a purpose or like I have here, you want it to either help explain an idea or add some kind of human emotional element to a page. I tend to steer towards more minimalistic designs and I hate kind of purely ornamental stuff when it comes to photos and art. So this is a page from a site I used to work on with one of my former jobs. They do all kinds of policy reports and papers and stuff. And this is an article about a tax reform issue. So it's already got one strike against it and then it's about tax reform. So it's inherently boring. But then they put in this massive picture of the US patent and trademark building. Who cares? Why do you need this big image? First of all it's moving the story down like 700 pixels if you're looking at it on a laptop. But on someone's phone it's going to slow down this page because they've got to load this honking image and it doesn't matter. So this is kind of a huge mistake in my mind because this doesn't add anything to this story. This was an article a couple of days later that they ran which is kind of the opposite of that. This is an article about an education bill that was affecting what was being talked about at the time. And again no offense to my former colleagues but this is also kind of a boring story. But these photos are actually, this isn't like stock art. These are real photos of two girls in a school that could be affected by these legislative changes. So suddenly it humanizes this issue that could be kind of dry. It's showing people these are two girls that actually will be affected if this bill were to pass. And it gives you a stake in what this thing is about. And so it adds a lot of information of value to what could be a real dry story. So along those same lines I really emphasize that people should use real faces. You know in 2015 I think we know if we see stuff like this that it's inherently stock art and inauthentic. And we're a little bit more savvy than we used to be and I think anyone sees this they know that this company or organization that's using a photo like this is not necessarily on the level but not necessarily credible because they're using something like this that feels so inauthentic that it already gives you that kind of uncomfortable feeling. This is actually the worst ever. I will confess that like 20 years ago I used this on the cover report. But no one has ever shook hands in front of a globe. This is the stupidest visual cliche. And I guarantee you if you search around you'll see this all over the place. And it drives me insane when you see it. So contrast that to something like this. This is Livestrong's website. And this is a real photo of a young girl that was involved in one of their cases. And it's a real simple photo. It helps that they took a really good photo and they got really close and cropped it real tight so you really see her face. You're not seeing her from 30 feet away. But automatically I'm interested. I want to know what this is about. I want to be involved with Livestrong. I'm curious about it. I don't think that they're just trying to con me. Likewise this is some charity water. And charity water does a lot of great things with their website. They're a nonprofit that does work with bringing water to third world countries, drinkable water. And this is an actual photo for one of their projects that was completed. And those kids are using one of the pumps that they installed somewhere in I think it's Namibia. But it's fantastic because those are genuine smiles. These are kids using the thing that donors pay for and help make happen. So this makes me want to hit that button and pay money to charity water so I can help make something like this happen. So lastly let's talk a little bit about color. And you can do a whole talk on color. But I'm going to try and give you a few minutes of just really basic pointers on how to use them on the web. So let's start with this idea of the color wheel. There's basically three primary colors and most of you probably learn this in grade school. There's red, there's blue and there's yellow. And as my kids play with all the time, if you mix them you get these combinations. So red and blue make green and you get purple when you combine these colors. So we kind of know that these mixes come together. And then if you mix those colors you kind of fill out this circle of color. Now this may seem like kind of an abstract kind of art thing but it actually is really practical. You can use this to find good combinations of colors. And I'll show you what I mean. So the first kind are what they call complementary colors. And if you look at the color wheel and you basically draw a line across the circle of colors, those are kind of naturally complementary colors. And they work together. And once you start noticing these, you'll see these everywhere. So let's take just for example yellow and purple. That's a weird combination. I would never just automatically say, oh you know what this website needs? Yellow and purple. That's the perfect color set. But you start to realize that you see these everywhere. And it's not an accident that lots of logos you know, the Lakers, the Minnesota Vikings, LSU, these are all real common colors. And the reason they come up again and again is because they're complementary colors. And the designers that did all these different things probably knew that when they came up with these color schemes. Another way to kind of find ways to combine colors is what they call analogous colors. And the idea here is that instead of going across the color wheel, you're just picking three colors that are together. They're like neighbors. So for example these ones on the yellow and orange and kind of, I don't know what you call that color in the middle. And then you might pick these cool colors from this side. But basically any three colors that are kind of next to each other on this wheel will work together really well. And so here's some examples. Like that's a logo for the Charlotte Hornets or New Orleans Hornets. Manchester United's logo. That was a logo for an organization that does nonprofit work. Comfort in. I passed that on the way in here through the day. And I said, wow, there's another combination of those same colors. But again, they inherently work together. And it's just kind of a standard principle that seems to work on some subconscious level that when we see colors like this, they work together really well. Lastly, shades and tints work well. You can take the color of your logo or the color of your brand. And if you do various lighter versions of it, you can take those colors and it kind of reinforces your brand color in subtle ways with different elements on your website. And second, I'll show you a tool for doing that thing. Let's take a real quick look at how we can take all these elements that I just talked about on these principles and pull them together. So let's say I've got this new client that comes in. And he wants to open a shop with all the Morse cupcakes. But he says, I've already done almost all the work for you. I've got a design. I just need you to kind of put it together on the web. And so he sends me this. And if you think this is kind of an exaggeration of how bad a comp can be, I guarantee you I've gotten worse than this. Someone has gone into PowerPoint and they've done it themselves. So let's see if we can apply real quickly some of the things we talked about to clean this up. Okay? So first of all, let's add a little contrast. So let's take that weird lavender away from the navigation at the top and let's change the color of his little sort of logo, faunty script so you can read it in front of that image. Let's clean this up a little bit more by changing all these different fonts. If you go back, there is like eight different fonts. Like I said, someone who went wild with all the font options. Let's take this back so now you have basically two fonts. You have that scripty font and you have a couple different weights of this Avenir font. We talked about alignment. And if you look, things are all over the place, right? Like the navigation doesn't line up with anything that order now button doesn't line up in anything. So let's kind of spread things out and align them so that they fit together in some kind of framework. And then again, it looks like he went into Photoshop and he put all kinds of different effects around these cupcake photos. Like one has a photo, one has like dots. So let's make them consistent. Let's be a little more methodical about what those images look like. And then let's remove some clutter. Again, some people might want to have background images of cupcakes. I think that's like noise. So let's just kind of get rid of those. And then lastly, this all feels kind of crowded to me. We talked about white space and kind of simplicity in letting things breathe. Let's just kind of space this out a little bit so you have a little more breathing room. Now I'm not saying this is a finished website. I would not want to put this out on the web. But you can see like from where we started to where we are now, you're able to kind of get this into a form that's at least better and it's getting you in the right direction. Alright, some real quick tools and resources that you can use when you go out in the world and try to use some of this stuff. The first is this book I mentioned. This is the non-designers design book for Rob Williams. Whenever I talk to someone, it's not Rob Williams the dead comedian, it's a different person, but it's a very good Easy Beginners book if you haven't done design. It's got lots of visual examples. I can't recommend this enough. The second thing is Adobe Color. I think I have time to show this real quick. So Adobe Color is free or if you have Adobe Creative Cloud you get some more features. But this is really cool. So I'm going to type in a color, like a blue that I wanted to use. And it automatically is going to come up with all the complementary colors so you don't have to do the color wheel yourself. Maybe you want to change it to the analogous colors that we talked about. Or maybe the shades of the colors. It's a little hard to tell with this projector, but you can get this. And then you can go in here and get the numbers and put them into your website and pick the colors you need and start using them right away on your web product. And then they've got this really cool feature where there's lots of natural color palettes in the real world. And if you take a picture you can pull it into Adobe Color and it will extract the different colors from an image. So like this is a picture of the Grand Canyon. And I can go in there and it's finding the five colors that are naturally occurring in this photograph. And they try not to be really good ways to combine colors to use in your web theme. And a lot of times people will say, you know, I want something that feels like nature, feels like being outdoors. And so something like that allows you to take a real photo and maybe get ideas for color from that. Last thing I give you as a tool, if you really want to be lazy and just grab something, is color lovers. They just have basically all kinds of color palettes that you can kind of browse and explore. And people contribute and generate these things all the time. And you might find interesting combinations of colors that you can take. They all have links where you can download links that have all the colors and the numbers and then pull them into your website. So just a closing thought, you know, this is like a dirty little secret that I think professional designers don't necessarily want to share. Great design is really hard. There's only a handful of really great writers. There's only a handful of really great elite level athletes. I think that's true with designers. But good design isn't something out of the reach of most people. I think if you're able to apply these principles and these kind of techniques to what you're doing, even if you're not a professionally trained designer, even if you haven't gone to art school, you can make your stuff a lot better by using those things as a starting point. Alright, if you want to look at this presentation online, you can go to flyingdogcreative.com and I've got it in various formats. All those sites that I link to there, you can click on the links and explore them on your own in a little more detail. And that's pretty much it. We've got about ten minutes or so. If anyone has any questions, we're out. Okay. Alright, sorry.