Some Strengths

In some instances a dark background allows the content to really shine and be the main focus. In others, it works in cooperation with all of the design elements to create a classy cohesive design. Studies have shown that dark colors are easier on the human eye than light ones on a computer screen.

What to look out for

When creating a design with a dark background, watch out for contrast. Too little contrast between light text and a dark background, and users may have difficulty reading content. The combination of light text on a dark background is usually by default more high contrast than the opposite. Add in the fact that web users commonly read only a fraction of the content presented on a page, and this means that typography really matters in a dark design.

Some Guidelines

To create the right balance of scan-ability and visual appeal, it’s a good rule of thumb to increase the spacing between letters as well as margins, and to use lighter-weight fonts (as opposed to bold). Subtle textures and patterns can help a monochrome color palette from feeling bording or flat, while small splashes of bright colors will have extra power for highlighting, guiding, and adding general visual appeal.

A showcase of 20 well-executed dark designs

Here are some examples of good practices in dark design:

Komodo Media

Dark background with interactive graphics

Komodo media features rich graphics which pull the eye, leading readers through the page. The light grey on the dark for the blocks of text is a good choice, as it is visible but not too distracting from the images or headings. All-in-all this website has a good sense of flow through one section to another and has a good sense of balance between the graphics and empty space. Additionally, the ‘foliage-o-meter’ is a fun interactive feature.

Matt Ooley

Background simplicity highlighting interactive content navigation

Matt Ooley’s portfolio site features a simple dark background with a nice texture which keeps it from feeling boring or flat. The variance of the slight texture with the smoothness of the navigation bar is striking, and really makes the nav bar stand out even though they are both dark. The videos are the focal point here, but the thumbnail navigation with pop-up captions can feel a bit distracting. If the motion were smoother it might be a bit more effective.

CSS Remix

Boxes with sliding captions for smooth navigation

CSS Remix’s completely flat black background is very minimal, but the wide layout of the page content- 900px where the interior of a page is usually around 700px- keeps it from feeling empty. The hover-over pop-up captions are smooth and graceful, but the white and gray might be a bit too subtle to see easily. A suggestion to make these even more effective would be to increase the level of contrast between the caption boxes and the label text. The light gray combination does work well with the assumption that the containing box has a dark or bold color, but unfortunately that’s not consistently the case.

Jason Stockman

Less is more

An interesting example of a vcard style portfolio, this site features a rich but subtle texture. The slideshow of customer recommendations at the footer is a nice feature. This might be another example, however, of how the extremely simple and low contrast color scheme might be a little too subtle. Increased contrast between the background and the text would be a bit easier to read, and a splash of color might go far to add a bit more visual appeal. It is very neat and compact however, in a good way.

Awesome JS

Eye-popping illustrations and a simple background

Awesome JS has a dark illustration-style header which is striking and unique. The graphics really make this site, with subtle interaction like the pop-up speech bubbles that work so seamlessly as to be nearly unnoticeable (in a good way!)

The navigation is very strong- it’s both clearly laid out and labelled. The simple layout, and dark buttons with black hover-overs are very effective, and the simple black icons on the right are a great addition.

Neil Nand

Animated navigation

Neil Nand features a rich dark design with interesting patterns and eye-catching animations. The layout and information architecture are clear and precise, no easy feat when incorporating such an intricate level of animated navigation. A bit more contrast might help make the scrollbars easier to find. The top-level navigation while persistent, isn’t obtrusive. The typography is pretty unvaried, however. Adding some additional styles or fonts could really help take this design up to the next level.

Aleberry Creative Group

Bold colors and block print style typography

Aleberry Creative uses bold colors and graphics, reminiscent of block printing to highlight their content. The fingerprint pattern background is unique and striking, as well as the animated loading graphic.

A small potential usability problem here, however, is that everything on the first page is clickable and interactive. This creates an expectation in the user that things will continue to be interactive, which going down a level, they don’t seem to be as much so.

Looks Like Good Design

Subtle background texture with yellow accents

Looks Like Good Design is another example of subtle texture in an otherwise simple black background. The high contrast typography could be a little harder to read for some users, but the yellow is a very nice highlight and accent color, which plays well with the darkness of the rest of the design. The static navigation bar at the bottom of the page seems to work very well in this clean, seamless layout.

Rain Creative Lab

Featuring a ‘pixel explosion’ of geometric graphics

Rain Creative Lab integrates bold typography and a geometric feel into their layout. The “pixel explosion” while an awesome and fun feature, makes both the text of the navigation and the content in the page a little harder to read. It might be better executed with a large block of black behind the navigation to help visibility.

9ko

Wide left-aligned layout

9ko features a layout which is 1300px across, which is rather edgy. Additionally, the left-alignment is a simple way to make a site more unique. The thumbnails are big enough to give a good idea of the content they link to, while the hover over captions are subtle and unobtrusive. Larger fonts throughout might be a good idea, however, as the text could be hard for some users to see. The color-coded method of organization is interesting and well-implemented.

Krispy Krush

Orange and Pink highlights

