I can see many readers thinking, “Why would it matter? Light or dark design is just a designer’s personal preference, right?” It’s easy to think this, but dark and light design are world’s apart. Also, with the rising trend of dark website design, a closer look into the differences is needed.

Why Use Light Design?

Let’s analyze light design first. This is dark text on a light background, a very common type of web design. Using light design is also an easy way for a designer to come out with something boring.

What happened to the importance of readability everyone? A website that needs to accommodate a large audience should always use a lighter design. This is because light design is, by far, the most legible type of design.

When the screen emits more light, it’s easier to see the text — just as you can see more during the day rather than the night. Seems like a silly thing for our brain to do, but it’s undeniably true. I could go into the science behind this phenomenon, but I’ll just Jonathon Snook from Snook.ca explain:

“But the outcry against black could be heard amongst the crowd. “Hard to read”, they say. I’ve been looking at this design most evenings for a couple months now and actually found it comfortable on the eyes. Why is that? And then it dawned on me…I was always looking at the design in the evening, often working in the dark. Looking at it during the daytime with the bright sun beaming in, I actually found myself preferring the contrast mode on.” – Reboot: Light vs. Dark

When our eyes are adjusted to the dark, it’s easier to see a dark web design. However, most readers probably aren’t sitting in the dark every time they view a web page!

Dark Design

Ok, so I think the point’s been made about readability. So what’s the big deal about dark web design? It’s purely aesthetics. Most experienced web designers will scream usability over design any day, but lets consider dark design a bit closer.

To really determine if you should try out dark design, we need to answer the question, “How important are aesthetics?”

Well, they say content is king, but design is the queen. —and who says the queen can’t be of equal status? When it comes down to it, design sets a mood for he visitor. If there is bad design, the visitor won’t trust the website. If there is unprofessional design (even if it’s pretty to look at), the visitor surely won’t invest anything into it, whether it be time, a registration, or buying a product.

What is the mood-setting difference between dark and light design though? This is how dark design can be a powerful thing. The following moods can be portrayed from dark website design:

• Creativity, “Out of the Box”
• “New”, contemporary
• Sleek/Web 2.0
• Mysterious

An excellent example to use dark web design would be a web design portfolio. Creativity is obviously something that needs to be displayed, and at the same time most designers want to display themselves as contemporary and new — a person that would think outside of the box.

The Big Debate

Darren from Problogger did a poll on this topic, and just to see how many people actually preferred light backgrounds, below are the results he came up with.

Note that this image is credited to Darren of Problogger.net

As you can see, most viewers prefer light backgrounds with dark text. However, a large chunk of this population also says it depends on the blog. Below are some of the comments made by the voters.

Wrapping Up

In one of my next posts I’ll be speaking about how to achieve a more legible dark background website. So for those that think they would benefit, or just prefer dark backgrounds, keep checking back. You may also be interested in the two articles I found below.

• Light text on dark background vs. readability
• Reboot: Light vs. Dark

Do you prefer light or dark websites? What are you basing your reasoning on?

1. Add Gradients

Gradients can add a lot to web design without overpowering it. They also add depth and a modern appeal. Gradients can come in a variety of forms, too.

The example above uses gradients all over the place. From the top bar, to the logo, and throughout the various types of content. As you can see, there are different variations of gradient too. The gradients with the deepest contrast (Fallscreek, Hotham, and Hakuba) create a place for the eyes to focus.

Gradients can b added very subtly too. The above design is far from a sleek style, but gradients are still present in the logo and site title, and in various icons throughout the design.

This illustrative design uses slight gradients throughout the illustration, and adds detail with gradients to the navigation and various icons.

2. Add Lighting Effects

A technique that is sometimes similar to gradients is lighting effects. Glowing, spotlight, or other lighting effects can have a significant impact on the overall design. Again, lighting effects add depth and visual appeal, but with a bit more pizazz. These effects are often times the main feature, or highlight the main feature, in the overall design.

