Web Design from Scratch

Issues Surrounding Background Music

You should be aware that background music that automatically starts playing when a web page is loaded may not be appreciated by a large number of your visitors. Some of them, when greeted with the sudden blaring of music from their speakers, may immediately hit the BACK button of their browsers. This may occur even if you’re playing a piece of music that you think is well loved by everyone: remember, there are people who surf the Internet in public libraries, at work, or in the dead of the night when others are asleep. Others may already have their favorite piece of music playing on their computer speakers, and your auto-playing music file will only cause them to be annoyed.

Even if you are satisfied that your website has the type of target audience that will enjoy your background music, there are alternatives to automatically playing music that you might want to consider. For example, giving visitors a link which they can click to play music would allow you to showcase your music while remaining sensitive to your visitors’ preferences.

Common features of Today’s Websites

The great sites above share the following design features:

• Simple layout
• Centered orientation
• Design the content, not the page
• 3D effects, used sparingly
• Soft, neutral background colors
• Strong color, used sparingly
• Cute icons, used sparingly
• Plenty of white space
• Nice big text

Let’s look at these features one by one.

Simple layout

It feels like we’re seeing more simple 1- and 2-column designs than in previous years.

The overall feel you get is that designers generally agree that simple pages work better.

These pages read in a straightforward way from top to bottom, and you don’t find your eye skipping around trying to work out what to look at. It’s a much calmer and more solid browsing experience.

Centered orientation

The other thing you notice about all the hot picks above is that they’re all laid out around a central axis.

Whereas a couple of years ago, you’d find a lot of liquid layouts and left-aligned fixed-width layouts, today content goes in the center of the screen.

Left-oriented layouts are much less common than they used to be.

Also, liquid (full-width) layouts are less popular.

The wisdom has always been that we should try to get as much information “above the fold” (i.e. visible on the screen without scrolling). Liquid layouts achieves this.

However, today we seem to be more comfortable with scrolling, and we’re willing to put up with scrolling for the benefits of increased white space and line height.

Design the content, not the page

Good modern web designs put less energy into designing the page background – the canvas and permanent page features – and rather focus on designing the content itself.

This reflects the principle of drawing the viewer’s attention to the content. This is also great for search engine optimization. They love relevant content.

We see the effects in:

• Freer, less boxed-in page layouts
• Softer, simpler, receding page “furniture”
• Strong color and 3D effects used to draw attention to the content itself, including the main branding
• The focus is on making the site’s subject look good, rather than making the web designer look good (which is better for the designer in the long-term!)

Why center-align?

When the content sits in the center of the screen, it feels up-front and confident.

It also gives a sense of simplicity and balance, which reflects the move towards clean, more Zen, design.

The most common centered designs are either fixed-width (i.e. master width in pixels or percent) or sometimes zoom-width (i.e. master width in ems). The benefit of restricting the width of the content (particularly with zoom-width, which resizes as the font size changes) is that the line-length is prevented from getting too long on larger screens. (Very long lines of text are less efficient.)

3D effects, used sparingly

Every single one of the hotties uses gradients subtly, either to give bars a slight roundedness, to create a soft feeling of space in the background, or to make an icon stand out with embossing and subtle drop-shadows.

Reflections & fades are very prevalent. Drop-shadows are still used, but with care.

Soft, neutral background colors

All the hotties have a plain background, the most popular being white and greyscale fades. These give a cool, neutral, soft base against which you can flash strong color to draw the eye.

Strong color, used sparingly

A soft, stylish background is the perfect base for adding eye-catching features. Strong colors and tonal constrast are great for drawing the eye to the more important elements on the page.

Cute icons, used sparingly

There’s a theme here: Don’t use too many attractive elements on the same page view (i.e. that appeals to the eye and draws the user’s attention).

As with strong color and 3D effects, appealing icons and buttons can add that bit of polish to help give a page a high-quality feel. But used too much, they’ll have the counter effect, cluttering the page and confusing the user.

Plenty of whitespace

Today’s web designs are so fresh, they feel like they’ve taken a deep breath.

Your eye needs space (guttering in typo language) round stuff to help you clearly and cleanly identify things.

In general, the more white space the better.

Of course, “white” space doesn’t have to be white. But it does have to be space!

Make the most important text on the page bigger than normal text

Like the other design techniques we’ve seen, it works when used in moderation. If all your text is big, then none of your text is big.

Use bigger text to help your visitors see quickly what the page is about, what’s most important, and figure out where they want to look next to find what they want.

Copy on this page courtesy of Ben Hunt and “Web Design from Scratch”