Web Design Trends 2018 (Part # 1)

In 2017, we watched mobile trends become more and more important in the design world, in 2018 the trend will continue, which means that responsive elements will become more in demand.

Also, dynamics and bright colors prevail, original illustrations and more freedom in creativity.

2018 will be a year of color and movement. Sounds interesting, doesn t it?

1. Futuristic ornament

Back in the early 2000s, the future seemed like what we saw in the Matrix: scrolling through a sequence of numbers, technology, robotics, pulsating light.

This scenario lost its appeal when it became apparent that the films moved further from reality, which was less futuristic than intended. But lately, these robotic trends are making a comeback when it comes to analytics or big data.

Project: Automotive cluster effects exploration process

6477c6ba1347d28762e51Project: Crown Tech | SpaceShip | Data Visualization Concept
Posted by Jan Wolinger | Arif Rachman Hakim Yogyakarta | Mario Šimić

2. Simplicity and comfort

Less is more – a timeless trend. Where simplicity means purity, where white dominates, neat pages in the name of minimalism. Space is critical, optimizing it for multi-functional and versatile design.

b303b759752143.5a2e8f1ef0ddaProject: Rem
Author: Alim Maasoglu

e181dc37daebe8e3d2122Project: A propos du cancer | WaveOC Corporate Website Redesign
Author: Extra | Tetiana donska

3. Extra depth (with semi-flat design)

Adding a cherry on top of traditional flat design cake may be the right direction in 2018: a little shading will help give objects volume, while the minimalism that flat design is based on still dominates.

b56bc159752143.5a3942bc8806dProject: Nike Promotion Ads – Parallax Effect
Author: Jardson Almeida

ea186559752143.5a300acf48382Project: Flyknit Lunar 3 | Made You Look ? 255 | Live a little more.
Posted by Callum Notman | STUDIOJQ

4. Responsive logos

The future is more and more focused on the mobile experience, with the PC losing more and more importance, the brand itself must adapt to the new platform, be it a smartphone or a tablet.

Responsive logos will be crucial for designers: a brand needs to be able to present itself, regardless of size and space.

186633e1131fb60b399feProject: Premiere League | Evolving Google Identity | Nike air
Author: DesignStudio | Google Design | Nike

5. Original illustrations

Stock photos are not in trend. That is why in 2018 we will see more custom designs and illustrations thanks to the stock of icons and art. Brand personalization starts with design and finding a corporate identity based on illustrations will turn any website into a unique one.

5a897801a0f2a8c2a676cProject: Lifecycle
Author: Iswanto Arif

6. Animations, GIFs and parallax

With the social explosion of GIFs, animation is becoming extremely popular online. With movable elements such as banners or heroes, images create attention-grabbing effects that can be used to create accents on certain objects.

In 2018, parallax trends are likely to continue (stable images with one movable element, for example, a cup

with animated smoke coming out of it). It is important to never stand still!

e710a459752143.5a2ff93402b26Project: Neo Kids – Onboarding Concept

7a1e8559752143.5a393b0c51cc4Project: Exploring The North Face
Author: Eddie Lobanovskiy

02ac7059752143.5a393b0ce01efProject: cinemagraphs.com
Author: Kevin Burg

6c3be259752143.5a393b0cdfd95Project: cinemagraphs.com
Author: Jamie Beck


7. Micro interactions

They are everywhere. Every time you like something on Facebook or swipe in mobile apps, you are doing micro-interactions. And they work really well given that their goal is to engage users and ensure a dynamic UX.

Elements become fluid: buttons can transform into something else, and all surfaces become animated that you want to touch and use.

I bet they will be in the top in 2018 as well.



59901f59752143.5a3937234848aProject: My idea | An incident in front of you! | Playlist – Radial Interaction
Author: Johny vino ™

8. Unpleasant bright gradients

They disappeared about 10 years ago and were replaced by flat designs. The gradients have been recreated by giants such as Spotify and Instagram, which brought them back in 2015. Gradients 2.0 are less messy than their predecessors: colors are clearly visible and pleasing to the eye. Gradients are now becoming synonymous with freshness, coolness, digital generation.

a5e11b59752143.5a3a40efce63dProject: Nike Free Design
Author: Leo Natsume

94ad451acb2ad5c1b70daProject: A Poster every day – Collection 2 | Elje – group website
Author: Magdiel Lopez | elje-group.com

9. Semi-realistic 3D

3D is always exciting. His power will play with fiction and reality in a manner so subtle that it is sometimes impossible to tell the difference. Is it an image or a render? The boundaries are getting thinner.

Project: YOOX: Make a Wish
Author: Peter Tarka, Mateusz Krol, JVG ™



ebf20459752143.5a3a44905a4b5Project: NIKE iD
Author: Jordi Pagès

e56903da926c88ead15b7Project: Personal Collection | Air Max 17
Posted by Peter Tarka | Berd., Lukas Vojir, mark haley, Oliver Harris, Jeff Thomson, Fred Huergo, James Owen

10. Single color 3D design

Using a single color in 3D allows developers to tickle the eye of the viewer with a trick of depth and shadow.

Despite the lack of contrast, the effect is smooth and full of volume, the figures appear as if from a wall. A kind of magic that can be seen around in 2018.

ce0371ad2049bbed2816aProject: Magrela Popcorn | Amazonia Beverages
Author: Hugo Aranha

11. Double exposure

In late 2015, Pantone rocked the design world by announcing Rose Quartz and Serenity as the Color of the Year. Perhaps this is what sparked the trend towards the use of mixed, two-color pallets in digital designs. By 2016, many sites were adopting the use of duplex, especially Spotify, and this trend will continue to evolve in 2018.

977c3359540015.5a264983aaf6cAdison Partner s Website

9fba3259540015.5a264983aac00Spotlight Festival Identity by Kristina Udovichenko and Shamil Karim of Manitou Design



8e745259540015.5a264b3a89a987h10 Double Color Exposure

Translation @thedesigner

Leave a Reply

Your email address will not be published. Required fields are marked *