Practical Solutions to Common UI Design Problems - Steve Schoger

0:00okay i just want to take a second to thank nexmo um who's been a huge supporter of lara con a little america online um and it's a really cool system uh for communicating with voice messaging video they provide all the apis you don't just setting that stuff up just simple api calls make a phone call make an sms receive a phone call receive an sms all those kind of things uh just really simple and well done um over there on nexmo and uh so check it out go to nexmo.com they have a 10 euro credit in the swag bag so you can do that and just give it a shot that gets you

0:46actually quite a bit of uh of uh you know api calls so you can give that a shot play around with it just for fun or in one of your apps and see how it goes but a big thanks to nexmo for again being a uh a big sponsor of lara con online

1:10okay let's get steve in here

1:22there he is get the mute

1:32yep he's well-lit there we go got sound he's got light he's got an ankle got a dog oh my dog just came down to hang out hey hey buddy just doing a conference call right now um okay all right there you go my slides now it's good yeah i can see it so you're all set take it away okay great okay so um hey everyone um if you don't know who i am my name is steve shoger um now this comes up a lot um this is how you pronounce my name it's shogur and uh sorry um so i'm a visual designer from ontario canada i guess i'm one of

2:19the three uh canadians here on lyric and only today i guess i guess we're all from ontario too um now most people know me as the guy who teaches design to developers using tactics instead of talent and i hope to do just that today so in this talk i'm going to be sharing a few tips that will help you improve your own designs um now but i found the best way to teach this stuff is by example so my approach today is going to be no different we're going to be taking a look at an example i created that addresses some of the more common problems that i've

2:50observed developers struggling with and with that it's getting filled with a lot of mistakes that i see being made so if you caught my talk from last year this one's going to have a similar tone to it but it's using entirely new concepts it's a brand new talk and um last year's talk wasn't uh like a prerequisite or anything so you don't have to worry about that um so let's get started by taking a look at the example we'll be refactoring today so this is a design for a fictional flight booking application and i want to emphasize that this is just an arbitrary example that i made

3:27because i felt it covered a lot of the concepts that i wanted to share i realized that a flight booking application is quite specific not everyone is is working on a project like this but there's going to be a ton of practical tips that should be useful for any application and i took a lot of the ideas from existing booking applications and just sort of gave my own twist so let's just break it down one by one here so at the top we have a hero with the top bar navigation a large headline to draw users in and help them understand the value of the service

3:57right below the headline we have a few search options to help narrow the results when looking for a flight so we have some radio buttons to select the type of trip it is there's a few inputs for selecting the origin and destination cities and then some check boxes just to upsell the user into booking a hotel or renting a car and then finally we have the search button to submit the results then below this section we have a table that lists the deals of the day so if you're booking a trip like last minute let's say um so we'll be covering a few tips on table design and then below that we have

4:31um a few vacation package deals so if you want to travel on a budget you go to this section and each of these are presented with a set of data displayed in a car component and as we get closer to the bottom there's a newsletter signup form so users can stay informed on hot deals and then of course we have our footer with the site map location options and some legal jargon so like i said there's a lot of commonly used components that could be used in a variety of applications and and our goal today is just to touch on some cosmetic changes without affecting the overall

5:06structure so let's let's get right into it um let's move back to the top of this design and see what can be improved in the header section so uh i think the most glaring problem is the text on this background image so photos can be pretty dynamic in that they have a lot of highlights low lights and mid-tones but you need to give text a consistent contrast so using a background image like this is a really easy way to add impact to a hero but with that you run the risk of having poor contrast with text when it's overlaid on top especially um on top of busy areas so in this case

5:42there's some background interference with some of the labels on the left so the easy just find an image contains a space that provides you with an area for text and and this image does a pretty good job at that but like i said there's some interference so it's sometimes easier said than done especially when you're digging through a royalty free library for a perfect photo so the way to solve this problem is to limit the amount of dynamic areas on the image so one way to do that is by simply adding a semi-transparent overlay to the background image so this will sort of bring down the light areas and give the

6:19giving the image like less contrast against the dark areas helping the light text stand out a bit more but you can also invert this treatment and use a white overlay so this will tone down the dark areas and kind of reduce the contrast with the light areas now you can do this in css but for a little more control if you have access to a graphical editing tool like sketch or figma or adobe you can even bring the image in to those tools and adjust the contrast and brightness for similar results now you can even take this a step further and colorize the image with a

