14 Fundamental Rules of Web Design

What is it about the best websites that make them so attractive to site visitors? User experience (UX) and appealing aesthetics are just two of the essential components of good design. A well-designed site pulls visitors in and engages them from the first moment they land there. An engaging site isn’t created by chance. The web designer understands the fundamentals that make a page exciting and interactive.

There are about 4.54 billion active internet users around the globe, with the United States being one of the top-ranked companies for internet penetration. Having a website for your business is no longer an option. However, just throwing up any old site won’t gain you points. You need to follow the 14 fundamental rules of web design if you want a successful online presence. Here’s how you can start:


1. Make the Journey Clear

When users land on your page, they begin the first step of a buyer’s journey. Guide them where you want them to go so they don’t have to make choices or hunt for anything. Cut any clutter from the page. Make it clear where they should go next and what action they should take.


2. Pay Attention to Your Header

The first thing users see when they land on your page is whatever’s at the top. It’s natural for readers in English-speaking countries to start reading from the top left corner. Make sure any banners, logos or other components across the top of your page grab the user’s attention.


3. Create Better Interfaces

When communicating with users online, it’s natural to think you should use a live chat or some feature that lets them type and talk. However, this can lead to confusion as the system may not understand typos or unusual words. Instead, reduce the chance for chat errors by offering options from which visitors can choose. For example, “Do you want to talk to someone about an item you ordered or a product you might buy?”


4. Add Stellar Content

A beautiful page isn’t much good if it doesn’t offer a lesson to users. Before you can market effectively, you must have stellar content to point users to. Your website is the best landing point for digital property. Use articles, videos and infographics to answer the most common questions your target audience has.


5. Balance Positive and Negative Space

The best designs have a balance of white space. If you cram too many elements onto the page, the user won’t know where to look. Give the eye a break by adding white space around images and between lines of text.


6. Produce Skimmable Articles

Most people skim over website content. They don’t have time to read things in-depth, so they search for the heading that answers their questions. Make your page skimmable by adding H2 and H3 headers and using bullet points.


7. Match User Expectations

Websites tend to follow a predictable pattern. Users expect the navigation to be near the top of the page. They also anticipate the footer to contain a link to the About Us and Contact pages. Pay attention to the layout of popular sites and don’t venture too far outside this realm.


8. Examine the Contrast

Amateur web designers sometimes make the mistake of matching similar colored text and backgrounds to create a consistent look. However, if there isn’t a high contrast between the backdrop and words, the webpage becomes difficult to read. Instead, think of extremely dark text on a much lighter background. Black and white are the strongest of contrasts, but you don’t need to limit yourself to those colors.


9. Stick to Shorter Lines

Keep your text within paragraphs of 30 to 40 characters for several reasons. First, this creates plenty of white space and makes your page skimmable, as mentioned above. Shorter snippets are also conducive to social media sharing and generate opportunities for backlinks to your site.


10. Understand Your Navigational Hierarchy

As websites grow, the navigational structure gets convoluted. Come up with five to seven main categories for your navigation. Everything on your site should fall under these main subjects, so make them broad enough to cover current and future material.


11. Choose the Right Alignment

Traditionally, text aligns to the left of the page. However, there are some occasions when you should center items. For example, you might situate a heading in the center to draw attention to it. You could use the right alignment for decorative purposes. Just make sure you have a reason for changing from left-side alignment.


12. Check for Consistency

If you design in spurts, it’s easy to forget the font size or image dimensions you used on another page. Before you start a new project, make a style guide. Refer back to the notes anytime you can’t remember the typography or logo dimensions used elsewhere.


13. Stick to Three Fonts or Fewer

It’s tempting to show off many different fonts and their personalities as you’re designing your page. However, too many typefaces on a single site can create a mishmash and throw off your design’s aesthetics. Choose three or fewer fonts and stick to those. You can always add italics, bold or varying sizes to create unique looks.


14. Design on a Grid

Learning the basics of grid alignment ensures everything on your page is balanced. It’s okay to break grid rules once you’ve been designing for a while, but newbies should probably stick to the Rule of Three and practice grid alignment when just getting started.


Become User-Centered

These 14 elements of good design ensure your site is the best it can be. However, there are many other things you can do to improve your work as a graphic artist. Put your attention on the user and what might work best for them. Once you do, your site’s design will be better than you ever imagined.


Guest Post: Author Bio

Lexie is a digital nomad and graphic designer. If she’s not traveling to various parts of the country, you can find her at the local flea markets or hiking with her goldendoodle. Check out her design blog, Design Roast, and connect with her on Twitter @lexieludesigner.

Digital Ocean Free Credit for First Time Sign Up


I regularly schedule skype calls to fix any WordPress bugs
using a service where you only pay per hour.

call me
  • testimonial-photo-2 for Zahid Aramai
  • testimonial-photo-1 for Zahid Aramai
  • testimonial-photo-3 for Zahid Aramai
  • testimonial-photo-4 for Zahid Aramai
  • testimonial-photo-5 for Zahid Aramai
  • testimonial-photo-6 for Zahid Aramai
  • testimonial-photo-7 for Zahid Aramai
  • testimonial-photo-8 for Zahid Aramai
  • testimonial-photo-9 for Zahid Aramai
  • testimonial-photo-10 for Zahid Aramai

Join more than 500 websites

My magic. Your idea. Beautiful crafted websites.