Dive in to the world of web (and app) design
and notice how mundane it can actually be...

Designing a layout and making it adapt itself reasonably to the user's device and intentions, is a professional discipline with lots of rules and lots of freedom.

Sure, there are already a zillion templates and patterns available, built into tools and available on repositories. And they all serve their purpose well (I hope...) But it's also good to understand the underpinnings of a web design, and maybe design one from scratch. Heck, sometimes it's even easier to let a development team produce exactly what you need, in stead of spending hours or even days to find the right template and tweak it to your likings.

So when it comes to standards", beware of the fact that the word makes it seem like something set in stone – while these standards are not that static at all. They change, depending on new devices, new screen sizes, new technologies, new insights, and artistic trends. Obvious approaches may be less favourable in time, new ideas shatter common concepts.

In the hunt for attention, web owners crave for useful, surprising, new developments. In the hunt for making a quick buck, web designers look for templates and standards, making it easier to build stuff. In the meantime, web users just try to make sense out of something the owners and designers concocted.

In order to let users use and experience your website in a satisfying way, there are roughly three main questions for the user to deal with:

1. Where am I ?
2. Where can I go to ?
3. What's to be found here ?

So as a designer, you need to familiarize yourself with [1] ways to brand and style a website (logo, colors, typography, micro animations), [2] deploying essential items like old and new navigational elements (radials, accordeons, tabs, breadcrumbs, radial popups, etc.), and [3] layouts to present content.

1. E.g. does the website convey the brand's visual style ? Does it appear as a trustworthy resource ? Can I easily find points of identification and perhaps authentication ? Is it always clear to the user in which part of the website they're currently located ?
2. E.g. are hamburger menus and a search field as the sole entries for navigation the right way to go on a desktop ? How about mega menus and fat footers ? When and why should auxiliary social buttons go to the top right, or remain stage front and middle ?
3. E.g. take a look at how an array of items to presented changed from a simple list, to batches of paginated cards, to a wall of never-ending masonry. And consider their specific appropriateness and usefulness !

So whatever the kind of website you're designing, whatever its information or features are, these three questions need to be addressed, properly. This is the pattern that exists for websites, publications, media, shops, cities, the whole world.

Putting the layout together is both a matter of trial and error (user testing new ideas and trends), as well as common sense and conventions (using patterns). And of course you're allowed to add a nice touch of style to it, without disturbing the website's usability. Unless you're designing some artistic experiment...

General Design Aspects

Gestalt Principles and Nielsen's Heuristics
https://en.wikipedia.org/wiki/Gestalt_psychologyhttps://www.nngroup.com/articles/ten-usability-heuristics/

Industry Guidelines

Apple OS/iOS Guidelines
https://developer.apple.com/design/human-interface-guidelines/

Microsoft UWP, Fluent Design
https://developer.microsoft.com/en-us/windows/apps/design
https://docs.microsoft.com/en-us/style-guide/welcome/

Google Material Design
https://material.io/design/


Oorspronkelijk geplaatst op Quora: What are the standard website visual layout patterns that all web designers must know? Not tools or technologies; layout?"