The Little Details of UI Design - Steve Schoger

0:03there he is make sure you unmute yourself steve there we go all right there we go on my laptop monitor my laptop camera here so it's kind of looking up at my nose here all right try to look down mostly i know you have a bunch of uh visual slides so i think everybody's gonna be more focused yeah this is a very visual presentation so um you probably don't have to look at my face at all all right we'll let you take it over okay i'm just giving you a second i'm gonna share my screen here

0:44okay so the name of my talk is the little details of ui design and this talk is about some of the observations i've made when working closely with developers over the years i often see the same mistakes being made when they're trying to design their own applications or even implementing designs that i've provided and the thing is most developers know what good design is when they see it but they're just not sure how to get the same results as the work that inspires them and then as a result they resort to using component-based frameworks like bootstrap now bootstrap's a great starting point especially if you're prototyping a

1:22simple app or need to get a basic setup really quickly but it can also be really constraining if you're if you want to produce like high highly polished designs similar to that work that inspires you so how do you get to that that next level well when you look at examples on sites like dribble um it seems like such a huge leap to producing results and i know that feeling which is the feeling i had when i first started designing um that you just can't help but feel overwhelmed to the point where you don't even know where to start but if you break it down and look really

1:51closely at some of these some of these examples you'll see that it's not such a huge leap after all and it's just a bunch of little details so for example these designs they're really similar they almost look the same they have they share the same layout and content but the one on the right just looks a little more professional and the difference between the two is just a few small changes now this is just a really small example but these are the types of changes that can make your design appear more trustworthy and are going to give your users more confidence when using your application so for this talk i want to show you how

2:23you can make these changes that will help improve the emotional experience of your design um but i'm going to do that with much larger example i'm going to be refactoring an app called sneakedin it's a social career app for sneaking and i'm going to be starting with a design that looks like this and while i refactor this design that's loaded with plenty of common mistakes i see developers make i'm going to walk you through every step and along the way i'll be sure to share plenty of practical tips that you can apply to your own designs but i also hope you'll learn a little bit about the process um

2:55where you can look for inspiration it's just as well as just the general workflow when refactoring your own apps so there may be a few ideas here that are very specific to the ui i'm designing but i hope by addressing a few of the specific things it will help you understand what goes through a designer's head when approaching visual design okay so before we get started let's just take a look at the layout we have here um we already have a decent layout to start off with it's pretty similar to most social sites out there um the top bar it mostly consists of a search input we have some notifications

3:30uh icons in the top right there down the left we have our main navigation we sort of have this activity panel there to display the various stats of the user down the middle we have this news feed and posting functionality and finally on the right we have like recommendations for the user like who to follow or various jobs they might be qualified for so to make this talk a little more digestible i'm going to be addressing each of these sections one at a time so let's start with the header so as i just said the top bar mostly consists of the search input and some notifications

4:04on the right there um and these are all pretty important so we really want this top bar to stand out a bit on the page and right now it's looking a bit bland the the dark gray doesn't have very much personality so it it might be nice to bring a splash of color into it so one way we can do that is by just referencing the primary brand color that i have here um and that gives me an interesting result it stands out and brings life to the page but unfortunately it stands out a little too much um and plus this color might be we might

4:34want to use this color later on for like a primary action or bring attention to another section of the page um so instead of making the top bar the same color as the brand color um i can try using the current gray and just bringing a bit of the brain color into it a bit just to make it a bit more interesting so how can we do that well let's take a look closer look at the color we have here when working with color on the web we mostly define color with either a hex code or rgb values but these concepts they're not only difficult to understand

5:06but but the values have no correlation with one another so if you're using like a red hex code in a yellow hex code to get from one dealer you just have to know the hex code so a much easier way to understand color is using hsl values so hsl it stands for hue saturation and lightness hue represented at the bottom the bottom bar there um it um it defines pure colors like red green magenta pretty much all the colors of the rainbow as you see there saturation is the x-axis on this picker and defines a range from gray which is the far left and the hue which is on the

5:45far right and you find the hue at the bottom so if you change the change the hue at the bottom here it will alter the color on the right which is currently blue and then finally we have lightness that's the y-axis in this pecker and it divides a range from white which is at the top to black at the very bottom so if you wanted to use the most pure hue the values would be defined something like this now q is measured in degrees so it ranges from zero to 360. saturn and saturation and lightness are defined as a percentage so if the color is fully saturated it would

