12 Rules That You Should and Shouldn’t Do When Designing Your Website

11 min


If you build websites, you’re well aware that making them useful and engaging is a major concern. Even with the best web design software at your disposal, it may be a daunting undertaking for anyone who has only recently begun developing websites, so to make things easier, I’ve put together a simple list of do’s and don’ts to keep in mind when designing your next web design project.

1. Maintain a consistent user interface.

The consistency of the interface throughout the product is one of the most important aspects of effective UX. Your website’s general appearance and feel should be consistent throughout all of its pages. Usability and UX can be improved by maintaining consistency in navigation, color schemes, typefaces, and writing style.

Practical advice how to create web design: First and foremost, make the design usable. Consistency has two sides to it. If your website isn’t created properly from the start, making other portions of it consistent will result in continually terrible design. As a result, make the design usable first, then consistent.

2. Create navigation that is simple to utilize.

The cornerstone of usability is navigation. On the Internet, it is the most used method of communication. It’s critical to have good website navigation so that visitors can locate what they’re looking for.

Helpful hints:

Keep the key navigation options in top-level navigation. Limit your top-level navigation links to a maximum of seven options (the typical human can keep seven objects in working memory) and establish sub-navigation with obvious categorization.

For navigation options, use clear labels. To help visitors grasp menu options, use phrases they are familiar with.

Reduce the time it takes for users to get at their destination. Design your navigation so that visitors can reach where they want to go with the fewest possible clicks. Remember the three-click rule when developing a website: your visitors should never be more than three clicks away from what they’re looking for.
Include navigation choices in your site’s footer. Visitors expect to see navigation choices and contact information in the footer.

3. Change the color of links that have been visited.

In the navigating process, links are quite important. Users may unintentionally revisit the same pages if visited links do not change color. Knowing where you’ve been in the past and where you are now makes it easier to pick where you want to go next.

4. Make your pages scannable.

Users are more inclined to scan a page rather than read everything on it when they visit your site. When visitors wish to discover specific content or perform a specific job, for example, they will scan a website’s pages until they find it. And as a designer, you can assist them by creating a good visual hierarchy. The arrangement or display of items in a way that implies importance, such as where the eyes should focus first, second, and so on, is referred to as visual hierarchy.

Helpful hints:

Keep your text to a minimum. To make it easier to comprehend visually, divide your content into groups. Headers or bullet points can be used to break up text walls.

Important elements should be given additional visual weight. Make crucial features like call-to-action buttons and login forms the center of attention so visitors can see them immediately away. Different sizes and colors can be used to draw attention to certain elements.

Do. Mailchimp highlights the most crucial information on a page, such as call-to-action buttons.

Take a look at natural scanning patterns. People in the Western world read from top to bottom and from left to right.

Visitors will face a learning curve if you create a design that deviates from this pattern. The content on well-designed websites is often laid out in a “F” or “Z” reading shape.

Maintain a grid arrangement. A grid style allows you to organize information so that visitors can read and absorb the content on the page more easily.

5. Treat content with respect.

Your website’s copy is equally as vital as its design. More than 95% of the content on the internet is written in English. Even if your site is attractively designed, without decent content, it is nothing more than an empty frame; a good website has both outstanding design and amazing content. The role of a designer is to ensure that the design supports and enhances the content.

Helpful hints:

Make sure the website’s text is relevant. Irrelevant text provides no benefit to your visitors and can easily cause them to become confused. Make an effort to write copy that is useful to your readers on every line.

Jargon should be avoided. For easy comprehension, the material on your website should be expressed as simply and plainly as feasible. Writing for all levels of readers is a safe bet, so choose phrases that are straightforward and easy to grasp for everyone.

6. Make sure your website is free of errors.

A tiny mistake can quickly taint a brilliant piece of work. Here are some of the most typical issues to be aware of:

Keep an eye out for broken links. When a user clicks a link on a website and receives a 404 error page, they may become frustrated.

Make sure there are no mistakes on your website.

Check that all of the media material is loading properly, with no broken images or videos.

7. Keep the amount of options to a minimum.

People’s decisions are influenced by the quantity of options they have; the more options they have, the less action they take. When you give your user too many options, they are forced to think too hard. It’s better to limit the amount of options to improve the chances of engagement.

8. Encourage users to scroll down the page.

