Expert Tips For Effective Web Design Aesthetics

February 15, 2012
Expert Tips For Effective Web Design Aesthetics

In addition to 3D animation and visual effects I’ve also been designing web sites for about 14 years now. I’ve discovered a lot of things along the way and I continue to change my style and improve.  I’ve learned a lot as a user as well as a designer. Here are some really good expert web design tips to help you stand out from the pack.

The Build

When creating a website you start with deciding on the functionality of the site in order to determine the layout and elements you’ll need. I usually do a mockup using Photoshop, Illustrator or Paint Shop Pro layers. This can include doing screen captures of what you have at stages and then playing with colors and visual elements.

If your designing for a company then you generally want to go with a color scheme that matches that company. Many companies or products have a color scheme associated with them. Don’t forget this important advice. For instance if you are designing for Red Bull then you want to go with the exact blue with a silver or white.

You’ll want to make many of your graphical elements and imagery larger than you need just in case. In fact I would recommend creating them in a vector based program like Illustrator or Inkscape and exporting to PNGs. By the way transparent GIFs are out. Use PNGs with transparency instead. By having your source graphics vector based and your photos high resolution you can scale your wed design projects up as screen resolutions increase. This is also great if you need complimentary print materials later.

When you design the look, visitors must catch what the site is all about within that first couple of seconds. Use clean bold imagery to project what the site is about to the user.

Deciding Page Width | Fixed or Flexible?

The standard width of web pages has increased over the last decade from 640 to 960. As you well know you can use fixed or flexible widths by using percentages rather than pixel size. I’ve always tended to use fixed widths out of habit and the desire to have the site look a certain way, but these days it’s becoming more desirable to have a responsive theme that can work on mobile devices as well as PC.

If you have a lot of text then you don’t want a column that’s really wide. 960 or 980 is pretty common now. Going above 980 is dangerous because devices like the Ipad 2 have a resolution of 1024-by-768 at 132 pixels per inch (ppi). These numbers will likely be meaningless a few years from now as screen resolutions increase dramatically.

The main column containing your content should be about two thirds or so of your entire width. You don’t want the text to span the entire width because it makes for a more difficult read. At the same time I’ve seen main content squeezed into a width of about 400 pixels and this doesn’t work either. When deciding sidebar widths you should be familiar with typical sizes. A good size for major sidebars is about 300 pixels (as of 2012).

There’s always data online on what the current standard screen size is, as well as the percentage of users using certain resolutions. Go by this and try to support as many users as possible. Currently you should not go below 960 and not over 1,000 but in two years these numbers could be totally different.

The 960 Grid | Standardizing Web Design

The 960 grid system is popular because it helps streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. The system provides ready to use CSS (Cascading Style Sheets) for your frame work. This can be applied to WordPress sites as well. There’s a lot to go into so you’d have to check it out for your self. It is a good starting point for making really clean tight designs. There are two variants: 12 and 16 columns, which can be used separately or in together. The 12-column grid is divided into portions that are 60 pixels wide. The 16-column grid consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns. You can go to the 960 Grid website for more information or to customize your own grid system for a different width you can calculate your grid using a grid calculator as found here. Dreams and Magic has recently adopted some of the ideas behind the 960 Grid system for future websites where this may apply.

Consistent Space Between Columns

To make your site look tight you should make the gutters, space between columns, of your design consistent. This includes horizontal space where it may apply.  For a 960-980 width you want 10 pixels on either side of the column which will give you 20 pixel width gutters. Some designers prefer up to 30 pixels. Then scale this up as resolutions and widths of sites increase.   A good way to see how tight this will make your site feel go to 960.gs and look at their site.

Expert Aesthetics | Keep it Clean

It’s very important that your users trust your site within the first few seconds. If you have too much going on and your look is too cluttered or if your site looks too empty then people are not likely to read your material or invest any time in your site at all. People care a lot less about bells and whistles than they did 5 to 10 years ago, but a few CLEAN well blending components can add a lot of desirability to a website. You don’t want so much that your site looks like a mess and your pages load slow. You want just enough to add that extra touch. Pick a few bells and whistles that work with your theme and leave the rest out.

