Jeremy McGilvrey Reveals 3 Core Principles for Better Web Design
When I started as a web designer, I could easily recognize what good web design is, but I always struggled when I tried to do it myself. You know why? Because I didn’t understand the underlying principles of designing a good website. I thought it was about beautiful illustrations and images, but that was not the case. A website can still be a bad website even if it has amazing graphics.
So, what makes a good website?
Though many things contribute to making a great site, three principles are crucial to either make or break a website. These are:
- Navigation
- Hierarchy
- Use of Color
In today’s blog, I’m going to break down these core principles with examples to show how this works well and how this can ruin your web design.
So, let’s start:
Navigation -
People will leave a website in the first 15 seconds if they don’t understand what’s on the website and that’s where good navigation plays its role.
A clean and simple navigation structure allows visitors to land on any page of your site in seconds and find what they need in a few clicks. It allows them to flow from one page to another without frustration. Without good website navigation, your visitors won’t be able to understand where to find your products/services, blog, pricing, contact, etc.
Examples of Good and Bad Website Navigation
Let’s figure out what a good or bad website navigation looks like with the help of the following examples:
Bad Navigation :
Here, we have a screenshot of Schoenberg’s (a family law group) home page. We choose this example because it demonstrates how bad site navigation can ruin your website.
From the screenshot, it’s not clear what they have on their website because everything is hidden under the menu button, and you’ll first have to open the menu to see its contents.
The menu has a contact form and a lot of headings with multiple subheadings. All this content is important because it helps visitors understand if the website has something they need. But the menu is hard to navigate and explore what’s on the website. If someone ends up clicking another page, they don’t know where they are and have to reopen the menu to explore more items. Navigation is also missing the search button, making it hard for the visitor to search specific words or items.
It’s actually ugly navigation and the visitor will probably leave the site instantly.
Good Navigation :
Now here’s a screenshot of another law firm, HG Lawyers.
Its navigation is pretty clean and simple, sitting on top of the page. Horizontal menus on the top are recommended because they make the navigation seamless and easy. Their menu is smoothly covering a lot of things and in a glance, you’ll have an idea of what they’re offering and what kind of contents the website has.
Even if you hover over one of the menu items, you will see a lot more information under it in an organized way without needing to click the tab.
Even when you click a link or scroll down, you will see the menu on the top no matter where you are on the website. It allows you to quickly navigate across different pages without a fuss.
So no matter your website has one page or hundreds of pages, make sure it has easy and simple navigation to keep visitors engaged and explore site contents.
Hierarchy -
Hierarchy basically means what do visitors see first on your website or what grabs their attention first.It refers to the organization of website contents from most important to least important. There are multiple factors that contribute to hierarchy including size, layout, colors contrast, and more.
Let’s see the difference between a good and bad website hierarchy with examples.
Bad Hierarchy :
Now in our first example of Schoenberg’s website, there are multiple problems with hierarchy i.e.,
- Everything including the text, buttons, logo, phone number, and the menu is too big. It looks like everything is trying to grab attention. In such a situation when everything tries to grab attention, nothing actually gets the attention rather it overwhelms the visitor.
- The website lacks contrast because the image in the background is pretty bright that’s grabbing the attention.
- The hierarchy is also missing when you scroll through the website as the menu, and the logo and menu area is still grabbing attention.
Good Hierarchy :
In the case of our second example of HG Lawyer’s website, there is a clear hierarchy across the site.
When you land at their home page, the only thing that pops up is the “Exceptional/Outcomes” text which is kind of their value proposition. Then your eyes move down to the subtext where you can read more about them. Everything else on the homepage e.g., the navigation section and logo are small, and nothing is distracting.
Though the website has a moving video in the background, they have added a black overlay that makes sure that no matter what’s there in the background, the text still stands out.
Unlike the first example shared above, when you scroll down through this website, the page’s content will grab your attention and you won’t be distracted by the menu or logo.
It simply shows that navigating the user’s attention with a good, clear hierarchy issuper crucial throughout the website, and this is really a huge differentiator between a great website and a crappy one.
Use of Colors -
Website colors are a kind of your brand identity and are used to communicate emotions. However, website colors also have some sort of functionality e.g., to show if something is a button or a clickable link. They can highlight features, create focus, or tell you if something is more important than the other.
Let’s demonstrate what makes good or bad website colors with examples.
Bad use of colors :
In the case of our example of Schoenberg, the main color they’re using is white and the other colors are orange and purplish. However, it is not clear what functionality these colors have.
Usually, text in color refers to a link but it’s not the case here. Likewise, the colors are quite similar to the background, making an ugly contrast. Overall, website colors are very confusing.
Good use of colors :
In the case of our second example, they are using white as the main color. The other color they have is orange for clickable links and they are using it with good contrast and functionality. Their colors are not confusing and explain what’s going to happen if you click something.
To Wrap it Up
That’s all about three core principles to creating a great and compelling web design; navigation, hierarchy, and colors. I hope this article helps you breakdown and understand these core principles and you’ll use principles when designing your website.
In case you are looking for a professional to build an appealing website for you while following these principles, Jeremy McGilvery is here to help. Jeremy is an award-winning digital marketing consultant and website designer who has helped more than 1000 clients with beautiful landing page designs and website designs.
You can find him on:
Jeremy McGilvery Website: (www.jeremymcgilvrey.om)
Jeremy McGilvery Upwork: (Upwork)
Jeremy McGilvery Instagram: (Instagram)
Jeremy McGilvrey is the owner of a top-rated Houston web design company. If you’re looking for a web design and development services company in Houston, Texas you can contact Jeremy’s web design and development company here: Houston’s Top-Rated Web Design Company.