Krispy Krush’s black background and orange/pink highlights are bold and fun. There is a usability problem, however, with the breadcrumb at the top of the homepage. This is first thing a user will see, but it’s not clickable, and confuses the rest of the navigation.

Rolando Pascua

Light-colored highlights content

Rolando Pascua’s plain black background contrasts nicely with the grid of light-colored borders to do a nice job of highlighting and containing the content. The banner is really energetic, with a bright and bold logo. The block of text below it isn’t very easily scannable. If the text were bigger or used fewer words, the main point of the paragraph would be easier to see.

Esteban Munoz

Dark background with illustration-style graphics

Esteban Munoz switches up the dark background a bit with a nice gradient and illustrations. The illustrations at the bottom of the page are particularly striking. The slider at the top of the page spans the entire width of the page, making it feel unique. The image gallery is handled well and cleanly laid out. The hover-over labels might be a bit controversial, but here they are interesting and work well.

Mutant Labs

Layers of texture

Mutant Labs features a striking wooden and pavement-style textures throughout which have the effect of making the dark background extremely visually interesting.

The site’s message is clearly and concisely stated, featured at the top left of the page for maximum impact, and the illustrations featured throughout are clever and appealing. The logo in particular is very effective.

Komodo Media

Lighter pattern contrasts with dark content area

Utsikten Meetings is a bit of a twist on our theme; the texture is in the background and the flat black is in the content area of the page as contrast. The rich texture adds lots of visual interest, while showcasing the content and leading the eye down the page. While the header images are not interactive, the preview images in the gallery page are large enough to give a good sense of the page being linked to. The subtlety of the gray cursive type in the upper left may be difficult for some users to read however.

Nue Media

Photography as background

Nue Media’s dark skyline photography background is super slick. The animation effects in the slider are unusual, and the wide layout of the content section showcases the portfolio content nicely.

Brand Mango

Simple black

Brand Mango is a solid portfolio website. The dark background is unobtrusive and leaves the focus on the content. One especially strong element is the prominence of the ‘Contact Us’ button. A nice feature to include would be a pause button for the slideshow, so users could look at a piece longer, or even link to the pieces being shown.

CSS DSGN

Organizing a large amount of content

CSS Dsgn is an example of dark minimalism. The main point of the site is showcasing lots of content, which the layout does a very effective job of. The footmap is especially nicely executed, and the preview thumbnails are large and descriptive without feeling overpowering. The dimming effect on hover-over is a nice touch and adds visual appeal. Overall everything feels fluid and works well.

Inspiredology

Fun and original illustration

Inspiredology immediately attracts and pulls users in with its fun and original illustration. The point of the site is a bit less clear, with the tagline ‘Design inspiration lab’ fading into the illustration. If it were a bit larger or darker, that would help make it stand out more. The dark navy and gray color combination works well for the background, however.

Natalie Sklobovskaya

Rich details and low-contrast

Natalie Sklobovskaya’s portfolio site features rich, gothic details like flourishes and illustrations. The low-contrast text is easy on the eyes but not hard to see. The subtle hover-over effects add additional visual interest. While fairly dark, the punches of orange and pink keep it from feeling too dark.

Takeaways

In summary, some takeaways for designing a dark website.

• Be aware of text contrast- too high or too low, contrast can obscure a site’s content or purpose.
• Splashes of color add visual appeal.
• Subtle texture keeps things interesting- it’s all about the small details.
• There is more emphasis on content, so make sure you are showcasing your best.
• Keep it simple, darker backgrounds need more room to breathe.

Therefore today i have showcased 30 amazing flash sites of movies/films.

So here is the list:

1. Corpse Bride

Tim Burton’s Corpse Bride carries on in the dark, romantic tradition of Tim Burton’s classic films Edward Scissorhands and The Nightmare Before Christmas.

2. Watchmen

Watchmen: Interactive Trailer.

3. Coraline

Explore the imaginative world of the animated film Coraline.

4. Punisher War Zone

Official movie site for upcoming release of Punisher: War Zone.

5. I’m a Cyborg

6. Wanted

Official movie site for Wanted.

7. Hancock

Enter Hancock’s superhero world in this Flash EPK site.

8. Kung Fu Panda

Explore the interactive world and get prepared for pandemonium to begin.

9. The Incredible Hulk

Really nice effects with good background sound.

10. Live Free or Die Hard

DVD site for live free or die hard.

11. The Bourne Ultimatum

12. Exorcist – The Beginning

13. Identity

14. Rambo

Really nice effects and animation.

15. 30 Days of Night

Vampires love it when human lives in a town where the sun sets for 30 days.

16. Night At The Museum

Everything in Museum comes to life at night.

17. The Magic Flute

18. Smokin’ Aces

19. Stranger Than Fiction

I really like this site, clean and clear.

20. The Fountain

21. Miami Vice

22. World Trade Center

Official web site of world trace center.

23. Night Watch

24. Reflets

Reflets is a short film about a lawyer.

25. Dark Water

26. Boogeyman

27. The Grudge

28. Underworld

29. Gangs Of New York

30. Up

Official website for Disney and Pixar’s animated movie.

Resource: Favourite Web Site Awards