6:53single color this is just a great way to add impact to hero and to pair the image with your existing brand colors um now again this can be achieved in cold cold as well using the css blending options blending modes uh but that does have limited browser support so again i personally recommend bringing the image into a graphical editing software and then create the effect there so i'm going to show you how to do that right now so for example if you take this into an app like figma and figma it's free for single users by the way and then you got to start paying um when

7:30you start introducing a team um so everyone should have access to figma now when you import the image figma has this sidebar and has all your options on the on the right there so when you import the image and click on it uh you'll see the thumbnail there under the fill section so start by clicking on the thumbnail and then you'll be presented with a bunch of image editing options so from there you can reduce the saturation to zero so it's a black and white image now and you can adjust the contrast and a few other things just to level things out a bit then you're going to add a fill layer on

8:07top so do this by clicking the plus icon next to the fill area in the sidebar what i've highlighted there and then from here you can choose the color you want so i'm going to use this dark blue and then in the color panel click the drop icon on the top right and that's your blending mode options so from there we're going to change the blending mode to multiply and what that does is it sort of brings the image behind the fill it brings it through so you can kind of see some of the details and i even like to go ahead and if i have really good contrast is adjust the

8:42opacity on that fill there uh just to bring the image details out a bit more so yeah and if you do this in sketch it has a similar workflow and if you're working with a darker color like the blue i'm using here you'll definitely have enough contrast for your text so now like i said figma is free so you should have access to it but another great tool that will give you similar results it's a web app someone told me about this it's called duotone by sheepview shapefactory the link's at the bottom there and it allows you to take two colors and use them on the highlights and the lowlights of an

9:18image so in the example that we have shown here it's using like a bright cyan for the highlights and then a purple for the low lights and you can even mix it up and choose two completely different colors uh sort of get that spotify effect if you use spotify a lot of the album covers kind of look like this um so check it out play around with it it's pretty cool app um and you so you can upload your own images on here or you can uh has unsplash built right into it so you can search on splash so if you've never heard of one splash i

9:50highly recommend you check it out um it's just a great resource for looking for high quality royalty-free images basically you can search based on the subject and you'll get a ton of great results so that's where i found the image that we're using today so it's definitely worth digging through and yeah like i said this is just a great way to add impact to a hero and pair the image with your existing brand colors and of course it gives you that nice consistent contrast on the background so so our text is much more legible and pops much more now i chose this dark blue for the site

10:24but i don't want to just graze over that i thought it'd be helpful if i shared how i choose primary colors for for a site now the answer to that is quite simple i steal them i spend a lot of time looking on inspiration sites uh one site i like to check out frequently is landbook.com that links at the bottom there again landhyphenbook.com another one is siteinspire.com just to name a few like these so these are just like website guys you know some of the best websites they're usually curated by designers um so some great inspiration on there and then while i'm browsing if i see a

11:00combination of colors i like i may bookmark it or just sample the colors for future reference um and another great place to go for inspiration i think most of us are familiar with it is dribble and if you have a general idea of what colors you want to use already dribble has this color picker tool you can access by clicking that three dots menu up on the top so if you open that up and click the colors links down at the bottom there it's kind of highlighted you can search for shots based on a specific color you have in mind so if you click the drop the the hex code and

11:32the the drop at the top that opens up this palette and like having a limited palette like this it should make it a bit easier make to make a decision um you can even adjust the the threshold to if you want only like a certain amount of that color showing up in the shots so you can play around with it there and then from there you get a ton of great results using hand-picked colors handpicked by professional designers and then once you find an example you like you can sample the colors found on the bottom right of the dribble shot um so i found this uh shot that has kind of this

12:07blue and yellow thing going on i i kind of looked the way that looked so and to be perfectly honest once i do find something i like like this i like the blue and yellow um i end up using the tailwind default colors so um so in this case if i'm using something like the blue and yellow in that dribble shot i might use the blue and yellow palette from tailwind now i'm biased because i pick most of the colors on tailin but it usually has what i'm looking for or something that's close enough to what i'm looking for and very rarely but every now and then i

12:40might create a new palette to add to the tailwinds config file but usually i can work with the defaults and have something close to what i'm looking for so that should really limit your choices so yeah now that we've added the blue we'll be introducing the yellow from that shot shortly um but let's take a look at this nav bar at the top so the first thing i want to say is that nav bars don't need to be in a bar um i see every time developers build a site they assume um that the top nav bar needs to be a bar but putting in the navigation elements

