January 20, 2017

Table of contents:

Good practices are always worth maintaining. Since design is a rather vulnerable area, not everybody keeps up-to-date about trends popping up here and there. Let’s learn what you’d better take to 2017 from previous years’ trends. We will take you through design approaches and web trends to keep an eye on. For your convenience we give design examples implemented on Drupal websites - real case studies practiсe. Developers are welcome to keep reading. Get prepared in advance before a designer in your team surprises you!

Web design trends

Design approaches

A SaaS agency UserSnap proclaims the idea of “web design in the traditional sense fading away”. We’ve carefully revised all the articles and compilations about web design trends in the beginning of this January. We found many examples that support this idea. Now we believe that a web designer should rather be an experience designer: the one that designs products, services, visuals focusing on user’s needs and quality of experience.

What are the proofs? Just look at these trending things below.

Material design

The Next Web, UserSnap, Econsultancy are shouting out loud that Flat design is to fade away soon, Google creates its own approach. Everything is literally telling us that Material Design trend keeps being the coolest kid in school. Everybody got bored of websites looking alike. Website and system icons looked the same, it was hard to navigate the website, that was proved by Windows 8 Usability Tests conducted by the Nielsen Norman Group.

Those might have been the reasons why tactile design is taking off now.

UserSnap company notes that this trend is applicable to visuals as well - not only interfaces.

Material design is a visual language created by Google. A new design system allows to create the same UX for all devices: mobile, laptops, desktops, watches, TVs, cars. This system is much more flexible due to the reason it was created for designers, Google was the first user.

Let’s get to know material design’s features.

  1. Layers and surfaces of an interface interact with each other in accordance to all physics laws. General look of an object tells a user what it is made of, what place this object has regarding other objects and what a depth of the object’s location is.
  2. Interface consists of the layers of digital paper. This gives an impression of the tactile surfaces situated on different levels. You expect the real object has a shadow, the same is applicable in material design: the surface lying higher casts a shadow at a lower surface. What do we need it for? First of all, a designer can create a hierarchy of elements inside of the interface. It helps the user to understand which element is more important. Less important ones could be placed in shadows or drawn at a page bottom.
  3. Big floating round-shaped button is another material design’s feature. It is used only for the key action.
  4. Natural light imitation is a must for material design.
  5. Animation should make sense. It shows the user what has changed after a particular action was made. Micro-animations are also welcome in material design: they are used inside of buttons, smaller managing elements. These animations clarify actions as well.
  6. Following a previous aspect, we’d love to note that the animation should be rather smooth than popping up out of the blue. Please keep in mind that an element’s size and weight do matter. Smaller and lighter objects move faster than bigger and heavier ones.
  7. Material design’s palette consists of the main color and the complimenting color that makes accents. The main color is aimed at big containers, and the accent color helps indicating the importance of the particular details. For instance, the accent color may be used for CTA buttons.Bear in mind: there must be contrast between the main and the complimenting colors.
  8. Icons are divided into website / application icons and system icons. Unique website icons must promote the product’s idea and reflect its distinctiveness. All the physics laws are also applicable when it comes to icons creation. Remember about icon’s material and illumination as well.
  9. Bright illustrations and photos usage is another distinct feature. But don’t use stock photos: create unique and original ones instead.
  10. Content is aligned not only by Y, X and Z axes, but also by a baseline grid.

Material design

ADCI Solutions website concept redesign. View case
 

Atomic design

We already talked over atomic design approach in one of the previous articles (read “Modern practices of creating the visual part of the web” at our website). We will remind you approach features.

  1. This approach follows a component thinking: a whole website is divided into separate components to use them throughout the site.
  2. The website has 5 levels: atoms, molecules, organisms, templates, pages.
  3. Atoms are basic building bricks, for example, buttons.
  4. Atoms form molecules: a set of buttons becomes a particular content block.
  5. Molecules create a particular subsection of the site: a header, a footer, a sidebar, etc.
  6. These molecules combinations are organisms. Several organisms together form a template and that’s what you can show to a client.
  7. Pages are the templates filled with a real content.

System assembling is more time savvy than a typical design process: both the client and the designer see the system creation step by step and there’s no need to deconstruct the whole page if the client doesn’t like the design offered.

Atomic design

Hang Glide New England website. View case
 

Design process

A mobile-first strategy is here for a long time obviously. It supposes designers create interfaces basing not on the maximum menu items / maximum content that a website can physically accommodate, but on the most important info / features to introduce.

Firstly, a designer creates a mobile version, secondly, works up towards the larger screens interfaces. This way, designers go towards expanding an amount of functions available.

Besides, the mobile-first strategy helps to understand what company’s core content is.

Next to the mobile-first strategy goes menu’s shortening: it comes up to 5 items and also helps keep a user focused at the main content.

Let’s think over another situation: the mobile-first strategy doesn’t suit one’s budget. Here comes a responsive design: thus a company needs only a single website developed. This one and only must render great on mobile and tablet, on laptops and desktops.

If you still feel relaxed, we’d love to draw your attention to the fact that Google changed its ranking algorithm in April 2016. It prioritizes websites according to content optimization.

The last but not the least in this block - prototyping tools:  Pixate, InVision, JUSTINMIND and many more. These tools allow to create working prototypes of sites, which are much more persuasive than long explanations how the site or an app should work.