6:19be 100 um and on the y-axis 100 lightness would be pure white and zero be pure black so in order to get a pure hue lightness would need to be 50 as you see here now even though hsl is supported on all modern browsers the picker you see here does not actually exist you might be more familiar with a picker that looks something like this which is an hsb picker now this is what you get in graphical editing tools like sketch or adobe products and even chrome's dev tools use this when defining hsl values um and the only difference difference is which is a big one is that

6:58the y-axis represents brightness instead of lightness so what that means is that in this case there's only one white value which is in the top left corner instead of the entire top of the panel like you see in the hsl picker and as it gets more saturated and becomes more intense until it reaches it it reaches a pure hue value in the top right of this panel okay so when i define the brain color as an hsl it might look something like this now i can't simply just add the hue value to this gray and hope that will get blended um to do that i need to

7:34increase the saturation um so here's what that would look like so the top number is the current gray background color and in the middle is my brand hue and at the bottom you can see that i've taken the brand here and i saturated it only a bit about 22 as you can see there and i kept the lightness to be the same value as the current gray um and this will just give it a nice hint of teal um in the current darker header so here's uh i brought this up just so you can see the change here's the before and the after so you may think it looks pretty subtle but

8:06it just sort of makes it a little bit more interesting now if you need some inspiration for choosing your own colors um try using dribbles color picking tool it limits the color choices as you can see here and provides some really good results um you can also filter the results to show the most popular shots and it's great because all the examples are in context of like a real app or just something a designer designed so you can get some really nice results on there okay so the next thing i want to take a look at is the input right now it's looking a little too

8:40bright sort of intense so we want to tone that down a bit uh i'm going to reduce the intense light by saturating it with a bit of the background um you can either do this by dropping the opacity like 10 20 or if you're like me you'll hand pick a color by eyeballing it until it looks about right uh you don't want to make it too dark because you still want it to look clickable um and not only does this bring the intensity down uh it makes it feel kind of glued to the header now which is nice but it also allows me to use white for a

9:12more distinguished focus state and now i want to round the corners of this input not only because it gives it a nice soft treatment but i want to use a consistent corner radius um so as you can see here i'm using a corner radius for all the other components like the panels and the buttons by having a sharp edge on the input it just makes things a little bit inconsistent and you might be asking well why don't you remove the corner radius on all the other components and it's because it sort of mimics the low a little bit and it's always nice to try and find ways to

9:43incorporate the brand identity into the ui bit even if it's as subtle as this so i'm gonna go ahead and apply that nothing too much unless i'm going for like the full rounded look i usually make my corners between like four and six pixels okay now because i traded all the other components a bit i want to do the same thing with this search icon right now it's full black so i want to lighten it a bit just so it's the same uh close to the same lightness as that placeholder text there um so i lightened it it feels more balanced and once again i saturated it

10:15with a bit of the background colors so it feels more glued together okay so right now i'm using font awesome for the icons and font awesome it's a great resource uh it's been really widely adopted and i get why it's a huge collection of icons that are super easy to use now if you're using an icon set like this be mindful of the icons that have both an outline and a fill and try to be consistent with what you're using everywhere else on the site you want to avoid using multiple styles i see this happening developers will often take icons from the noun project which is a site um where you can

10:53grab a variety of different icons and they'll try to find icons that fit all the needs for their website but they get them from all these different sets and uh it just looks messy it's better to use one consistent icon set because designers they spend a lot of time on icons considering both like the weight and proportions to create a balanced and cohesive set as you see here now so i made a list of both free and available to purchase icons um i won't talk about each of these right now i think they're all great sets um each of them have their own personality but it's also important to find the set

11:28that has all the necessary icons you need for your project the last thing you want like i said is is multiple styles scattered throughout your ui so yeah i won't talk about these all right now but you can check them out later when i share these slides so i'm going to use heroicons for this particular ui um i designed and launched these about a month ago um i've been maintaining them quite a bit i've updated them a few times so you can grab those on my website um and so it just felt appropriate to use them for this talk so i'm going to go ahead and replace the

11:57current ones here's the current ones and there's the new ones okay so now this top right corner it's looking pretty tight up there and because this profile picture is actually a drop down with some important links i really want to draw more attention to it as well as indicate that it's a drop down to provide some expectations so i'm going to give this drop down an arrow just to fulfill those expectations but i'm also going to surround it with a bit more space adding a bit of space is a really quick and easy way to draw attention to something even as little as this and i also put some borders around it so