13:14directly on the background it makes things feel a little bit more open and more comfortable really creates some space up there and now i gave this a subtle uh boundary um you can just add like a light border like i did so just i use like a single white pixel border just with reduced opacity and then this sort of kind of connects everything at the top so it uh draws our eyes over to the stuff on the right and it kind of associates with better with the stuff on the left so yeah um so this is looking cleaner and now that i've adjusted the background this

13:50headlines look much better but i want to create a little more contrast between the headline and the subtitle so the simplest and most common way to create contrast is by using size so either making the subtitle a bit smaller or making the headline much bigger but that's not really the way i like to approach it another way to do this is by using a soft color so to make white text uh softer on a dark background your first inks you might be too dark in the text by decreasing the lightness so it's a light gray so that's what it looks like with a lighter right it's a very subtle change

14:26but it does do the trick of de-emphasizing it a bit but it always looks a bit off on a color background so don't use gray text on color backgrounds so you need to consider that what we're trying to achieve is reduce contrast in that you want to make the text color closer to the background not gray

14:57white text with a lower opacity it almost looks gray so a better approach that i like to take is to hand pick a new color based on the background color so if you're using something like the tail and colors it already considers this you can just pick a lighter color but if you're choosing your own colors i typically just start by sampling the background color and then i adjust the saturation and lightness until it looks right so if you're familiar with the color picker that we're looking at here um this is an hsb picker it's what you get on like most graphical editing tools and and

15:31most in most browser dev tools and so what i would do is just drag the picker to the top left for a lighter color and the end result might look something like this so here it is with lower opacity and here it is with the hand-picked blue so it's a subtle difference but it looks much better now you can even take this a step further by rotating the hue and using the perceived brightness to your advantage so let me let me explain that what does that mean well every hue has an inherent perceived brightness so in this diagram i have the hue shown on the left and

16:10on the right it has the the values showing how they're actually perceived to our eyes so when we're working with colors like yellow and blue even when you give each hue the same lightness value yellow still yellow still looks brighter so this is called luminance and by taking samples from all the hues with with 100 saturation and 50 lightness and then plot them on a chart like this you'll start to see what colors have the highest and lowest perceived brightness so you can see here that the yellow is the brightest ups up in the top left corner there and blue is the darkest more towards the right at the bottom

16:53so one thing that's notable is that this is not a linear pattern so how does this all of this help us well i'm going to show you here the cool part about all of this is that normally when you want to change how light a color looks you adjust the lightness and saturation value seen at the top here um and obviously as you can see it works to lighten the color or darken if you're working in reverse but you often lose some of that color intensity so since uh different hues have different perceived brightness you can also change the brightness of a color by rotating the hues to the nearest bright color

17:30so in our case because our background is blue we're going to rotate the hue to the nearest bright color so in this case cyan so as you can see in this example it's a pretty nifty trick to create some sexy grates as you see at the bottom there now i wouldn't rotate it more than like 30 degrees that's usually enough to get a nice a vibrant gradient like that um but it so it works on gradients but this trick also works great with light text on a colored background so if we go back to our design looking at the secondary title we have our color based

18:04on the background color and the adjusted lightness but once you rotate the hue it looks like this so this is just a great way to make text just bring up that contrast ratio and still keeping the colorfulness of it okay so this is just starting to get interesting so let's move on to the search options so as much as the dark background helps to distinguish the individual inputs and labels it's still a bit tricky to read because the text is is pretty small so instead of these letting these components float on the background we're going to contain them in a panel now when you add a panel like this you're

18:43going to need to introduce a bit of space to give these components some room to breathe so lack of white space is probably one of the biggest mistakes i see developers make when designing for the web so i want to share a bit of a framework to help solve this problem so the common approach to introducing space is to just add a bit at a time and if it still feels a bit tight you continue adding a bit more right the problem with this approach is that you're only adding the minimum amount of space until your site no longer looks bad so as you introduce more space it's

19:20going to look better than your cram starting point of course but this may cause you to stop almost too early when you're trying to find the right amount of space leaving you feeling a little bit uncertain so a better approach is to start with too much white space so like an excessive amount and just gradually remove it until you're happy with the result now at first when focused on an individual element you might think it feels like too much white space but in the context of the rest of the ui ends up looking like just the right amount so yeah so the next thing we're going to take a