Scrolling takes users further into the page and encourages them to spend more time with it, increasing the likelihood that they will convert, such as buy something, sign up for a subscription, or contact you. Despite the fact that most visitors begin scrolling as soon as the page loads, the material at the top of the page is still crucial. Visitors’ perceptions and expectations of quality are shaped by what appears at the top. People will scroll, but only if the content above the fold is compelling.

Practical tip: The content at the top of the page sets the tone for the rest of the page. Users are willing to search for more content if a page supplies them with high-quality content.

9. Put a label on each button that describes what it does.

Any actionable interface element should always have a label that relates to what it will perform for the user. Users will feel more at ease if they know what action a button does. Vague labels like “Submit” or abstract labels like the one below don’t give enough information about the action.

Don’t. People will be perplexed as to what an interface element does. UXMatters is should be credited.

Do. Make it obvious what happens when users click a user interface piece. A simple label for a sign up form is “Claim Your Free Trial.” Treehouse is to be credited with this image.

10. Make it appear as if everything is in working order.

Consider how the design communicates affordance with buttons and other interactive features. Remember the old adage “form follows function”: an object’s appearance dictates how it is used. Users might be easily confused by visual elements that appear to be links or buttons but aren’t clickable, such as underlined phrases that aren’t links or items with a rectangular backdrop but aren’t buttons.

Don’t. Is the orange box in the screen’s top-left corner a button? No, although the element’s shape and label make it appear to be one.

11. Make your website mobile-friendly.

Web browsers are now installed on over 5 billion devices. Visitors can access your site using a variety of devices, including a PC, tablet, phone, music player, or even a watch. A large aspect of UX design is ensuring that all critical information is displayed effectively on multiple screen sizes regardless of how the visitor views your site.

Do. Designers must adjust their work for different screen sizes. The site should show information in a clear manner regardless of the size of the screen – from a phone to a watch, or a tablet to a desktop.

Helpful hints:

Make it simple to find important information. Unlike desktop users, mobile users are searching for specific information such as contact information or the price of a product they wish to purchase. Make it impossible to overlook this information.

Adjust the size of interactive items to fit the screen. Because mobile users scroll and tap with their fingers, interactive features like buttons may need to be larger.

12. Put your design to the test

You may believe your design is wonderful, but you’ll never know how effective it is unless you get feedback from real people. You must see how users respond to it. Even if you can only get one or two real, unbiased people to interact with your website and share their ideas with you, you’ll gain a lot of valuable information that you wouldn’t have otherwise.

Keep an eye on analytics as a practical tip. Web analytics are effective tools for identifying sections of your website that require more attention.

1. Make sure users don’t have to wait for content to load.

The amount of time it takes for a page to load is critical to the user’s experience. We become increasingly impatient as technology advances, and today, 47% of consumers want a web page to load in two seconds or less. Visitors may feel dissatisfied and quit a website if it takes too long to load. As a result, while developing a web application, performance should be a top consideration.

The better the experience, the faster your site is. Image courtesy of Google.

Helpful hints:

Blank pages should be avoided during the loading process. Consider displaying a portion of the content along with some type of visual feedback, such as a loading indicator, if loading takes a long time.

Improve the quality of your photographs. Large background graphics, in particular, can take a long time to load. By optimizing your photographs, you may dramatically minimize the loading time.

Calculate the current performance of your website. The Google PageSpeed Insights and Think With Google tools will not only help you detect performance issues on your website, but they will also suggest fixes.

2. Do not create new tabs for internal links.

Internal and external links should behave differently, according to users. Internal links should all open in the same tab so that users may use the “back” button. If you want to automatically launch a new window or tab when you click on an external link, you need give an advance notice. This might be done by adding text to the link text that says “opens in a new window.”

3. Use a limited number of typefaces.

It’s usually tempting to utilize a lot of various typefaces when you’re designing a website — five or six different fonts, maybe even your own. However, it is preferable to avoid that temptation. Too many font types can be distracting, confusing, and even annoyance-inducing.

Don’t. If you use too many typefaces, they will clash and overwhelm your visitors.

Using a maximum of three different typefaces in a maximum of three different sizes is a typical advice. Consider how you may make typography more effective by experimenting with weight rather than different fonts when developing a website.

4. Use a limited number of colors for your website.

It’s best to avoid using too many colors in design, just like it’s best to avoid using too many typefaces. Color has a lot to do with balance in a design, and the more colors you use, the more difficult it is to achieve harmony. When you use too many colors in a design, it’s like trying to transmit a million emotions and messages all at once, which might be confusing to the person who is looking at it.

Don’t. In your design, don’t use too many colors. Pine-Sol created this image.

