- Hi everyone, today I wanna talk to you about consistency.
Consistency is super important in design
because when we're consistent with the way
that we use colors, fonts, components
that we've designed for a website,
we can train users to expect certain things,
and also help them to complete certain actions.
So it can help them move through
a flow that we want them to.
Also, when we focus on consistency,
and really pay attention to those details,
it can make the whole design feel like it's higher quality.
The user won't actually be able to put their finger on why
it feels that way,
but it will just have this overall level
of polish to it, and it'll be a great user experience,
because everything will be where they expect it to,
and we have trained them to think it will be.
Consistency goes hand in hand with making a design
and a company feel trustworthy and reliable too,
and those are all good things we want, right.
So let's talk about the best ways
to achieve consistency in your designs.
This video is sponsored by Webflow,
the are a website building tool that is built
with designers in mind, I really love it,
I use it a lot.
And they've got a lot of great features
that can help you with consistency too.
So I'm gonna show you them in this video as well.
(happy guitar music)
Okay, so when you're designing a website,
especially if you work in-house
or if it's an ongoing project that you work on,
you won't be designing every single page of the website
at the same time.
But even though you might be designing different pages
of the website at different times,
you still need to achieve a consistency
across the whole thing.
You can't design each page in a silo,
you've gotta pay attention
to how it fits into the site as a whole.
And the key to doing this well,
the key to getting consistency across your site
is to be using design patterns.
Design patterns is something you can establish
as you're creating that are basically a set of rules
for your design, but don't be put off by the term rules,
because you are the one creating the rules.
So, it's up to you if you wanna break them as well.
When you're looking to create consistency,
I'm not just talking about things like fonts and colors,
although those are good starting points.
I'm also talking about things like spacing,
and the pattern that you use on your website.
I'm talking about all headers being the same height,
the footer being the same on every page,
rules for when you use one color of a navigation,
verses another,
and then if there's elements that you tend to repeat
across various pages of your site,
like say for example, a quote box,
this is something that I often use in my designs
to share a testimonial,
those should look the same across every page that it's used.
Maybe the quote icon changes,
but the design as a whole stays consistent
and flows a pattern that you've created.
The best way that I've found to go about creating a pattern
is honestly just to start with one page.
Design one page how you want to,
move on to the next one,
and if you find that there are elements
from that first page that you designed,
that you should be bringing into this one too, then do it.
Say for example, on one page, you've got some text
in a block that takes up like
half the width of the container,
if you're gonna do the same thing on another page,
make sure you use the exact same style.
(buzzer buzzing)
Even if the color's different, make sure that the pattern
is the same, (bell dinging)
make sure that the corner radiuses, radei?
Are the same, a good rule of thumb as you're designing
is to look at the component you just created
and ask yourself if there's anything remotely similar
on one of the other pages on your site.
And if there is, take a cue from that.
Another important thing I wanna note about design patterns
is that they can change too.
But when you update them in one place,
you should update them in all places.
I'm a marketing designer, right,
so I've been designing for the same website
for the past one and a half years.
Obviously in that time, I have grown my skills,
I've got new ideas and like new better ways
to design something.
And so when that happens, rather than just sticking
with the thing I did at the very start,
because you know, that was hitting the pattern,
instead I'll update that,
and then update it across the board,
because I've found a better way to do it,
if that makes sense.
So really, it's about asking yourself questions
as you go through and design,
and it'll become second nature after awhile,
if you're working on the same project.
I wanna share with you a few ways
you can put this into action in Webflow,
because like I said, they do have a lot of features
in the product that make this really easy
to stay consistent.
So there's no excuses.
The first one I'm gonna mention maybe seems obvious,
but it was actually a really nice surprise for me
on day when I just tried it accidentally, and it worked.
And that is that you can copy and paste whole elements
in Webflow, not just from one page to another,
within one project, but between projects as well.
So it's something you can do is if you have
a certain navigation style or something
that you really like the way you've designed,
a certain quote style for example,
you can save these into like a master project,
and then whenever you want them,
you can just open up that project and copy and paste it
into the place that you need it.
The next super handy feature for keeping things consistent
in Webflow is symbols.
So this is where I can make an element,
and I can come in here and click create symbol,
and now I can drop that symbol
onto any other page that I like.
And then the best part is if I wanna make an update to this,
instead of having to remember to update it in all places,
I can actually just double click, go into the symbol itself
and make the edit there, and it'll update
across all of the pages that I used it on, super handy.
I use this especially for things like navigation,
because I think that's a really important thing
to be consistent across your site.
If nothing else is consistent, make sure your navigation is.
Then for the last thing I wanna tell you about,
I need to explain quickly that
when you're designing in Webflow,
you are actually writing code.
It just doesn't really feel like you are.
But all of the actions that you're doing in Webflow
is actually creating code in the background.
I have a whole video about that if you wanna watch,
it'll be linked on a card which I think is in that corner.
So something that's really great for consistency
is using class as well.
CSS classes allow you to apply a style
to one dev, and then to apply that style to another one,
you just have to literally type the class name,
and boom, it'll be styled the same.
And just like I was talking about with symbols,
if you make an edit to a class on one element,
it'll update across all of the other elements
that you've used that class on.
I know in Webflow that it can be really easy
to just quickly style an element to look the same,
say if I've got this box for example,
I wanna style another one to look like it.
I can just quickly edit the corner radius,
change the background color, and boom,
it's gonna look the same.
But if I use classes instead to make these boxes the same,
it's so much easier to update later on if I want to.
And also to use this style again
quickly anywhere else on my site.
I really hope this video inspires you
to go over your designs with a fine tooth comb
and look out for opportunities where you can be
creating design patterns, and bringing consistency,
because it is just gonna add this layer of polish
to your design, that like I said,
is hard to define sometimes, especially for a user,
they might not be able to describe why one design
just looks and feels better than another,
but consistency is often the reason.
It's gonna make it look at lot more professional.
It's gonna make you a much more professional designer,
when you pay attention to this sort of thing.
So, I wanna encourage you to go ahead and do it.
Thank you for watching, I hope you enjoyed it.
If you wanna jump into Webflow and start trying out
some of the consistency tips and tricks I gave you,
then you can do that for free,
have a play around at the URL here,
and also linked in the description.
If you're new to my channel, first of all,
thanks for watching this far into the video.
And also, make sure you hit subscribe,
because I make new videos like this about design
every single week, and I'd love to have you back here
for the next one.
Alright, thanks for watching,
I'll see you next time, bye.
(happy guitar music)