19:54look at are these inputs so first always remember to use input length as an affordance you want to create an expectation of how long an entry should be when typing in an input so in all these cases you can probably fit the like all these cases you can probably fit the input into a field that's about half the size which we have here so in this case it will allow us to comfortably fit all the fields on a single line when on full desktop view

20:28now major elements like this like the container they're not the only things on the page that need rim to breathe this also applies to components like inputs so i'm going to increase the height of the inputs i like to be pretty generous with space on inputs i pretty much always use at least a total height of like 40 pixels with like that that's with the text and the padding around it um but in this case i'm using these inputs are 48 pixels high so i like to i'd like to give them quite a lot a bit of room to breathe now at the moment these inputs have just

21:02a simple border with the inner white space and unfortunately this isn't that distinct when on a white background so a nice way to add distinction is to add a subtle off-white background to the input just enough to create that distinction but like not too much where it looks disabled so if i'm using a tailwind grays for example this is where i would use like the lightest gray on that palette and just to give the inputs that just a little more visual interest we're gonna we want to give it a little bit more scannability we're gonna add some icons to them now we're not gonna replace the labels

21:37with icons i see that happen quite a bit um but these icons really aren't that obvious and it's just generally bad for accessibility to remove labels now when adding icons to support text it might make sense to give them the same color as the text so here we have black text so you might think to give the icon make the icon black the problem with this is that icons end up looking too dark even though they share the same color so why is that well let me explain you want to create weight you want to create a balance with weight and contrast so icons tend to

22:16cover a lot more of the surface area especially when working with solid icons like this this makes them feel unbalanced when placed next to text that utilizes a lot less space of the total surface area so the way to work around this is to reduce the contrast by giving the icons a softer color this sort of works like a counterbalance so even though we haven't adjusted the overall size of the icons they feel much more balanced next to the text and they're not overly intrusive okay now that we've given these input fields a nice treatment what about these radio buttons and check boxes well right now they're looking at boring and

22:54they're as they're just using the browser defaults so a sure way to make an app look more polished is to remove any of the browser defaults with something a little more custom and this is just a great opportunity to add some color that we've already added and take something from feeling a bit more that was feeling boring to feeling a bit more well designed and this goes the same for inputs you can change the drop down arrow to something that's more consistent with the icons that we're using already so right now uh in that depart return field in the travelers field we have those just those standard like bootstrap

23:32like defaults drop down arrows so we're going to take those from a set as well and in that change i also reduced the label size to 14 pixels uh just so it's not taking away from the input value itself i always like to make my labels a bit smaller than the text within the input okay let's also better utilize the horizontal space by moving the search button just to the far right so it's aligned with these checkboxes boxes on the left and this will reduce the overall vertical space that it's taking up um and this also lines up nicely so it's below the last input users are likely to interact with so

24:11they're not jumping from one side to the other uh okay so let's also increase the height of the button so it's consistent with those inputs and plus we can add an icon to the button and just to provide a little more clarity we can be more language uh be more specific with the language so we're gonna change it to search flights okay so that's looking much cleaner let's now introduce from that dribble shot there was also yellow in that triple shot and i wanted to introduce that into the design so let's introduce that yellow um and that we discussed earlier into that button now it's always difficult to achieve

24:52high contrast ratios with white on bright colors like yellow um this happens a lot with green as well it's it's kind of a fuzzy area with green and if you want a high contrast ratio with yellow you end up closer with something closer to bronze and that's not really any good so the creative way to work around this is to invert the colors so instead of using white text on a dark background you need to use dark text on a bright background now we already learned that with the subtitle that we don't want to use black or white text on a colored background as it just looks a bit off so once again

25:32we're we're going to saturate this with a bit of the background color now because yellow is a brighter color we need to do the opposite of what we did with the subtitle which was a light color on a dark background so what we need to do is make the the dark text more saturated with a darker color so something that's going to be a bit closer to brown um and just two better so that's what we see here here's black and here's brown and just to better associate the upsell check boxes and the button as they are both the last step in the workflow let's give them a

26:12bit of distinction from the rest of the panel so the simple solution to this would be to divide uh this with a border but that can be a bit busy so we're gonna make it with an off-white background and it's just a nice subtle way to create distinction between two elements um that's not the same as a border okay now having the panel in the hero like this does a great job standing up because it's not very interesting so um an easy way to make this pop more is to give it some depth now there are a few ways of doing this one way is to overlap it with other