12:36it doesn't look awkward it just gives it some defined boundaries as you see there um now it's looking cleaner but one last change i'm going to apply is i'm going to make that profile picture a circle shape circles are great for profile pictures they can make a bad photo look good um and they just look a little bit friendlier so here's a bunch of examples from twitter uh instagram and linkedin i think facebook is now using circle and they're just kind of on trend right now which is it's good to pay attention to that kind of stuff so so i'm going to apply that to the design

13:08here's the before and the after okay so now that the profile pictures surrounding space pushed everything over just a bit this once large gap that i had here um it now feels kind of like a narrow it's an awkward narrow gap so what i'm going to do is i'm going to evenly distribute those icons in that space and because i tone down the input by saturating a bit with a bit of the background i want to do the same thing with these icons for consistency so that change is a bit hard to see um so i made a quick close-up of this section so here's the before

13:45and the after and this also makes it so we can now use white for the hover state kind of like how we used uh white for the input on the focus date okay so the top bar is looking pretty cleaned up let's just see what it looks like with the rest of the page okay so i made a ton of changes here but we've barely gotten started so let's move on to the activity panel okay so i already talked about changing the profile pictures to circles so i'm going to do the same thing here and the next thing i want to take a look at is the profile

14:17activity on the right here right now because the important information like the values it sort of gets buried in there and i want to bring them out a bit more but first i want to move that profile completion that top item there i want to move that label and value to be underneath the username here um as it just has more of a relationship with these items um the idea here is that having it underneath the username will ideally encourage users to click through to the profile as it's only 40 complete here and i also updated the language a bit so it's acting less like a label and value as you see here

14:49and it's more using words like speaking like speaking to the user like a human so when designing interfaces that show this sort of information um structure things to emphasize the information itself so it's easy to take in another glance um labels are important but they shouldn't be competing with the values themselves so and a way to do that is to use font size to emphasize important information so here are a few examples from coinbase spotify and message bird where the label is emphasized with size so the number stands out much more um now when you're going to introduce a number of different font sizes like many

15:31elements of graphic design it's always good practice to limit your choices and one way to do that with type is by introducing a scale now typographic scales have always been around in graphic design if you took graphic design in school they teach you all about this stuff the example at the top here is a classic typographic scale which is a harmonious progression of font sizes often used in print design and i generally stick to the scale um but i do with the exception of two numbers first i like to use a 20 pixel size font instead of 21 pixels and that's just mostly my ocd it's weird that we have like all these

16:07nice even numbers we have an odd number right in the middle there so i make that 20 pixels and the other exception is that i like to add a 30 pixel font um just because i always find myself reaching for something that's in between 24 and 36 and that just kind of fills that gap nicely and anything beyond that i'd work with multiples of 12. now to be honest i'm not too strict on this font sizes are an example where you just need to use your eyes but if you do want a starting point this is a pretty good safe call okay so for this design

16:40i like what message bird did here um where they have three different rows in the pricing section so i want to give this a similar treatment um so i gave this three different font sizes to create kind of a clear hierarchy um and this makes it much more organized um but now my eyes they're really drawn towards that large headline on the left here now this is something i see often with bootstrap sites developers will use an h1 tag for the sake of semantics and end up with a huge headline which takes focus away from the other parts of the page so i want to shrink that down a bit

17:15uh so i want it to be just about the same size as the values on the right so it just feels balanced and it still manages to stand out um it stands up more actually as it should because it's next to the profile picture which is really the focus of this this panel here now i want to tone down that welcome text a bit because it's really just supporting the username and because we have this nice thing happening on the right with the three rows uh i'm gonna go ahead and give it that same treatment by making the welcome text the same size as the labels

17:43and this just makes it so everything sits on the same row sort of creating this nice scan line as you see here okay so by making all these small exchanges these valuable changes um i was able to free up all the space here and i think this goes to show that making a whole bunch of little changes can lead to one big change because now i can push all the information over on the right over here and that results in all this extra space on the right side where i can now it's now enabling me to move the sidebar up too flush with the top okay so there's a clear hierarchy being

18:18made here with font size alone however with all the text being the same color it does look a bit busy plus i also want this large text to stand out a bit more so one way i can do that is making the other items stand back a bit excuse me like a drink of water um so i'm gonna use color to create that hierarchy now if you refer back to the previous examples where i use coinbase um spotify message word they along with font size they also lighten the small text to be a bit just put more emphasis on the values now when you introduce different

