Creating consistency across your website with design patterns! – AD

Creating consistency across your website with design patterns! – AD


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

Comments

  1. Post
    Author
  2. Post
    Author
  3. Post
    Author
    Mohamad Rajabifard

    Haven't finished it yet (I'm sure it'd be great), a tip for your next video, if you notice the headroom isn't enough and your forehead is cut 🙂

  4. Post
    Author
  5. Post
    Author
    Brussells

    Great video – something definitely to keep in mind as a learn more design. Will definitely be watching more videos, especially the Workflow based ones as it seems like a great tool. Focusing more on Front End Dev, but still need some design skills under my belt for sure.

  6. Post
    Author
  7. Post
    Author
  8. Post
    Author
  9. Post
    Author
    Anwar choudhury

    Sister my Anwar Choudhury m from Thailand. Plz upload one more video related with screen printing….how to start! My mail ID is [email protected] and my WhatsApp number is ±66652063521 Thank you

  10. Post
    Author
    santanasg

    Definitely consistency is super important for any website! I'm currently working on launching my own website (I have a video KIND OF "designing" it, as in the planning- which please don't kill me, I'm not a designer 😂) I use Wix because I've found it the easiest!

  11. Post
    Author
  12. Post
    Author
  13. Post
    Author
    Tania Domnina

    Thank you! Consistency is indeed very important for the long-term projects, such as corporate tools, for example. I've been working on a series of apps for over 5 years – that's a challenge! Actually there is a huge lack of information regarding the corporate apps UI design. Have you ever thought of making a video specifically focusing on b2b projects, not just websites or b2c apps? My end-users are obliged (hopefully not forced) to use the tools I create. The UI needs to cover 100+ features in a few screens and satisfy both the managers and their employees. How to make their life easier? 🙂

  14. Post
    Author
  15. Post
    Author
  16. Post
    Author

Leave a Reply

Your email address will not be published. Required fields are marked *