Friday 31 January 2014

The Do’s and Don’ts of Dark Web Design

Dark web designs are very popular and can have an elegant and creative appeal.
They are also perfect for many types of client work however, they are not suitable for every website and should be used only when appropriate.
In spite of the striking visual impact that these dark designs can have, many designers don’t know how to effectively pull them off without turning off the visitor.
With a dark design comes less readability, less appeal for most readers and less opportunity for conventional design elements.
In this post, we’ll discuss a few tips to make your next dark website design appeal to a broader audience, while letting you, the designer, express your creativity.
recent poll suggests that light designs are preferred by the general web-going audience by a whopping 47%. The main reason is readability. Most people don’t like viewing light text against a dark background on websites because it strains their eyes, making for a much less enjoyable experience.
By contrast, 10% of those surveyed said that they always preferred dark backgrounds for websites, while another 36% said that the best choice would depend on the type of website.
So, what’s the right answer? When it comes down to it, everyone has their own opinion, and that’s that.
But with such a large percentage of users saying that dark website designs are tolerable and sometimes even preferred, we as web designers have to learn how to create effective dark designs for ourselves and our clients.
This means convincing all of the true believers of light backgrounds that dark design can be more readable and user-friendly.

Use More White Space

Or should it be called “black space”? Effective use of white space is important for any type of design, but it is essential for websites with dark backgrounds.
Dark designs have a tendency to feel “heavy”, and cluttering them up can reinforce that feeling. Take a look at some popular dark web designs below, and note their liberal use of white space to great effect.
Black Estate is seen all over the Internet in dark web design showcases. It is indeed a beautiful design and worthy of all the attention. A great deal of white space is used throughout the design, and what makes this particular design unique is how the white space is used to outline certain elements so efficiently.
The logo has a lot of white space around it and is the first thing we see as visitors. We see the main content and bottle on the right next. As you see, white space is used perfectly to highlight the text on the bottle and the headline of the main content.
BlackEstate

The featured content in Tictoc and accompanying image in this design are framed with the most white space. As we move down, we see less white space, which makes us pay attention to the content being shown.
The point here is that white space gradually guides the user down to the end of the page.
The dark background adds depth to the design. Because the website relies so heavily on white space, it would be less interesting without the creative effect of the dark background.
TicToc

The Mark Dearman website has liberal and evenly distributed white space throughout its layout.
The white space framing each portfolio piece provides plenty of breathing room for the content it holds, and it is a nice resting point before moving on to the next piece.
Plenty of white space is essential to dark designs because it aids not only in de-cluttering the layout but in framing important elements and adding elegance to the overall look.
MarkDearman

Textual White Space

Because readability is the number one concern of those who dislike dark backgrounds, designers must pay extra close attention to the text itself.
Just as in the overall design, one way to improve readability on dark websites is to increase the white space by adjusting paragraph size, kerning and leading.
The example below shows what a difference the spacing between and around characters makes in comparing dark and light layouts.
Text White Space

Another way to improve readability in dark web designs is to increase the font size. Like most of the other rules in this post, larger font sizes mean more white space. The bigger the letters are, the more white space will appear around and within each letter.
For example, the letter “a” below gets more white space as it gets larger, both in the area around it and in the space inside the a’s enclosure and under the overhang.
Note how reading small text is so much easier on a light background than on a dark one. When setting the typography for a new website, be sure to look at some dummy text to make sure it is legible. If not, see if increasing the text size helps.
Text Size Matters

Text Contrast

Many people would agree that the most poorly conceived dark websites cause eye-strain. Too much or too little contrast is usually the culprit. How does one find the perfect balance?
If you are in a room that is pitch black, suddenly looking directly into light is not pleasant. But looking at a less bright light in a less dark room is just fine. The same principle applies to web design.
Finding the perfect contrast means balancing the darkness of the background with the lightness of the text.
Below is a (very) rough guide that shows how contrast between text and background works. One notices that as the background gets lighter, so does the text.
Finding a pleasant contrast for text is much more difficult with a pure black background.
To find the perfect balance, experiment with different shades. The best result is usually a background that isn’t pure black and text that isn’t pure white.
Text Contrast

Dealing with Fonts

Fonts plays a big role in design and should definitely be taken into thoughtful consideration with dark layouts. The image below shows a 14 point font on a dark background in both serif and sans-serif fonts.
The sans-serif font is obviously more legible. But many designers still choose serif fonts for their elegance.
The trick, though, is to put only larger text in serif fonts, so that the extra white space floods around each character and makes the text very legible.
Font Choice

The screenshot below is of a website discussed earlier in this article. It features both serif and sans-serif fonts, but uses them in a smart way.
Larger text, such as headlines, navigation and headers, is in a serif font for added elegance. For better contrast and improved readability, the body text is in a clean sans-serif font.
Serif and Sans-serif

Use Minimal Color Schemes

To give their dark designs a clean and uncluttered look, designers should always opt forminimal color schemes.
From the few examples below, we can see that busy color schemes really get in the way of dark backgrounds, because the contrast is too sharp.
Stick to one or two colors. To add more color, try a dark-colored background.
Color