26:52elements on the page in this case instead of containing the card entirely within the hero section you can offset it so it sits between the two background section using a negative margin so that looks sort of cool but because parts of the panel share the same color as the background at the bottom it looks a bit funny so we need to add some distinction so since we're trying to give this design some depth let's add a heavy box shadow just to convey some elevation so uh this just gives it some nice depth and it kind of creates a nice border without actually adding a border it's a

27:30nice subtle treatment for that um so i want to explain my process for creating shadows a bit more in depth here um so the first thing worth noting is that i often use multiple shadows within a design to position elements differently on the virtual zed index now the larger the shadow you use the closer it's going to feel to the user so um here i have a few shadows and we're going to be introducing these shadows into tailwind as defaults later this month um so tailwind version one and usually it goes like this um i'll have a small shadow for elements that are closer to the background of the page

28:12this is typically for like buttons or inputs and then i'll have one that's a little further off the page so usually for elements like the drop down menus or maybe small panels and then sometimes i'll have an additional one for larger panels so i'm going to actually going to use this panel um this shadow for the panel we're currently discussing um because i really wanted to pop and then finally i'll have another large one for modals let's say so i might go between one of the shadows on the far right here so here it is again in context so as you can see that that middle shadow

28:49um it looks quite heavy in context but there's a bit more to this than just an offset box shadow with a heavy blur you need to consider that some shadows have two parts so what do i mean by that well when you look at shadows in the real world they tip they're typically created by more than one light source that gets destructed by an object now one is usually an ambient light and then the other is a direct light so the shadow created by the ambient light it's a bit tighter you can kind of see it at the bottom there it's a bit tighter and darker with a smaller offset

29:29and a smaller blur radius and then the shadow created by a direct light it's usually much larger but softer with significantly more of a vertical offset and blur and then as an element gets further away from a surface the smaller the dark shot smaller dark shadow created by the lack of ambient light slowly disappears so consider this by using a more subtle shadow as it gets closer to convey that elevation furthermore as the object gets further it slowly covers that direct light source so consider this by introducing a negative spread value so this is all the stuff we consider recently with the tailwind shadows okay and this technique gives you much more

30:16creative control than you get with just using a single offset shadow okay so back to the design now now that we've offset this background below and give it a nice shadow we're gonna do one more thing and that is to use color to convey depth so when designing on screens uh typically lighter elements feel closer to us than um than a darker element so if you want to make something feel even more raised off the background we can make it a subtle off-white to create that additional contrast so here it is with a white background at the bottom and then here it is with just a subtle

30:51off light okay let's move it down to the table below so now that we've made the background off-white it sort of pushed the table back this is sort of emphasis further emphasizing the point about color and depth so to bring it forward more we're going to continue in a panel now we don't want this to have the same amount of depth as the search panel that we just did above we want to well we want this to stand back a bit further away from the user so to do that we're going to give it a smaller shadow so if we refer back to this this all the shadows i was showing you

31:25we're going to use the second shadow shown here on second from the left now styling tables can be tricky it's often a lot of data to present in a condensed space um so fortunately there are a few tricks to make content a little more digestible so the first thing we're going to do is use alignment so for most content it makes sense to left-align columns but for content like dollar values and sometimes dates it's always wise to right align them so in this case everything's uh left align there but the dollar values on the far right those i right aligned and just this just makes it so the

32:03decimal places are in columns and this makes it much more easier to compare the magnitudes now another cool css trick you can apply to numbers uh like this is to apply the tabular numbers so this can be achieved by setting the font feature settings to tnum as seen here and this basically makes the text act like a monospace font without actually using a monospace font so it's much cleaner

32:38okay so what else can we do to this table these borders so these borders are making the table look quite busy so whenever possible try to use fewer borders borders can make a design look really cluttered and a nice more subtle way to distinguish rows on the table is by using zebra striping so i think it's much cleaner um now let's look at these headings as well um there's this preconceived notion that titles and headings they need to be big and bold and stand out against the rest of the page text but in many cases headings like this are acting more like labels they're supporting the content and they

