Web design goes bold with fearless colors

Guest Blogger

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.

chanel

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.

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.

Why now?

grandpa

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.

What started as a trend for only creative sites, like artist and designer portfolios, has moved to the mainstream. Today bright colors are being implemented in more traditional industries like news and weather sites. It’s even seeping into e-commerce, an industry historically predominated by black-and-white.

logitech

Bright colors are losing their stigma of silliness and are starting to be accepted as professional. But it’s no coincidence that this vibrancy is 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

bloomberg

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.

bloomberg2

Website: Bloomberg

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.

Looking ahead

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.

floss

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.

web

Bold color also combines well with dramatic typography. 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, and one must be careful not to detract from the message with other competing elements.

brand

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 photograph can be made happy by using a yellow-tinted filter.

Where else have you been seeing bigger, bolder color?

This article was originally written for Sitepoint by Jerry Cao.

The author

Guest Blogger
Guest Blogger

99designs loves to share design how-to's directly from design professionals themselves. Reach out to share your thoughts, ask questions, or thank these experts for their awe-inspiring tips!

Related articles

34 red logos that are red hot

34 red logos that are red hot

When it comes to logo design, there are few colors as visceral as red. Commonly associated with fire, hearts and roses, the warm color exudes boldness, beauty and inspiration. The artist Henri Matisse went so far as to say, “A certain red has an effect on your blood pressure.” So how has this fierce color…

The fundamentals of responsive website design

The fundamentals of responsive website design

The days of designing a website for a single desktop screen are well and truly over. Technology and the expansion of mobile websites are pushing web designers to re-think how their work is displayed across various devices. Think about it: how much browsing do you do every day on your phone vs. your desktop? Enter:…

The history and meaning of blue

The history and meaning of blue

From the ocean to the sky, the color blue is seemingly everywhere. Civilizations have long venerated this color for its strong and practical applications. In the past it was a color reserved for royalty, but today nearly everyone walks around in blue jeans. Hospitals use blue on their walls for its relaxed effect, and graphic…

Current Design Contests

Designers, check out these contests so you can start building your career.