 So it's a that that's kind of the joke. I have this whole other life as a film TV Actor in fact I met someone who lives in a house across the street from where I filmed a Christmas thing But anyway, so Cory had mentioned that last year and people thought I was lying, but in my other life Oh, wait, can you hear me? Can you hear me better? Nice Okay, I'm Andrea Ferguson. Please call me Andy. I'm the president and UX director for Andy sites We are wordpress design and development shop in Chapel Hill and Our hey welcome. Come on in We started a little early It's okay. I'm gonna let these folks get in and visit. Oh No, we ran somebody off. It's okay Wordpress is easy and fun We promise All right all right, um So I'm being told I need to either speak up or how's that even better And a little too much a little overwhelming in it. No, okay. All right Cool, so We are here today to talk about user friendly design tweaks for your wordpress website Here's the question everybody. Yeah, who here has a wordpress website. All right So, do you know what I mean when I'm talking about user friendliness? User friendliness gets interchanged with usability and UX and UI and all of this stuff But basically what user friendliness is and why you care is there are a lot of websites out there. People are very busy People get frustrated easily on the web You want to be sure that your website is user friendly so people go to it. They know what to do right away They have some kind of positive emotional experience And that's that's kind of what we're going for above all you want it to be intuitive You don't want people to have to kind of Figure out, you know, what where they're supposed to go what they're supposed to click Why does this look one way and this heading looks a different way? You want to you want to remove as much of that friction as you possibly can the sort of one of the Bibles is is Don't make me think and this is the this is sort of the first rule in in user friendliness and website usability Are y'all familiar with this book? You read it if you have not read it It is in itself a very user friendly book lots of illustrations very short You can get through the whole thing, you know in a couple of hours if you read every word and look at every everything But yeah, if you get nothing else out of this Go get don't make me think a common-sense approach to web usability He has an updated version that that recently came out and he also wrote a book called rocket surgery made easy Which is a which is a list of steps that you can take to find usability problems in your own website But his whole thing is don't make me think I'm busy. Don't make me think. I just want to go to a website I don't want to have to think about anything. I don't want to have to suss anything out Give me as many clues as you possibly can make your users happy. They like you better. They buy more stuff They get in touch with you more all that Okay, so we're gonna assume for today that you already have a website and you don't really Have the time money or interest in investing in an entire redesign But you just want to make some tweaks to make it more user friendly So we're I'm gonna focus on three easy types of tweaks that you can make yourself color tweaks call to action And that's like buttons links and font tweaks Also known as typography if you like long words so I Hate doing a lot of things that waste my time maybe Nothing is less interesting to me than for example watching paint dry So we're gonna use this website as our example today The whole point is just to remind you that it doesn't matter what your content is it doesn't matter If you're if you have a website that has a zillion pages or only one page It doesn't matter these tweaks will apply to any website. Okay, so here we have our our demo website How to watch paint dry? We've got three categories of Content here tools and equipment the proper procedure what to wear But what I want to do if this is my business. I really want people to get the guide I want people to download this ebook because every time I get somebody to download the ebook I get a bonus from my boss. Let's say So that is that's gonna be our primary thing that we care about However, everything is interesting and we don't want to you know, we don't want people to just see oh my gosh This is how to watch paint dry. I'm getting out of here So that the get the guide is gonna be the thing that we're gonna care the most about All right, so first off color tweaks color is very emotional You can make people feel certain ways with different colors But above all thanks to our big beautiful monitors and technology and everything we can have Vibrant beautiful color on the web now, so you want to take advantage of that as much as you can Color attracts I'm a bird nerd anybody else a bird nerd. Yay. Yay my peeps. Okay Okay, so so in the bird world the males Get all the beautiful plumage and the pretty colors and all of that kind of thing That's because their sole job really is to attract the ladies so that they can procreate and make sure that the species You know survives The ladies on the other hand their job is to sit on the eggs and take care of the babies and all of that So as a result they need to be not noticeable So that they can be more protected, but color attracts Lady birds can see color. They care about these things So that's why in the bird world you see all this beautiful Beautiful colorful plumage. I mentioned the color has a motion. We all know that you may have seen this graphic before Red is excitement, you know green is peaceful. You see a lot of blue in logos because that's kind of the color of trust There are other reasons why people use blue Facebook is blue because its founder is red is colorblind and that was the only color He could really see so there are also other reasons why people use color as well So I'm not gonna get too deep into this whole concept because you intuitively know these things anyway But I just want to mention that that it does kind of Matter so when you are thinking about adding color to your website think about think about the emotions that different colors conjure I'll also mention we're going through a lot of stuff But these slides will be online After the presentation, so don't stress over getting everything down if just start with one color Adding adding color to your website can get really overwhelming because you don't even know where to start but just start with one color and and This one color should ideally be used for those calls to action those buttons those links those things that you want people to See right away. You want to be consistent with that one color so that every time somebody sees that color on your website It means do something This is why you don't want text links to be one color and buttons to be another Anything that is clickable that does something Research has shown that it is it will help your users most if you are very consistent with what that color is So how do you come up with the one color? Well first place to start is your logo if you have a color in your logo Start there Because then you know that the logo is going to be at the top and everything will kind of look good together Unfortunately, our logo doesn't give us a lot to work with You can also see that it's nice and big and bold. They use the make my logo bigger cream Are you familiar with that website? And we know that clients always want the logo to be bigger. It's the first thing you hear so So this logo opted to be really big but not to have any color. Okay Well the good news is now the sky's the limit So the next place I would go to look for color is the imagery on your website So this website has some pretty good images They've got color There's there's a variety So if we know that these are the images that you have on your website I'd start there to try to figure out what your one main color is going to be so This is there's nothing scientific about this part. It's just like what do you see first? What is where does your eye land? So I tend to kind of focus on this area. I Like a powder blue tuxedo who doesn't But that might not be a strong enough color for my calls to action So when I look at that I see The orange All right. So now we've got somewhere to go. We're starting We've got a color that's going to kind of be our sexy color on the website. So the thing is Do you know what I mean when I say web accessibility you're all hearing about it a lot, okay, so In in some situations, it's required your website must be accessible to meet the American for Disabilities Act and all that stuff so what what accessible colors mean is it's colors that It typically colors that have high contrast against their background so that people can discern them easily So there's this website, which we'll see if I can Load What do you know I can Okay, so color safe dot co is a really great website when you're choosing colors You can just click get started you can stick with the stick with the default options. That's perfectly fine Click generate color palette and it's gonna it's gonna Show you little tiles of all the accessible colors. All right, so we know that we want Show me all the oranges So all of these are accessible. I really like this one Because it's kind of a red orange Studies have shown that Red and some people get afraid of red on their website. They're like, oh people are gonna think I'm yelling or red bean stop or whatever So so what we know is that red is the first color that babies see and We know that when people have brain injuries and they can they lose their ability to see color the first color They see again as they're recovering is red So red does have an emotional an emotional pull and appeal to it So I'm gonna go with this kind of red orange here and you can see it'll give me the hex number So I can do my whole thing. All right now Let's see what happens if I do this miracle, okay So so now I have that color so let's return back to our original Website that we're dealing with Nice black and white website Picked my color and let's apply this principle So now I've made the links the text links, which you probably didn't even know were there I've made them and I've made the button That orange so we're already improving it We're already making it user-friendly because we're showing people where where to look And we're teaching them every time you see orange that you can do something now We did put a helpful click me with the thumbs up But people don't read initially when they first see a website. They just feel so that orange is really gonna help us From here you can go into creating an entire color palette. I'm just gonna list these tools Simple ones coolers.co you can enter you can enter hex number and Then you just keep tapping the space bar and it will come up with palettes for you find one you like and apply it to your website Canva comm is really cool too because you can upload an image You know I could have I could have uploaded that image of the paint cans for example And it will automatically create a palette for you. That's really cool too if you are at the advanced level color.adobe.com which used to be called cooler, right Alex? K-u-l-e-r it's Way over my head, but Alex our director digital loves this thing and you can You can create palettes. You can put different rules in you know tertiary blah blah blah all this stuff And you can create palettes that way too Corinne our creation director she and I just like to tap the space bar come up with good stuff And then Alex fixes it All right second thing call to action tweaks So calls to action are those things that just make you want to do something you just want to do something can't help yourself So for our website, it's it's download that ebook. We want to download that ebook so I Have in mind a call to action that is Unfailingly effective No matter what it's not a website called action. Can anyone guess based on this what that call to action is? Hot now I cannot Drive past this sign. I don't care if I have a bone sticking out and I'm on my way to the hospital I cannot drive past this sign it is so Popular and important that if you go to the Krispy Kreme website and do you like the store locator? It will not only tell you what stores are in your area. It will show you what stores currently have this sign on So you can drive out of your way To get the hot doughnuts This is what we want to do with our website We want to have the calls to action on there be so enticing that people can't help but click All right, so this is where we are right now Look me. That's the call to action that we're going to talk about Why size matters? Get your head out of the gutter. It's your fingers So Imagine so if you think about think about on your phone and none of us have pencil shaped fingers So we really need to be able to hit those buttons Apple and Google and you know all these folks have they have these sort of Guidelines for how big a touch target should be turns out. They're not big enough MIT did a very comprehensive exhaustive study on finger size and What they discovered is that it's actually 57 pixels is your is your minimum square for a For a finger touch target these these quotes are these are from smashing magazine They took this and sort of made it a real-world thing and if you just Google like touch target smashing magazine, you'll get you'll get this information Thumbs are bigger than fingers Why do we care because sometimes people are doing something with one hand and they're cruising your website with the others So it's helpful if thumbs can touch your your buttons as well Don't stress too much over measuring the button size. The point is make them bigger than you think they need to be Older people will appreciate that because We can't see basically Younger people will also appreciate it because it's just helpful and they're on these they're on their phones all the time kind of things so So so be sure That you make your buttons big so here are just four rules for an easy to click call to action make it big Make it bright Give it room, which means don't squish it up next to a bunch of other stuff. Just make it give a little white space around it and Make it obvious make it obvious that it is a button There are a lot of ways to do this But which we'll talk about but you want to make it obvious that it is a button And you also want to make it obvious what it's going to do when you click that button. So the label of it is also important So here we are with our website again, we apply these principles Small change, but it made a big difference. Okay, it's big much bigger It's bright. We did that already has a lot of white space around it We did that already, but we changed it from click me to download e-books So now I know what's going to happen when I click that button. This is really helpful and You know a lot of times when you get like form Plugins out of the box and the button says submit or whatever if you can Change that text to something like I Don't know anything other than submit send Get in touch Something not that submit is bad, but if you have the opportunity to label a button with exactly what's going to happen Send my form Whatever that that will help your users as well Again, don't make me think what's going to happen when I do this. I'm going to download the ebook. Great. Thank you Last one is font tweaks Typography typography tweaks So here just for Things to think about One is choose two fonts one for your headings one for your body two fonts, it's really tempting To start putting a whole bunch of fonts on your website now. I'm not talking about font weights You know if you within the same font family, it's okay to do bold and you know not bold and that kind of thing But two fonts that's gonna that's Pass that our brains start to kind of go So two fonts make the body text big enough for older eyes and smaller screens You know what I mean when I say body text, I mean the paragraphs the actual information the stuff people have to read make the headings noticeably larger than the body text and This is an issue. It's sort of a hierarchy issue You know, you want your content to have good hierarchy You want people to be able to say this is the organizing principle the heading is What this chunk of stuff under it is about and then under that you can use subheadings These are your h1 h2 h3 All this stuff that you that yeah And it matters for SEO and it matters for a lot of other reasons too, but pure user friendliness pure usability Make sure that it's obvious. What is a heading because we're gonna see your users are gonna scan that page And they're gonna look for what's big and in a different font First so that they know that's the area Where the information that they're seeking is and the last one is keep the case Consistent I'm talking about upper and lower case Don't be all caps in one place and upper lower in another place with your headings If you're being you know artsy and you want all lower case That's cool, too But you know establish that as kind of a design principle throughout your website and make sure that they're all that way There is That's right. Yeah, that's a great. Yeah, that's a great concept You talk about tags when you tag your content just be sure that you keep that case consistent as well everything you do as people look through your content and look at your tags and all of this stuff they're They're gonna sort of fall into a comfort zone of alright It's upper lower case. It's upper lower case if something is all caps. They might feel shouted at If something is just different for some other weird reason because you just didn't feel like capitalizing that first letter of that word They're gonna wonder why don't make them think Everything you do that makes people go. Well, what's all that's weird. What is what is that about now? You've slowed them down again. Don't make them think keep your case consistent. Yeah And comic sans is the other Yeah, that's a great question You know what I I want an opportunity for for Alex to be able to answer your question as well So we're gonna do questions at the at the very end, but that's it That's a great one I definitely want to definitely want to talk about that because this is an issue is that you may tell your client Trust me. This is really what user this is what your users are gonna want But their personal preference is gonna get all mixed in and you're gonna have to you know, you're gonna have to deal with that So these are our typography tweaks. So how do you find fonts? Oh my gosh There's so many To start with find one that works well with your logo This is like a really good place to start because if you have just a you have your logo and then you have Other text it would be amazing and it would make you look like really More like a printed, you know Brochure or something like that if your fonts can work well with your logo Usually you just get a logo and you have no clue what the font is. So there's a there's a website called what the font and You can upload your logo to it. It's it's it doesn't always work, you know But it will get you close enough usually and it will identify what what the fonts are in your logo you can you can find fonts that go well together by going to fontpair.co and It's just like it's got categories like I want serif and sans serif mona space and serif or whatever But it will come up with all of these font pairings and these are all Google fonts or You could just Write your whole day off and browse the Google font library because it's you just it's it's the most Wonderful warm rabbit hole ever There's so much in there right so last night I checked there 877 font families that you can easily use on your website no download required. So here's the thing Google fonts Who who who has worked with Google fonts? Yay Who has no clue what I mean when I say Google fonts? Great. Okay. Sorry. I didn't mean to point at you I was like she you're gonna you're my favorite. I know because I get to teach this to you so So a lot of times when you build a website and especially when you get You when you get like a theme like a template or whatever and we're not we're not dealing so much with like custom websites here But let's just say that you created you created a website and out of the box. It's aerial Great, it's fine Aerials nice times new Roman is nice. Whatever whatever is is there is nice however, what Google did is they took 877 fonts and they put them They kind of put them on their server and Then they put little code things in there So you can point to them on Google server and display them on your own website So with a little chunk of code You can make it you can have access to any of these fonts The the instructions are actually pretty good on there to teach you how to do it So so I apologize for taking all of your time because I but but you're gonna go to here and that's I'm telling you you're gonna love it So if you go to fonts.google.com you can find fonts You can type in your stuff and see what your stuff would look like in that font all of that And then it will give you implementations The best the best news is that a lot of Theme frameworks and templates Now bake Google fonts into them so you can go to theme options like our How to watch paint dry website was built in X familiar with X X is X is a theme framework and it's Like Divi of Aida X a lot of these things when you go into theme options It'll give you a chance to choose like what the font is that you want to use for your headings Take that extra step and go into the theme options and find that little drop down because nine times out of ten It's also gonna include Google fonts So you can go over to the Google website and say I want to use Josephine sands and then you can go back over and instead of having to even know how To implement it, you know with code you can just pick Josephine sands the website's brain will go out to Google Display it on your website It's beautiful your world has changed. All right, so Yeah Right right so That's right, and you can download the Google fonts To your computer to use for print assets as well, and they're pretty good also if it goes the other way around They're also pretty good about Having just about every font covered, you know, if it's not exactly the same You can yes, it's similar enough, but yeah, that's a great point So here we have how to watch paint dry. We have our teeny tiny little nav at the top We've got our tools and equipment proper procedure what to wear Get the guy all this stuff. So Let's apply our typography rules to this To end up with this all we did was change the type Now we've made the nav bigger much more obvious We've actually that old website was all aerial now we have to I can't remember exactly what these fonts are But we but I got them off the font pairing website So now we have our headings in this nice Serif font that works well with our Enormous logo We have kind of a cool, you know a little more curvy text font for our for our body text and it applied I Picked it from the drop-down. It's all I did and it applied all over the whole website so now Bigger upper and lower case Consistent all that stuff I said before So just to review we have taken this website and with just these three tweaks by adding a strong color by by focusing on the call to action making it nice and big and By changing the font We've transformed this Into this I'm not saying that people are going to become more interested in watching paint dry What I am saying is that the people who are interested in watching paint dry are going to be much less Frustrated because they're going to get to your website and they're actually going to know what to do Ideally they're going to download this ebook And you're going to get a bonus from your boss By the way, this website is actually live at how to watch paint dry calm So if you want to see these principles in practice you can you can you can for real go to how to watch paint dry calm The inside pages by the way have lorem ipsum, but they're Bob Ross lorem ipsum It is that it is the happiest friendliest little thing ever so it's all quotes from Bob Ross's shows Well, there is an ebook. It's not about how to paint how to watch paint dry, but See no actually if you if you click on the download new book It just goes to one of our white papers about best practices for launching a website So it's not Not that all right, so that's it. That's me You can yes Yes Yes Fantastic So So this is I know yeah, I Know exact so now I'm somehow going to try to try to try to get So this is so this is Paul Paul is our Paul's our storyteller and our writer editor always good for a story I will mention if you would like to get in touch with us You can see the call to action in the in the top of our website Or if you go to how to watch paint dry and you click contact there You you'll get in touch with us as well. All right, so questions Alex is doing donuts, but we're gonna we're gonna definitely talk talk these by the way We're they may not be hot, but they're only they're only like an hour and a half old so So they should be pretty good. I didn't bring napkins. So you just got to do this Nobody's complaining good gave you a free sugar rush All right two questions in the front. Yes So his question is about black backgrounds and white text that you know, it's so funny because I We go back and forth about this the science We did a website for a company that makes binocular Eyeglasses for people who can't see and they just need they need that help and We worked with the Federation for the blind So it's a website that's super high contrast, you know all of that kind of thing So what the Federation for the blind told us is that white text on a black background is good Once you put that out to actual Users who who don't have that particular who aren't that particular user case It can be tiring. In fact, thanks to Claudia. We made We made a change on our website Recently because we were putting white text On a on a dark background and it was just wearing people out I think it's much easier now. So thank you to Claudia for that. Yes second question color wheels color wheels My head just exploded Yep So I go to these tools that you mentioned a color wheel And I pick up, you know, I put in an RGB color value and I get something in fact but then I'm not The person who should be making those choices potentially Mm-hmm, or I think it I don't know they might give me four colors. Mm-hmm, but then I don't I'm not a Yeah, I think every day of our color right and I'm like, well, do I make that the footer color? Yeah Yeah Right color wheels can be really overwhelming That's why I recommend those first two tools that I you know if you if they've given you a color and they've said We have to have this color in our website, but we don't care about the others go to coolers and just and you'll just find something Also nature tends to be a brilliant palette artist so so a lot of times you can take a photo from nature that Includes that color and use that palette generator tool and it will come up with just colors that just go together magically the the the discussion about How and where to use color on your website is a is a big one? Obviously Alex, would you say I mean just in general your brightest color should be your call to action Yeah Yeah color color is subjective. However, there are There are Rules, you know You you you want to care kind of where the islands first Bonus points if all of the photography and the imagery on your website also reflects those colors You can get crazy and you know go into Photoshop and all that stuff But you don't have to do that when in doubt keep it simple. Just keep it simple It does and try yeah, and again try not to get overwhelmed for your hover color You can just use a lighter version, you know or a transparent more transparent version of what the regular color is so Don't you don't choose it you don't need to do that. It just needs to do something different Perfect perfect so that when it so that when somebody hovers over it it does something letting you off the hook Yeah, totally don't over complicate it. Yes Mm-hmm. Mm-hmm. Are you talking about like popovers and overlays and Yeah, so so that so the data says Popovers those things when you go to a website and you're like, oh, I'm at this ah and This huge thing shows up and says sign up for our whatever people hate that stuff We still get people who want who want to put them on there But they just they knock you out of your they they they knock you off track. They knock the user off track. They're annoying. I Don't know anyone who likes them Other than clients because they just think it's cool that you know You can open up something and something will pop up for something like that, you know like a notification bar up top WP front notification bar. I mean there are billion plugins that do this kind of thing That's better for that kind of information the little slide-in corner things those actually convert pretty well There's a plugin called bloom Which I think is made by elegant themes and they do a really good job with these calls with these like Calls to action these kind of slidey in panels and stuff Take a look at that and you can you can trigger it that you know once you get 60% of the way Do something you can even do you can even make some of these smart enough so that like if somebody's about to click off the page Hey, wait, can I help? That's why they put chat boxes down there. Those tend to be pretty effective Yeah, sure I get Paul Absolutely. Thank you. I Love that you asked that cuz like the two-hour version of this talk, which it was like a few days ago You can use color to organize by category We did a website for the very sexy pollution liability insurance agency of the state of Washington and They're one of their biggest problems with they have all of these forms So what they do is if there's an underground storage tank and it leaks it wrecks the water supply So what they do is they provide help to people so that they can maintain them properly They provide insurance a cleanup resources all of that stuff They also do stuff with wastewater and they do they have all these things so their old website before they brought us on had All of this information So what we did is we we made all the underground storage tank pages have a big green banner All of the petroleum had a big blue banner and then I forget what the third one was but it had yellow I think homeowners homeowners stuff so and then on the on the home page We made three blocks so that people could self-identify and then as they make their journey through the site every page Related to that Topic has that color very prominently Brilliant. Yeah, absolutely. All right, so would do you want to restate your question for these folks? Yeah, so so we use we use the style tile process when we when we design and you know What we do is we try to get a lot of data and a lot of information Get the client's own words and then translate the stuff that they've said into sort of design languages and You know, you can have a really muted palette that you might offer a really bright palette that you might offer and Then as you can as you can help winnow the client and funnel them into making a choice and then just keep reinforcing all the time which is This is a big a big issue something. We always have to do just keep reinforcing. All right when you're looking at this Never say, what do you think? You know, so what do you think? Because then they feel like they have they also feel like they have to say something wrong, you know try to keep your review team very small You know and and help them understand that the website's not for them. It's for their audience So if so so do your research Figure out about color emotion if you can come armed with data and really good reasons why Then you can absolutely say to your clients. You know what? I I love that, you know, when you were in 7th grade you had a aqua t-shirt that, you know, you loved but Maybe we don't want to make your entire website aqua because that might resonate with you But it doesn't necessarily resonate with your users. Here's what we know resonates with people between the ages of 50 and 50 you know, whatever that kind of thing so so the more the more Research and discovery and all of that you can provide that that conversation gets a lot easier and then just keep saying I know But that sounds like personal preference. Be careful. It's that response to your preference and You know and I pretty much every time they'll go, you know, that's that's true I that is really just me and then you'll start to hear in the meetings, you know, it might just be me but So yeah, just know why you did everything that you did. Does that help? Anybody else? Yes, Sarah. Yeah, it's about the same. I mean I I read the same research There was also some research to indicate that now that Now that monitors are so much better We can actually have more of a print like experience on the web So I've seen some really beautiful websites that use Sarah fonts. So when we're talking about Sarah fonts We mean the ones that have the little little serifs little sticky out things on them And sans serif fonts don't have that. They're more rounded. So newspapers magazines all that stuff They use serif fonts and it has been long established the body copy on the web should be sans serif You know, it's I would say if you are going to use a serif font now Correct me if I'm wrong. You want to be sure that the line spacing is high enough you know one one problem that that a lot of websites run into especially with dense copy is Choose whatever font you want, but then the the lines are too squished together. So they I can't kind of You know deal. So one point six M I think is what we usually start with one point, you know, 160 times the Anyway, but just make sure that it's make sure that it's Spread out far enough and make sure you don't have Too many or too few words on a line that can like that we can geek out on that all day in terms of how many words There'd be on a line. Well, now I'm on a phone now I want you know all of this but But the Sarah versus sans serif thing I think I think the traditional knowledge still applies But I can't say that it I haven't seen it Applied successfully otherwise. Yeah, New York Times. Yeah, New York Times is all serif and that's been that's part of their brand too You know, sometimes your brand might be we're we're the New York Times We're serif Deal with it Yeah, but they're but they're able to adjust that so that it works. Well, I've read that too Yeah, absolutely. Yeah, and again, you know typography is another one of those things like color. There's a lot of emotion Attached to typography, you know, you see something nice and slab. That's why you see it on a lot You see slab on a lot of lawyers websites You know things that are for You know preschools or that kind of thing or a little more rounded So so consider the emotion when you're when you're choosing Typography as well because it things feel different, you know, we we try to we try to keep us keep stuff rounded because our whole vibe is friendly But you might want to be a little New you more New York Times a little snootier and if you want to do that Then you can absolutely go with a go with a serif font for everything. It looks very classy Anybody else boy trends ha trends, you know, they say when in doubt left left justify So I we don't follow it on our side. I think we write justified some stuff. We got all crazy but But yeah, it's I think when in doubt left justify, you know centering is the thing you probably want to most avoid Just because centering on it because you can't control it, you know And as as because we're all in responsive design, right? That that's gonna get a little weird looking, you know, so so yeah, it's When in doubt left justify Yes, we do, you know So his question is about the use of premium fonts versus the free fonts the only times we're we're always gonna go with Google fonts when we can You know for one thing you avoid sometimes you'll go to a website and you'll go well This is why is this all in aerial? This looks terrible and the designer will say wait a minute. Why does that? I've done this other thing. Well, that's because they were calling fonts that were installed locally on their computer So you want web-served fonts whenever you can so that's why Google fonts is great because it's free And you can get amazing fonts. However, there are cases where NC State is an exemplar used to be That where you know any web assets that you make for them you have to use their font, which is an adobe font, right? universe so That's right, so NC State is a perfect example You have to use universe on the website Now most of the websites here are being built in-house now Yeah Right Right Yeah, so I had worked in one of the one of the departments here when that Transition was first being made and that was one of the biggest things it was like we don't have universe We're gonna have to go buy it if you have to buy it Because of something like of a branding issue, which is all it usually ever is Then yeah, and the client pays for it and you install it and whatever and you can use the adobe What's it called Alex when you font library? Typekit. Thank you. Such a better word than font library. Yes typekit. You can use adobe typekit to serve those As well now there are plugins that will kind of do it, you know But great just go ahead and buy the font. They're not super expensive. Yes, somebody over here You do yeah, no, there's a commitment Yeah, there's a commitment they you know They don't give that stuff away for free and sometimes if you have to buy the whole library. Yeah, you're in for a grand How important is it to you client to have exactly that font when I can give you this font for free? And the font could go away. Yeah, anyone else have burning questions about user-friendly design tweaks Yes 16 picks Yeah, that's exactly right We start with 16. Yeah, we start with 16 for the body and then you can you can adjust from there, you know, you can Do your headings you can scale up from there, but 16 picks is a good place to start And yeah, it used to be 12 but people weren't looking on phones They looks good Yeah So go see his talk it to and you'll learn Right. Yeah, and in general, you know the whole thing is don't let this stuff worry you You know make some choice. Some choice is better than that first website. We saw Just you know just adding Just adding the color Made a big difference Just changing the font made a big difference, you know These these things are these are small tweaks not it not a single change was made to the content of this website to anything I literally went into the theme options and said Use large for the button size Use, you know Use the orange another thing I did that I didn't mention is sometimes you'll get an option for 3d button So this has a little 3d effect on it The Google Google's material design a lot of people use you know and that and it was because it looks like literal pieces of paper on a desk So the more you can help people we don't do shiny buttons anymore, although I'm dying for that to come back But they used to be yeah, they used to be really shiny It's okay to put a little cool effect like a little hover a little little, you know a Little micro interaction is what they call them, but if you can make people don't make people think that's really that's really it I could have just said that yeah Yeah, so you'll so the first yeah, that's a really good question. So ghost buttons I don't know I haven't checked the trend on that lately, but this is what we're talking about when he says ghost buttons So ghost buttons only have an outline and then they have something in them now We did kind of train web users savvy web users that if you see something like that it might be a button So hover over it and see what it does if you do have a ghost button Just be sure that it fills in or does something I'm not seeing these as much anymore though, you know, I think we I think we may be getting a little a little away from them You have it to look forward to you. They are yeah I can't honestly think of a good UX reason for a ghost button No Can you who likes ghost buttons? Oh All right Yeah, because you're querying Google Google doesn't tend to be slow, but but there are Alex what would you I mean? Yeah Yeah, and one thing I would say too is since there's scripts, you know There are essentially scripts you're calling that if you're finding that your websites hanging it might not be just the font That's causing that it could be that there's another script that's taking its resources Sometimes we'll find that as well But but yeah, but the font Google font should be should be cached Me too on two computers. Yeah, exactly exactly Yeah Yeah, that's it. Yeah, that's it. That's a great use for for a ghost button Did everybody hear what she said so so say you open up your website You have your big hero and you've got two calls to action But one of them is like the really important one look here do this too if you want to but but look here That's that's a great use for a ghost button because you're still satisfying the call to action But you're giving it less prominence and you're telling the user this is less important We really want you to do this pay attention to this first Anybody else did you like your doughnuts?