Still trying to figure out how designers and developers can work efficiently? Check our articles “Modern practices of creating the visual part of the web” and “How to befriend design and front-end”.

Content representation

The question is, how to present content so that a user clicks on buttons and links designed to click, follows the steps you want him or her to follow and reads company’s message easily? Here are some tips.

The entry point of this block is an accent on content itself, though. Content is a king, and content framed properly ensures confidence that users understand your company’s message and see what you offer.

Content presented as card pieces is what we owe to social networks like Facebook, Pinterest and Twitter.

Such a navigation is easier to surf, moreover it’s a real must for those who want to introduce a lot of content at once. Thus a user could scroll the whole page, quickly assess the content shown and decide what deserves attention and what should be dismissed. Cards act like entrances to more details.

Card design

Brainstorm profile. View Live Demo
 

The next subtopic we refer to is long scrolling and parallax. Both kick up a big fuss.

Parallax - a mouse-based motion and a scrolling mechanism - is aimed at enriching UX and creating smooth transitions. But being used improperly or simply to impress website’s guests this feature doesn’t stand for “experience design”. Everything on the website should serve at first and entertain - at second.

Parallax

Harbour Space. Visit website
 

Long scrolling is another controversial issue: it’s savvy way of presenting content at once on the one hand. On the other hand there’s a tendency to shorten up the menu items and an amount of content that isn’t the key one. Worth telling that a famous or even a notorious hamburger menu is losing its points: users often do not comprehend what that symbol means. That signals that the users do not always understand what is a folder яof the menu and what buttons lead to the content they want to get.

Define what better works for your users and make a choice between a short and rigid page framework and the one to scroll.

There are more ways to brighten up content: create a unique layout or use a broken grid.

Flexbox and CSS grid (to be released in March 2017) are to help designers and developers to experiment with layouts.

Visualization

Animation in general and GIFs in particular is another great mechanic for website processes’ clarification.

First of all, such micro-interactions clear out what the one or another button, form, block do. Secondly, animation grabs user’s attention and points at the key website’s actions. Help visitors to comprehend which products they’d better pay attention to, what button to click.

Use GIFs wisely, though. Don’t clutter a website’s interface: a goal is to control a navigation and a user story and lead the user to a conversion action.

Such a brutal minimalism as an excessive usage of an empty space is aimed to lead the user to the conversion action as well. If there are few buttons to click it’s difficult to get lost on the website. This trend goes next to extra simple home pages and landing pages design.

Video is also a powerful method to keep the user alert. Insert a background video, include one on the main page and let the narrative of the video tell a company’s story. Carrie Cousins, a seasoned US freelance designer, supposes a virtual reality experience will have a big impact, so bear in mind a 360-degree video option.

Video on Drupal website

The Nature Conservancy. Visit website
 

3D geometric shapes is said to be trending due to Google’s Material Design. Regardless of the reason, there’re many beautiful and bold geometric designs used on websites and we’re highly likely to see even more.

Typography becomes flashy, edgy and yes - bigger. Unique lettering is the way to revive the second spirit into design and make a brand stand out.

Bold typography

The 25th NSF EPSCoR Conference. Visit website
 

Gradients conquer the Web step by step. Such agencies as The Next Web, Econsultancy dig deeper and advise using a duotone gradient palette for the sake of the balance. One more way to use gradients - put a gradient overlay on a photo.

Zazzle Media, UserSnap, Econsultancy and ShortStack cry their hearts out and beg to forget about stock imagery. Original pictures, especially when it comes to team representation, work much more efficiently. Use pictures that do relate to your brand or a company.

Scalable and vector pictures - SVGs - realize two functions. The first one is to make a designer’s life easier: SVGs look perfect on any devices and any screen. The second is optimizing website’s performance. Since SVGs don’t require any HTTP requests, there are fewer factors slowing down the website.

And what about text? Heading matters, say content marketers. Heading does matter, say designers. A unique typography and placing can make a huge difference: designers actively conduct experiments with putting heading behind the content block, playing with a general layout or even going without heading at all.

Other trends

What else should be designers ready for?

First, people are getting more and more into wearable accessories: watches, smart bracelets. We’re likely to see a wearable-first approach instead of a mobile-first strategy soon.

Secondly, Hapnotic feedback technology is already here. “Haptic / Tactile feedback (or haptics) is the use of advanced vibration patterns and waveforms to convey information to a user or operator”. This technology provides tactic / vibrating feedback to the user of a touch-screen device: visuals and audios don’t seem that cool now, huh? A designer will create a visual part of such an alert.

Thirdly, more attention will be paid to designing bots: users want to communicate with companies directly.

And the last but not the least, get prepared for designing several layouts for each page: there’s a high demand for customization.

Conclusion

Summing up all the above, we can say for sure - 2017 is going to be thrilling and edgy. All trends move us closer to what is called “experience design” and we encourage you all to spread the word about new useful features. Share the article and create sensible designs!

Was this article helpful? Click to rate: 
Average: 4.4 (17 votes)

You may also like

A working process varies from project to project in an IT-company....
INTRODUCTION A modern website and its design isn’t a simple text node...
CONTENTS: Issue 0: where the problem is? Issue 1: styles’ structure...