The current landscape of color in website design is interesting to think about. Most websites look more or less the same, yet color can be a powerful tool in design.
I’m not trying to state this as anything revolutionary or as an extraordinary find. But if most websites have similar color schemes, what does that mean for color? Actually, it means a lot. Imagine a world where every website was colorful – it would possibly be very pretty and rainbow-filled but it would mean that nothing stood out. It’s like having every paragraph bolded in your essay.
Therefore, when color schemes are muted, it allows for many opportunities.
Draw Attention to Anything You Want
Most websites start with a basic grayscale look – white background and black text. Color comes in as accents that get you to look places. That’s why websites are not filled with color – they use it to get you to look at the buttons, headlines or links.
Take Vibrant, for instance, when you first land on their home page the background and images are black and white. The logo, call to action and the hamburger menu are bright yellow. They stand out and grab your attention quickly.
Another example is Takeit; when you first land on their home page you’re greeted with a big blue background. However, everything else is white. The big headline that’s front and center is also the center of attention. Shortly after your eye notices the smaller but still noticeable App Store button. And that’s how color can guide a user’s attention.
Create Personality
Color is wonderful because it can set a tone and mood for a website or brand. Beagle is a service for creation project briefs and their site starts of with lighter earth tones. As you scroll down their homepage you view pleasant shades of brown, charcoal, green and even pink. The earthly tones look professional and elegant making for a great impression on behalf of the company.
An Interesting Day is a website designated to “a weird, one-day conference on a tiny island in the Oslofjord.” You most definitely get a sense of weird and different when you red background with red text on top of it. It’s not something we see everyday. It looks great but most importantly the color scheme conveys the “weird” personality of the event clearly.
Make a Grand Statement
Making a statement through color can be really fun. You have to make sure that the color stands out and grabs the attention of the user. That’s easy. But it also has to be a good color choice for the statement being made. You can’t just pick any neon color, it has to make sense for the overall purpose of the page and its look and feel.
Take the landing page for Gaga Symphony. When you land on their site, you’re struck with a bright pink background. It’s not something you’d expect of a symphony. Instead, you’d expect calmer colors as symphonies are considered more elegant. But, not this one. The Gaga Symphony is vibrant, fun and creative. Therefore, the hot pink makes sense.
Provide Cohesion and Flow
Color can also be used to guide a user along with a flow. It’s exactly like guiding a user’s eye like in the above example of Takeit but less drastic. Color can be subtle and there doesn’t need to be dramatic or over the top in order to help guide a user along. It’s especially helpful when the hues are cohesive among each other. It’s basically how brand colors work.
Take Marvel or Dropbox. Both of these apps have great color schemes that are predominantly blue. But you see other colors in their graphics like green, orange or red that fit well together; it’s like they make sense.
These two color schemes help guide users along as they scroll down the pages making for a cohesive and pleasant flow.
A different kind of example is Innovation Project Canvas. They use the color green to guide a user along their page while scrolling. You don’t need many colors in order to create a great looking flow; it’s achievable with a single color as well. Innovation Project Canvas does a great join in guiding the user with just their green.
Color in Images
An interesting trick with color is when you use it through images. UI elements are not the only ones that can add some color to a website. With the rise of photo background and big product photos on landing pages it’s a good idea to try to use the composition of images to bring color to your designs.
CartoDB is an app that help you visual location data. What better way to show off how great their service is than by showing off a beautiful map? That’s exactly what they do at the top of the home page. It’s a brilliant way for their product to speak for themselves while adding visual interest – and color – to the page.
Speaking of product that speak for themselves, ETQ too let’s their shoes outshine their UI. The website is fairly minimal in its style which extends to the color scheme as well. They put focus on merchandise instead. Although not all of their shoes are colorful like the one in the example it still goes a long way to let the shoes be the biggest course of color in their design. It truly allows the shoes to stand out.
Who Needs Color Anyway?
It’s interesting to see websites without color, too. Sometimes you don’t need it. Websites can still be gorgeous without reds, greens or blues. Grayscale color schemes can create the necessary look and feel for a brand as well as make a statement.
Visual Soldiers does just fine, sans colors, just like Tomasz Wysocki’s portfolio. Both sites have a certain elegance to them. They grab your attention because of an overall lack of color. You’re looking for some slight hint of blue or green on a CTA or a link but it’s not there. And that’s okay. The lack of color is part of these two site’s brand. They both are stylish and look great in just black and white.
Conclusion
As you can see color is powerful. Color can do a lot of things for a design if you let it; color can guide a user’s eye, help guide a user through a flow as well as make a grand statement. Color is full of personality and can be fun to work with. Personally, I think color, or lack thereof, gives life to a design. So have fun with it!
One Response