How does the fresh and lasting web design look in 2018? The most influential modern trends in web design can be summarized in four short points:
- Smart color,
- Unconventional layouts,
- Bold typography,
- Animations everywhere.
But what exact elements are most likely to still be popular in the following years? And what will work best for your own brand? Find out in this article.
Colors That Tell Your Story
Web design circles were always concerned with the right choice of colors. This year was full of color trends that have basically dominated the design talk. Think about the overhauled Instagram logo, renovated iOS design or Spotify – that was just the beginning.
Brighter, bolder hues prevail, however, muted colors are still a strong choice for certain cases.
Vividness against the dark
Using rainbow style hues can be complicated due to the contrast issues. However, putting bright, richly saturated colors against a dark background definitely helps to make them pop out.
For example, Github is using rainbow accent hues against pitch black starry sky background to promote its next conference. Even though it’s a serious-looking, simple website, they added more eye-catching, small color elements to guide the user. Plus there is an additional modern move – using more flat rainbow aesthetics and less of the fancy gradients.
Savee, a portfolio hosting service, takes a different approach but also uses colors on a dark background. Their main page features tiles of mostly bright and saturated photos to create a unique feel.
Background full of contrasting (sometimes to extreme) colors can also be a great tool to give a strong first impression.
Lonsdale, a branding and design agency, coins into a few trends at once: splash landing background, high-contrast color pallet, and a looped video. Notice the nature of the brand and its corresponding message – we are bold, progressive, creative.
Also known as muted, those pallets are calmer and more relaxing to the eye. Unlike the screaming saturation, their pastel feel invites visitor’s attention and does not demand it.
For example, Wolf and Son, a balanced, traditional footwear brand for men, is all about subtle pallet colors. This works equally well for their website too. Again, the color choices for any of the web pages of your brand should stay consistent with the brand essence.
Mobile First & Optimized Cinematic Experience
In 2017 around 50% of worldwide traffic already comes from mobile devices. This number will only keep on growing and this sets a serious challenge for us as web designers. Although a short and wide website may look perfect on a Retina desktop display but be completely out of place in a vertical mobile browser.
Composition is, of course, the fundamental concept in design. So how can we effectively display the same powerful content within a huge amount of different screen sizes? To maintain design integrity, we have to get creative, because cropping is no longer acceptable in this brave new “responsive world”.
Instead of thinking about static images, now we have to think about the message itself that they tell. Layouts become adaptable to the stories the websites communicate and devices on which they are shown.
Cinematic experience on mobile
Big cinematic video backgrounds are trending since 2015, but only now they become widely adopted. Technology has significantly improved and now allows for faster load times. Advances in WebGL have also enabled video backgrounds to become interactive, allowing for new immersive cinematic experiences. A great example of this is the Visit Humboldt website.
On the other hand, mobile websites are still majorly avoiding cinematic backgrounds, mostly due to the limited mobile bandwidth reasoning. This, of course, is changing slowly, however, there is still one good way to get a similar experience without a heavy data consumption.
Meet a cinemagram. It’s a well-looped, light-weight gif that has minor movements and mimics video experience. We are definitely going to see more of those on the web in 2018, including mobile websites like Kikk.be.
Asymmetry trend, richer backgrounds, patterns and decorative details have contributed to a rise of a true tsunami wave of “broken” websites. Common layout styles have been ditched as outdated by most of the respected agencies. But what differentiates a well-made unique design from a simply broken one?
Asymmetry with perspective
Piercing through the boundaries of generic layouts doesn’t always mean losing the balance all at once. In the following example, a landing page with its slides is fairly simple, featuring only a slight shaking of the symmetry to make UX more streamlined and easier.
Multimedia Guides To Polish Culture by Culture.pl welcome us with a split-screen layout, creative typography and popping monochromatic pictures. However, getting deeper into the content of this website we become drawn to the whole new level of complexity. Radical animations, quickly changing layouts and lack of structure create a special, distinct style.
A good “broken” website may be confusing in everything except navigation. Careful guidance for users through the content is still the key. So think about creative yet functional ways to provide navigation without those cheap “hamburgers” stuck on your website.
Here are few examples of smart ways to implement a menu without sacrificing the style and feel of your website.
Menu as a frame – Hillside Rancho Church
Pop up menu – Circles Conference
Full-screen menu (“Pop-over”) – Edelson
No-menu navigation (when nothing else seems to match your rad brand) – Anonymous Burger
Aspect ratios vs art direction
In the end, it’s always possible (although by far not always smart), to completely get rid of a unified layout structure. Notice that in the following example uses a whole bunch of trendy design moves for the sake of art direction, thus producing one unified statement instead of a chaos.
Lionel Durimel is a French designer with a long list of awards and diverse portfolio. His website combines radically different layout, bold typography, crazy aspect ratios, lack of structure, animations and custom scrolling.
For a long time animations were treated as a ‘reward’ for a user’s action. For example, some elements moved on mouse hover or click. However, today technology allows for more powerful and quick ways to integrate animations into pages as a design element.
Subtle animation and micro-interactions
Although fast, sudden movements are proven to repel users, subtle animations are highly effective in drawing attention. In particular, events like simple scroll down a page may trigger movement of a button, picture, or a whole subscription form, meaning we can focus viewer’s attention exactly where we want it to be.
Micro-interactions and interesting animations enrich simple websites, thus working well even with minimalist layouts. They not only serve as a bonus for UX but also add personality to a website. For example – sketching animations on the Project Sunday’s website.
Bold animated typography
The text is no longer a necessarily static element and bold typography means more than large fonts. One of the strongest trends on the web today is integration between typography, images, video, and animations. The example used below – Zoomanity.
Animation as the killer feature
In certain cases, animations may become a signature design feature on their own. We see this exact trend used in the already mentioned Multimedia Guides To Polish Culture website. Look at the gif below and imagine seeing different animations or no animations at all.
In the end, the most important becomes not the consistency of elements within the website, but rather the consistency of the overall design and the message it provides with the brand it represents. This is currently true and will become even more important in the coming years.