{"id":4251,"date":"2017-07-27T16:48:57","date_gmt":"2017-07-27T16:48:57","guid":{"rendered":"http:\/\/www.crimsondesigns.com\/blog\/?p=4251"},"modified":"2019-08-05T17:36:02","modified_gmt":"2019-08-05T17:36:02","slug":"technology-shaking-up-web-design","status":"publish","type":"post","link":"https:\/\/www.crimsondesigns.com\/blog\/technology-shaking-up-web-design\/","title":{"rendered":"How Technology is Shaking up the Future of Web Design"},"content":{"rendered":"

Interested in web design?<\/strong> Let\u2019s take a glimpse at this fast-changing profession and see what\u2019s “shaking up” its future.<\/p>\n

\"ergonomicMost days start out simple for web designers.\u00a0<\/strong>You\u2019ll find us sitting in ergonomic chairs, sipping dark roast coffee, catching up on our emails, checking social media and prioritizing our work.<\/p>\n

But there are forces dragging us down and pushing us forward all at once. Search engines<\/strong> 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.<\/p>\n

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.<\/p>\n

So we walk a tightrope. We make hard choices.<\/p>\n

When things don\u2019t quite go as planned, we resort to troubleshooting.<\/p>\n

Some predict that web design will be dead in 20 years.\u00a0<\/strong>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.<\/p>\n

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 \u201cRIP IE6<\/strong>\u201d posts sprung up on social media and we celebrated.
\n\"smartphone\"<\/strong><\/p>\n

Then along came the iPhone in 2007.<\/strong><\/h3>\n

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.<\/p>\n

The smartphone with its slow Internet connections and tiny screen led to mobile friendly, responsive web design.<\/strong><\/p>\n

HTML5<\/strong> replaced XHTML. CSS3<\/strong> appeared with Transitions, Transforms, Animation, Filters and more. But the web browsers said, \u201cNo. Not yet. Too soon. Wait a bit longer.\u201d<\/p>\n

\"responsive<\/p>\n

These days we\u00a0present our visitors with simpler designs than in the past and integrate storytelling<\/strong> into our content. We do cross-browser and cross-device testing and assure ourselves that \u2018the fold\u2019<\/strong> is now irrelevant.<\/p>\n

If you’re a new\u00a0web designer, you’re probably already familiar with HTML5 and responsive web design, but don\u2019t get comfortable. There\u2019s more going on behind the scenes.<\/p>\n

\"voiceIn 2011, Siri was introduced.<\/strong><\/h3>\n

Siri<\/a> (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.<\/p>\n

“Voice Search Optimization<\/strong>” became a real thing.<\/p>\n

Then RankBrain was introduced in 2015.<\/strong><\/h3>\n

Artificial Intelligence is in our world now\u00a0and it\u2019s shaking things up. Computer systems, such as Google\u2019s RankBrain,<\/a> are performing tasks that normally require human intelligence.
\n<\/strong><\/p>\n

\"GoogleWhy do we care?<\/strong> Google now uses RankBrain to help deliver its search results (giving Google a better ability to match searchers with web pages). RankBrain<\/strong> is continually learning and constantly adapting to figure out what people want when they search. It\u2019s also getting better at analyzing the context<\/strong> of website content.<\/p>\n

As web designers, we must re-think our web content. It\u00a0must serve \u201csearcher intent.<\/a>\u201d 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.<\/p>\n

With all of this to consider, our day at the office quickly gets\u00a0more complicated. Paleo snacks and second cup of coffee give us the fuel to stay focused. We work on the\u00a0sentence structure<\/a>\u00a0in our content and troubleshoot annoying browser incompatibilities.<\/p>\n

Our FitBits remind us to take a short walk.<\/strong><\/p>\n

While keeping an eye on the past, we prepare\u00a0for the future. Our designs become cleaner, more minimalistic. There\u2019s a push to remove the clutter and add more whitespace.<\/p>\n

Modern Web\u00a0Design<\/h2>\n

Flat Design, Material Design and Cards<\/h3>\n

Flat Design<\/a><\/strong>\u00a0followed the minimalism trend. It gained popularity with\u00a0its 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.<\/p>\n

Google\u2019s Material Design<\/a><\/strong> appeared\u00a0in 2014. It offered the simplicity, ease and usability of flat design but with more depth and shadow.<\/p>\n

Card-Based Designs<\/a>,<\/strong> made popular by Pinterest, also began popping up in our\u00a0modern world.\u00a0Card Designs\u00a0divide content into meaningful sections that are easy to scan and communicate quick stories. Card-based designs, however, are not suitable for all projects.<\/p>\n

\"Pinterest<\/p>\n

In this modern world, web designers build fewer websites from scratch. We have powerful front-end frameworks like Bootstrap<\/strong> at our fingertips, but with\u00a0\u201cpage bloat<\/a>\u201d as a spoiler.<\/p>\n

We\u2019ve begun dabbling in Flexbox<\/a> and CSS Grid<\/a>, modern approaches to managing our page layouts. But web browsers remind us to proceed carefully with our futuristic plans.\u00a0We experiment with other new technologies\u00a0<\/strong>like CSS animation that can enhance our designs without speed issues.<\/p>\n

Modern\u00a0Graphics<\/h2>\n

Gif Animations, Illustrations and Cinemagraphs<\/h3>\n

\"coffeeGIF animation<\/strong>\u00a0is regaining attention in our modern world. Animated GIFs<\/strong> (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.\u00a0They are also pretty easy to make with Photoshop or on a smartphone.<\/p>\n

See: 15 Glorious Examples of Brands Using GIFs<\/a><\/strong>\u00a0<\/strong><\/p>\n

Hand-drawn illustrations<\/strong> 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.<\/p>\n

See:\u00a0The Internet’s Best Hand Drawn Websites<\/a><\/strong><\/p>\n

Cinemagraphs<\/strong> can also capture a viewer\u2019s 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.<\/p>\n

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\u00a0all things considered deprecated,<\/a>\u00a0and embrace new technologies.<\/p>\n

But those new technologies can threaten our very existence.<\/p>\n

AI-designed Websites<\/h2>\n

Not only has artificial intelligence crept into the search engines, it\u2019s 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<\/a> and the Grid.<\/a> Can web design become automated? It\u2019s too early to tell.<\/p>\n

Anticipating\u00a0the Future
\n<\/strong><\/h2>\n

We look to the future and wonder:<\/h3>\n