12 Web Design Rules You’re Probably Breaking (and How to Fix Them)

You're Reading: 12 Web Design Rules You’re Probably Breaking (and How to Fix Them)
When you design a website, it can be hard to know if you’re making mistakes, especially if you’re just getting started and don’t have someone else looking over your shoulder as you work on your designs.

Well, all this is valid. After all, the rules are constantly changing. There’s no better example of this than CSS (Cascading Style Sheets), which was invented in 1996 but has only come into wide use within the past decade or so, and it still doesn’t have universal support from most modern browsers. 

One of the biggest reasons why CSS doesn’t yet enjoy universal support is that designers and developers often don’t follow web design rules that were created to help keep users happy and make their lives easier. 

As you can see, with so much information out there on how to design your website, it’s easy to get lost in the shuffle and break a few web design rules without even knowing it. This guest post from our friends at softwaretested.com shares some web design rules you may be breaking and what you can do to fix them.

You need hosting to have a website

This page talks about our dedicated, managed hosting, and why it is the perfect option for emerging and medium-sized businesses.

Rule 1. Use white space.

The use of white space is crucial to the design process, but it can be difficult to use correctly. White space can make a design feel open and inviting, or it can make a design feel cramped and confusing. 

The best way to understand how white space should be used in your designs is to take a look at what other successful designers are doing.  

