Design Standards

Standards for web design

First of all, i have to clarify what can be accepted as a standard. If 80% or more of websites use the same design approach, we can say that it become a standart.

These standards may seem not a must but they’re a set of rules that web designers follow, knowing that they align with visitors’ expectations. They are guidelines for clarity and usability.

1. Position of logo

95% of the websites researched had a clickable logo in the upper left corner of every page on the site. Users will go to the home page when they click on. There isn’t any standard about logo dimensions but 250 px (width) x 100 px (height) will be good for a web page.

2. Main navigation

88% of the websites had the main navigation located in the header at the top of every page, making

Bad example of nested menus. Do not use 3rd level.
Bad example of nested menus. Do not use 3rd level.

horizontal top-level navigation a web design standard. There might be sub menus under a menu item but 3rd level menus are not acceptable.

 

3. Value proposition

80% of marketing websites have an explicit value proposition located high on the home page. So the majority of websites explain their value to visitors “above the fold.” The remaining didn’t have an clear value proposition at all.

There is no standard pixel height for browsers. Therefore, there is no fold. But of course, some design elements like sliders appear high on pages and are generally visible to the majority of visitors without scrolling.

4. Call to action

82% of the websites had visually prominent calls to action on the home page.

5. Social media icons in the footer

80% of the websites include icons for social media websites in the footer. You can see these icons are sometimes located at the header. It’s not a good practice. Do not use them at the header. Because, clicking any of these icons takes the visitor to the social media site. For this reason, this is a design element that can cost you traffic, increasing bounce rates and hurt results.

6. Responsive design and screen resolutions

I’m not sharing any percentage. Because, it’s a must. This gives visitors a great experience regardless of the device – phone, tablet or desktop.

These percentages are showing commonly used screen resolutions in 2018.

360 x 640

22.92%

1366 x 768

11.32%

1920 x 1080

8.22%

375 x 667

4.69%

1440 x 900

2.78%

720 x 1280

2.46%

As you see, mobile devices must be your main focus. Imo, the max width of a web site should be something near 1366 pixels. Please do not box the web site, use container to compose the content in design.

Hint: If the page includes long texts, readability will suffer. Having the right amount of characters on each line is key to the readability of your text. It shouldn’t merely be your design that dictates the width of your text, it should also be a matter of legibility.

The optimal line length for your body text is considered to be 50-70 characters per line.

7. White spaces

Your web site should have white spaces… White spaces!? What is it? Whitespace is one of the most overlooked and underutilized elements that make up a great web layout. Too often, whitespace is seen as empty space and, therefore, a waste of screen real estate. However, the truth is that whitespace is one of the most valuable parts of your design.

Web site owners may want to fill it, but it has some advantages like:

  • Increased Content Legibility
  • More Interaction
  • Ability to Highlight Call to Actions
  • A Tidy and Impressive Site
  • Creating Balance
  • Acts as a Separator

In short, if you are not a designer, do not think to remove it.

8. Font size

Each font is different, even at the same size. So, we can say there isn’t any standard. Imo, 18 pixels are good. Our standard should be like;

16px – absolute minimum for text-heavy pages
18px – a better font size to start with. You’re not printing out a single-spaced Word document; you’re writing for people sitting a couple feet from their monitors.

The best-looking text-heavy site on the web, Medium.com, has a default article text size of 21px.

Custom design is dominant

Common design features may still be considered best practices, but may not be used by the majority of websites. Custom web design, specific to the business and its audience, rules the day. Thus, you have to ask for an advisor.

If a design element is expected in a certain place, then that’s where it should go. Beyond design elements, there are types of web design standards that all good designers understand:

  • Brand Standards

Colors, type and tone are specific to every business. You should have a style guide for your website and stick to it.

  • Coding Standards

Websites should be built using the programming standards agreed upon by the W3C. This makes them more likely to display and behave properly in browsers.

  • Accessibility Standards

Access to information is a basic human right. This has been recognized by the UN Convention on the Rights of Persons with Disabilities. Follow these standards to make your site accessible to everyone.

Standard web conventions are shorthand for good design. If you break any of these rules, you should do so intentionally and with a very good reason. And you should plan on measuring the impact of being unexpected.

These are main standards that I follow. If you want to add something, please leave a comment.

Leave a Reply

Your email address will not be published. Required fields are marked *