The above design features various gradients, but a main thing you’ll notice is the ’shine’ effect in the background. Two simple gradients, and this line have created a very realistic look for this website. On top of that, similar lighting effects were used in the featured icons.

As one can see, the main lighting effect resembles an underwater scene, and can be related to the site title. That lighting effect is complimented with the semi-transparent content area. Also notice the slight lighting effect to the logo design. Adding subtle lighting effects on top of the main effect can add a lot of appeal as well.

The background lighting effects are obviously not the only feature making this design amazing. It is a great example, though, of how lighting effects can add to any part of the design– whether it be the whole design, a logo, or in this example, an illustration. Nick La’s post, Vector Polishing Techniques, goes over these various techniques that he has become famous for, many of them being lighting techniques.

3. Use Image Detail

Many designers will create a main header or background image, and close down Photoshop for the rest of the design process. This is a huge mistake. Adding small image details to buttons, headers, and specific content areas can add a lot of detail to a design, creating more appeal and focus.

The travel website above uses image detail in various spots. For example, the navigation, menu background, borders, and even the submit button for the the search bar.

The above is a great example of how blog design can benefit from extra detail. The design above features a lot of whitespace and is very simplistic. The extra detail on the post date, comment icon, and color added to the active navigation element in the above screenshot already adds so much. If you visit the site, you will also notice details in the search bar, other navigation elements, etc.

This design adds image detail to the headers, a very common and effective trick when using this technique. One will also notice icons and unique borders used throughout the design. The footer border is also very colorful, creating a great separation point.

4. Declutter and Add Whitespace

This doesn’t necessarily mean every design should resort to the minimalistic style. Any design style should pay attention to the amount of whitespace present in the design. Also decluttering or removing any content or elements that are not needed in the design will help bring attention to the elements that are really needed– as well as leave more room for whitespace.

The extra spacing throughout the design aid in the visual hierarchy. One of the first components the visitor’s eyes are lead to is the navigation area. This area has a significant amount of whitespace around it. As I stated in A Guide to Simplistic Web Design, whitespace frames whatever it is around, and adds focus to the internal elements.

Be sure to consider spacing between the large, main components in the design as well. Drastic spacing between the content, logo, and navigation bar remind the visitor that they are separate entities, and allow the visitor to focus on each individually.

For websites that require a lot of content on the front page, even when decluttered, a smart use of spacing between paragraphs, headers, and images can create a content-heavy site that doesn’t look too busy.

5. Add Dynamic Effects

Most websites aren’t ready to enter the world of 100% flash, but adding smaller dynamic effects with, for example, jQuery, can create a sense of professionalism and aesthetic appeal that is bound to amaze.

There are a number of ways a designer can add a dyamic feel to a design, but because JavaScript is the most common way to do this, here are a few well-known techniques that are used.

jQuery Tabs

Carousels

Flash-like Menus

Lightboxes

Fancy Forms

What are some of your techniques?

Please share some of your own techniques with design, or share if any of the above techniques helped you out!

Define Minimalism

To start, think about what makes a website the opposite of minimalistic: A lot of color, images, shapes, and not enough whitespace. Also think in terms of content. Simplistic web design also strips the design of unnecessary content, so what a visitor does see, is what the visitor needs to see.

By subtracting the unnecessary elements in a web design, we create more meaning to the remaining pieces. What are those remaining pieces? Portfolio pieces, blog posts, a resume…you name it, it’s important.

Typography is a #1 Priority

Let’s think about what we do need in simplistic web design. Content, content, content. The number one way to dress up content is in the form of typography. Paying special attention to typography in simplistic design can create great aesthetic appeal by adding minor detail like italics, serifs, and defining spacing and proximity.

A List Apart features one of the greatest examples on the web of typography. It is obviously a very basic and minimalistic design, featuring black white, gray/beige and orange. The only image that is used in the logo, which is also minimalistic, and the majority of shape on the design is rectangular.

