in Design

A Study Of Effective Black And White Web Designs

The majority of website designs incorporate striking and dynamic color schemes, and we all know the reason why: websites are supposed to grab attention immediately and entice visitors to keep clicking and scrolling. Vibrant colors, unusual color combinations, or even high contrast monochromatic color schemes are sure to be intriguing and memorable. Fortunately for those of us who hate living inside the box of society, there are a few brave designers who have defied the colorful World Wide Web and succeeded in creating very effective black and white website designs.

Some of my favorites (and hopefully soon to be yours as well) I have listed below, along with my thoughts on what seems to make each black and white web design so stunning. Read on, be inspired, and maybe even try your hand at a black and white website. Who knows? It could be your own Mona Lisa.

Selective Perspective Detective Objective

This QR find and seek game website is done entirely in black and white, which is completely appropriate for the subject. This QR game from What Cheer’s involves searching for, finding, and then scanning the black and white target with your smartphone. The black and white text and graphics in this design reinforce the look of targets.

Apo

So, this is one website that fits into the (mostly) black and white category. I have included it because of the fact that above the fold, the design is entirely black and white and quite eye-catching even without the lack of color. The digital symbols in the corners and simple black text off-center draw attention easily.

Design by NewConcept

Sometimes a black and white website needs a stunning photograph in color to make the design work. The best part of this design is how every element flows with the “Beautiful & Effective” concept. The font – and especially the ampersand – is stunning and the close up of the butterfly’s wing reveals the tiny details that go into making a design work.

Hush

The little black and white character, complete with texture, is so adorable, it would be hard to resist scrolling down to see more. The diagonal lines that border the page as well as the ribbons for headings are just a few small but important elements that make this black and white design come together.

Almanac

An interesting texture can really make a background pop, and this one certainly does the trick. Another nice element is the way the navigation circle icons light up when you hover your mouse over each one.

Nordkapp

What better way to make your business more personal than with a photo of your staff placed center stage on the home page? The brilliant part of this design is that the photo is in black and white. Not only does the photo match the rest of the site’s color scheme but also it makes the photo less “in-your-face-and-kinda-creepy” and more “sincerely-friendly-and-rather-endearing.”

Studio No. 1

For portfolio blogs, maintaining the color on projects is important, but who says you can’t go black and white on the rest of the design? The dotted border at the top adds a little texture to an otherwise plain background. Plus the dots reinforce the look of the logo with the “O” in “No.” shaped like a dot.

Mobel Design

The black leather background, complete with stitching, on this furniture design website perfectly matches the nature of the company. Plus, it is an excellent way to make a black and white design stand out.

International Watch Co.

Although almost all of the pictures are in color, all are done in dark colors or shades, which make them appear black and white at first glance. Another captivating feature to this site are the page links at the top that have drop down arrows – hover your mouse over one of these and the entire page moves down to accommodate another menu. The menu underneath “Collection” includes pictures of each watch collection.

Aker Brygge

Sometimes a black and white design is the best choice in a color scheme so that the main content (in this case, photos) remains the focus. The white background with simple black text throughout the site ensures that the photographs take center stage.

Marshall Headphones

Once again, the photographs are in color, but the main content of this website are in black and white. The interesting part of this design is that the title on the site is the inverse of the colors of branding on products, while many of the subheadings are the same as on the products: white text on black background. Very clever!

Toronto Standard

Just like most standard print newspapers, this news website design includes black text on a white background, while pictures remain in color. The entire layout reinforces this news feel with the date in the top left corner, nameplate on the “front page,” and the featured stories front and center.

Each of the examples above prove that a black and white website can be just as memorable and attention-grabbing as their colorful counterparts, but they also prove that you have to be smart in your black and white design. In the most effective B&W websites, the designer has incorporated an interesting element, an unusual texture, or a clever layout to enhance the color scheme. Black and white is not dull if done well; in fact, a black and white website should be one that stands out from an online sea of color, a beckoning beacon that let’s us know that not everything needs color to be interesting, artistic, and down-right powerful.

This is a user submitted article by Tara Hornor.

Tara Hornor has a degree in English and writes about marketing, advertising, branding, graphic design, and desktop publishing. She works for PrintPlace.com, an online printing company that offers postcards, posters, brochure printing, business cards and more printed marketing media. In addition to her writing career, Tara also enjoys spending time with her husband and two children.

Bogdan

Bogdan is the founder of Top Design Magazine. You can find him in Bucharest-Romania so next time you want to drink a beer there and talk about web and stuff, give him a message.