Consistency is key in website development especially when it comes to the design of it. This means that all of your fonts, headings, margins, buttons, and more are designed and established at the beginning and then stay that way throughout the rest of the pages. You never want the user to feel like they have landed on an entirely new website when they click from home to about.
The design consistency allows the user to have a better experience when navigating your site because as soon as they scroll through one page they know what to expect and will feel comfortable browsing the rest of the site.
all pages are designed
When we say consistency we don’t just mean on the main pages, we mean design every single page even the ones people rarely visit. Some pages that can be forgotten include FAQs, policies, contact, and popups. Popups are the messages that appear on a website asking for your email address in exchange for a discount
All of these pages are still apart of your website and should feel like that to the user. You want the user to go to the contact page and feel like they are contacting the same person they saw on the homepage. As we mentioned before, consistency is key in making a website easy for the user to understand and navigate. Don’t get lazy, design all of your pages!
hover & clicked status
You know when you click on a link and it changes from blue to purple? That minor color change is actually really important for a good user experience and is something you have to implement in your website.
The reason it’s so important is because it lets the user know where they have been, where they are going, and where they are. For example, in the top navigation you usually have several links to each page of the website. When you hover your mouse over one of these, it should do something to indicate that you are hovering over it. This might be a color change, a faded look, or the mouse turning into a pointer instead.
Whatever it is, this helps the user understand that an action will occur if they click. The same goes for if they actually do click on that navigation link and then land on a new page. Now when they go to the navigation that page’s link should be a different color. It may be simple but have you ever been clicking through a site and forgotten which page you were on? This is why you should never forget to design the hover or clicked status of your links and buttons.
It’s easy to design one page after another and completely forget what margin you had used or what grid you were following. The user may not know that’s what’s different, but they will feel like something has changed. Designers talk about grids all the time and a website is no exception. Grids allow for design consistency and now that we know consistency is key this is another element to pay attention to.
To get the same margins from page to page, we like to design static mockups in illustrator first so we have an initial plan to follow. Depending on what platform you use, you should establish a grid with the tools they provide. Squarespace uses spacers and site padding that is consistent throughout the whole website. Wix doesn’t have site padding, but they do use a grid similar to illustrator where you can pull guides onto the page. This may seem like an extra step, but in the end it saves a lot of time in making sure each page is consistent.
You may be thinking that design and brand consistency are the same, but while they are similar they are two different things. You could design an awesome website that follows all of the rules, but if it doesn’t match your brand, the user will be confused and not make the connection from your product to your instagram to your website.
All of these things should match and follow the same brand guide so you can establish your own rules. For example, if you are working on making different hover states, you should have the color change to one of your other brand colors, same goes for buttons. This is a simple way to tie things together and showcase your brand and see it in use.
A website is the perfect place to see how all of your branding really works together and why it was so important to establish font pairings, a color scale, and logo variations. You can get creative with it but make sure a user knows exactly who’s website this is and doesn’t forget it (hair flip).