18:57text colors to create a hierarchy like font sizes you want to limit your palette i've seen some mate sites use like 50 shades of grey for their text colors and this is just unnecessary and messy especially for text you can easily get away with using like three shades of gray um you can have a dark one for import information you want to pop one that's a bit lighter for secondary information that's still easy to read but it's easy to glance over when scanning the page and another lighter one but still legible for tertiary text um now this may include like metadata or in the case here um the job title for the

19:31user let's just de-emphasized a bit now if you're using a framework like tailwind you can get away with using these three shades for your text colors and if you're working with a darker background you can go ahead and use these lighter colors just to get that inverted treatment okay so i'm going to apply that to here's the before and the after and this is pretty subtle change so i did another close-up of this section um uh but and so that's pretty subtle still but it really makes those values stand out a bit more which is nice okay so one thing that still looks a bit off is there's an inconsistent um value

20:11being used for the padding around this container much like type it's also a good practice to limit your choices with space so we're starting to see a pattern here right so one way we can introduce space spacing scale is to reference your type scale so you can probably get away with using half as many values as you see here now i'm using pixel units quite a bit in this talk for the sake of simplicity but if you're using ram or m units um you may need to pull the calculator and kind of figure out what the units are now for this container i'm going to use

20:44a 20 pixel padding so here's the before and the after and that's just just looking much more balanced it just kind of holds everything together a bit better and yeah so now gamification it's a pretty important aspect of this application as well as many other social apps it's really the only way to keep people engaged nowadays so i really want this section to stand out more because it contains all those activity stats we see there unfortunately it gets a bit lost compared to the rest of the design so i really want to use color to draw attention using bold color is a really easy way to

21:20draw attention as you can see here with stripes dashboard or ghost which is a publishing application they use it on their pricing page now at the beginning of the talk i talked about incorporating the brand color into the top bar and i only hesitated because i thought i could make better use of it for more important information on page and this one just seems a bit more fitting so i'm going to apply that change by giving this a background um so there's what it looks like obviously that looks stupid because we haven't changed the text color so i'm going to go ahead and invert that so that's looking better

21:56and it definitely makes this section stand out more on the page now earlier when i made the text lighter i just made it great to de-emphasize it which makes sense on a white background because i really wanted to create the effect of reduced contrast but making text color a color the color closer to the background cue is what actually helps create the hierarchy not making it a light gray so what you want to do is saturate carries when using a colored background so here's an example of was just explaining how contrast works on a white background with grey text but when you use the same treatment on a

22:30colored background it ends up looking muddy and doesn't quite have the same contrast i'm looking for so there's two other ways you can do this one is by using white text and dropping the opacity bit anywhere from 20 to 30 should suffice um or if you're like me you'll manually pick a color um and i like doing this just because it gives me a little more freedom when i just lower the opacity i'm simply changing the lightness whereas when i handpick a color i can saturate it a bit so let's go ahead and update that with the hue that's closer to the background so once again here's the before

23:09and the after as you can see it just adds a bit of glow to the text it feels less muddy looking on the background okay so another small update i want to make is to make those growth profile completion numbers highlighted here i want to make them white so let's stand a bit more because they're helpful numbers and it would just be nice to make them stand be a bit more scalable next to the labels they have there so that's a pretty subtle change it's almost hard to see and i think this goes to show that even though those colors are accessible they pass accessibility standards i checked um they could be a

23:40bit more legible so a quick way to do that without increasing the size is increase the weight okay great now the text is looking pretty clean legible it also has a nice contrast but just to give it a little more pop i'm going to add a subtle drop shadow to it so here's what it looks like without a drop shadow there it is after and i mean there are close-up of this section because it's sort of difficult to see so here's the before and the after okay so this is looking much better but we haven't really touched on this premium features promo area so the first thing i want to

24:15do is give that text a nicer treatment so what i did here is just to give it some visual interest is to emphasize that main benefit text a bit by making it bold and making the second point a bit lighter in color just to make it stand back a bit and i also want to change that blue link on the right i want to change the blue link text to the brand color since the blue is looking a bit out of place on this um and i also made it bold so it stands out a bit more okay and finally i added an icon on the

