Effective Website Designs with Dark Color Schemes

Not everyone can pull off a dark color scheme, especially for a website design. Going too dark results in a barely navigable site. You also run the risk of being too edgy, too depressing, or even too boring.

The best websites with dark color schemes seem to include common elements and techniques for making the design work. High contrast, the perfect amount of textures, and knowing which fonts need to be light and which can be a middle hue all seem to be a part of the effective use of dark colors in websites. The following sites have done an excellent job of balancing the use of dark colors in their design. Take a peek to see what seems to work for each of the websites below, and maybe gather some ideas for your own darkly colored designs as well.

Element Gallery – Coming Soon Page

Element Gallery – Coming Soon Page

This “Coming Soon” page for Element Gallery has been made to look like a chalkboard scribbled with an ideas map. The designer used light colored fonts for the main text for standing out from the dark background. The less important text is a light grey color, less noticeable but still easy to read. The chalk texture on the fonts is incredible!

Natalie Sklobovskaya

Natalie Sklobovskaya

Natalie’s use of smoky texture on her dark background makes her name in the upper left stand out very well. The different shades of grey blend well for a nice monochromatic design, and red and white fonts are used to make important text stand out.

Starbucks Coffee at Home

Starbucks Coffee at Home

Another chalkboard design, Starbucks’ Coffee at Home website makes use of beautiful illustrations and typography to create a relaxing experience that also coincides with the main brand. The use of illustrations as navigational tools makes for a very unique design.

Dust and Mold

Dust and Mold

This website does an excellent job of using contrast to create a memorable design. The wavy lines of the dark background, the light blue illustration for the header, and the white text all contribute to a very clean design. With only the bare minimum included in this design, it is definitely in the category of minimalism.

Riffs Music Academy

Riffs Music Academy

While there does seem to be a lot going on in this design, the silhouette illustration on the dark background is quite original. The header also stands out well with the use of an interesting font and light blue and white that contrasts well with the background. Plus, the consistent use of color throughout makes navigation quite simple.

Isaac Zakar

Isaac Zakar

The graphic in the center of this web page is phenomenally eye-catching. The clean design along with minimal use of color makes for a very pleasing browsing experience. Plus the texture on the background adds depth to the entire design.

Dead Metropolis

Dead Metropolis

While the scorpion illustration with the audio cord for a tail is quite impressive, the most memorable part of this site are the audio cords that drop down when hovering the cursor over the links in the navigation bar. The cord stays above the link for that page you are currently accessing.

Krista’s Creations

Krista’s Creations

The “Welcome” font fits nicely with the brick background, and the elegant script font used for the header contrasts nicely with the grunge of the rest of the design. Interesting details and contrasts such as these always make a site much more interesting.

Osvaldas.info

Osvaldas.info

Osvaldas has a new, much brighter site design now, but this old version is still accessible from his new one. The illustration in the center is gorgeous, and it is made to look like it is greenery trying to grow out of a slab of cement. The light grey scribbled text is a nice touch as well and looks like someone used chalk to write on the concrete.

Esteban

Esteban

The minimal use of colors on this site could be considered boring, except that the illustration along the lower section of the page is quite interesting. Keep your mouse still, though, because it moves with the cursor! Also, the slideshow in the top center and right of the page keeps attention quite well.

Blue Collar Agency

Blue Collar Agency

The grey wood texture on the background that seems to disappear in the dark is quite mysterious, but what really is captivating is the animated story that repeats on the home page. Each part of the animation uses 3D typography and objects (such as the footprints that appear and the work ticket that unrolls) to explain what Blue Collar Agency does. Very creative indeed!

Drift Boys

Drift Boys

This website uses a comic book approach to its design. The dark background, comic-like characters, and title and action words in red really makes the design look quite like a page out of a super hero novel.

Indigo Web Design

Indigo Web Design

James Childers

James Childers

A very minimalistic design, this website does an excellent job of creating almost an office look and feel, as if you’ve stepped into an executive building rather than just opened a web page. The textured “wallpaper” and blue “paint” make this page look just like an office wall.

Cleopatra Hair Extensions

Cleopatra Hair Extensions

The textured, dark background along with the gold header and photo of a model dressed in a goddess-like gown all fit nicely to create a “Cleopatra” feel on this site. The only drawback is that the slideshow next to the large, main photo creates too much clutter.

James B DJ

James B DJ

The sexy model with streaks of multi-colored dance lights behind her gives this site the electricity needed for what would be an otherwise boring design. The navigation bar separating the header from the rest of the site is perfect for making it a very usable design.

D.S. Higdon

D.S. Higdon

The logo at the top is very classy, and the snake illustration is quite eye-catching. This web design does a great job of using just the right shades of grey to lead the eye around the page.

Pixel Crayons

Pixel Crayons

Hover your mouse over each of the speech bubbles to make color appear in the graphics and the bubble float upward. The greyscale photograph of a city for the background is an ironic touch to a webpage for Pixel Crayons.

Drew Wilson

Drew Wilson

This website is designed a bit differently than the rest with a menu bar that rests along the bottom of the screen, rather than the top. The rest of the design is quite simple with a twitter feed at the top and blog posts below in a single column. The best part of this site, though, is that the text lights up like shining stars when hovering the mouse over each twitter entry or blog post.

George Lazaros

George Lazaros

This classy website uses faded close-up photo of a disco ball or possibly a strobe light. The slideshow in the center of the page adds interest and quickly shows in pictures Lazaros’ resume of sorts. The choice of font and colors make the text stand out very well from the background.

About the Author:

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 brochures, posters, postcard 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.

Enjoyed this article? Subscribe to read more like it

 

Sponsors