imageA professional design is a layout that is fast loading, pleasing to the eye, and simple but bold. You want to use colors that compliment each other and don’t use too many gradients or tons of elements. You want a nice clean crisp look. Most of your fortune 500 companies have sites that are very clean and simplistic but generally filled with well organized content. They don’t use crazy graphical buttons or wacky backgrounds. There are many exceptions, such as gaming and film sites however. Though these exceptions exist…if your site is not one of them, then keeping a clean crisp look is what you want to go for.

TIP: Try to use photographic imagery that also compliments the colors of your website.

Expert Font Usage | Font Family, Spacing, and Color

So what’s the right font size, color and style?

This is really where most designers fail or simply don’t pay attention to and this is really one of the major reasons I wrote this article.

Font Style

The DPI of your monitor is different from the DPI of print. Print is 300dpi while screens are 72dpi-96dpi. This translates into the need to use simpler fonts like Sans Serif for anything under 16 points(or equivalent). Sans Serif fonts do not have the little hooks or serifs on the end of the letters.

Examples:

Font Size & Spacing

You want to use large font sizes if your layout allows for it. Take a look at the standard print in magazines and newspapers and go a step or two larger. I can’t give you a specific point or pixel size because this will vary depending on the font style and typical screen resolution of the time. As of this writing it’s generally 15 or 16 points if fixed, but you should be using flexible sizes. Larger font sizes for the main text make it easier for the reader to absorb the information and do so more quickly. Use large fonts for menu items as well. You do want to stick with smaller fonts for side blocks, teasers, and other such elements. You can also find code snippets or CMS plugins that allow the user to adjust text size. Users can adjust the font size in browsers as well but the idea is to for them to not have to do that.

Set line spacing to 125% – 175%. In most cases you will want to set line spacing to 150%.

Font Color

Don’t use solid black. You want to go with a dark grey or dark color, but not a color that conflicts with the over all color of your site. Usually you should stick with a very dark grey which is easier on the eyes. A white background with dark grey text is better on the eyes than black with white text or some odd color combo. The color you want to use is something like #333333, #303030, or #353535

If you Google.com a dozen popular blogs or major websites you will find these font practices in use on many of those sites. It makes for easier reading and the visitor absorb the information faster and better.   Solid Black   |    Dark Grey

Don’t Clutter With Ads | Less is More

You love going to websites that are loaded with link ads every few words, a half dozen ads in the sidebar and so many ads within the article that you can’t tell where the article actual is. you just love that stuff. …

You don’t? What? Yeah so…don’t do that. Having a ton of ads results in no one actually interested in your site. It’s very important to have good original content. A few ads supporting your blog or adding extra income to your company is perfectly fine and is useful to your audience, but don’t put up an ad farm. Don’t invest in blackhat SEOs or anyone who promises you a ton of links to your site to boost your rankings either.

Get Lost

Yes. That’s right. Go away from your site for awhile then come back to it with a fresh perspective. Most artists make mistakes because they are too close to their project and usually when they don’t look at it for a period of time and then come back to it they have a fresh perspective and can then make improvements. Also remember that your Audience will generally see your site differently than you do. You’ll grow tired of your own work long before your visitors do.

In Closing

Here are some good rules to remember, but there’s always exceptions.

  • Design in image layers first
  • Use vector based software to create UI elements and logos then down size for the web
  • Don’t use really wide or super thin columns for main text areas
  • Use clean crisp layout with a few bold visual elements
  • Fonts – large size | line spaced at 150% | San Serif for main paragraph text
  • Use dark grey or dark colored fonts instead of solid black. #333333
  • Evenly spaced gutters where applicable (usually 20px for 960 layout)
  • Use a Grid system
  • Don’t use too many ads. Ad farms suck. You’ll likely get less ad revenue with ad farms.
  • Visit and read your own site

Richard D. Green

Print Friendly