There’s no way to design without color – even a strictly black-and-white site has multiple options for hue, contrast, and balance.
With the lingering presence of flat design (now flat 2.0), color holds even more prominence in web design today. Rainbows of bright colors span the Internet, attuned for the both the playfully cartoonish style popular today, and also for the elegantly minimalist style, which must make use of color as one of its few visual elements.
Now and in the near future, we will see a lot of these brighter, happier tones, making vibrant colors one of the biggest web design trends of 2015 and 2016.
Links in Fashion and Interior Design
As explained in Web Design Trends 2015 & 2016, bright colors aren’t just a trend on the web.
They seem to be universal across all industries, especially fashion and interior design, two visually dominant areas that have more than a little in common with web design.
Photo credit: http://www.chanel.com
The takeaway is that, by keeping tabs on what’s happening in these industries, you’ll have a better understanding of what’s going on in web design. The same colors people want to wear on themselves or see in their homes are the same colors that they’ll enjoy when browsing the web.
After all, the end result of using color is the same across all industries: connecting with the user. Color has the ability to create a sturdy emotional link with people, whether on a handbag or a home page.
The appeal of the vibrant color trend is that it can be applied in many different ways and styles to many different elements. With their diversity and versatility, today’s bright color patterns are burying the "template" look of the plug-and-play site themes that had been popular before.
In the below prototype created in UXPin with the no-code animations editor, notice how bright colors improve visual communication. By selecting different shades of the same orange for the navigation, the UI instantly expresses that all items are related to each other.
What started as a trend for only creative sites like artist portfolios and/or designers, today bright colors are being implemented in more mainstream and traditional industries like news and weather sites. It’s even seeping into e-commerce, an industry historically predominated by black-and-white.
Bright colors are losing their stigma of silliness and are started to be accepted as professional.
It’s no coincidence that vibrant colors are becoming popular today. In fact, we can link the trend’s popularity to two major developments: high definition and flat design.
The more pixels per inch on high definition displays allows for more distinct colors. While in the past designers could use only 216 web safe colors, today’s technology allows millions, and over 98% of users have personal access to such technology (according to a W3Schools study).
As Retina and other high-definition displays were becoming more readily available, flat design was also growing in popularity. This was no coincidence either. Flat design, too, is a product of newer technological options, but it also resulted as a backlash against the skeuomorphism that dominated the web design scene prior.
An Example of Modern Color Usage
Not just a news site but a business news site, Bloomberg Business and their masterful use of vibrant colors demonstrates our point about color consciousness spreading into more mainstream and traditionally professional industries.
Using vibrant colors is not as easy as just painting your site with them. The majority of the site is black and white, which makes the appearance of color stand out more (and the text more readable, a high priority for a news site).
The vibrant blue is their signature color, used predominantly on the site as the division borders, and even in their logo. This is an excellent choice, as this shade of blue evokes both trust and serenity in the user. The pastel red for the Top News grabs the user’s attention, but only for the titles to avoid overkill. And the baby blue for the Commentary & Opinion section creates a lighter, less formal tone.
Notice, too, how the colors of the text changes. The body content and description blurbs are in black, signaling they are of lesser importance than the brightly colored headings, titles, and categories ("Politics"). This facilitates browsing by drawing more attention to the broader sections than the details.
Colors make an excellent organizational tool for navigation, but Bloomberg Business smartly chooses only vibrant tones.
Color will always be married to web design practices, however, the popularity of vibrant colors specifically will ebb and flow as trends change. As such techniques are cyclical, we’ll likely see a return of some older techniques that have been reinvented. For example, perhaps gradients will make a comeback and breathe new life into the bright color trend.
With only bright blues, Zample+me uses a gradient effect on its background without falling into dull tones. This easy style fits comfortably with the minimalist layout of the site, and the flat design attributes of the interactive icons. Zample+Me shows the trend evolving, not fading away.
Bold color combines well with dramatic typography, another current trend dissected in Web Design Trends 2015-2016.
As you can see in the Piccsy Playground example above, the two intensify each other to send a powerful message. This look is so intense, though, one must be careful not to detract from the single message with other competing elements.
Another color trend we’re likely to see more and more of in the future is color overlays – filtering an image through a colored "lens". This allows you to inject any image with the emotional attributes of any color. For example, an otherwise sad photography can be made happy by using a yellow-tinted filter.
The free ebook Web Design Trends 2015-2016 goes into more details about the latest color trends, as well as 9 other useful trends.
You’ll find breakdowns of 166 hand-picked examples from companies like Adidas, Intercom, Apple, Google, Versace, and others. To help speed up the design process, there’s also a curated list of 100 free resources.
Jump Start Git, 2nd Edition
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers
Form Design Patterns