Web Design Standards

Web Design Standards: The Different Rules and Best Practices

What are the web design standards?

More and more applications these days are migrating to the Web. Without platform constraints or installation requirements, the software-as-a-service model looks attractive. Web application interface design is, at its core, Web design. However, its focus is on function. To compete with desktop applications, Web apps must offer simple and responsive user interfaces.

Shopping Carts Gallery

Imagine that you are designing an online store. Since stakeholders are only interested in sales, the success of your work depends on how well you manage to drive users to the “Checkout”-button. In this case, you might want to consider some design approaches which will set you apart from your competitors. After all, the probability that they’ve done it wrong is high.

One of the simplest examples of flawed design decisions is the incorrect use of the shopping cart icon. This little yet powerful element can help users to buy a product as painless as possible. As such, it is important for the purchasing procedure and thus, deserves to be considered during the design process.

Don’t Be Afraid of White Space

To non-designers, white space seems like the areas of the site where design has not been applied. Too often, companies think of their homepage as if it was a newspaper. They strive to fill every available pixel with one kind of content after another, the same way someone laying out a newspaper would fill every inch with columns of copy. This aggressive use of space makes sense in terms of newspaper printing. But, websites are not newspapers and people do not consume website content the same way they consume the printed page.

For website visitors, a spacing between elements on a page allows for a more enjoyable reading experience. It also allows them time to focus on the individual pieces of a page without being overwhelmed by everything else around it. White space gives content time to shine without fighting for attention against all its neighbors!

Logo in the top left

100% of the websites researched had a clickable logo in the upper left corner of every page on the site. That’s a standard!

Easy, Error-Free Navigation

Without navigation and ease of its accessibility, a web design is just a pretty page. Navigation acts as a map, directing visitors to the site based on their interests. Best practices in web design navigation start with ensuring all navigation hyperlinks work and are not broken.

This e-commerce website has a defined pathway from page to page and a nice flow. It blends easy navigation with a stylish design by including links back to the checkout pages. The navigation also makes use of social networks by utilizing links and widgets.

Balanced Use Color, Graphics, and Multimedia

Web design can go wrong with mismatched color combinations and too many interactive features. A well-balanced web design uses three to four colors at most and has text colors that contrast well with the site’s background color. Graphics and animated images enhance the content rather than distract from it and are optimized so they don’t slow down the site. Multimedia is used to enhance the site and serve a defined purpose. Audio, video, and flash files display download times and include captions. And if media plug-ins are needed, download links are provided on the site.

Typography

While awesome videos and stunning photographs may get much of the glory online, the reality is that the Web is text content. If there is one area of your website where some extra design attention can go a long way, it is with that site’s typography.

For years, websites were limited to only being able to use a handful of “web-safe fonts,” such as:

  • Times New Roman
  • Arial
  • Tahoma
  • Georgia
  • Verdana
  • Lucida
  • Impact,
  • many more

These were fonts that were essentially guaranteed to be installed on your computer. In recent years, however, font selection for websites has taken a significant leap forward with the introduction of @font-face (pronounced “at font face”).

With this method, font files can be included along with other resources, like images, that a website needs to use to display properly. Instead of getting fonts from a user’s computer, a website can instead use these included font files allowing that site access to a staggering array of font choices used in that design!

Good UI Design: The Fundamentals and Principles

Shadows around modal windows

Drop shadows around pop-up menus and windows aren’t just eye candy. They help the menu or window stand out from the background by reinforcing its dimensions. They also block out the noise of the content beneath the window by darkening the area around it with a shadow.

This technique hat its roots in traditional desktop applications and helps the user to focus his/her attention on the appearing window. Since most modal windows aren’t as easy to distinguish from the main content as in desktop applications, shadows help them to appear closer to readers, because the window appears to be three-dimensional and lay above the rest of the page.

Responsive design

68% of websites are mobile-friendly using responsive web design. This gives visitors a great experience regardless of the device used.

It’s a combination of design and programming that is difficult to add after a site is built. More often, it’s part of a redesign, which may explain why it’s a convention, but not a standard.

Responsive design has been best practices for years. We’re glad to see this become more common and we expect this feature to be standard.

Summary
Article Name
Web Design Standards: The Different Rules and Best Practices
Description
PIXLL - The rules and best practices of web designing. The web design standards. Responsive web designing. Mobile-friendly web designing.
Author