24:44left just to bring a little more attention to it make it look a little more inviting okay so one thing that still feels off is the box shadow on this right now it hasn't even spread around the entire panel and offsetting box shadows it's a really easy way to make them appear a bit more natural so essentially when you have a box shadow with an even spread around the entire panel you're not providing a light source by offsetting it a few pixels down you're adding a light source coming from the top so here's the before and the after uh now i now that i've offset it a bit

25:18it's more apparent that it's heavier than it needs to be well a mistake i often see developers make is exaggerated exaggerating the shadow it's like they just discovered the effect and their eyes haven't been trained to realize this that it's too heavy so i'm gonna soften that a bit bringing the opacity down to eight percent so i'm gonna go ahead and apply that shadow to all the panels so here's the before and the after um so let's move on to the news feed now i know it may seem logical to touch on the new post section right now but i'm going to come back to that shortly

25:52and you'll see why so i'm just going to scroll down here now i've made the profile pictures circles everywhere so i'm gonna make no exception here um and i also updated the icons i went over that already so i'm gonna update that here and finally i'm gonna give the container some padding in the same way i've given the activity panel padding for consistency okay now just those three changes it's looking much better but there's still a few things i want to review so the first thing that stands out on this is all those blue links which also appear heavily on the sidebar here um so take it easy on the links um here are a

26:31few examples from youtube medium and uh airbnb which are all link heavy sites they use a dark bold text to emphasize those links and this is much more legible and it still manages to look clickable so here's the before the after now even though this is much more legible all the type is kind of fighting for attention there's no hierarchy being made here it's making the entire newsfeed difficult to scan now we've already discussed using color to create hierarchy so i want to introduce three colors here i really want that username to stand out because people are likely gonna engage if they have a relationship with that individual

27:12and i want the body body copy to be easy to read but easy to glance over when it's getting the the news feed and i want to make that job title stand back a bit as it's just supporting the username okay now now with all the font colors updated those icons really jump out even though they share the same color as the text that are beside and that's because the icons are heavier in weight than the text so they're perceived to be a bit darker so when working with icons that have heavier weight than text make them a bit lighter so they feel more balanced next

27:42to the text so good examples of um that do this are sites like github shopify and google search you can especially see it on shopify where the the icons are substantially lighter than the text because you really want that text to stand out and the icons just to support that so i'm going to do the same thing here so here's the before once again and the after now i've already discussed updating the spacing and the container um so it's feeling a little bit more comfortable there but i also want to consider the spacing for the text you want to pick an appropriate line height now unfortunately there's no one size

28:19fits all because size and line length influence the line height so for a small body copy text a good safe call is 16 pixels with a 1.5 line height and as you can get to larger sizes you just want to tighten that a bit to avoid heavy spacing between your lines so because i'm using 16 pixels font here i'm going to make the body font 1.5 line height and that just makes it gives it a little more room to breathe making it more comfortable to read okay so now this bottom section it's taking up a lot of vertical space and making the bottom of the card look

28:55really heavy it's taking away um and it's taking away focus from the post itself now a common approach i see on sites like this like um like twitter youtube and soundcloud um they merge the actions and stats into a single row by making the action an icon and then putting the number beside to indicate the user activity so there's the before once again and the after and that panel is still looking a bit bottom heavy because the right background taking focus away from the other items and because we've merged the stats and the actions we no longer need to play the role of dividing the content

29:28so i'm gonna go ahead and remove that okay so let's looking much more cleaned up uh now because the profile picture is included in the top section um it's creating this awkward line that we see here aligning text is a quick way to clean up your site and make it look ten times better so this is especially true if you're working with a design like this where you have either an icon or in this case a profile picture that's pushing all the items below it so i'm going to push the body and icons to be over just to be aligned with the username text okay and that sort of creates an

30:03invisible guide and it becomes much more scannable okay so just a little recap as this is another really good example of how a bunch of small changes can lead to one big change because now that we have font size weight and color doing all the heavy lifting to create the hierarchy plus the alignment acting as this invisible guide this top border is no longer needed to divide the content and now that i've managed to make these panels clear of all the borders i no longer need to keep each card separated so and it's still really clear what content belongs to what card even though they all share borders um

30:40so even though i added all this extra space to make the card easier to read um i've actually managed to reduce the size of the vertical space by making all these other small changes so yeah okay so let's move on to the new post section so i've already updated the icons everywhere else so i'm going to do the same thing here and the first thing i want to acknowledge is that green button i'll touch on the button on the right in a bit but i wanted to show it here because this is a problem i often see with bootstrap sites it's important to give actions a