33:17shouldn't be stealing all the attention so that means that headings like this should be a bit more subtle so a great treatment that i like to use that i just applied um is to use that small bold uppercase text with a softer color here the small softer treatment helps them stand back against the table content but that bolder upper case helps them maintain their heading status so yeah so this is looking much cleaner already but let's explore a few more ideas to organize this information so if columns don't need to be sortable uh try consolidating them um try consolidating the secondary information just for a cleaner look and

34:02that really opens things up a little bit so if you're working with a more narrow screen you can tighten it up a bit and then consider de-emphasizing them by using a smaller and lighter text now if the data calls for it uh try enhancing it with using images so now so there i added the uh the airline logos and let's look at these book now buttons they're sort of making the entire table look pretty heavy on the right side uh just because they're dark and on a single column they really draw you away from many other important elements on that page so we want to give them more of a

34:45secondary treatment so a popular approach to styling buttons is secondary buttons is to simply outline them and although this does give them that secondary appearance it can be a bit boring it tends to be overused so what i like to do which is a great alternative is to give that the buttons a soft solid background based on the text color so um here i'm just using like a subtle gray and making that text dark um and this this treatment it's just not as heavy so it looks a little bit more subtle okay let's make this text link as well let's make this the same color as the

35:22brand color we're using everywhere else so that dark blue and just to give it a bit more about link style um instead of using again underline to make something look like a link i like to add like a generic icon like a chevron to the right of it uh just to make it look more like a clickable target okay so i think this table is in a pretty good spot so let's move on to the vacation package deals at the bottom here displayed in cards so often when working with with images you may run into the issue of having different aspect ratios to work with so this can really throw off

35:57the layout if you have multiple images displayed side by side as seen here so instead of just using the aspect ratio center the image inside a fixed container and crop out anything that doesn't fit now the beauty of this is that you don't need to edit the image inside of a graphical editing tool before bringing it into the web it's it's quite easy to do this in css by making the image you're using a background image and then setting the css background size property to cover and this just cleans up the entire layout quite nicely and making things look much more organized now the buttons at the bottom here those

36:41book now buttons we don't necessarily need these buttons because like sites like airbnb um this is kind of like a card based layout uh and youtube they're both great examples of how these card based layouts can get away without including buttons and they still manage to look clickable so we can remove them to the to our design okay now the details of these cards they look a bit busy at the moment so let's see what we can do to clean him up a bit so let's zoom in a little bit here so the first thing i want to address is the labels and in many cases you don't

37:15actually need a label uh so for example in this case we have that the 12 12.95 there it's clearly a dollar value um it's clearly a price so you don't need the label for that and the the link the url there it's clearly linked with the com so it's clearly a website so you don't need to a label to identify that now when you're able to present data without labels it gives it much more it gives you much more creative control to emphasize important information um like in the this case the price is probably way more important to the user than the website um that they're getting

37:53a deal from so we want to make that a bit bigger and bolder and then soften that that website a little bit and then we're also going to reduce the noise created with these borders by using a more subtle off-white background to distinguish the sections so here it is with borders and there i added just a subtle off-white distinguish to distinguish it from the top and again try to get creative with the data hierarchy by using a combination of font size weight color and uppercase letters uh just play with it and see what you can come up with so here i made the the location i used that small uppercase

38:29treatment that i like using everywhere and the i just emphasized that description a little bit so it's a bit more readable um furthermore we can also use color to enrich data to make it easier to interpret so for example if we take these offerings um and put them inside of colored badges so just so they can be taken in at a quick glance and much like the button um at the top we're gonna give these badges sorry there's also another one on the right here uh that green one we have a red and green one uh we're gonna give that soft solid background with the dark text just to

39:07make them a bit more subtle and more accessible because red and green um they're typically hard to get those high contrast ratios there there's kind of a fuzzy area with red and green so um i find that this effect works quite nicely for that let's take a look at the newsletter section so right now it's just sitting directly on the background there's nothing really distinguishing it um so it's not very compelling so one way to add excitement to the background is by simply changing the color this is a great way to add distinction between entire page sections um and just keep things look from looking interest keep things looking interesting

39:48um and this is actually a great technique to use on marketing pages i see this happening quite a bit just to split up different the different feature sections just rotating the the color um so the idea is to switch up the background using existing colors from the site so here i used the blue that we're using elsewhere and then at the bottom i just inverted it i used our dark which we are only using we're normally using on text and then inverted the text so it's white on that and now you can even go as far as adding a background pattern to some of these sections so

