The dark background is a design element frequently used as a stage to highlight content in the center of a page. Overused a bit in the past, they are starting to make a comeback, appearing in many more recent designs.
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.
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:
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.
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.
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.
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.
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 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.
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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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.
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.