31:13hierarchy but too often developers will use multiple button colors that serve their own semantic purpose um but what this totally does is disrupts the hierarchy this example here illustrates the dangers of using semantics right now that high severity button on the left it almost stands up more than the two buttons on on the right and you certainly don't want users to deactivate their account um instead of trying uh trying to use color to create a hierarchy so have a strong bold color for your primary action and this can usually be like your brand color um something lighter for your secondary action this could be like a white button

31:49depending on the background you're on or an outline as i've used here and then use a text link for tertiary actions now if possible try to stick to just having one primary button on the page now as you can see in this chart you may need to give your actions a different style treatment depending on the surrounding ui and depending on the page different actions may have different roles so sometimes it is okay to use a high severity button for the primary action in this case the red primary action is warning the user that they're about to deactivate their account and this usually comes as a second step

32:22like they click the button and then they get a modal like this and then they need to confirm it so so i'm going to go ahead and match this button color to be uh match it with the brand color okay great so the next thing that's i want to take a look at is i want to attach a section to the news feed right now that title it's taking up a lot of vertical space um and it almost disconnects these two even though they're directly associated with each other now that's looking more compact but i think we can do a better job now facebook and twitter these are both

32:58great examples of using progressive disclosure for the post section basically what they do is they show a simplified compact version for the input until the user focuses on the input revealing additional options plus the submission button it really has no value until you type something anyway um the one thing i like about twitter's here is that they show the image icon in the clops version just so the users can add an image right away without that second click so i want to give this design a similar treatment by including both the video and the image icons in the input great now that white input it gets a bit lost in

33:33the white background not to mention it it gets kind of confused with all the surrounding borders um so one way we can treat that is by giving the input a background color and removing the border so it just looks a little bit less busy um and much like the input at the top of the page we can now make this input white with a darker border just for the focus state and that might look something like this okay so one last thing i want to do is remove that new post title um this placeholder text is sort of acting like a title itself so if i remove the

34:06title it's just kind of saving more vertical space okay so that's looking much cleaner and that wraps up the news feed section um so let's just see what it looks like with the rest of the page so we're getting pretty close here so let's just review the right sidebar okay so before i do anything else i want to make those picture circles as i've done with everywhere else and i want to make the padding the same as everywhere else and i want to update that text colors so it has the same treatment as the users on the news feed so i'm going to go ahead and do that

34:40here and that brings us up to speed now the panel heading really draws me in there it's really taking focus away from the rest of the page um some and some more important elements on the page so i'm going to go ahead and remove that and invert the text color but that title is also looking pretty large so i'm going to reduce that for the same reasons i reduced the welcome text at the beginning of the talk and when i do that still clearly acts as a title there's definitely there's definitely no confusion there okay so the next thing that's drawing too much attention is that big view all

35:13button that we already talked about um on a scale of importance i'd argue that this button would be much better served as a text link rather than a primary action on the page and now that view all button it's still taking up a lot of space and it appears there's a lot of comfortable space up in that top right corner of this panel so i'm going to go ahead and move it there so that pushes things up nicely and by no means gets lost up in the top corner there and next uh those add buttons beside the users um they're pretty squished in there um and they're pretty much as small as

35:47pretty much as small as they can get even the wording is questionable but i'd hate to try and fit the word follow in there so one thing you can do if you have an obvious action like this is replace it with an icon and if you want to provide a little more clarity you can always add a fancy tool tip now the panel is looking pretty busy because of all the borders and a cleaner way to divide content instead of using borders is to increase the spacing a bit so for example this example i used at the beginning of the talk it really illustrates how it can clean up as designed

36:18substantially which just by removing the borders and giving it giving it a bit more spacing so i'm going to remove the borders here and as and i'm going to increase the spacing a bit so just so there's a little bit more room to breathe between each of the user groupings there okay so we're nearly done here um we just have to review the navigation and then maybe some finishing touches so let's move over to the navigation so before i do anything else i'm going to change those icons um now another thing that i've already gone over is the weight of the icons and how it makes them look darker than the

36:52text because they have a larger weight right now both the text and the icons surprisingly share the same color even though the icons look way darker um so i think this is a much better example than the previous example because it's on a white background so that change is much more obvious and like the right sidebar the borders are making this look really busy so i'm going to go ahead and remove those and now in the sidebar i remove that when i remove the borders i increase the spacing a bit to divide the groupings but because i'm working with single links here i can actually tighten that