Here are some helpful examples of white space usage:

  • An image should have a clear margin on all sides for them to maintain its visual integrity. Margins that are too close together can cause images to appear blurry when viewed on high-resolution displays. A margin of about 1 inch or 2 cm all the way around the image will work well for most screens.
  • Create wide columns for content on your page.
  • Add white space between paragraphs for clarity.
  • Leave blank lines between items on a list or menu.
  • Leave generous spacing at the end of every line when formatting text. 
  • Extra space doesn’t add any cost to your project, but it creates the impression that you care about the details. More importantly, it ensures readability by helping people’s eyes move easily along a line of text without needing to jump back onto a previous line again and again.
  • Remove all clutter from your designs. This includes unnecessary icons that don’t contribute anything useful or any graphics unrelated to the message being conveyed in that part of the site. Be wary about adding too many graphics as well because this will make your site seem unprofessional and cluttered, which will cause people not to want to buy from you!

    Rule 2. Keep the text content short.

    Website design is about more than finding a good-looking template. With over 2 billion websites in existence, it’s important to have a website that looks professional and stands out from the crowd. 

    Of course, this doesn’t mean you need to be a pro designer to create a great website. There are many do-it-yourself templates available for sites like WordPress and Tumblr, which allow you to customize the look and feel of your site without any technical skills or knowledge.

    But even if you are designing your own website or blog, there are some easy ways to avoid common design mistakes that will make your site stand out from the rest. And that is to keep text content short, meaning content should be concise and brief on all pages of your site.Here are some areas where you can add short content when designing a website: 

    • On Homepage – The homepage is the most viewed page on a website, so it needs to convey key messages quickly and clearly. Keep the homepage copy very short with one main message plus an offer, if applicable. Avoid long paragraphs as they’ll take up space and won’t be scannable. Short sentences work best for scanning purposes, so ensure each sentence conveys an idea without getting lost in details or tangents. 
    • On Product Pages – Similar to homepages, product pages need clear messages that convert readers into customers, so keep product descriptions succinct but informative at around 200 words maximum per page with lots of white space separating paragraphs. Make sure images are high quality and relevant to the product, so visitors don’t click off after viewing them.
    • On Team Member Page – If you have a team of staff members, introduce them briefly here using their job title, followed by one line detailing their responsibilities. Provide links to other pages with longer content if appropriate.
    • On Contact Us Page – Your contact us page is arguably the most vital part of your website because it provides information on how clients can reach you with questions or complaints. Make sure it has enough room for both customer feedback and inquiries, such as phone numbers, email addresses, social media accounts, and form submissions, such as chat boxes.

    Rule 3. Use photos wisely.

    Use photos wisely. Remember, you have less space than with a print design, and they may not be as easy to see on a phone or tablet. When using photos, keep these things in mind:

    • Photos should be high-quality and well-lit.
    • Photos should show the people who will benefit from your services or product (i.e. service provider with the client), but avoid showing faces if it’s confidential information or you don’t have their permission (i.e. pet grooming business).
    • Photos of children should also only be used with parental consent or where there is a clear public benefit (i.e., an educational blog for parents). 
    • Photos should illustrate an emotional point about your product or service (i.e. happy customer holding an ice cream cone).
    • Photographs that look staged or fake can undermine trust, so stick to real people doing real activities when possible.
    • Take care not to include logos in photographs unless it’s relevant; logos are usually reserved for illustrations and other graphics.
    • Quality is important. The higher quality, the better. Make sure that your photo looks good on all screens by checking its size and colors at different resolutions.
    • Think about who needs to see your photos before uploading them – would other sensitive parties like family members or employers find them objectionable? If so, crop them out or use blur tools.

    Using images responsibly can make a big difference in how readers feel about your business.

    Rule 4. Don’t let web fonts overpower your site.

    When you are designing a site, it is important to know when and where to use font typefaces. The first rule of thumb is that if you want your site content to stand out more than the fonts on your site, then select a sans-serif typeface like Arial or Verdana for headings and body copy. 

    However, if you would like the fonts on your site to be the focal point of what people notice first, then use serif typefaces like Times New Roman for headings and headings only. Sans-serif fonts are easier for readers to read because they don’t get distracted by any extra details in the lettering. 

    When it comes to selecting a font for your website, there are basically two main things you’ll need to consider: readability and aesthetics. The font you choose should be easy on the eyes and not distract from the content of your site. You’ll also want to make sure that the text is easily readable on all devices. This way, if you write an article about Minecraft Mac OS, it will remain interesting to read.

    Rule 5. Get rid of Under Construction pages.

    Construction pages are also known as Under Construction or Coming Soon pages. These pages let potential customers know that your website is still under construction.

    Photo by WebFactory Ltd on Unsplash

    However, it is worth noting that visitors might need information from you, and this is why they should be able to find information on your business elsewhere.

    If you do not have any other form of contact available for potential clients, then including a construction page on your site might make sense. But if you have a phone number or email address available, it may be better to include those instead of linking out to a different site where visitors can find the information they need.

    Plus, many people don’t want to provide their personal details when all they want is some basic information about your business.

    Rule 6. Structure your site for mobile devices.

    Mobile-friendly design isn’t just a trend anymore. According to Google, mobile search queries will represent over 50% of all search traffic in the coming years. A mobile-friendly web design is especially crucial for eCommerce stores. And this can be achieved by optimizing your site for mobile devices such as smartphones and tablets. 

    One of the most important things you can do is make sure that your site is responsive and loads quickly on a mobile device, which means no flash animations or Javascripts are allowed. 

    Another important thing you should do to ensure your site structure is mobile-friendly is have an easy-to-navigate menu that can be accessed via the top menu bar or with buttons at the bottom of the screen, and with large text that’s easy to read on a small screen. 

    Your shopping cart should also load quickly, and there needs to be ample space for typing in information like addresses or credit card numbers. 

    Lastly, think about how you want products to be seen by people who want to buy when they visit your site: Do they want something quick and casual? If so, limit the number of steps necessary in order to place an order. Or do they want something more expensive? In this case, you’ll need a less cluttered environment so shoppers can browse through more products at once without getting overwhelmed.

    Fun Fact!

    WordPress is the content management system we at Pod Creative prefer. It’s customizable, straightforward to operate, and lends itself nicely to beginners all the way to advanced users!

    Rule 7. Avoid flashy effects.

    If you have any flashy effects on your website, you should be aware that the average attention span of a visitor is only six seconds. If visitors don’t see what they are looking for in six seconds, they will likely leave. 

    Keep your website design simple and direct so people can get the information they need quickly. Each time you make a decision about how something looks or functions on your website, ask yourself if this is something that’s going to take someone 6 seconds or less. If not, then it might not be worth the time or effort because it will just distract them from finding the content they want. 

    If it takes more than 6 seconds to figure out how to use an element of your site design – e.g., how do I contact customer service? – then, add instructions like contact customer service below the element with an arrow pointing towards it, so users know where to look first. 

    Don’t use words that are hard to read. Hard-to-read text makes your message difficult for readers to understand and will decrease the number of people who stay on your page long enough to actually read anything.

    NOTE: There are times when the addition of effects can help create an elegantly appropriate element that accentuates the overall design and/or Call To Action (CTA)…

    Pieter Vorster

    Beautifully Crafted Websites

    Made with Divi & WordPress

    Rule 8. Avoid clutter on your homepage.

    One of the most common web design mistakes is having too much information on your homepage. The homepage is not the place for everything, it should be a clear, concise introduction. Too many links and text will make it difficult for visitors to know what you’re about. Instead, focus on one idea or thought and try to keep it short and sweet.

    Our own homepage at Pod Creative serves as a perfect example of putting both Rules 8 & 9 into practice. Along with simplicity of design, you will find “our colours” used in various ways throughout this post, and the rest of our website. This consistency of branding forms part of all the websites we build for our clients.

    Rule 9. Stick with the same colors on all pages.

    When you’re designing a website, make sure that the same colors are being used throughout the site. Consistency is key when it comes to branding. This will also help your site visitors find what they’re looking for more easily and make sense of what they’re seeing. 

    For example, if you have a green button on one page, then on all other pages where there’s a button, it should also be green. Too many colors on a site can only make it hard for people, particularly those who are color blind and can make the site feel busy and cluttered. Limit the number of colors in your design so that the colors you use are noticeable.

    Rule 10. Review everything before publishing.

    Before publishing anything online, make sure that all links work and lead where they should. It’s also wise to back up any files you publish online with multiple sources. This way, if something happens, no matter how unlikely it may seem, at least one version of your content will remain accessible.

    Z

    THIS POST HAS BEEN CHECKED AND CONFIRMED

    Rule 11. Don’t be afraid to ask for help from web design professionals.

    You may be tempted to try and save a few bucks and make your own website. But like most things in life, you usually get what you pay for. A website is one of the most important parts of your brand, and it needs to convey your company’s personality as well as its identity. 

    Think of it this way: would you hire an interior designer that doesn’t know what they’re doing? The same principle applies to web design, so spend a little more now on a professional web design or at least consult with someone who can guide you through the process.

    SOME
    SELF-PROMOTION!

    We at Pod Creative have been helping emerging, small, and medium-sized businesses improve their online presence for more than a decade! Whether it is building a new website to help establish you as an authority in your field, or working collaboratively on strategic content marketing campaigns to build rankings and/or drive conversions, we are confident that we can help you grow your online ideas to fruition.

    Rule 12. Follow the rules of balance and symmetry.

    Always follow the rules of web design balance and symmetry. This will help your site look more professional and pleasing to the eye, which is especially important for sites that are predominantly graphical in nature. 

    This will also make it easy for visitors to find what they’re looking for without any confusion or frustration on their part – after all, you want them to come back!

    Wrapping

    Up

    Many people don’t realize that their website design may be driving away potential customers, destroying their credibility, and sabotaging their sales efforts—until it’s too late to fix it. But it’s okay. We all make mistakes at some point in our lives. With practice and some simple tips, you can fix the most common errors that make your website look amateurish and outdated. 

    If you’re designing a website, it’s crucial that you adhere to some web design rules to ensure that your visitors enjoy the experience of using your site and aren’t turned off by visual and technical difficulties. That is why we created this list of web design rules you’re probably breaking and how to fix them to help you improve your online presence and make your site more user-friendly in the process.

    Do you want to know more about what we do?

    Pin It on Pinterest

    Skip to content