Looking closer at the design, we can see that the designer spent a lot of time thinking about typography. They first thought about the size of the headers, paragraphs, navigation, etc. relative to all other content. Then, color came into place. Notice how the brightest color on the page, orange, highlights the titles of fresh content.

There are other ways to highlight content with just typography. Bolding, italicizing, size, and font change all come into play. Using correct hierarchy in typography is also a must, so pay attention to proximity and spacing as well.

Boring Color? No. Little Color? Yes.

Many designers want to spice up simplistic web design with bright, interesting colors. However, as a general rule of thumb, a simplistic design should not use more than 2 colors in the actual design. This is because pops of color creates strong contrast, opposed to weaker forms of contrast like change in shape or size.

Janic Design uses two contrasting colors: green and orange. The rest of the design is variations in gray, and uses contrast to get the point across. Also notice that the bulk of the design are in these grays. Those bursts of color lead the eye to what is most important: logo, navigation, and portfolio content.

The only other colors in the design are in the portfolio pieces themselves, leading the eye even more. This strong contrast in color and style creates a design where the visitor sees the portfolio pieces first; this is a great goal for any designer making a portfolio.

An Effective Use of Whitespace

Whitespace is often overlooked as such a big part of web design. Ever wonder why adding a bit of margins on the side of a layout makes it ten times more appealing? Whitespace frames whatever it’s around, meaning side margins frame an entire layout. This gives focus to the whole design.

Experienced designers know how to take the knowledge a bit further. Using whitespace to properly frame headers, intro text, content, and navigation can make for a more effective layout. A good designer knows how to influence their audience with their design, either to read the content, donate money, make a sale, or leave a comment. Whitespace is one of these biggest influences.

Whitespace is not only used to frame, but to also create a sense of feeling. The more whitespace there is, the lighter it feels, and the more luxurious it is. Luxury can be compared to professionalism, high-quality, and high-price.

The image above is from a very informative article from A List Apart: Whitespace. Mark Boulton goes into what exactly whitespace is, how to use it effectively, and a walkthrough of basic practices when working with whitespace. I highly suggest everyone read the article completely through:

• Whitespace by Mark Boulton

What do You Think of Simplistic Design?

Share your thoughts, practices, and tips on simplistic design.

How do you use whitspace in design?

Do you have any special Typography tricks?

How important do you think color is in minimalistic design?

I’ve collected 50, relatively large and high-resolution textures created by humans in some way, under the categories of fiberglass, packaging, rubber, Styrofoam, tape, electronics, tile, concrete, brick, signs, and graffiti. With such a wide variety of form man can make, using these textures to create art is only a small step away.

Splash pages are often thought of as ‘pretty little additions’ to a website, but not thought of more than that. One should look closer, however, and truly examine the benefits or deficits of splash pages, before just throwing one on a website.

Why does one need to think closely about this? Many new webmasters don’t realize how big of an impact a splash page can have on an entire website. This impact can be good or bad, depending solely on how, and why, a designer uses a splash page.

For those planning on building a portfolio for the first time, an important initial step is to understand the basic components of this type of website, and why each are important. By understanding what’s needed, a designer can then work around these core features to create the unique and visually appealing design they need to get noticed.

Here are 5 major components of portfolio designs to help a beginning web designer get started on the right track.

Sometimes we get lazy from time to time, but still need to get some website work done. Fortunately, there are thousands of tools to help designers, with some being more beneficial than others. Here are 5 of the best tools for web designers I’ve found so far.

They deal with a variety of topics covering typography, colors, navigation, layouts, and dummy text. Hopefully these tools can also help a lazy designer find the first small step into getting back into the designing routine.

Grunge design is very popular right now, but can only be implemented with the correct resources. A design may need brushes, textures, fonts, the correct colors, and a set of tutorials to pull off a variety of effects.

Here are 35 excellent grunge resources for anyone to use. For more information on how to create a grunge-style website layout, visit Webitect’s tutorial: Grunge Web Design Tutorial.