Design rollercoaster. 5 epic fails vs. 5 trendy must-haves

Written by FreshCodeIT | Published 2018/03/12
Tech Story Tags: web-design | design-must-haves | design-fail | frontend | web-development

TLDRvia the TL;DR App

Sometimes creating a web design is like walking across the minefield. You never know which creative solution will endear the users and which will make them leave the brand forever. And while research and analytics tools provide insights into the user’s preferences, some design errors are persistent. Today we want to take you on a rollercoaster ride of the five worst mistakes a web designer can make and the five trendy ways to correct them.

Design originality that hinders usability

Designers get caught up in the creative flow and forget that they create interfaces for users, not themselves. And when people can’t find content, they turn from interested into annoyed and then just leave never to return. Unhelpful category names, an excess of links and menus, illogical structure and unexpected locations of interface elements, like the search bar, can turn away potential clients.

Remember that internet users spend most of their time on other websites and they have certain expectations about what an interface should look like and how it should work. Sometimes plain and easy-to-understand beats creative and unique. Still, if you wish your website to stand out, use

Broken grid and asymmetrical layouts

Everyone and their mother uses classic grid layouts. They are clean, easy and boring. That’s why over the last year more and more designers ripped up the traditional grid and made images and text overlap and blur into a single beautiful design. Asymmetrical layouts attract customers who are tired of classic blocks and plates, as long as they stay user-friendly and logical. Both big brands and small startups have already embraced the trend that might very well turn mainstream in 2018.

Overwhelming users with content

For years designers and marketing experts believed that cramming the first scroll with as much information as possible is the way to go. As a result, the Internet was filled with pages and applications bombarding users with huge blocks of texts, dozens of images, CTAs and buttons. Overwhelmed by the wall of content, users left for greener pastures. What designers forgot to take into account was the fact that online users scan the pages instead of reading everything.

Unstructured text, without subheaders, bullet points, and highlights is a waste of space and a missed opportunity for a web app. If you want to engage clients from the get-go, employ.

Interactive and engaging animations

While exhaustive GIFs can be a major turn off, artful animations are a useful tool to direct the user’s attention and keep it focused on the critical elements of the design or copy. Classy animations can engage the client without being distracting, though some people find them overwhelming. Two of the most prominent trends this year are animated page transitions, which link all pages into a single seamless experience, and variable scrolling rates that create an exciting effect and set a pace for the user experience.

Ignoring screens of other sizes

For years designer worked exclusively on desktop-oriented web applications and websites. They devised clever hover state animations and selected breathtaking photos, developed beautiful multi-level menus only to see the traffic take a plunge. All these solutions do not translate well into mobile. Small unreadable text, increased load time and garish animations turn mobile users off and make them seek other services and brands.

Designers need to remember that 2017 saw mobile traffic finally overtake that of the desktop. You should start creating designs with smaller screens in mind if you haven’t already. Or better yet,

Develop mobile-friendly experience first

Some mobile-oriented solutions have already become industry standards, like a rollout burger of a menu and icons instead of large illustrations and photos. Designers strive to make mobile versions more intuitive and less cluttered, as the size of the screen imposes many restrictions on the amount of content and its structure. Many companies start with developing mobile versions first, then adding to them to create a comfortable experience for desktop users.

Design elements resembling ADS

The road to Hell is paved with good designer intentions. To attract user’s attention to a specific link or button designers turn the whole area around it into their playground. They use bold colors, fancy typography or flashy animations to hook clients and reel them in. However, despite all their efforts, links stay untouched, falling prey to selective attention and advertising blindness. People ignore anything that resembles a banner or a clickbait image, closing popups without a second glance.

There are ways to control and manipulate users to follow the path intended for them throughout the website. To stay on top of these techniques, start using

Classy custom illustrations

A picture is worth a thousand words. However, stock photos have fallen out of designers’ grace lately. And since art and fashion repeat themselves in cycles, now is the time for custom illustrations. They give the web interface a stylish look, catching attention and forming a unique brand identity. Another bonus is that drawings do not limit the audience’s identity the same way photos do. A hand-drawn stick-figure does not have a race, nationality or gender, unlike a real-life person on any of the stock photos. As a result, using illustrations can broaden the target audience and attract new customers.

Using poor onsite search engine

Even when designers utilize the simplest layouts and navigation tools, some users get confused. They turn to a search bar to guide their experience and get instantly disappointed when they see zero search results. Literal search engines that don’t account for plurals, variations of the words and even typos doom the web application to be forgotten. Another unforgivable faux pas is sorting search results by the number of query terms instead of their relevance and importance.

In the age of Google, no one is willing to waste time trying to figure out your search bar. Besides improving the search engine, try making the user experience more streamlined by implementing

Floating navigation tools

Users don’t like feeling lost, that’s why designers strive to ensure they always have navigation menus at the tips of their fingers. Floating menus have become a significant trend that is here to stay for the foreseeable future. However, to capitalize on this solution, designers rip the nav bars off their usual positions and move the navigation tools to the foreground of the page, making them pop off the screen both in Material and Flat design. Hiding other design elements under the menu bar gives web design impressive depth.

We hope this list was as exciting and inspiring for you as it was for us. Come back to it from time to time to remind yourself of the design errors that we should not repeat online in 2018.

Did you like the article? Clap us please! Share article with other people on Medium.

Visit our corporate FreshCode.blog for more interesting articles.

Feel free to contact us on our FreshCode.website

Follow FreshCode on LinkedIn, Facebook, Twitter, Instagram, Behance, Medium

Original here


Published by HackerNoon on 2018/03/12