Unless you wish to use color to highlight a certain portion of your site, it’s best to confine the color scheme to a few hues and keep it constant throughout your site.

Practical tip: Consider the emotions you want your visitors to experience. Knowing what emotions you want to communicate will assist you in selecting the right color scheme. If you’re selling meditation items on your website, for example, you won’t want a bright, garish color palette.

5. Avoid displaying automatic pop-ups too early.

As soon as you land on a page, many websites display pop-up boxes with a subscription request. Showing pop-up windows to visitors to your website is definitely one of the most unpleasant things you can do as a designer. Pop-ups are intrusive by nature, and because they are commonly employed to display advertisements, users often dismiss them before reading the information.

Don’t. When people enter The New York Times website, the first thing they see is a popup containing a promotional ad.

Timing your pop-ups is a good idea. You must first demonstrate how you can provide value to visitors before asking them to do something. Prevent the box from appearing until visitors have read all of the content on the page or have stayed on the site for a long time.

6. Avoid using stock photographs of people.

Images with human faces are a great approach to engage your audience. Our brains are wired to pay attention to people’s faces. We feel more connected to other humans when we see their faces, rather than just using a product, when we see their faces.

Many business websites, on the other hand, are known for their excessive use of insincere photography, which is used to “create trust.” According to usability testing, solely decorative photographs rarely bring value to the design and frequently detract from the user experience.

Don’t. Inauthentic photos provide the impression of superficial fakery to the user.

7. Don’t allow promotion overshadow your work.

A page with too many promotions or adverts can easily overshadow the essential content, making it difficult for consumers to complete tasks. If you have too many advertising on a page, they will all compete for your readers’ attention. As a result, you’ll experience sensory overload, which will boost your bounce rates. It’s also worth noting that anything that appears to be an advertisement is typically ignored by users, a condition known as banner blindness.

Don’t. Ads can detract from the core information and detract from a design.

8. Don’t use music as a background or in autoplay videos.

While background music may work in certain situations, such as on a promotional website, it is simply not a good idea for most websites. Unexpected music or sound might irritate and perhaps cause problems for visitors. They may be browsing your site at work, in a public location, or near someone who is sleeping, and unexpected music could quickly drive them away.

Autoplay videos included in a block of material upset people in the same way that background music does. They should be used in moderation and only when necessary and expected.

Put users in charge of their own experience. Set the music to mute by default, but give customers the option to turn it on by clicking the design play/pause buttons for your audio material.

Do. Videos on Facebook are set to autoplay, but no sound will be heard unless users indicate that they are watching the video by engaging with it.

9. Do not allow scrolling to be hijacked.

Scroll hijacking occurs when a website’s scrollbar is manipulated to operate in a specific way. Many users dislike hijacked scrolling since it takes control away from them and makes scrolling behavior utterly unpredictable. It’s important to avoid scroll hijacking when designing a website and allow the user control their surfing and movement.

10. Avoid using horizontal scrolling.

Some web designers employ horizontal scrolling to make their pages stand out. Horizontal scrolling, unfortunately, is one of the only interactions that constantly receives unfavorable feedback from consumers. People are frequently unaware that they can find material by scrolling horizontally – most users are used to scrolling down on webpages and rarely look left or right. As a result, they just disregard anything that may be accessed via horizontal scrolling.

Don’t. When there are no visual indications, visitors will have no concept that they should scroll horizontally. Axelwyart created this image.

11. Don’t let aesthetics get in the way of usability.

A user’s ability to consume material or engage with a website should never be hampered by a design, no matter how beautiful it is. Using light grey text on light backgrounds is a common example of design decisions that often result in poor UX for the sake of aesthetics. The readability of the information is affected by this combination. It’s best to avoid crowded backdrops behind content or low color contrast, as shown in the picture below.

Check the contrast ratio for a practical recommendation. Contrast ratios show how distinct one color is from another. Color Contrast Checker, for example, may let you verify if you have enough color contrast in only a few clicks.

12. Make use of blinking text and advertisements

Avoid utilizing flickering flashing effects in your advertisements and animations. Flashing or flickering content might cause seizures in certain people, and it’s likely to be uncomfortable or distracting for regular users.

Conclusion

People expect a great user experience when they connect with websites. If you don’t meet their wants, they’ll go to your competitors, who could be just a click away. As a result, when making design decisions, keep the visitor in mind and aim to make the experience as pleasant as possible.


Like it? Share with your friends!

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format