40:20in case you've never heard of it i made this site a while ago it's called hero patterns which is a collection of repeatable svg background patterns it's it's great for backgrounds on marketing pages or apps like the one we're working on the type the topography one is really popular um the one on the right there and um i haven't updated this in a while actually but i think there's about 100 patterns on there i should really make more but yeah okay let's take let's make a few changes um these elements just so they're consistent with some of the other changes those changes we've made so here i gave the newsletter

41:01description text the same color treatment as the subtitle at the top so i gave it that cyan color i also reintroduced that yellow button as it just has great contrast on that blue background and then finally i increased the size of the input to be the same as everywhere else yeah so this section it's a little heavy it's taking up a little bit more vertical space than it needs to um so if you're working on a design that takes up a lot of vertical space like this and have a lot of horizontal space you can utilize try to split it up into columns making the content flow from left to right

41:41instead of top to bottom it works great especially in a case like this where the solid background color still manages to associate the information with each other okay let's move on to the footer um now i love big footers like this they sort of act like a catch-all if you have some nav items you need to include but they aren't important important enough to occupy valuable real estate at the in the top nav but with that it's nice to have some sort of structure when you have a large site map like this so the way i like to handle this is by adding subtle labels to each section so again using that same

42:18uppercase treatment that soft uppercase treatment um for the same reasons i've been using it everywhere it just really helps that content stand out and makes the title stand back but it still allows them to act like a label okay finally the last thing that stands out is the legal jargon and the social media icons at the bottom right now they're sort of floating there now i know i mentioned to use fewer borders i always preach that but in some cases they do work great to associate content so they just sort of solve the problem of the floating elements and they kind of associate the elements a bit better

43:00so i added just a subtle border above them okay so that nearly wraps everything up but i just want to make a few more finishing touches just to bring this design to the next level so first grays don't have to be gray pure grays they can make a ui look pretty dull and unnatural so what i like to do is saturate the grays with a bit of blue or brown for a cooler or warmer feel and the thinking here is that you're sort of adjusting the overall temperature of the site this is similar to what you um experience in the real world from a combination of things like the light

43:38source say you're using a warm light or a white light and you may also get this effect from just um reflective surfaces so it just makes everything from feeling makes everything feel more natural when you when you saturate the grays so if you want to make your design feel more cool saturate your grays with a bit of blue and if you want them to be more warm try saturating them with a bit of yellow or brown now i find uh that i mostly saturate my grays with blue because i usually work with cool primary colors um but i might use warmer grays if i'm working with warmer colors like red

44:18sometimes purple sometimes it can work with blue i know base camp consciously did this and their site's primary color is blue but try to experiment with both but i usually work with blue the tailwind default colors uh grays they are saturated with a bit of blue now when doing this if you're wickering with hsl values don't forget to increase the saturation for the lighter and darker shades to maintain a consistent temperature if you don't those shades will look a bit washed out compared to the grays that are closer to 50 percent so and how much you want to saturate your grays is completely up to you add just a

45:00little if you want to tip the temperature slightly or you can crank it up if you really want a really saturated interface and i know it's hard to see in a chart like that so here's what it looks like when the grays when you don't increase the saturation as you get lighter or darker so that middle one is much more saturated than the ones on the outer parts um and this is what it looks like when you make that adjustment so this is much more saturated so still might be hard to tell depending on the screen you're looking at um so here they are stacked again

45:36uh so it's especially noticeable on the outer ones uh the two that are like second from the outside compared to the ones at the top the ones at the top are much more dull okay now like i said i usually like to go for a more saturated look especially if i'm working with cool primary colors like the blue i've been using so here's what it looks like when it's gray and there it is with the the blue so it makes a big difference okay finally i just want to share a few ins on choosing false um i'll use good fonts so at the moment this design is using uh

46:17the default system fonts text so in this case san francisco because i'm on mac um on an android device you might get roboto um and these are all great fonts but to be perfectly honest um i do quite like san francisco especially i like using them the system font stack for like in-app experiences of a product and using something more unique for like the marketing page the branding but i think it's worth exploring a few different options and i thought it would be cool to share how to discover new fonts so there's a lot of ways to learn about new fonts they're pretty much everywhere you

46:48can simply just search for popular fonts on google or adobe fonts and these are all great services but that's not very fun so i get much more interesting and better results by digging a bit further so this involves a combination of getting inspiration from existing websites in the same way i find color combinations sometimes i go to the font foundry websites these are the companies that design the fonts and i see what fonts they have available so like half their fonts uh they got a great domain name typography.com commercial type is one of my favorites in claim type foundry just to name a few these are some of my favorite foundries