Granted, many dark web designs have more exciting color schemes. So this rule is often broken, but only with the right techniques.
In general, though, color is often what makes a website look too busy. Because darker websites already have depth, use color with caution.

Offer a Style Switcher

While we have many good practices at our disposal to make dark web designs more appealing, no amount of effort will satisfy every user.
Be sure to include a style switcher, so that users ultimately have the option of viewing dark text on a light background.
Two style sheets are required for this, one for the default dark layout, and one for the alternative light layout.
SitePoint has an excellent tutorial on this: Build a Simple Style Switcher in CSS. Instead of using the “orange,” “blue” and “white” versions in the tutorial, just use “light” and “dark” style sheets.

When Dark Web Design Works Best

As stated, a large proportion of web users believe that a dark web design could work for certain types of websites. But the study is vague on what exactly these types are.
Generally speaking, dark works best for creative or elegant designs. For modern sleek websites, dark backgrounds add elegance. For grungy or hand-drawn styles, dark backgrounds enhance the creativity of the layout.

Elegant Dark Design

Dark can be deep, authoritative and strong, and often looks elegant when used appropriately. Here are a few examples and some techniques for bringing out the elegance in a dark design.
The website for Larissa Meek has a simple vintage-style pattern in the background, setting an elegant tone. Other quirkier features add a personal touch to the design.
This technique can be used for many kinds of websites. Vintage or classic patterns and textures can create a look that is both elegant and age-appropriate.
Most of us associate vintage patterns with high class, so creating a high-class website in this way is easy.
Larissa Meek

Depth Core has a very clean design, with a dark background that adds style and class. A sense of authority is also evident in the design. This elegance may also make a designer’s portfolio work appear more valuable as a result.
Note that this design has no texture or images other than the portfolio pieces and logo. Otherwise, the design would have been far too busy; as it is, the content is knit together well.
A good process to follow is to add essential content first and then bring in design elements as needed. The designer can then pause and reflect as each new element is added, making sure the layout is not being over-powered.
Depth Core

Just as artwork can appear more valuable in an elegant design, so can products. A dark and sleek design, like Tapbots and so many others, helps showcase the product being sold.
The design reflects the device itself, with its gradients and lighting effects; some designs even mimic the texture of their high-tech products.
Tapbots

Creative Dark Design

Beyond just appearing elegant, dark website designs can also elicit more emotional responses than standard light designs, making them ideal for creative projects. Let’s look at some examples of the kinds of creative designs that are possible.
The site below has very little content but has a unique layout and dark colors for depth. Dark backgrounds are perfect for websites with very little content.
And because they require more white space, the designer has more room to work with.
Inca

Grunge web design comes in many forms, and because grunge is “dark and dirty,” dark backgrounds are one of those forms.
Dark grunge designs like Trozo seem to break all the rules: busy textures, crowded layout and a wide range of colors. And yet this website still works. How is that possible?
With so many messy elements to work with, grunge design can be tricky for beginners. What makes this one work is its organization.
The background has clearly laid-out blocks that guide the user’s eye and help divide the content into manageable sections.
Secondly, it has a ton of white space. The background may be textured, but the repeated pattern is seen by the user as white space, helping to lighten the design.
This white space is most apparent to the left of the logo, under the navigation and along the right side.
Even between “Exhibit 01″ and “Exhibit 02″ is more white space than one would usually find on a website like this.
The white space evens things out, even though it doesn’t look like white space because it has texture. The minimal text and few sections (only three) also contribute to this appearance of simplicity.
Trozo

The design of Drew Wilson definitely breaks the rule of using minimal color. It still works, though, because the brightly colored header is one of the few features in this sparse design, so nothing over-powers it.
And the dark background makes the header appear even brighter and more extraordinary.
Dark backgrounds are often used to make lighting effects and bright colors stand out more.
Such designs are a wonderfully creative exception to the rule of minimal color. But the rule should be broken with caution: avoid distracting gradients, textures and color further down the page.
Drew Wilson

Wrapping Up

Dark backgrounds give an elegant and creative feel to web designs, making them perfect for some portfolios, but they’re not suitable for every site.
For larger websites, especially ones for people with visions impairment and other disabilities, dark designs are a no-no, even with a style switcher.
Hopefully when the time comes that you need to design a website with a dark background, these tips and strategies will help.

5 CSS3 Design Enhancements That You Can Use Today

