Made popular by some of the largest tech companies on the planet, these time tested strategies have become some of the industry standards of web design.
While it is important that your website stands out with its own sense of style, nearly every web designer worth their salt has these techniques floating in the back of their mind when approaching a new project. Keeping to the industry standards means adhering to what the average user is expecting when they come across a new website. The boundaries are always being pushed and testing new ideas keeps us moving forward, but straying too far from agreed upon design standards could mean risking alienation of potential users.
1. Material Design
Material Design is a visual language that was originally developed by Google and is utilized in a majority of their products today. They have a continually updated document that outlines everything from style and layout, to motion and interaction. It can be seen put into practice in any of Google’s native Android Apps, YouTube, and even Twitter.
The main idea behind Material Design is to treat content on a page as a physical material. Objects on a page are meant to almost feel tactile. There is obvious visual hierarchy between elements as to properly direct the user’s vision. There is consistent spacing and typography that makes the layout clear and focused.
There are many rules on how to treat what the documents refer to as “material”. From how it looks and feels to how it behaves and moves, material is the foundation of this design principle. It is solid, unbendable, and exists in unique points in space. It exists along the X, Y, and Z axis and light should affect it as such, leaving subtle shadowing beneath material that is meant to be emphasized above another.
Many more specific details exist within the documentation and I encourage any designers out there to read through it to get a better explanation of this incredibly popular design standard. Material Design is a great place to look to when faced with the problem of how to place content. The visual hierarchy that it affords can lend a lot of polish to an otherwise difficult to navigate site.
2. Human Interface Design
The Human Interface Guidelines were developed by Apple for their multitude of products and are featured most prominently in their iOS. Though the visual style of these guidelines have changed throughout the years, the core principles remain the same. Human Interaction Design remains focused on the User, utilizing visual metaphors and feedback in order to mimic digitally what the user has come to expect in an analogue setting.
Apple’s Guidelines have set the standard for user interaction since the first commercial GUI was released on the Macitosh in 1984. The iPhone forever changed how people interacted with handheld technology.
The way that Human Interaction Design can be differentiated today from other design styles beyond a clearer tie to User Interaction is its innovative visual language. The z-axis is recognized in HID as it is in Material Design, but the metaphor seems a closer allusion to sheets of tanslucent glass rather than solid material. Layers give hint to object further along the z-axis through blurs and limited opacity as well as shadow. Edges are softer and bevels, while minimal, still show up every now and again.
3. Fluent Design
Fluent Design refers to Microsoft’s recently released design standards moving forward. It is still a new standard, seen primarily in the Windows 10 operating system as well as the X Box One User Interface.
This design style seems to sample from previous iterations while adding new elements such as depth and light. While in Material Design and Human Interaction Design elements always existed along the z-axis, fluent design is not afraid to tilt that axis, showing depth and angles that is still a fairly new approach in applications and yet to be adopted in some browsers. Where this manipulation of depth shines the most is in Virtual Reality based applications, where this design style will very likely be becoming more and more prominent.
4. Flat Design
Flat design is minimalism at its core. It means flat colors in high contrast, plenty of space solely along the x and y axis, and simplified interaction. As the Web 2.0 developed, usability and page speed became more and more prominent factors when developing a website.
This design standard allowed for much cleaner code and was able to convey UI direction better than past skeuomorphic designs. As the internet grew up people no longer needed callbacks to analogue inputs. A button could be conveyed as a two dimensional box with some text or a symbol in it rather than a picture of a literal button.
Flat design is the most overarching standard listed here. There are elements of Flat Design seen in most design standards today. They all keep with the themes of contrast over depth and simplicity in interaction over realism.