 Our next speaker is Jennifer Cohen. She's going to talk about website design principles to DIY like a pro. She's been designing WordPress, but she's been designing websites for many years. She has an agency for 15, blogging her 10, and she organizes the Sacramento WordPress meetup, and she is also an organizer for a WordPress campaign Sacramento. Welcome Jennifer Cohen. Good evening. I'm a loud talker, and now I don't have to worry about doubling two things. This is where I'm going to benefit. You guys being sparked out? You're great from it. I will happily eat that break. I'll be in the end. So, one of the things that when I'm at the meetup, when I'm at the word camp, when I'm out talking to people, and we're talking about WordPress, one of the best things about WordPress is that it allows pretty much anybody to create their own website and their own blog, and it allows you to do a lot yourself without having to hire a designer. What are the worst things ever about WordPress? The fact that it lets you do all these things by yourself, right? It lets anybody make design decisions, and not everybody makes good design decisions. Page builders are really, really popular. Page builders also make designers cry, right? So, the best things about WordPress can also be some of the most challenging things, because it puts all of this power in your hands, and you have a lot of decisions to make. You have decisions to make about typography, about contrast, about color, about alignment, about where things go, about what size things need to be. And then when I'm out and we're talking to people, one of our most popular nights for our local meetup in Sacramento is the health night. We do a version of the happiness bar that you see at word camps. We do that at our meetup. Every fourth meetup is a health night where anybody can bring out their computers and they can say, I need help with my WordPress site. And one of the things we hear a lot is, I've been working so hard on my design, but it still doesn't quite look right. Or they say, it doesn't look as good as their site. And you want to look at your site and be, this is amazing! You're going to be super proud and go out and be able to tell the whole world about it, because you're so excited about it. But oftentimes it's little things that you can tweak and little changes that you can make that are based on basic design principles, that are going to make a big difference in the success of your site, not only how it looks in the design and the appearance, but in how people experience your content and move through your site. So that's what we're going to be talking about today. First thing, typography. Because even more important than the design is the type. Because if your type sucks, nobody is going to be able to read your content or they're not going to want to read your content and they're going to move on. And the key to having more convergence on your site isn't a beautiful design, but it's the content, it's the words, it's the call to action. It's what you're saying on the site that there's going to get people to take action. So we're talking about typography. And the very first principle that we're talking about is just sticking to the basics. The very first thing we're talking about is sticking to the basics, right? So with Google Fonts, with Typekit, with being able to enqueue fonts from several different options, you have all kinds of choices. You have all kinds of bad choices, right? Fonts, display fonts, fonts that look super cool. While they look super cool, don't make for a great reading experience in a lot of cases. So when we're looking at content on your site, and we're seeing this with big brands around the world, over time we're seeing right now a lot of big brands simplifying their logos down and simplifying all their content down, and they're going from these display type fonts and scripts and things that are all unique and have personality down to sans serif fonts, to plain style fonts, because they're easy to read, they're simple, and they render well on all devices and at all sizes. So these are just some of the basics. These aren't the fonts I'm telling you, or the typefaces I'm telling you to stick with, but you want to stick with the basics. A sans serif font has no little beat. It's the one like Oslo Minova here, or Frankly Gothic or a serif, that has the beat that's more a traditional book style. Either one of those two for readability, making it easy to read and legibility, making it easy over time to consume that content. These are going to be your best choices. Now I'm not saying you can't use something that's unique, but you're going to use something, if you're going to bring in a script font or a display font or something fun and funky, use it as an accent and not a primary headline or primary type of content. When you're looking at using different typefaces, now everybody here know what the difference is between a typeface and a font? Some people know, some people don't. A font is the file that you use, right? A font is just the electronic file for a typeface. So the typeface is the design or the style, and the font is just the electronic file. So people use them interchangeably. I may in this talk as well, but when you're looking at typefaces, if you're not quite sure what to do or you're not sure of a good pairing of two different fonts to use together, the easiest way to look like a pro is to pick one typeface but use two different weights. And my favorite is to pick a typeface that has a lot in the family. So this is, I use Museo on my personal site on jenniferborn.com, Museo Sans, and I love that typeface because it has a whole bunch of options. So it has light, regular, semi-bold, bold, black. So I go in light and bold. So I skip regular and I skip semi-bold. By using 100 and 700, I have a really high level of contrast between my body copy and my bold or my body copy and my headlines. So one typeface family but two different weights that have high contrast is a really simple way to look like a pro. Use two different fonts, two different typefaces. Then you want to use two different styles, right? Look for contrast between the two. So use a serif and a sans serif, right? You don't want to use two of the same style. Two of the same style to a general visitor who's coming to your site. It looks like you messed up. It says, uh-oh, somebody picked the wrong one right there. Somebody accidentally messed up. It's the same thing with colors. It's the same thing with most design elements. You want to go for a contrast, go for a big difference because the things are too similar. They look like they should have been the same and somebody made a mistake. So you want to go for the biggest amount of contrast that you can between the two. When looking at type sizes, this is another one where we run into a lot of issues with people having readability issues on their site or their site just not quite looking the way that they want is size. When I first started building websites, the body copy was 12. And then it was 14. And then it was 16. And for years, we built websites with 16-point body copy, 14-point sidebar type, 12-point quarter type. And then it was 18. Like we moved a couple years ago to start being to build them with 18. My site, Jennifer Bourne, my new site that I launched last year is 20. My body copy is 20. That's crazy hands. But that's like as a designer and like that's insane. But it's easy to read. It makes the content really easy to read and on any kind of device. Like nobody is having issues. How many times have you gone to a site and the type is super small and it's hard to read. It's frustrating for people and it makes them subconsciously and when it feels hard, they don't want to do it and they leave and they move on. So a good way to think about it is whatever you set your body copy at your headlines, double that size. We're looking again at contrast, a big contrast between headline and body copy. So a lot of times the simple formula when I'm working on a client's site, whatever my body copy is at, I double it for my H1 and then I split the difference with my H2. That's kind of where I start with my base and depending on the typeface that we're using I may adjust that a little bit or like for my own site, we bump that up to 20. But it's for contrast and legibility, this is a really good formula to remember. Also, no light rays! Product companies love light rays. A lot of themes that you're going to come across have light gray type because designers and developers are designing them and they wanted to look super pretty and they make the type light rays that makes their pictures look all amazing and then you suffer when you buy that theme. So one of the very first things that we tell clients where we tell friends that they're buying off the shelf feed, the very first thing we do is go in and look at the color of your type and if it is not black or it's not all twos or it's not at least all trees, change it. It's really, really difficult to read. Especially if you look at an aging generation on who your market is the older that you get the more difficult it is to read online. The more difficult it is to read on screens and that light gray type starts looking really, really difficult. So go with black or a super dark color or go with a really, really if you're going to go not with a full black but a gray go with all twos, all threes stay as close to the hexapod as possible. Blacks all zeros. So the farther you get away from zero the lighter gray you get. I also want to talk about alignment because this is another one that's easy to fix but a lot of people mess up. Pick one axis and all the things are going to align to that axis. So ideally you don't want some things align left some things align right, some things align in the center unless it's high contrast and it's done on purpose and align all the things to that axis. So this one we're looking at left alignment everything's over on the left. If you're going to align them on the top you want to make sure everything lines up on the top. This is especially true when you're looking if you have a sidebar I hate sidebars so I'll use them a lot but if you have a sidebar on your site the top of your content and your sidebar need to line up. When you buy a theme most of the time that's going to happen out of the box because the designer designed it that way or the developer created it that way but the minute you change to a different Google font or you change to a different font off Typekit not every font has the same line height some of them are going to move down a little bit some of them are going to move up a little bit some are going to even at if you take 20 fonts all at the same Typekit the same size they're all going to be different sizes so that's going to be something you may have to adjust if you change the font on the theme that you purchase. Also looking at aligning to On Access this is my personal blog family blog re-blog about vacations but the bottom you align to the baseline or you can align to the center another place that we see sites where you notice something's funky but you're not quite sure is the header, is that navigation when you plug your logo into a theme you need to make sure that it's lining up correctly with the navigation either to the baseline or across the center so that's an easy place to make a little adjustment that's going to make your design look more professional and more polished then if you just pop your logo in and ignore the alignment content body content should always be aligned left all the way down the left we call it in the design world aligned left, rag right that's lush yes when you hear rag right or anything the right side is the one that's uneven so when we talk about it we say line left, rag right never justify your text when clients come back to us and they look at the design concept and they're like can you justify that please no no we can't let's have a conversation about why that is a bad choice so there are things if you look at the top and the bottom of these little lines that go through when you justify text it spaces them all out bumpy and it makes things called rivers which are gaps through all the lines of your type and it makes it super hard to read or in this box here it squishes all the type together super super tight and there's not enough space in there all your words are starting to run together and it's really hard to read and then in the bottom they're like sorry that was weird we squeeze these together we've got space all those out now there's these big old giant gaps between your words justifying text is super it is and don't align center if you're going to align something to the center make it a headline a sub headline a short lock quote that's easy to digest really quickly if it's a paragraph of type if it's block of copy you don't want to align center because this is what happens to your eyeballs they're like if you're reading and it makes some you might not notice it but subconsciously it feels like you're having to work harder to read that content we also say the same thing for the reason of don't indent your type my daughter has to do this when she writes for school and I'm like you no one gets me for the same reason because it makes that eye jump all funky every time they get the eyes going it's making all this weird subconscious stuff go on it's just you want your type to be as easy as possible to read because when it's easy they're going to read more they're going to stay longer they're going to scroll more they're going to click more they're going to consume more so let's talk about color it's really hard for people to pick good colors there are a lot of color palette generators out there you can pick color palettes but more important than actually picking your colors is not picking too many colors so what I want to talk about is sticking to two to three core brand colors so for every site that we design an organ I try mostly to stick to two primary colors for the brand I love color so for my own personal projects I go every um but I have control so I feel good about that so born free is my agency inspired and protections my family and adventure blog and proper project plans of course that I teach on client management for designers which is awesome thanks so I look at three two or three main brand colors and those are the only colors that we use in the design of that team in the design of that site and then I add one action color so two to three brand colors and one action color that one action color is only ever used for things that are going to trigger the visitor to do something for a link for a button for a call to action because what I want to start doing is training people that come to the site every time you see that color it means you need to do something every time you see that color click on it every time you see that color stick your email in that box give it to me every time you see that color it's an action to do something so we look at some examples so that site is all navy blue and lime green and the teal but pink is my action color so you will only ever see pink on that site in a call to action so in a content upgrade on a blog post or in a button or something like that so on that site we're training people when you see pink take action the same thing is true with boardcreative.com so we look at the whole site the colors are black and red the whole site is black and red with a little bit of tan because it's a warmer feeling than gray and the blue is the action color so on that site the only way you're seeing blue is the links and the buttons yes is there a rule of thumb for what to select for the action color? contrast so the question was is there a rule of thumb for selecting the action color what kinds of studies that have come out about what color your buttons should be and people are like your buttons should be green because green means go don't use red buttons because that's bad and it means stop that's such crap cause you know what all the studies after that show it doesn't matter what the hell color your button is all the math and everything that's around it what matters is that there's contrast so your button can be I wouldn't choose yellow because it's hard to read it's hard to see but other than that it doesn't matter what color your button is as long as that button color is the only place you're going to see that it's all about contrast so again inspired in perfection same thing so the brand colors are the teal and the purple or the blue and the purple I use a little bit of green here and there the action color there buttons, links, calls to action I use pink and block quotes on that side as well cause I use them frequently and I want to call action and call attention to that but you want the best design that you can possibly have is a design that people don't notice you want them to notice your content you want them to connect with your images and read your content and all of that not stand out so by keeping your colors to a minimum using your two or three four brand colors and that one action color not going all crazy you're keeping the focus on the content itself now images are another place that we see people make so not so many choices there are so many stock image sites out there you can get images from anywhere but don't get them off Google first things that's super easy to fix and you can do with absolutely little effort it's just making sure that whenever you use images you're using big large full width images not only is this better for social sharing have you ever shared a blog post over to facebook or something and you get like it's a little tiny square with your content next to it and you're like how come I just have this little square and they share it it's a big little pretty image because the image in your blog post isn't big enough so a good rule of thumb is your full width images on your blog need to be at least 600 pixels wide that's usually if it's at least 600 pixels wide it's going to show up as a big beautiful image on social media so what we tell clients is always go with a big full width image examples full width images look beautiful on all device sizes right and left aligned images don't here's why a nice full width image still stretches side to side right or left aligned images especially if they're small leave weird white gaps on the sides of pictures and then your text wraps around it all funky look at one on the left there's like this weird white gap and there's a sad little line of text at the top that's so ugly look at the one on the right there's like one tiny little word in all sad and alone because the text wrapping is so terrible so most people if you're going to right or left aligned images on your site on the top anymore center that crap like center it immediately because then you don't have to worry about that but or make them big enough that on those device sizes you're not going to add the most common device sizes you're not going to have those issues but most clients they don't want to spend a whole bunch of time trying to get their image just right so if they left aligned it on the devices they most use they're not going to have that but that is so much work for them so we say go with the full width image it provides a better experience and it shares better across social media also avoid the super cheesy awful stock images because that's the fastest way to look like an amateur is to use crappy stock images so we're going to look at some bad options and we're going to look at some better options so you can learn how to pick some really great images because one of the things I hear from a lot of people all the time is where do you get your stock go? is it like the same place as you do? you'll pick them better so cheesy, awful smiling, pointing awkwardly posed obvious if you're writing a blog post about creating a vision for your brand and you're like let me go look here's a blog that says vision we don't need to be obvious people aren't that stupid right so we can look at instead of using a cheesy smiling post picture of somebody look at something in action I look for no faces when I do stock photos when they're like words to exclude happy, smiling face all the things that people normally look for I'm like exclude all that I don't want happy, I don't want smiling I don't want faces I'm like give me the back of your head give me action give me something else I look for hands hands and what I'm looking for show me somebody doing something show me something in action or in the bottom instead of being super obvious and looking for something that says what you're doing the worst is when we have coaching clients and they are like I found this image I want to use on my page all about my coaching services and it's like the scrabble words that say coaching we're like don't talk about why that's a bad idea don't talk about why that's a bad idea same thing the words we avoid words no happy, no smiling no words if you're going to talk about strategy let's talk about concepts that have to do with strategy what other things in life you have to be good at strategy if you play chess so go with chess if you're looking at searching what do people use to search binoculars, telescopes magnifying glasses look for things that communicate concept but aren't obvious my favorite we wrote a blog post about bad clients and I'm like bad and I'm like crap I can't use picture poo toxic toxic gas masks gas masks so you want to look for things that aren't obvious but communicate the same concept so the same thing and then we look at if you clip art no if it's cut out of a white background they call that isolated just say no in the search bar of what to exclude say isolated don't use those because you're writing a blog post about time not cute the other one, that's a beautiful image so we look at our watch we're looking for hands, we're looking for action we're looking for concepts we're looking for the non-obvious those are going to be the things that grab people's attention and get them to be more interested in your content click over from social media or pause that scroll a little bit and see what your post is all about and again, we avoid the happy smiling faces looking right at the camera and we go for somebody who's looking away engaged in action, in doing something like that just making a good image selection can make all the difference in the appearance and professionalism of your site so I'm not going to tell you that I always was good at this because when I had my first website I totally just cut out images like that on the top I thought, they're floating it's so cool it's not a square how many clients are like, can I use images that aren't in a box? I feel free because I was there I totally did that and then I realized I could change it so if you have images like this or you've chosen images like this the most awesome thing is you can always go back and update them and you can change them in 2014 we overhauled the entire born creative brand it used to be like Rainbows because again, I like color and rainbows and then my husband was drawing my business full time and he became our boss was telling me what to do he's like, we gotta ban this brand out and it's gotta go so he went to grab my bottle brand has always been in four colors we're keeping the red, we're keeping the black we're looking at the images, we redesigned the blog I got rid of the sidebar and my content got bigger and I'm like, you can make images smaller but you can't make them bigger instead of going back and replacing every blog post image that I've ever created which was a blessing and a curse because it was a lot of work but my side looks way better now but we tell clients and they're blog posts, I'm not going back and making video pictures are you crazy? and we tell them from here moving forward go with big, full with images going back if you're caught up and you're like I really want to work on my site or you have virtual systems that you work with and at the end of the month you're like I have a couple extra hours, what do you want me to do? you're like go back to those old blog posts and start replacing some images and just do a little bit of time so you don't have to worry about all of a sudden going back and redoing everything right away but you want to start working on those things especially if you use a plugin I use a plugin called Revive old posts Revive old posts has a total crappy life it's terribly used but the functionality of it is awesome because if you have a lot of blog posts you can go in and you can configure it to share by category or by tag you can go in and it automatically re-shares all your old blog posts to whatever time can be you can say every four hours or every five hours or every three hours and you can choose different time configurations for Facebook and Twitter because on Twitter you would want to share more than on Facebook that plugin is awesome it re-shares and keeps traffic coming to my site for post several three years ago but it's still irrelevant I exclude anything about events and anything that is time sensitive right? if? thank you so because I have all of that going on I am constantly providing old posts it was important for us to go back and update the images on all those posts as well so if you've got a lot of posts already and you need to go back just do a little bit of time do it while you're watching Netflix at night Brian's like what are you doing on your computer I'm like I'll turn the ranks down I'll turn the screen this way and I'll kind of do a little piece or something like that but the other thing you want to do when you're looking for images is to look for images that are going to give visual views we're going to direct attention in a specific way you used to see this tons with arrows those off Blinky gets the light switch you used to see this with all the arrows people would have read Blinky and arrows pointing all the things and then responsive design all blew up and people were like crap my arrows were pointing at nothing my arrow in my video and now my arrow is pointing to nothing and I don't know what to do so when you're looking at images let's say you have content on a page and you have a call to action in your sidebar one of the easiest ways that you can use a visual cue to direct information is to put an image in there with the person looking at your call to action people's spaces pointing in a direction are shown by all kinds of key map studies that when the picture is looking in a certain direction the person looking at the site they're going to look in the same direction so this person is like check out my often baby you don't know why you're going to look at that but you're totally going to look at it because so honestly I'm directing your eyeballs right to that call to action so you want to use those for visual views and it's okay to still use arrows but let's make them just go down the call to action below because no matter what device size they're on it's always going to be below you don't ever want to point an image of an arrow to the left or the right because it's not going to be that way on the phone content we're going to talk about breaking up the text easy to read hard to read easy to read hard to read sub headlines contrast between those sub headlines bulleted lists strategic folding notice I say strategic folding you have those clients who are like folds like every third word on every line and you're like dude everything's important not being as important so strategic folding here and there to grab some attention but taking the time to format your content well small paragraphs, sub headlines bulleted lists this is going to make your content feel easier to read, lighter it's going to encourage more media also bringing in color not a lot of color two to three brand colors but pop in color