Web design is characterized by trends. The “in” trend of web design is often a result of natural selection determined by the newest technology. For example, after mobile phones evolved to support advanced Internet usage, web design also had to evolve for content to appear in the most comprehensive way with the fastest loading time. The three most recent design trends are skeuomorphism, flat design, and material design. In order to see where web design has potential to go in the future, it’s important to know what strategies web design has utilized in the past.
Skeuomorphism
Skeuomorphism became popular in the late 2000s and early 2010s. This design incorporates realistic elements that mimic physical objects in the real world. The design is rooted in show, not tell. Apple was one leader of skeuomorphism. The company’s products have always been designed for the simplest and most intuitive consumer use. Skeuomorphism is intended so users don’t need apps or features on a computer (and now on a mobile device) to be explained. Using technology becomes easier because it is more intuitive. Think of Apple’s operating system. The dock on this computer consists of skeuomorphic design. The notepad is recognizably a notepad, iMessage is recognizable word bubbles, and email is a mailing stamp. These are all everyday objects or icons that most people of all ages can recognize and infer purpose.
Unfortunately, these more complex designs did not withstand the test of time. Although still used, skeuomorphism is no longer the primary web design. Mobile phones became a resource for internet use and a simpler design had to be created in order keep up with the new technology.
Flat Design
Flat design is the successor of skeuomorphism, and it was developed in order for websites to be adaptable to mobile devices and ease of use. Skeuomorphic design was much too complex for all platforms. Think of the differences between a laptop verses a tablet verses a mobile phone. And even these three devices can be further broken down based on shape and size. Flat design works for a variety of screens of all shapes and sizes. The design appears exactly as the name implies; it is made up of 2-dimensional elements on a simplified web page that gives emphasis to color, crisp text, and white space, rather than in-depth detail, like texture, gradients, and shadows. In short, flat design equals simplicity.
Flat design is not as intuitive as skeuomorphic design, and this is on purpose. Ideally, in 2016, Internet users are familiar enough with software and web technologies that they are able to navigate the Internet without so many visual cues. However, this does make the assumption that computer and mobile users are familiar with the technology, and that may not always be the case. Flat design tries to get around this potential issue by clueing people into the purpose of certain elements. For example, icons still include features that we recognize like the retweet button, which is two arrows made to form a box. We associate this button with Twitter’s retweet feature, so the button is easily understood without having to add more complex detail.
Microsoft, Apple, and Google have all shifted towards a more flat design approach and simplified their user interfaces in order for their devices and software to work more efficiently. This reduction in detail also eliminates distraction to users from deciphering the purpose of each feature. Flat design allows for faster loading time, and that was a huge push for the change from skeuomorphic design. Flat design is still used today, but we are in the midst of yet another switch that will serve to liven up the user interface a bit more.
Material Design
Material design is a continuation of flat design but with added dimension. Like skeuomorphic design, it resembles real-world objects with 3D elements. However, the idea behind material design is to replicate the laws governing objects in the real world, not attention to visual detail. Material design pays strict attention to detail of the “environment” (what the surface elements are displayed on) of the web page, elevation of objects, light and shadows. With concerns to animation, lighting, and shadows, the elements on a computer or mobile device must act in accordance to physical objects. This means that shadows must reflect the elevation an object is lifted above its resting elevation, shadows must coincide with the angle and amount of light on an object, and objects cannot pass through one another during animation. Exceptions to these real-world laws occur when elements morph, split and become whole again, and are generated and destroyed within the environment.
Picture a plane with an x-axis, y-axis, and z-axis. The z-axis serves to determine the elevation of an object, so instead of measuring elevation in terms of up and down, elevation is measured in terms of how close an object appears to the user (as it would extend out from the computer). Key light, the main light source, creates directional shadows, and ambient light, light that is created by secondary sources, creates soft shadows. For a better idea of the effects of light in material design imagine drawing a cube, and the shadows that would appear under the cube based on its position to light — This is directional shadow from key light. Now imagine the softer the cube’s shadow becomes as it is lifted toward the sun — This is soft shadow from ambient light. Users might not recognize these seemingly minute details, but they make the user interface and user experience more engaging.
Design of the Future
Experts suggest that the next web design fad will be a combination of flat and material design. Material design is still here to stay for another estimated 5-10 years, but the attraction to real-world objects in a technological world is making a presence. Pair this with the simplistic rules of flat design, and we have a hybrid form of design that is visually engaging while decreasing unnecessary clutter and the time it takes to load a web page and will probably be seen for quite a while.
They're Just Trends
As with all design trends, that’s just what they are — trends. No trend is necessarily inherently good or bad. These trends all take shape and become popular because they've solved common design issues designers face on a daily basis and respond to the changing standards of the web. Your target market, users’ needs, branding and message should all be the major influences in what determines your site’s design, not necessarily what the latest trend in design currently is. The key here is to learn your audience and design based on the best user experience for that group — be it skeuomorphic, flat, material, or something else all together.
If you need help designing or updating your website, contact 10 Pound Gorilla today for a free design quote.