This year we’ll continue to see web design trend away from a strictly flat design and embrace the use of gradients. Gradients have been “hot” in all mediums of design for the last several years. In 2018 we expect you’ll continue to see lots and lots and lots of color gradients in web design.

What is a Gradient?

Wikipedia describes the technique of gradation used in art as:

“Gradation in art is a visual technique of gradually transitioning from one colour hue to another, or from one shade to another, or one texture to another. Space, distance, atmosphere, volume, and curved or rounded forms are some of the visual effects created with gradation.” The reference is to the book The Encyclopedia of Pastel Techniques by Judy Martin, published in 1992.

Using gradients in design is not new; artists have worked with gradation for decades.

Gradients in 2018 Web Design

The website design for WM Motors incorporates a vibrant gradient on the homepage. The designer uses shades of green from neon chartreuse and aqua to create movement. If you navigate to the website (click on the image of WM’s website, below), you’ll see even more movement. The gradient brings depth and adds interest to the graphic used. In addition, the gradient supports the subtle movement of the graphic on the homepage.

http://www.wm-motor.com/en/
This is the homepage for WM, a smart car manufacturer.

Scroll down the homepage to see more gradients used in the design. The designer uses a gradient behind a block of text to do multiple things, such as pull the user’s eye to important information and to create continuity from one section of the website to another.

Gradients are used to direct the viewer’s attention to the text on the website.

Another website that uses a gradient in its design is Fonterra’s informational website, “From Here to Everywhere,” about New Zealand. This website design uses a blue gradient to create the impression of a sky. Deep navy slowly gives way to a lighter, brighter teal. As the gradient lightens, the user’s eye is drawn to the image of Earth located lower on the homepage. By using a gradient, this web designer is able to guide the user to important elements on the page.

This website design uses a gradient to create the illusion of a sky that gradually lightens as it nears Earth.

The website to promote Qards by Designmodo uses a similar blue gradient as Fonterra’s website does. The Qards design also uses gradients to color moving bubbles on its homepage. Gradients used against a dark stationary background serve to catch the eye with light-infused color.

This website uses a gradient to effectively bring the user’s eye down the screen.

The design for Spotify.me uses a gradient that moves from melon orange to berry pink. The lighter color is like sunlight; the designer uses it to effectively highlight the girl’s face in the image on the homepage. The dark text commands attention, and the user’s eye is ultimately drawn to the “Get Started” button located beneath the text. The colors are modern and young, perfect for the target audience that will use the website.

This webiste uses a gradient to draw the viewer’s eye to the word Interactions.

This web design for Interactions 2.0 also showcases the gradient trend on its homepage. The color transitions from salmon to violet to blue to bring the viewer’s eye across the page.

You’ll find an excellent example of gradient use in website design for the Adult Swim website. The screenshots don’t do this design justice; navigate to the website to be thoroughly entertained by shapes that move and colors that transition from one shade to another.

This website design employs multiple gradients to create depth and movement.
Colors change and images rotate on the homepage of this website.

Gradients in Web Design & User Experience

An interesting discussion on the website graphicdesign.stackexchange.com titled, What effect do gradient fills have on the eye? contemplates the best way to use gradients in design.

One user says: “A gradient should never take away from a design or distract from the message of the design. In most instances they are being used to mimic a light source in either radial or linear format. Radial provides the best look for more of a spot and can be used to draw attention to a specific area of your application or design.

The best applications come when used in a subtle way to draw attention or provide depth and texture to a design. They are there to make objects or backgrounds seem more realistic as it pertains to light.”

Aside from Martin’s reference to its use in 1992, we see more and more articles pop up online during the 2000’s.

A Modern History of Gradients in Web Design

An earlier reference to the use of gradients in illustration and art is from tuts+ in an article by Sharon Milne titled, Using Multiple Styles of Gradients in Vector Illustration and Vector Art. This article was published in 2010.

Butterfly, an Australian design agency, published, UI design – A history of web design trends on its blog. It details modern web design trends from the ’90s to present day.

Gradients are referenced as part of the “Web 2.0” trend that was popular in the 2000s. Later, around 2012, the article notes that flat design has become a trend, noting that “Simplicity is key: decorative elements such as gradients, textures and reliefs are avoided.”

Gradation vs. Flat Design

Flat design has been popular in website design for the last several years. Onextrapixel published an article in 2014 titled, Flat Design: A History, Past, Present and Future.

“Flat design is exactly what its name suggests – design that is flat. A term defined by user interface (UI) designers, flat design removes stylistic 3D components like gradients, bevels, drop shadows and textures. Basically anything that would create visual depth so a graphic has the illusion of “popping out”.”

The gradient is a reaction to the flat design trend that has been with web design for the last several years. In the last several months, we’ve seen a lot more web designs utilizing gradients in creative, attractive ways.

The gradient is modern again!

Artonic Uses Gradients in Web Design

Gradients are fun to use – and we love using them at Artonic (a Michigan Web Design agency located on the border of Michigan and Ohio).

Here are a few examples of times Artonic used a gradient as a design element:

e-commerce web design best practices cover of green ebook with shopping cart graphic on it.
E-Commerce Web Design Best Practices. eBook Cover
https://www.artonicweb.com/landing/ebook/b2b-internet-marketing-tips.php
The gradient is dark at the edges and lighter in the middle, pulling the viewer’s eye to the center of the image.
A custom website is built from scratch, including the code, content, layout, and design.
The homepage of this website uses a blue gradient for the sky.
Ideas-to-Boost-Sales-on-Your-Website
A gradient transitions from deep teal to a purple berry color on this social post for a blog.
A colorful gradient used behind text creates movement and depth.

Say Hello!

Give Artonic a call or email us if you’re interested in website design, development, or marketing.

517-902-7851

info@artonicweb.com

Michigan, USA

Subscribe to Artonic's Blog Stay on top of the topics that are important to your business!

Email Address