(driving rock music) Thank you. (audience clapping) - Okay everyone. So yeah, I'm Steve Schoger. I'm from Canada, as he said. Any other Canadians in the audience? (audience whooping) Yeah there's one. (audience laughing) Yeah I'm from, I'm outside of Toronto. Our local team just won
the basketball tournament. (audience applauding) The championship, sorry. And so, yeah, my entire Twitter feed is all the Toronto Raptors and CSS Day. Anyway so most people know me as the guy who teaches design to developers. So I like to show how you can
use tactics instead of talent to do a design. Today I hope to do just that. So in this talk I'm gonna
be sharing a few tips that will help you
improve your own designs. Now I found that the best
way to teach this stuff is by example, so my approach today is
not gonna be any different. We're gonna be taking a look
at an example that I created that addresses some of
the more common problems that I've observed
developers struggling with. So it's gonna be filled
with a ton of mistakes I see being made. And in that I'm gonna
try my best to explain what goes through my head when I work on a project like this. So let's start by taking
a look at the example we'll be refactoring today. This is designed for like a fictional flight booking application. Now I just wanna emphasize
that this is just an arbitrary example that I
made because I felt it covered a lot of the concepts I wanted to share. I realized that not everyone's working on a flight booking application, maybe you work at booking.com, I guess. But I took a lot of
ideas here from existing booking application sort
of get my own twist. So this is our starting point. So as you can see, it covers
everything from form design, table design, and data schemas. It's more or less using a
lot of bootstrap defaults, which I see many developers relying on. Now I don't want to like
poo poo on bootstrap. It's a great starting point but there's a lot of quick
wins here that we can apply to make it more polished and just bring it to that next level. So like I said, there's a lot of commonly used components here that can use on a variety of applications. So our goal today is just to
touch on some cosmetic changes so without affecting
the overall structure. So let's start by moving
back to the top here, and we'll just kind of work our way down as I get through it. So the most glaring problem here is, it sort of starts that text
on that background image. So it's because it's on a photo,
photos are pretty dynamic, they have a lot of light
areas and a lot of dark areas and you need to give
text consistent contrast. So using a background image
like this, it's really easy. It's a really easy way to
add impact to your Hero, but without you run the
risk of having poor contrast with texts when it's overlaid on top, especially on top of a busy area. In this case, there's a source
of background interference with some of the labels on the left. Now, the easy way to work
around this is to find an image that contains a lot of negative space that provides you with
like an area for text. But sometimes that's
easier said than done, especially when you're
like digging through like a royalty free library
for that perfect photo. So the way to solve this
problem is to limit the amount of dynamic elements on the image. So one way to do that is by simply adding like a semi transparent overlay, this will tone down the light areas, giving them less contrast
against the dark areas and help the texting out and of course, you can
invert this treatment and use like a white
overlay with dark text. Now you can do this in CSS, of course, but for a little more control, if you have access to
graphical editing software like Sketch or Figma, you
can bring in the image there and adjust the contrast and
brightness for similar results. But you can even take this a step further and colorize the image
with a single color. This is just a great way
to add impact to Hero and parent with your
existing brand colors. So, again, this can be achieved in code by using CSS blending modes, but that does have
limited browser support. So again, I personally
recommend bringing it into some graphical editing
software to create that effect. So I'm gonna show you
how to do that in Figma. Figma, it's free until
you start using projects and so everyone should
have access to this. Now, when you import the
image and click on it, you'll be presented with a few
options on the right sidebar. Figma has this kind of
progressive disclosure where if you like, it kind
of gives you the options based on the stuff
you're interacting with. So the first thing you wanna
do is desaturate the image. So click on the thumbnail
and you'll be presented with a bunch of editing options. From there, you can reduce
the saturation to zero. So it's a black and white image and then you can adjust the contrast and a few other things just
to level things out of it. Then you're gonna add
a filter on top of that by clicking the Plus icon next to the Fill title on the sidebar, and then from there, you can
choose the color you want, so I chose this blue. And then in the color panel, go up to that little drop icon
up in the top right corner and from there, you're gonna wanna change the blending mode to multiply. And what this does is it allows the image to sort of show through, and after this, you can
even adjust the opacity to like of the solid color and just bring some of those
more details out of it more. Now, if you're working
with a darker color, like this blue I'm using here, you'll definitely have
enough contrast free text. Now, Figma is free, like I said, you should have access to it, but another great tool I found, someone told me about it on Twitter. I wish I can give them credit
but I was trying to dig it up, I couldn't find who told me about this, but it's this web tool called Duotone, it's by ShapeFactory, it
allows you to take two colors and use them on the highlights
and lowlights of an image. So in the example here,
using the bright sign for the highlights and a
purple for the lowlights. So you can mix it up and
choose two completely different colors that
sort as if you want like Spotify those album covers
have that that effect to it. So check it out, play around
with it, it's pretty cool. And this web app actually allows you to upload your own images or search for images from Unsplash. By the way, I thought
everyone knew about Unsplash but every time I mention it I always get a few surprised faces. So it's basically just a great resource, if you're looking for high
quality free Royalty free images, basically, you can just
search based on the subject and you'll get a ton of great results. Oh, yeah, like I said, it's
just a great way to add impact to Hero and pair the image with your existing brand colors so. And of course it gives you
a nice consistent contrast in the background, so our
text is much more legible. Now I chose this dark blue for the site, but I do want to just glaze over that, I thought it'd be helpful to share how I choose primary colors for a site, the answers to that is
quite simple, I steal them, I spent a lot of time
looking on inspiration sites, I go to landbook.com, land-book.com. Another one is siteinspired.com, these are all just web galleries, we're all familiar with them. They're usually created by designers, so there's a few just to name a few. And while browsing if I
see a combination of colors or I mean book market or just sample the colors for reference later. Another great place we're all probably familiar with is Dribbble. Now, if you have a general
idea of what colors you wanna use already, Dribbble
has this color picker tool, so you can access it, so if you gonna look that three dotted menu thing up at the top and open that up, it has
this color link at the bottom and there you can search for shots based on a specific color you have in mind. So having like a limited
palette like this should make that a bit easier to make that decision. So from there, you get
a ton of great results using colors handpicked
by professional designer. So once I find an example I like, I usually sample the colors
found in the bottom right of the Dribbble shot. Now, to be perfectly honest, I
usually find something I like like the blue and yellow from the shot and then I end up using
Tailwind CSS default colors. So Tailwind CSS, it's a framework created by my friend Adam Wathan. It takes utility first approach, I'm not gonna get much into Tailwind that's a whole another thing. But I'm quite involved with this project. So admittedly, I'm quite biased but I spent a ton of time
choosing these colors on the framework, so the default colors, so I mostly just wanna
emphasize the benefits of working with a
constraint palette, right? So if Tailwind is such
a thing, that's fine but approach a project with
a constraint set of colors. So in this case, if I'm
using the blue and the yellow from that Dribbble shot, I might just use the blue
and yellow or an orange from the Palette and Tailwind so I find it much easier to
work with constrained palette this instead of aimlessly picking colors from a color picker, I like to have like nine or 10 shades with single hue to work with, in by using a constrained palette, you avoid having 40 unique text colors and 50 unique background colors where many of the colors are
very close to each other. So this data comes from css.stats.com. And these are the stats from Facebook. And so for example, if
we take a closer look at the text colors here,
you can probably consolidate all these dark grays into
a single text color, right? The same could probably be said about some of the reds you see there all the reds are really
close to each other, and some of the blues there too. So yeah, now we've added the blue, we'll be introducing that
yellow from the shot shortly. But I just wanna get into the navbar. So first, navbars don't
need to be in a bar. And by putting a navigation elements directly on the background,
it helps things. I'll open up a little bit more and makes things more comfortable, gives everything more room to breathe. So and if you wanna give it a
little more subtle boundary, you can add a light
border like I did here. I just use a single white pixel
border with reduced opacity. This wall, so kind of ... I like using borders like
this, where it sort of draws, it kinda connects to the elements with the left of the
elements on the right, it's sort of associated
to them a bit better. So it's much cleaner than like
having it contained in a bar. Now we've adjusted the background, this headline, it's looking better. But I wanna create a little more contrast between the headline and the subtitle, right now just kinda
using size, which is fine. So it does create that contrast, but it's not the only way
like to approach that. Another way to do that is
by using a softer color. Now to make white text
softer on a dark background, your first instinct might
be to darken in the text by decreasing the lightness, so it's like a light gray. And this does that trick
of de-emphasizing it, but it always looks a bit
off on a colored background. So, tip number two, don't use gray text on
colored backgrounds. You need to consider that
what we're trying to achieve is reduced contrast, and that
you want to make text closer to the background color, not gray. Now, you might think
the best way to do this is by reducing the capacity. Well, this does reduce the contrast, it often results in the text looking a little dull and washed out. So I find a better approach
to this is to handpick a color based on the background color. Now if you're using something like I do, I use the Catalan colors, so
it already considers this. And you can just use one a
little lighter colors, right? But if you're choosing your own colors, I typically just start by
sampling the background and adjusting the saturation and lightness until it looks a bit bright. So if you're familiar with
the color picker like this, this is HSB picker, that's what you get on most graphical editing
tools and browser DevTools. Even though they use HSL, they give you an HSB picker, whatever. I would just drag the picker to the top left for a lighter color. And the end result might
look something like this. So it's a subtle change,
but it looks better. Now, you can even take this a step further by rotating the Hue, by using the perceived
brightness to your advantage. So what do I mean by that? Well, every Hue has an
inherent proceed brightness. So in this diagram, I have
the Hue shown on the left and then on the right, I'm showing how they're
actually perceived, how blackness is actually perceived. So when you're working with
colors like yellow and blue, even when each Hue have the same light and small yellow still,
it's brighter, right? So this is called luminance,
that's a technical term. And by taking samples of different use with 100% saturation and 50% brightness, we get a good sense of
how the proceed brightness of different colors work. So if you look at this chart, I plotted all the different hues to show what colors have the highest
and most proceed brightness. So you can see that
yellow is the brightest, like I said and blues is the darkest. One thing that's notable is that it's not like a linear pattern. So how does all this help us? Well, the cool part about all this, is that normally, when you want to change how light a color looks, you can simply adjust the
lightness value, right? As shown on the top here. Well, this does work to
light and dark in color, you often lose some of
the colors intensity. So since different hues have a
different proceed brightness, you can also change the
brightness of a color by rotating the hue to
the nearest bright color. So if we go back to our chart here, because the background
you're using is blue, we're going to rotate the hue
to the nearest bright color. So saiyan in this case. And so going back to this, you can see that it's a pretty nifty trick to create some like
sexy looking gradients, but this trick also works great when we're working with white
text on colored backgrounds. So if we go back to our design here, here's what our original
just lighter blue. But if we rotate the hue, it's
just a great way to make text a little bit more accessible but while still keeping a colorful. Okay, so it's starting to get a little more interesting here. Now, as much as this dark background helps to distinguish individual inputs, it's still tricky to just
see some of those labels, because the text is pretty small. So I'm gonna contain this whole component into just a white container. Now adding a panel like this, so you're gonna wanna
introduce some a bit of space, just to give some everything
more room to breath. Lack of white space, it's probably one of the biggest mistakes I see developers make when
designing for the web. So I wanna share a little
bit of a framework I used to help solve this problem. So the common approach
to introducing space is to add just a bit at a time, and if it still feels too tight, you continue adding a bit more, right? But the problem with this approach is that you're only adding like
the minimum amount of space until the site no longer looks bad. So as you introduce more
space, it's gonna look better than your cramp starting point. But this may cause you
almost stopped too early when trying to find that right amount and sort of leaving you a bit uncertain. So I find a better approach is to start with way too much white space and then remove it until
you're sort of happy with the result. Now, at first, when focused
on an individual component, you might think it feels
like too much white space, but in context of the rest of the UI ends up looking like
just the right amount. Next, let's take a look at these inputs. So first, always remember to
use input length in accordance. You wanna create an expectation of how long and entry should be. All these cases, you can
probably fit the input into a field that's about half
the size of the current one. So in this case that allows
us to comfortably fit all the fields into online, went on a full desktop view like this. Now, major elements like the
container aren't the only thing on the page that needs room to breathe it. This also applies to
components like inputs, so I'm gonna increase
the height of the inputs, I can be generous with space on inputs, like usually give them a total
height of 40 or 48 pixels, that so that's like the size of the font plus the padding around it. Now at the moment, the inputs
have just a simple border around them in the right space. This isn't that distinct when the inputs on a white background. A nice way to add a bit more distinction is to add like a subtle off
white background to the input. I find there's like a fine
line of just enough to create that distinction, but not too
much where it looks disabled. And just to give you the inputs, a little more visual
interest in scalability, we're gonna add some icons. Now we're not gonna replace
the labels with icons because the icons we're
using aren't that obvious, and it's generally just
bad for accessibility to remove the labels. But when adding icons to support text, it might make sense to give
them the same color as the text. But the problem with this is that icons, they end up looking more
emphasized as you see here. You want a balanced weight and contrast. So when working with
solid icons like this, they tend to look heavy because they cover a lot
more of that surface area. And this creates that unbalanced contrast when placed next to text that contains a lot less that surface area. So a simple way to reduce the contrast is by giving the icons of softer colors. So this sort of works
like a counterbalance making heavier elements feel lighter, even though the weight
hasn't changed at all. Now, we've given these
inputs a nice treatment. What about the radio
buttons and the checkboxes? Like right now they're just that boring browser default look. If you're on like Safari, for example. So sure way to make an
App look more polished is to work moving either browser defaults with something more custom, this is a great opportunity
to add some color and take something from feeling boring and feeling more well designed. This goes the same for inputs, you can change that drop down arrow to something that's more consistent with your icons you're using on the set. So that's a small change there. In that change also reduce
the size of the labels, just so they're not taking
away from the value itself, they're just there to support the value. Let's also better utilize
the horizontal space here by moving the search
button to the far right, so it's aligned with the
checkboxes on the left. So overall, reduce the
overall vertical space, which is always nice. And this also lines up nicely. So it's below the last input users are likely to interact with, so they aren't jumping from left to right. Let's also increase the
height of the button so it's consistent with the inputs, plus, we can add an icon to the... Just provide a little bit more clarity to so add a search icon to that. Let's introduce that yellow now, that I found on the Dribbble shot. Now, it's always difficult to
achieve high contrast ratios with white text on bright
colors like yellow or green. So like if you wanna get a high
contrast ratio with yellow, you end up getting
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 white bright background. Now we already learned in the subtitle that we don't want to
use black or white text on a colored background. So once again, we're going to saturate this with a bit of the background color. So and again, if I'm
using the Tailwind colors, I would just take a
darker yellow or orange. So we're sort of doing the opposite of what we did with the subtitle, because yellow is brighter color we need you to find a darker color. Now just to better
associate the check boxes on the far left here, we're going to just contain
them in a gray box here, it's a nice way of creating a border without actually having a
border, so it's a lot cleaner. So now having the panel here like this, it does a great job of standing out, but it's not very interesting. So an easy way to get this pop out more is give it some depth, now
there's a few ways of doing that. One way is to overlap
elements to create that depth. In this case, instead of
continuing the card entirely within the Hero section,
you can offset it, so it sits between the
two background sections using a negative margin. So that looks sort of cool
but because the panels shares the same background
color as the panel below, it's looking a bit funny, so we need to add some distinction. So since we're trying
to give it some depth let's give it a heavy back
shadow to convey elevation. That gives us some nice depth, but I want to explain my process for creating shadows bit more. So the first thing worth noting, is that I often use multiple
shadows within the design to position elements differently
on the virtual Z index. The larger the shadow you use, the closer is gonna feel to the user. So usually how it goes is
I'll have a small shadow for elements that are closer
to the background of the page. This is typically for buttons or inputs. Then I'll have one that's a
little further off the page, usually for the elements
like drop down menus or small panels. And then sometimes I'll
have an additional one for large panels. For example, if I'm using,
I'll be using this one on the panel we're currently discussing, because I really wanted to pop. And then finally I'll have
a large one for modal. So I might go between
one of the two shadows on the far right there. So here it is, again, in context. So you can see that the middle
shadow on the previous page, it's quite heavy in context. But there's a bit more to that than just offsetting a block
shadow without the blur. You need to consider that
shadows have two parts. So what do I mean by that? Well, when you look at
shadows in the real world, they are typically created
by more than one light source that gets disrupted by an object. One is usually an ambient light and the other is a direct light source. The shadow created by the
ambient light is usually a tighter and darker with
less of a vertical offset and a small and blur radius. So that's kinder seen
below the base there. And the shadow created by
the direct light source is usually a larger and
softer with more of a... it has more of a vertical offset than with a larger blur radius. So I like to get through to that when I want to make
the shadows on the web. So furthermore, as an object gets further, it's solely covers the
direct light source. So consider that by introducing
a negative spread value. So if you're gonna use
this to shadow technique on your own projects, make sure you make the direct light shadow more subtle for shadows that represent
a higher elevation. And this just gives you a
little bit more creative control when then working with a single shadow. Okay, back to the design. Now, though you offset
the background below, it gave it and we give it a shadow. We're gonna do one more thing, and that is to use color to convey depth. So in general, with screen design, lighter objects feel closer
to us than darker objects. So to make something feel more
raised off the background, we can make it a subtle off white, just create that additional contrast. So yeah, that helps a pop out a lot more. There's three little techniques there. So now that we made the
background off light, sort of push the table back, still further emphasizing my
point about color and depth. So we're gonna contain
that in a panel too. Now we don't want this to
have the same amount of depth as the search panel, we want this to send
this back of it further. So just going back to the shadows we have, we're gonna use the
second shadow shown here just to bring it back a little bit. Now, styling tables, it can be tricky. It's often a lot of data to
present in the condensed space. So there are a few tricks
that will go through here. The first thing is, we're
gonna use alignment. So for most content, it makes sense to left align the content but for content like
dollar values sometimes and sometimes dates, it's
always nice to write align them, just so the decimal places are in columns and makes much easier to
compare the numbers magnitudes. Now, here's a cool little CSS
trick since it's a CSS day. (laughing) Another cool thing you can
do is apply tabular numbers. So this can be achieved by setting the font features-settings
tnum as seen here. And it basically makes the text value act like a model space font without actually using
amount of space font. Now the borders on this table,
they're looking a bit busy. So whenever possible, use fewer borders to make a design look pretty cluttered. A nice way to do that with
what table designers use Zebra striping, of course. Okay, let's also look
at the headings on here. There's sort of this preconceived notion that headings need to be
big and bold to stand out against the rest of the page text, but in many cases, headings like this, they're more or less acting
like labels that they're, there to support the content, they shouldn't be stealing
the attention away. So that means that headings like this should be a bit more subtle. So I find a great treatment
for headings like this, is that small, bold uppercase
text with the softer color that the small, softer
treatment helps them stand back against that table content, but that bolder uppercase treatment helps them maintain that heading status. So I like to use that quite a bit. So that's looking cleaner
but striking more ideas here. Think outside of the database. Now if columns don't need to be sortable, try consolidate secondary information just for like a bit of a cleaner, look it opens things up a little bit. Consider de-emphasizing that
with smaller and lighter text so to highlight but like
that primary information and if the data calls for
try enhancing it using images and also these book now
buttons on the right there, it's looking pretty heavy on the right because it darkening a single column. So it really draws you away from the other important elements on it. So we wanna give them more
of a secondary treatment. So a popular approach to
this is styling buttons by simply aligning them. This does give them that
secondary appearance but I find a great alternative to this is to give the buttons soft, solid background based on the text color. So it's just isn't quite as
heavy, it's a lot cleaner. Let's also make this
text link the same color as the top, like the
text link up on the top. We'll make it the same colors of brand colors everywhere else. So there, and just to give
it more of a link style, we often use an underlying
to solid as links, but I find like something to
give it a little bit more style to use like a generic icon,
like a chevron to the right of it makes it look more clickable. Okay, so I think that's
in a pretty good spot now. Let's review these vacation
package deals at the bottom. So there I'm using cards to display them. Often working with images like this, you may run into the issue of having different aspect ratios. This can really throw off the layout. If you're using multiple
images, it might be working like you're doing like a Pinterest layout, you can do something like that. But when it's displayed side-by-side here you can really throw things off. So instead of just using the image at the current aspect ratio, we're gonna center the image
inside of fixed container and then cropping on
anything that doesn't fit. We all know the beauty of
this is you don't have to edit the image in a tool before
bringing it into the web, you can just make the
image your background image and then setting the CSS
background size property to cover. This cleans up the entire layout. Now we don't necessarily
need these buttons at the bottom here, those
those primary buttons. Sites like Airbnb, and YouTube,
they're both great examples of how car-based layouts can get away without including buttons and they still managed to look clickable. Now the details of these cards,
it's looking pretty busy. So let's see what we can
do to clean it up a bit. The first thing I wanna
address is the labels on the price in the website. In many cases, you don't
need a label at all. So for example, 1295 is a price 'cause it has a dollar valuing and vacationspots.com is a
website 'cause it has the dotcom, so you don't need a
label to identify that. Now, when you're able to
present data without labels, you get much more creative control and you can really emphasize
important information. So in this case, the price is
probably way more important to the user than the website
it's getting the deal from. Let's also reduce the noise
creative with these borders by just using that same
technique I showed you earlier by using that subtle off white background to distinguish the sections. And again, try to get creative
with the data hierarchy by using a combination of
font size, weight color, and again, using that uppercase treatment, it's always a bit cleaner. Furthermore, we can
also use color to enrich some of the data to make it a little bit
easier to interpret. So for an example we have these offerings, so on the first card there
has like only five left, and so we can put this into like a pill and using these colored badges, just to take them in on a quick glance. Much like our button at the top, we're gonna give these badges. So I have another one on the
right here and green one. We gonna give that soft
background color with dark text, just to make them a bit more
subtle and more accessible because like if you put
like white text on red sometimes it's tricky to work, it's tricky to get like
those high contrast ratio so I find it better to make
the background a bit lighter and using a darker text color. Let's also look at this
newsletter section. We're getting close to the bottom here. So right now it's just sitting
directly on the background, there's nothing distinguishing it, so it's not very compelling. So one way to add
excitement to the background is to simply by changing the color. This is just a great way to distinguish, add distinction between entire
page sections like this. This actually is a great technique to use on like marketing pages, you
go to like marketing websites and it splits up the Hero two
different feature sections. So I see that being used quite a bit. So here I applied the
brand blue to the footer or to the newsletter section and then to the footer I
use like a darker treatment. You can even go as far as like
adding a background pattern. So, as mentioned earlier, I
made this site a while ago called Hero patterns. It's basically a collection
of SVG background patterns. It's great for backgrounds
on like marketing pages or sections, like a
word we're working with, that typography, one's pretty popular. I haven't updated this in a long time, I think there's about 100
patterns on there now. Maybe I'll update again soon (laughing). Now, next, let's make a few changes. So these elements are consistent with the changes we've
talked about already. So I'm not gonna go
through them all again. But basically, I made the
newsletter description text, I made it that same... again, that same color treatment
as the subtitle the top, I also reintroduce that yellow button as it has that great contrast
on the blue background and then finally, I increase
the size of the inputs to be the same as everywhere else. Now this section, it's a little heavy, it's taken up a lot more
vertical space than it needs to. So if you working with design like this, that takes up a lot of vertical space, you can better utilize
your horizontal space by trying to splitting up into columns. Sort of it works great, especially in a case like this where you have that solid background, that solid color background and still manages to associate
the elements quite nicely. So yeah. Let's move on to the footer now. Now I love big footers like this, it's sort of acts like a catch all, if you have a lot of nav items, but you need to include but
they're not important enough to occupy that real estate
at the top, in the top nav but with that, it's still
nice to have some structure when you have a large sitemap like this. So to handle this, I like
adding those subtle labels to each section using that small bolts like uppercase treatment for headings. So I've used that quite a bit already, and finally, the last thing
that stands out is legal jargon and social media links
at the bottom there. Right now there is sort of floating there. Now, I know I mentioned
like I keep preaching it, like use for your borders. But I talked about this earlier that on the top bar at how using borders, it sort of helps associate
elements a bit better. So yeah, that pretty
much wraps everything up. I have a few more
finishing touches, though. Just to bring this to the next level. First thing is grays
don't have to be gray. Pure grays can make a UI look
pretty dull and unnatural. So what I like to do saturate
the grays with a bit of blue or brown for a cooler or warmer look. So the thinking here is that
you're sort of adjusting the overall temperature of the site. This is similar to what you we
experience in the real world by a combination of things, right? Maybe like a light source, like if you're using a warm
light or like a white light. You may even get this effect by look like reflective surface, so it just makes everything
feel more natural when you saturate the grays a bit. So if you wanna make
your design more cool, saturate your grays with a bit of blue. I'm not sure if you can
see it on this projector but the bottom one has
a bit of a cooler look. So I just adjusted the
saturation in here a little bit. And you want to make them a bit warmer, try saturated with a
bit of yellow or brown. I mostly saturate my
grays with a bit of blue because I'm working, especially in this case
I'm working with... Like my primary color is blue,
I might use warmer colors from working with warmer colors like red or sometimes purple. Sometimes it can work with blue, like I know Base Camp they
consciously made their site, their primary colors blue but they use kind of some warmer
colors to their background. So experiment and play with both. Now when doing this if
you're working with like HSL which I recommend, don't forget
to increase the saturation for the lighter and darker shades to maintain a consistent temperature. So if you don't, those shades
will look a bit washed out compared to the grays that
are closer to 50% lightness, and how much you wanna saturate your grays is completely up to you. So just a little if you
want to tip the temperature slightly or crank it up
if you wanna increase it to lean strongly one
direction or the other. And just because it's
hard to see on that chart, here's what it looks like
on their side-by-side. So this is what it looks like when it's not quite as saturated, there's a bit more saturated, you can kind of see the change there. There they are if it's hard to
tell, there they are stacked. So you can mostly see it
on the latter grays there, so they're a bit more
saturated at the bottom. Okay, so, I usually go for
the more saturated look. So here's the difference that makes. So I'm just kind of liven
things up a little bit. And finally, I just wanna share a few insights on choosing the fonts. This is one of the biggest
mistakes I see developers make, and it does have one
of the highest impact. So at the moment this
designer here is using the system default stock. So in this case, San Francisco, CA Mac. This is a great font, but like actually quite
like San Francisco, I especially like using
the system font stack on a nap experience, and then if I'm working
on a marketing page then I might use a custom font. But I think it's worth exploring
a few different options 'cause this is a design talk, I think it's worth talking about fonts. So I thought I'd share how
to discover new formats. So there's a lot of ways to do this for entrepreneurs everywhere. You can simply just search for
popular fonts on Google Fonts or like Typekit or Adobe
Fonts which it is now. They're all great services,
but it's not very fun. I wanna get into a little bit more detail. I get much more interesting
results by digging a bit further so this involves a combination
of getting inspiration from existing sites, sort of the same way I
find color combinations, I'll find a site I like and then look at the Browser DevTools and see what fonts are being used. Sometimes I go right to
the Font Foundry website, so these are the companies
that design the fonts and I see what fonts
are they have available, I like going to have their fonts a lot. Commercial type is one of my favorites and the Current Typefoundry
just to name a few. But I wanna share how I use a combination of these methods to choosing fonts, Highlander with the font that I'm gonna be using for this design. So just like choosing color, I go to all the same
spots for inspiration. So I'll go to Land-Book,
or I'll go to siteInspire and see what fonts are being used there. In this particular case, one time I was casually browsing the
web looking for inspiration, I found myself looking at the
official bootstrap themes, just kinda looking, see
what they had there. I came across this one that had... was quite nice and
excusable from being used, so from naturally open the DevTools to see what fonts was being used, but I didn't want to stop there, I wanted to learn more about this font, so I Googled it, and just to learn more
information about it, and from there, I learned it was designed by a Foundry called Hanken
Design, where they've designed a ton of custom high quality fonts. So I picked up the
bundle they had for sale, and then from that bundle,
I noticed a phone call, I found the phone called barter exchange that I thought would be
perfect for this project. So let's take a look at that change. So here's what San Francisco and here's with barter exchange
and it's not a crazy change, but it's something a little more unique. And I've been doing a
combination of these methods for Foundry Fonts for a long time, and I built up a decent collection so that I've been going back to regular, so it's just a great approach
to finding new fonts. So that pretty much wraps everything up. Let's just compare this
to what we started with. So here's our starting point, and here's where we landed. So, yeah, I think it just goes to show that it can be overwhelming
to go from your starting point to the end point, but really, it's just a
bunch of small little changes and at by the end, you'll end up with a more polished looking website. I'm gonna plug my book right now, if you enjoyed the talk
and found it useful, I recently watch this book
with my friend Adam Wathan and it's called "Refactoring UI". So it's loaded with a
ton of practical tips like the ones I've shared today
and it's 40% off right now. (laughing) I'm also quite active on Twitter, so you can find me @steveschoger, where I share a ton of tips
like the ones I shared today. So thank you. (audience clapping) Bare feet very nice.
- Always. Always. Anyone who's walked me previous talks knows that that's how I do. - Yeah. - First off, I love
those sort of breakdowns and sort of comprehensive thing, that's always a beautiful thing to see. So we got a few
interesting questions here. - Yes.
- First off, you mentioned a little bit of color accessibility. But a lot of your changes seem to be like on a
wild cutting and about, how much do you pay
attention to color contrast, like in terms of WK Accessibility? - Yeah, I follow that quite closely. Like I have this menu
bar tool called contrast, it was by Matt Smith and Sam Soffes. Their names are epic. I'm saying their name or his name, right. And I always kind of check that to make sure it's accessible. You're probably not like
seeing the same thing that I'm seeing on my
Retina Display monitors for this projector that's it but I'm always quite active on that. - Yeah, and now that's why
WK Accessibility exists because these are still
readable on this sort of scheme. And with a very depressed color depth. - Yeah, so I'm always using that, and the contrast app I use, I think it's just contrastapp.com and it's just a little menu bar tool, and I can just sample the
colors and reference in there. - Very cool. Can I get to that. So interesting question here. So you did a lot of color theme and this was largely a blue like underlying theme
- Yes. - For a lot of this. But some things come with
their own color scheme, kinda naturally warnings
and alerts and whatnot of in green, yellow or red or something. - Yes. - What do you do with the
site's branding guidelines were already in those colors, and then they want to do
- yeah, that's tricky. - Something like this.
- Like if if the site's red but then you have like a red alert. - Yeah. - I still stick with red alerts. I've been asked this a lot and I don't know how to
answer that question. But I usually just work with
like, red is high severity, I think many people know that. Usually if the primary color is red, most sites are white and grays, right? White for backgrounds and gray for tax and then you use the primary
color for black actions and so I might tone down and
just use a cadence of the red and then that helps if
you're using alerts and stuff you can emphasize that a bit more, right? - Mm-hmm, okay. So I notice that your placeholders
for your input fields, it's gonna be styled the same as the value while you're typing. What's your opinion on styling or on placeholders for inputs? - Sorry. - I'm talking 'bout the
feeling of the placeholder, they look the same, like
color contrast whatnot. - Oh, yeah, I actually,
like for my example, I had them look just pre-filled as if that was definitely the placeholder. - Oh, okay.
- Yeah. I should have maybe mentioned that. - Okay.
- But yeah, I'd make it a little bit lighter, like just enough where it's accessible
on and make the value that you're typing in your
normal text color, dark as gray. - Okay, final question
before we head off to lunch, how important you think
it is for designers to stay up with CSS progress in terms of new things available and not versus just learning some basics and then continuing to focus
mostly on design sensibilities? What do you think the good balance is? - I think it's important to understand, what you're capable of,
what CCS is capable of. I think that helped me early in my career is learning a little bit of code. It helped differentiate me
from like other designers and I was able to, it's
more like making it easier to communicate with developers, so like speaking their
language a little bit. - Mm-hmm. - But if you work closely with developers, you can count on them to
kind of teach you that stuff but I think it's important
to learn the basics, right? Like how it actually works, yeah. - All right, well,
thank you so much Steve. - Yeah, thank you.
(audience clapping) (driving rock music)