47:26um but i want to share how i use a combination of these methods for choosing fonts and how i landed with the font that i'm going to i that i ended up using for this example so just like choosing color i go to all the same spots for inspiration so i check out landbook.com or site inspire to see what fonts they're being used but um but one time when i was casually browsing the web looking for inspiration i found myself looking at some of the official themes on bootstrap and i came across this one theme that was quite nice and i was curious about the font

47:53being used and so naturally i opened up the dev tools to see what font was there and it was a font called cerebri sans so from there i googled i googled the font to see where i can get it and see if there's additional information about it and then from there i learned that the font was designed by a guy named alfredo marco pardell i hope i'm pronouncing his name right he runs a studio called henkin design where he and a team have designed a ton of custom high quality fonts so i picked up the bundle um it was like 120 bucks for like 45 fonts it was kind of a

48:28no-brainer it was on sale and i discovered a font called barter exchange and i thought it would be perfect for this project so let's take a look so here it is with san francisco and here it is with barter exchange so and i've been doing this for uh and a combination of these things for quite a long time and so i built up a decent collection of fonts that i've been going back to regularly and discovered a ton of fonts using this approach so yeah so that pretty much wraps everything up so let's just compare the before and after so here's what we started with

49:04and here's where we landed so it's much cleaner

49:13okay now if you enjoyed this talk and found it useful i uh recently launched a book called uh refactoring ui um with a guy named adam wyven maybe you maybe know him i think he's speaking right after me actually um and it's gonna be loaded with it's it's loaded with a ton of practical tips just like the ones i shared today and at the moment you can get it for 40 off so check it out um i'm also quite active on twitter you can find me at steve sugar where i share a ton of tips like the ones i just shared so thanks all right nice job thanks

49:54just like magic yeah yeah we just redesigned your site in 45 minutes right yeah exactly it's like uh trust me everybody watching this has been like well i spent three days trying to like do one third of that yeah well to be fair i spent like weeks on this prepping the talk so i spent probably just as much time as everyone else that's awesome um i think the one question that came up that a person had was um like in the buttons in your design like i think like the uh like selecting your airfare buttons and things like that like what do you like on hover states

50:31like do you just do the cursor change do you change the colors i'm sure you might do different things but in that design what would you think you'd do that yeah i typically make it a bit lighter um so i've been referencing kale when colors a lot in this because i usually use that um so if whatever i'm color i'm using for the button i'll just use the the one up on the tail when scale for that so i'll use the lighter version of that sometimes they go a bit darker but usually a little bit lighter all right great awesome man let's practice it okay i

51:03thought there'd be more questions i actually mocked up a mobile version of the site if you want to take a look at it but yeah show us yeah i i went a little over time and i thought i'd be going way over time if i did the mobile stuff because i know uh tables design comes up a lot so here's my sketch file and uh uh so table design comes up a lot on and how to make it work on mobile devices uh and there's a few solutions to that one is to um obviously just do the horizontal scrolling that's kind of the hacky way out

51:35um and the way i would do it like you got to understand like table design doesn't when you reduce you i would like sometimes like just reduce it down to sort of the main items like kind of pick out like what are the main things that need to be on the table and then limit it down to those two options and then for this example i kind of made it like an expanded menu but you can kind of click through and uh but for the most part this design was pretty stackable uh so i just like to design pretty heavily in columns so everything stacks really nicely when

52:10you get it down to a mobile device yeah i like that table idea yeah um every developer hates building what you're showing every everyone everything i know i know i was like thinking that too i mean you don't make this expand you can like kind of click through to another page um another option is to i mean every developer thinks they have to have a mobile version of their site but half their stuff i see them send me it's like it's designed for developers anyway and i feel like most of them are going to be on a desktop anyway so you know why do you need to make that mobile version so

52:41that's true too i do think that's just like this you automatically like like i have mobile but i think in a lot of cases you you might not when you really think about your audience or if you can just get away with the pinch to zoom you know if that's gonna be enough i mean there's times i wish sites had pinched the zoom and just gave me the full sight and didn't have a mobile version yeah sometimes i love the pitch to zoom you know depending on exactly what you're trying to do so exactly exactly so yeah that was great thanks man okay take care yep