DEV Community

loading...
Cover image for New UI Trend - Waves and Soft Lines

New UI Trend - Waves and Soft Lines

mdbootstrap profile image MD Bootstrap Originally published at mdbootstrap.com ・3 min read

Waves as a Web Design Trend

One of the trends that have taken root in web design in 2020, next to the trend for delicate, irregular shapes, are waves and soft lines. This trend doesn't pass in 2021 and is even expanded with its new original and inspiring interpretations created by web and graphic designers from around the world, which we can watch online. Waves are such a flexible and maneuverable effect that they are abundantly found in websites as well as in applications and graphic projects.


What can we use for

Waves or soft lines fulfill various functions in a web project. They can, more subtly than arrows or triangular elements, draw the app user's attention to a given call to action that we care about. At the same time, the user does not feel forced to do so, there are no negative associations, as the wave element on the website suggests it rather delicately. The soft lines also add a clear, minimalist, light style if they are brightly colored on a white background or, on the contrary, they can add energy, artistry, clarity when they are in vivid colors or a multi-colored gradient on a dark background. We are free to customize the wave design according to our project goals. Waves are a good idea to use in the intro of a page with a large, thick font, or to separate individual sections of the page, and can even be used in a footer, as you will see in one of my projects below.

project1


What aesthetics can we achieve?

When we have a single-color background, both waves in a solid color, e.g. a muted, warm shade, and waves with a gradient will suit it. The background and waves in similar colors will emphasize the calm, minimalistic character, while the contrast of the background and waves will emphasize the avant-garde and originality. When we combine a small wave with an illustration in pastel colors, we get a very contemporary, light style that will be good for a landing page, for example. It is worth choosing an illustration that will most accurately reflect the topic of our website. By maintaining sufficiently large gaps between the content on the page and the waves, it will make it easier for users to browse the site and search for the desired content.

project2


MDB Waves Generator

Our list of tools also includes "Waves Generator", thanks to which you can quickly create a wave in SVG format as a base and you will be able to add it to your project right away. The generator has options such as waveform selection, height, width, left and right rotation, and element color. Paste the generated code into the HTML file, save and you can enjoy the view of a more interesting page. I also recommend you take advantage of the additional wave adjustment options that I have prepared for the following projects. You will find multiple waves, waves with a multicolored gradient in the background, waves at the top and bottom of the screen, waves with an illustration, and a simple wave in the footer. Feel free to be inspired by the attached snippets.

project3


Wave within a footer

project4


Conclusion

Waves and soft lines add character and mood to a project and can help you achieve different goals. Their extensive styling possibilities help to create diverse websites and applications. Simply adding a curve can change the feel of a design, making it light and more engaging. It seems to me that they attract users in a positive way. Share your thoughts on this topic and use our "Waves Generator" and the projects attached to this article.

Discussion (2)

pic
Editor guide
Collapse
etcroot profile image
etcroot

I don't really think it's a new UI trend, it's been around for atleast 3+ years trendwise but i do agree that it's more common to see these days, will be interesting to see what'll replace it within the future, good article though!

Collapse
arnabxd profile image
Arnab Paryali

neither it's new nor it's beautiful ( at least in these examples )