7 Golden Rules All Web Designers Should Know

Welcome to the complex world of web design. Your online presence is crucial in today’s society. But all components and variables considered, web design can get overwhelming fast. We’ve broken things down into 7 golden rules all web designers should follow.

Web design is a delicate matter; one reckless move and your page will flop big time. Learning the fundamentals regarding how to design a web page will help you avoid skyrocketing bounce rates and frustrated visitors.

Whether you’re just dipping your toes into the world of web design or you’re an established web designer looking for a refresher, these are the golden web design rules you should never break.

Above are two pages of the ManyPixels website. Although the pages serve different purposes, you can clearly tell the web designers applied consistency throughout the design. The menu is in the same spot, the color usage is similar, and the buttons remain in the same place.

Are you wondering how to design a web page that entices scrolling? The web designers at Pop Rocket can show you; see for yourself by having a little scroll on their brilliantly designed page.

Let’s look at MailChimp’s page, where you can find multiple web design rules applied (spot the visual hierarchy!). One of them being stunning design above the fold. It’s instantly clear what MailChimp is all about and where you can sign up.

Their web designers opted for various headings to divide their content in order of importance. Slack’s call-to-action buttons have a different color, and repetition and proximity are used to explain who their service is for. White space surrounds their central message, and lastly, the box below the main message has a slightly different style with an illustration.

Slack’s website is a prime example of a visual hierarchy done right.

With minimal options in their menu bar, it’s instantly clear where you should click and why.

Above is an example of web design kept simple. ETQ. is an Amsterdam-based shoe brand embracing all things minimalistic, valuing quality over quantity.

1. Keep it simple

If you intend to stick to only one of the 7 web design rules, it should be this one. When designing a web page, it's crucial to keep things simple.

Any element on your page should have a purpose, which also goes for the text on your page. Rather than filling it with every detail about your great business (we know how tempting that is), leave some room for the design to breathe.

Avoiding a cluttered design will make it much easier for people to comprehend the information you're displaying. We're bombarded with visuals and ads every day, which has significantly shortened our attention span. Therefore, you should get to the point rather sooner than later by keeping your design straightforward.

Keeping options to a minimum will make things easier for your visitors, increasing the odds of your audience revisiting and staying on your website.

This principle is also called Hick’s Law. It’s the simple idea that the more choices you present someone with, the longer it will take them to reach a decision. If you’re reading it like this, it sounds like common sense. But the reality is that Hick’s Law is often neglected in the digital world.

2. Apply visual hierarchy

Each visitor comes to your page with a purpose. While one visitor is looking for your location, another wants to get in on your sale. A visual hierarchy will help visitors navigate your page, guiding them through the design elements.

Visual hierarchy is the order in which a visitor processes information on a web page. You can apply visual hierarchy in numerous ways, with the most common ones being;

• Typography – Perhaps the most straightforward way to apply visual hierarchy is by making some text bigger than others and using spacing in between. Or by making some words bold, italic, or underlined.
• Color – Bright colors typically attract more attention than plain ones. Instead of making prominent buttons the same color as your background, giving them a contrasting color will make them pop out. And there you have it! Visual hierarchy, applied.
• Repetition – Repeating a particular style suggests that content is similar or related. Think about a blog page showing all entries similarly. Each entry’s design contains a banner, a title, and a snippet of text, ensuring visitors understand these are all blog entries.
• Proximity – When placing certain elements in a group or in close proximity, most people will quickly establish them as related. This is also known as the gestalt law of proximity.
• White space – The opposite also rings true. Rather than placing elements in proximity, adding white space will visualize that the elements differ from one another. White space is a crucial element in web design and a valuable tool in the toolbox of web designers.
• Texture and style – If you want a particular message to stand out, adding texture or a slightly different style compared to the overall page will do the trick. This is called the Von Restorff Effect, stating that humans take note of unique things much quicker.

3. Plan out navigation

You can apply a visual hierarchy to plan navigation for your visitors, but that isn’t the only way to guide them.

Anticipate your visitor’s moves by consciously making choices while web designing. This is helpful to nudge them in the right direction and make the journey as smooth as possible.

Design above the fold

Make sure your most crucial design elements are above the fold. Bear in mind our first rule here; keep it simple. Pick one focus, a product, for example, and place it above the fold.

Above the fold means it's in the space that will instantly be visible to visitors before scrolling down or clicking on anything. A good website designer considers the highest priority items of the page and places them above the fold.

The area above the fold gets the most attention and readership. The parts available after clicking on an element are described as “after the jump.”

Encourage scrolling

Although the main elements of your web page should be above the fold, it would be a mistake to focus solely on the top part while web designing. Scrolling is a significant aspect of the user experience.

Surely you need more space than just above the fold to tell your story and show your brand. Enticing visitors to scroll is an excellent way to ensure your content below the fold is discovered as well.

Wireframing