Cascading Style Sheets (CSS) is the language of Web design, and the next generation of CSS design properties are just chomping at the bit to be released.
Are you eager to start using them, but don’t know where to start?
Although many of the new properties are not yet “official”, some browsers have already implemented many of the features of the coming CSS Level 3 specifications.
The problem is that many browsers—most notably Internet Explorer—have not.
The trick to using these new CSS3 features is to treat them as design enhancements.
A design enhancement (which I discuss in my new book Speaking In Styles: The Fundamentals of CSS for Web Designersis any flourish you add to your site designs that increases its visual appeal without diminishing its usability if the style is not rendered.
This can be a tricky call, with there being a fine line between enhancement and not diminishing usability:
  • Design Enhancement Example: Using border-radius to round box corners, creating a more appealing design. However, if the corners are not rendered, the site is still just as usable.
  • Example of Design Diminishing Usability: Using an RGBA color value in the backgrounds of overlapping elements that all need to be visible, expecting the upper elements to be semi-transparent. This will make it impossible for some people to use the site, thereby diminishing the page’s usability.
Let’s take a look at 5 different CSS3 properties that you can start playing with right now, provided that you always keep in mind that they should only be used to enhance your design, and not be relied upon for site usability.
This is the original design, before applying any CSS3 design enhancements
1-original.jpg

1. Transparent Colors

Supporting Browsers: Apple Safari 4, Firefox 3.0.5, Google Chrome 1
RGBA allows you to control the opacity of a particular color fill, whether it is for text, background, border, or shadow colors.
Setting the color transparency requires you to specify the color value using RGB notation—hexadecimal values are not allowed—with an additional A value being from 0 (transparent) to 1 (opaque).
rgba(0-255,0-255,0-255,0-1)
You should also include a simple RGB, or hex color value as a fallback for other browsers to use:
.topbox {
color: rgb(235,235,235);
color: rgba(255,255,255,0.75);
background-color: rgb(153,153,153);
background-color: rgba(0,0,0,0.5);
border-color: rgb(235,235,235);
border-color: rgba(255,255,255,0.65);
}
The good news is that there is also a fallback solution—at least for background colors—in Internet Explorer, which supports transparent colors using a filter and conditional styles:

Note: Due to the fact that WordPress could not display the above code in the content of this post, it has been included as an image, therefore you will need to type this code manually.
2-color.jpg


2. Rounded Corners

Supporting Browsers: Apple Safari 3, Firefox 1, Google Chrome 1
Border radius sets the curvature of each corner of the box, as if there is an imaginary circle on the corner with a specific radius (r):
border-radius: r;
Although border-radius will be a part of the coming CSS3 specification, both the Mozilla Project (Firefox) and Webkit (Safari and Chrome) implemented their own versions which have to be included for maximum cross-browser compatibility:
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
You can also set the radius for the corners individually:
CSS3
Mozilla
WebKit
border-top-right-radius
-moz-border-radius-topright
-webkit-border-top-right-radius
border-bottom-right-radius
-moz-border-radius-bottomright
-webkit-border-bottom-right-radius
border-bottom-left-radius
-moz-border-radius-bottomleft
-webkit-border-bottom-left-radius
border-top-left-radius
-moz-border-radius-topleft
-webkit-border-top-left-radius
border-radius
-moz-border-radius
-webkit-border-radius
3-borderradius.jpg


3. Text Shadows

Supporting Browsers: Apple Safari 3, Firefox 3.0.5, Google Chrome 1
Add a shadow underneath any text, controlling the left/right and up/down offset, as well as the color:
text-shadow: x y blur color;
You can combine the text shadow with a transparent color to control the darkness of the shadow:
text-shadow: -2px 2px 10px rgba(0,0,0,.5);
You can also include multiple text shadows just by repeating the values separated by a comma:
text-shadow:   0 0 10px rgba(0,255,0,.5), -10px 5px 4px rgba(0,0,255,.45), 
15px -4px 3px rgba(255,0,0,.75);
4-textshadow.jpg


4. Box Shadows

Supporting Browsers: Apple Safari 4, Firefox 3, Google Chrome 1
Adding a drop shadow to any box on the screen follows the same format as adding a text shadow:
box-shadow: x y blur color;
Just like text-shadows, Mozilla and Webkit have implemented their own vocabulary in advance of the final CSS standard:
-webkit-box-shadow: 0 0 10px rgb(0,0,0);
-moz-box-shadow: 0 0 10px rgb(0,0,0);
box-shadow: 0 0 10px rgb(0,0,0);
You can add multiple shadows just by including multiple values separated by spaces:
-webkit-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45), 
15px -20px 20px rgba(255,0,0,.75);
-moz-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45),
15px -20px 20px rgba(255,0,0,.75);
box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45),
15px -20px 20px rgba(255,0,0,.75);
5-boxshadow.jpg


5. Multiple Backgrounds

Supporting Browsers: Apple Safari 1.3, Google Chrome 1
Including multiple background images in a single element simply requires additional sets of values to be added to the background properties, separated by commas. You should include a single background image as a back-up for other browsers:
background-image: url(astro-127531.png);
background-image: url(astro-127531.png),url(Hubble-112993.png);
background-repeat: no-repeat;
background-position: bottom left;
background-position: bottom left, top right;
6-multiplebackground.jpg


SPECIAL BONUS

Rotate Anything!

Supporting Browsers: Apple Safari 4, Firefox 3.5, Chrome 1
Although not even a part of the CSS3 specification yet, Webkit has implemented its own transformation property, which Mozilla is following suit with. Transform can include a number of different value types, but one of the most intriguing—and useful as a design enhancement — is rotate:
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
7-rotate.jpg

Appearance as seen in browsers that do not support CSS3 (e.g. Opera 9)
8-nosupport.jpg