37:24space a bit okay now the panel i have behind this the uh the navigation here um these panels are great for making content pop off the page but i want that navigation to stand back a bit because i really want to bring focus to the other components on the page like the newsfeed in the sidebar so i'm going to remove the panel from the navigation and because i no longer have that container aligning with the logo i shifted the navigation over a bit so it's left line with that the top the logo at the top of the top of the page uh now going back to my point about

37:58making the panel stand out a bit right now they're doing a decent job on their own um but i want them to pop a bit more and i also want to make that navigation stand back a bit and a really easy way to do that is making the background a settle off way so here's the before and the after now that's a pretty subtle off white i think it's like two percent darkness but that small change makes a huge difference when to make those pants pop and it also brings up those subtle shadows a bit more giving it a little bit of depth which is nice

38:31okay so back to the navigation um there are actually there's actually quite a few links here and it's making difficult to find things now a common approach i see for heavy vertical navigation like this is to divide the links into logical groupings here are examples from stripes api guide and spotify where they divide the sections with increased spacing and giving each section its own title so what i did here is sort of combine the links that are mostly associated with your profile at the top i put the discovery links in the middle there and the links that are mostly associated with the app i put them at

39:06the bottom and i separated them by giving them a bit of a bottom margin so it helps a bit but those titles they're a bit large and almost they almost look like links themselves so and if you look closer at the examples that is shared you'll notice a few things first those titles are smaller than the links and the color is much lighter and that's because the titles are mostly there to divide the links to make them a bit more scannable almost acting like labels so you don't want them to stand up more than links themselves so um but they're also all uppercase just to make them feel more like titles

39:42so i'm going to give this the same treatment so there's what it looks like now when you're working with all caps um because uppercase letters don't have varied shapes like lowercase letters it's always wise to give all caps a little bit of letter spacing just to give make a more legible and this is generally a good rule when working with uppercase text in any situation like even as little as an abbreviation in body copy so here's the before in the after and as a final step i give that home link in active state by making the icon of the brain color and making the text a

40:16bit bolder and darker to make it stand out more okay so that wraps all the wraps up all the different sections here but there's still a few finishing touches i want to apply so one thing i try to do on most of the sites i design is saturate all the grays with a bit of color sort of like i did with the header at the beginning instead of using a solid gray so this would include all the text the off-white background so they just that i just went over um the icons and the borders so like the borders in the newsfeed as you see here um now i don't want the saturation to be

40:49the same intensity for all grays if i'm using an hsb picker the saturation intensity might fall somewhere near this line that i've shown here and again i'm showing an hsb picker instead of an hsl because this is what you get on graphical editing software in browser dev tools if i if the hsl picker did exist the curve might look something like this so i'm going to apply that so here's the before and the after and what this sort of it sort of changes the temperature of the whole site it makes the elements feel a little more glued together now here i saturated the site based off the

41:26um the hue of the brand color but that doesn't necessarily always work for all colors i find that when i try this with brain colors that are green or red it doesn't quite have the same effect but what i find does work nicely is changing the hue based on the temperature of the primary color so for example if i'm working with cooler colors like blue purple or green i might saturate the grays with a bit of blue hue like you see here on the left and if i'm working with warmer colors like red yellow or orange i might saturate them a bit with a bit of kind

41:57of yellowy brown as you see here on the right um and i'd use a similar curve for each it doesn't need to be dead on just somewhere near that line um as it gets more as it gets darker it probably can probably get more and more saturated now this technique is not guaranteed but you can always give it a try if it doesn't work using grace is fine but it's always worth experimenting with with this sort of thing okay so the last thing i want to talk about is the font i'm currently using open sans which is a google font openstanz is a really popular font with

42:33developers um it's a great font but i just can't have a talk on visual design without addressing font choices so in short use good fonts but but seriously like i said open sans it's a great font it comes from google fonts which is a great resource because it has a huge selection of free fonts but with that you have a lot to choose from and most of the fonts on there are poor choices for ui a lot of them are more ideal for like marketing sites because there's a lot of decorative fonts in there um so if you're going to use google fonts and just want something reliable

43:09go to the sidebar and tweak the settings as you see here obviously a sans serif because serifs don't really work well for ui applications and select from the most popular ones and i'd recommend a font with eight weights so you get like a regular a bold a lightweight a semi bold plus all the italics that come with those and this is going to give you a decent list of safe choices now alternatively if you do have a budget i'd recommend using a service like typekit or fonts.com or heffler fonts have the fonts is typography.com these are all great services they're all about the same price about