If you’re an aspiring web designer, you most likely heard the word wireframing at one point or another. Wireframing helps organize a website's structure to optimize the user experience.

Wireframes are simple visuals web designers create to plan the information hierarchy before starting the visual web designing process.

Think of wireframes as what blueprints are to buildings. They contain lines and boxes implying where content should go, excluded of any visual design elements.

4. Be consistent

If you’re learning how to become a web designer, one of the first things you’ll learn about is consistency. When it comes to web design, consistency is crucial to improve the user experience.

There are three major elements when it comes to consistency in web designing:

1. Visual consistency – All of your design elements should have some form of consistency throughout your web design. If your call-to-action button looks completely different on the next page, your visitors will get lost.
2. Functional consistency – By maintaining functional consistency throughout, the usability of your website will vastly improve. It makes things predictable for the user. An example of functional consistency is placing your menu bar in the same spot on each page.
3. Internal consistency – The combination of both visual and functional consistency is called internal consistency. This has to do with uploading content to your website and adding on to your existing pages. The additions should align with the existing design's visual and functional consistency.

An essential step towards achieving consistent design is developing a solid brand identity. Your website should represent your brand, after all. This will function as the foundation for web designers to build your website on.

5. Go for responsive design

Your visitors see your design on a variety of devices. In addition to devices, they use different browsers and operating systems.

Luckily for visitors, there is such a thing as responsive design. This means the design directly responds to the type of device and browser you view the page from. Try it for yourself; open a website on your desktop and drag the corners in and out to alter the size of your window. Chances are, the design will change accordingly.

Creating responsive web design is no walk in the park. A professional web developer will be able to help you with technicalities such as scalable content and fluid grids.

Below is an example of responsive design created by one of ManyPixels web designers. The homepage looks different on a wide screen versus a phone screen; however, there is still a sense of consistency. You can tell this is the same website, just displayed differently.

6. Put your user first

To learn how to become a web designer, remember to put yourself last. It’s all about the visitor first and your client second.

It may sound logical, but you would be surprised how often webpage designers and clients design a page according to what they want and like, failing to put the user first.

A study by Amazon Web Services indicates that 88% of visitors are less likely to revisit a website after a poor experience. So you better make sure the experience is top-notch and catered to the wants and needs of your visitors!

There is only one way to know what your users like, and that’s through testing. Test your page with a group of users, apply the feedback, and then test it again.

This is also called website usability testing. It gives you valuable insight into whether your visitors understand how to navigate your site, can carry out tasks across pages, and encounter pain points.

Resources to get your website tested

• In-person – If you have the time and budget for it, try a moderated in-person test. This means inviting visitors, sitting them behind a screen, and giving them tasks to carry out on your website. It gives you the most detailed insight and allows you to ‘go deep’ with users.
• Hotjar – This company offers remote and unmoderated usability tests that give insight into how users interact with your website. Their method involves screen recording to evaluate users’ actions. It’s a quick and easy way to get results fast.
• Lookback – Want the perks of remote testing but with a moderator instructing and observing participants? Lookback is a great online tool that allows you to send links to the usability tests and have live conversations with participants.
• OptimalSort – Optimal Workshop created a testing method involving cards representing different types of content, asking participants to organize these cards. The test results show how users see your website's structure and how they navigate.
• RealEye – Do you want insight on where your visitors are looking? This online research platform works with webcam eye-tracking so that you receive data on where exactly your visitors are looking on your web pages.
• The User is Drunk – “Your website should be so simple, a drunk person could use it.” This is the slogan of The User is Drunk, an online platform by a professional, full-stack UX designer. You can pay him to get drunk and record himself while testing your website. Yes, for real!

7. Mind your content

Ah, the age-old question of whether a website's content or design matters more. Let’s put it this way: you can have fantastic content flooding your pages, but visitors will not even make it to your content if the design is bad.

That doesn’t mean you should completely ignore content, as this will leave your website as a beautiful but empty shell. It means you should be very considerate of your content.

The content that you place on your website, whether it’s images, text, or video, should be meaningful. Each piece of content should add value to your visitors.

Tips to provide meaningful content on your website:

• Don’t create too many pages, but stick to a certain amount and add to those pages rather than creating new ones.
• Be upfront with your customers. What do you have to offer, and why should they choose you? Consider adding a pricing page.
• Always make sure your text is legible first and stylish second.
• Create an immersive experience for your visitors by adding detailed storytelling and striking visuals.
• Listen to your audience – What are they talking about? Which content receives the most engagement? Focus your content on subjects that your audience cares about.

Final thoughts

A website designer in this day and age should have a broad array of skills. By now, you know it’s not just about visual appearance but the user experience as a whole. Making this experience as smooth as possible will help you win over potential customers.

Web design is a vast field with many disciplines, which arguably is best left to professionals. For those curious or determined to do the work themselves, we hope these 7 rules provide you with a framework to get started.

If you’d like to learn more about web design, browse through our previous articles on this topic.