future of web design

Interested in web design? Let’s take a glimpse at this fast-changing profession and see what’s “shaking up” its future.

ergonomic chairMost days start out simple for web designers. You’ll find us sitting in ergonomic chairs, sipping dark roast coffee, catching up on our emails, checking social media and prioritizing our work.

But there are forces dragging us down and pushing us forward all at once. Search engines have a hold on us. They influence our every move. New technologies appear. Then new trends emerge with those technologies. We must get on board and adapt.

If we get too comfortable with what we already know, we risk becoming old-fashioned in our approach. If we embrace the future carelessly, we risk writing code that breaks our sites in older web browsers.

So we walk a tightrope. We make hard choices.

When things don’t quite go as planned, we resort to troubleshooting.

Some predict that web design will be dead in 20 years. Others predict that the desktop computer will be obsolete by then too. In the meantime, we juggle the forces, watch the trends, sip on coffee, design layouts and write code.

Not too long ago, table-based layouts and Flash animations dominated the web. IE6 messed with our layouts. Modern web browsers finally arrived, pushing IE6 to the curb. Humorous “RIP IE6” posts sprung up on social media and we celebrated.
smartphone

Then along came the iPhone in 2007.

Web designers had to pay attention to not only browser differences, but to how their designs would appear on a desktop computer, a laptop, a tablet, and a smartphone.

The smartphone with its slow Internet connections and tiny screen led to mobile friendly, responsive web design.

HTML5 replaced XHTML. CSS3 appeared with Transitions, Transforms, Animation, Filters and more. But the web browsers said, “No. Not yet. Too soon. Wait a bit longer.”

responsive web design

These days we present our visitors with simpler designs than in the past and integrate storytelling into our content. We do cross-browser and cross-device testing and assure ourselves that ‘the fold’ is now irrelevant.

If you’re a new web designer, you’re probably already familiar with HTML5 and responsive web design, but don’t get comfortable. There’s more going on behind the scenes.

voice searchIn 2011, Siri was introduced.

Siri (a voice-recognition feature initiated on the iPhone) began the rise of voice search and conversational queries on our smart phones. We could ask Siri questions, tell it to do things. Search was no longer just a set of disconnected keywords.

Voice Search Optimization” became a real thing.

Then RankBrain was introduced in 2015.

Artificial Intelligence is in our world now and it’s shaking things up. Computer systems, such as Google’s RankBrain, are performing tasks that normally require human intelligence.

Google RankBrain animationWhy do we care? Google now uses RankBrain to help deliver its search results (giving Google a better ability to match searchers with web pages). RankBrain is continually learning and constantly adapting to figure out what people want when they search. It’s also getting better at analyzing the context of website content.

As web designers, we must re-think our web content. It must serve “searcher intent.” Content relevance, context, and value are now important search engine ranking factors, thanks to RankBrain and other AI devices. Web designers are adapting their web content to better match the increase in natural language search queries.

With all of this to consider, our day at the office quickly gets more complicated. Paleo snacks and second cup of coffee give us the fuel to stay focused. We work on the sentence structure in our content and troubleshoot annoying browser incompatibilities.

Our FitBits remind us to take a short walk.

While keeping an eye on the past, we prepare for the future. Our designs become cleaner, more minimalistic. There’s a push to remove the clutter and add more whitespace.

Modern Web Design

Flat Design, Material Design and Cards

Flat Design followed the minimalism trend. It gained popularity with its clean look and use of simple elements and flat colors. Long scrolling pages and hamburger menus also emerged while bevels, gradients and drop shadows lost favor. On the downside, websites began to look alike, maybe too much alike.

Google’s Material Design appeared in 2014. It offered the simplicity, ease and usability of flat design but with more depth and shadow.

Card-Based Designs, made popular by Pinterest, also began popping up in our modern world. Card Designs divide content into meaningful sections that are easy to scan and communicate quick stories. Card-based designs, however, are not suitable for all projects.

Pinterest card design example

In this modern world, web designers build fewer websites from scratch. We have powerful front-end frameworks like Bootstrap at our fingertips, but with “page bloat” as a spoiler.

We’ve begun dabbling in Flexbox and CSS Grid, modern approaches to managing our page layouts. But web browsers remind us to proceed carefully with our futuristic plans. We experiment with other new technologies like CSS animation that can enhance our designs without speed issues.

Modern Graphics

Gif Animations, Illustrations and Cinemagraphs

coffee cup gif animationGIF animation is regaining attention in our modern world. Animated GIFs (simple animated images) are typically a few seconds long, play in a loop and have no sound. Designers are using them to help tell stories and capture a viewers’ attention. They are also pretty easy to make with Photoshop or on a smartphone.

See: 15 Glorious Examples of Brands Using GIFs 

Hand-drawn illustrations offer another easy way to help us tell a story and make our designs feel more personal. Sketched elements can help explain technical information while creating a friendly feel to a website.

See: The Internet’s Best Hand Drawn Websites

Cinemagraphs can also capture a viewer’s attention and create a sense of wonder and mysticism. They are basically still photos with subtle motions. Cinemagraphs consume less bandwith than videos. They can also be created in Photoshop or on a smartphone.

See: Cinemagraph Inspiration: 10+ Whimsical Examples

All-in-all web designers do their best to create visually appealing websites to attract visitors. We fine-tune our skill sets, rid ourselves of all things considered deprecated, and embrace new technologies.

But those new technologies can threaten our very existence.

AI-designed Websites

Not only has artificial intelligence crept into the search engines, it’s making its way even closer. Services are emerging that can build basic websites, making design decisions based on artificial intelligence. We watch our backs and keep a leery eye on the AI Assistant and the Grid. Can web design become automated? It’s too early to tell.

Anticipating the Future

We look to the future and wonder:

  • When will the first drone deliver a package on our doorstep?
  • When will that first driverless car cruise down our street?
  • Is a web trend worth adopting or is it just a fleeting fad like the Fidget Spinner and Hoverboard?
  • Will Google continue to have a controlling influence over us?

DuckDuckGo search engine

Perhaps the tiny unassuming DuckDuckGo search engine will gain incredible popularity and triumph over the giant and powerful Google some day? It would be a sensational defeat that would surely go viral across social media, if social media still exists 20 years from now.

Meanwhile, web designers sit in ergonomic chairs on sustainable floors, trying to figure out how best to deliver and promote web content to the widest audience possible.

By the end of the day, we’ve had our fill of coffee. We wonder how many cups are actually good for us, so we “Google it” to see what RankBrain thinks.

How technology is shaking up the future of web design.

This blog post is a part of Design Blogger Competition organized by CGTrader.