43:5010 bucks a month i think half of their is a bit more but those are primo fonts and they have a much larger selection of high quality fonts now typekit has a similar panel to google fonts where you can customize the settings whatever here is actually a good start when looking for a good ui font but i also have a list of my own recommendations so here are a few fonts that i've used quite a few times in the past i think they're all great for uis they're all safe calls now fonts are not necessarily transferable meaning if you're using one font and decided to change it you might

44:24need to adjust the size and wait a bit for example as you can see on the right here active and museo they're a bit larger you can see how it wraps there and i know museo the the bold font it's it's pretty heavy bold um so if you switch gold from museo to approximately you might need to adjust the weights a bit now for this design i'm going to use proxima nova this is a pretty popular font with designers i just love the way it looks on screen it's super legible it's really versatile it works with almost anything and it just looks clean um so i'm gonna apply that here's what

44:58it looks like with open sands and there's proxima nova yeah and that pretty much covers everything i wanted to go over um so one last thing let's look at where we started here okay so we've come a long way i'm gonna let this scroll down here um and there's where we got so i hope this shows how a whole bunch of little details can go a long way and i hope you learned where you can look for inspiration um and just some good tips that will clean up your design now i know there's a lot to take in here so i made this checklist of tips that i

45:35mentioned throughout the talks so when the slides are available you can come here and reference this when designing your own app everything is linkable this page will will be linkable um so each link will take you to where it was first used in the talk so you can see it in context and maybe apply that to your own design now um so if you enjoyed this talk feel free to check out refactoring ui it's a project i'm working on with adam adam as in the guy who spoke before me adam where we take user-submitted designs and improve them in the same way i did with the example in this talk

46:09and we share the results in the form of a case study now we only have one case study out right now where we improve the design of variable.io um but adam and i we're working on the next one and we hope to make that available soon so check out the website you can sign up there and when the next case study is available uh we'll send you an update to your inbox so um yeah thanks all right that was awesome cool you got to do a lot of stuff there that's when i got rewatch on video yeah yeah that's why i made that little checklist at the end there

46:44[Laughter] um a couple of questions uh that i thought would be good to go over well i guess one i'm sure a lot of people have this like what design tools do you use like is it a sketch or maybe you give us an idea of the kind of your core tool set yeah i use primarily sketch no i 100 use sketch um i used to use adobe um i used it for years and years and years and then when sketch came out as a pretty early adopter and um but you go from sketch back to like photoshop it's like learning how to juggle it's sketch has a really good um

47:18user experience now there's all these like new apps coming out in the market now that sketch has been so successful like i i know framer has one now um i know envision is working on one that looks pretty promising so i'm excited to check those out but yeah currently i use sketch okay um one more uh and this is one i hit all the time myself like what's your recommendation for when you're working on a project where you don't have uh where like the default icon sets you know you know every icon set kind of has the generic stuff like a user and whatever wi-fi and what all that stuff

47:56but you have other needs like medical or financial or you know where it's more specialized like yes but maybe you can't like you know pay design to build you 200 icons so what what do you do in that case i um well i mean i designed them but i guess i mean you're not you what do you think but the list actually provided there um uh i i i'll go back to that slide um and again i'll be sharing these slides afterwards uh you still are am i sharing your screen still yep okay so um these these icons i have here um these are pretty large sets especially the

48:39ones that are available to purchase um i would just do the research ahead of time make sure you have all the icons you need and ones that you can kind of expand out on um and with icons um i mean you can kind of get creative with some of the metaphors um and kind of some of them can be multi-purpose but i'd say start with the list i have here the material icons from google they have a pretty vast collection of icons and i need to update that link there it has not only but um but especially the ones that are available to purchase here they're

49:13pretty vast they should have almost everything you need and would you be okay uh to your designer's eye are you okay mixing icon sets or would you is that sacrilege or what do you think yeah i i spoke that i spoke about that a bit in the talk um i i think it's a bad idea to do that it just kind of looks messy right um and uh but yeah reach out to me and if um if you're using the kurokons ui or zondacons and you need an icon i might maybe i'll maybe i'll update those sets a bit yeah i like the zonda cons i've used

49:43them myself that's the steve said so definitely check that out all right well great talk thanks for having me on thank you thanks for having me