(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)
