Newsletter

Subscribe to our mailing list

October 17, 2016
Web Design: The Past, The Present, & The Future

Web Design: The Past, The Present, & The Future


Written By Jessie Martin of 10 Pound Gorilla

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.

Mac OS Dock

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.

Read our next post...

Marketing 5 “Must Do” Items to Enhance Your Marketing

Marketing Retargeting: Never Lose Sight Of Your Website Visitor

Web Dev Quality Websites Need Quality Typography

Marketing Web Development Meets Web Analytics: The Knowledge Gap

Web Dev Responsive Design: It's More Than Just Design

Marketing Economic Summit 2017

Marketing Mary Meeker's Global Interent Trends

Marketing, Web Dev A/B Testing: Getting the Most out of Your Site

Marketing, Web Dev Upping the Ante: Interactive Content

Marketing, Web Dev Google’s SEO Best Practices: A Starter Guide

Marketing Creating Timeless Content to Boost SEO

Marketing, Web Dev 2017 Research Recognizes 10 Pound Gorilla as a Leader in SEO

Marketing, Web Dev Designing an Elegant Website using Whitespace

Marketing, Web Dev Test Your Website’s Success Using Heat Maps

Marketing Start Fresh, & Advertise with Facebook!

DNN, Marketing, Web Dev 2017 DNN Summit Sessions

Marketing, Web Dev Web Design: The Past, The Present, & The Future

Marketing, Web Dev Intrusive Pop-Ups to be Penalized by Google

Marketing The New Wave of Advertising: Native Ads

DNN, Web Dev Proud Sponsor of DNN Summit 2017

Marketing Moving to Mobile

Marketing, Video Power of Video

DNN If you’re a DNN user, your site could be vulnerable to hackers

Marketing, Video The Art of Retargeting: How it works and Why You Should Retarget

DNN, Marketing, Web Dev 10 Pound Gorilla Named Top Ten Denver Web Development and Digital Marketing Agency by Clutch.co

Marketing 10 Tips to Design Your Website for Lead Generation

DNN, Marketing, Modules, Web Dev DNNCON: Thank You!

Marketing 10 Ways to Incorporate Direct Response Marketing with Print Media

DNN, Marketing, Web Dev 10 Pound Gorilla... One of Denver's Top 10 Digital Marketing Agencies

Marketing How to Turn Social Media Fans Into New Customers

Marketing Your Facebook Likes No Longer Matter!

Web Dev Is Google Going to Penalize Non-Mobile-Friendly Websites?

DNN DNNCON: Thank You!

DNN, Modules, Web Dev From Ordinary To Extraordinary

DNN, Marketing, Modules How to Sell, Quote or Budget for a DNN E-commerce Website

Web Dev Getting Users to "Respond" to Your Mobile Menu Designs

DNN, Web Dev DNNCON: Editor.css

Marketing Getting The Conversion

Marketing Tips for Writing Effective Newsletters

Marketing Why Should You Have a Newsletter?

Marketing Writing Copy That Will Actually Be Read

DNN Editor.css: Giving You & Your Clients Less Headaches

DNN, Web Dev Connall Cosmetic Surgery: Case Study

Web Dev Making the Case for a Responsive Site

DNN, Modules, Web Dev March Module Madness: Dynamic Forms

DNN, Modules, Web Dev March Module Madness: Ventrian News Articles

DNN, Modules, Web Dev March Module Madness: Form & List

Marketing 5 Tips to Online Marketing

Marketing How the Name "10 Pound Gorilla" Came to Be

Marketing Creative Online Marketing: Groupon & Living Social

Marketing Promoting Your Business With Instagram

Marketing Using Your Blog to Boost SEO

Marketing Suprising Social Media Facts & What You Should Do

DNN, Web Dev DNN Con 2013: Mobile Navigation

DNN, Web Dev DNN Con 2013: Determining What Makes the Mobile Cut

DNN, Modules, Web Dev DNN Con 2013: DDR And JQuery. More Than Just Hover And Drop Down.

Web Dev A Mobile-First Approach to the Web

DNN Southern Fried DNN: Best of both worlds: Great Design and Flexibility

DNN Southern Fried DNN: Different skin designs from just one skin file

Web Dev The Future of the Web: HTML5

DNN Dot Net Nuke World 2012 Speakers & Sponsors

Marketing Google Places is now Google+ Local

DNN, Marketing Day of DNN - Using DNN to Feed Data to Several Social Portals

DNN, Marketing Day of DNN - Easy to Use Strategies for Writing & Submitting Articles to Increase Inbound Links

DNN, Marketing Day of DNN - How to Optimize Your Socialization

DNN Guest Speakers at Day of DNN!

Marketing Enticing Your Followers with Fresh Content: A How To Guide

DNN, Web Dev What Can Website Templates Do For You?

Marketing Getting Up in the Ranks Through SEO

DNN, Modules Best DNN Shopping Cart

Marketing Enter into the "Timeline"

Marketing Making Your Facebook Business Page Secure

Marketing Get Your Tweet-Face On

DNN, Marketing Google Analytics and DNN

Marketing What is Social Media and What Can It Do for You

DNN Advantages of DotNetNuke

Web Dev 8 Ways to Increase Website Speed

Marketing Beyond Facebook and Twitter, Get "In" with Social Media

Web Dev 8 Great Website Development Tools

Web Dev Your Website & Internet Explorer

Marketing What is Google +1

Web Dev What is "The Cloud"?

Succeed

Contact 10 Pound Gorilla Today
for Your Free Consultation

or Call {970} 726.5144 or Connect