Posts Tagged ‘Graphic Design’

Tips to Improve Your Web Design

Thursday, January 7th, 2010

 

Coming from a print background has helped my web design greatly. Some of these helpful hints come directly from print design, while others were simply learned through experience. They are not in order of importance.

 1. Use typography to grab attention instead of a graphic. - You’ve heard to saying, “less is more.” It is most effective in web design because you have a very small window of time to get the reader’s attention. A big heading using only text will be more effective than a large graphic. Think about newspapers. In the same way a reader scans the newspaper they will scan a website looking for a heading to tell them what to read or what to do.

2. The grid is by far the best framework. - After you’ve gathered information about the site, start sketching a grid. Figure out how many columns are appropriate. Try to stay under 16 columns. Any higher and might find it hard to stay consistent. At the same time, a one or two column grid will probably be too restrictive. Do not simply guess the width of an element. Readers will positively respond to a mathematical layout.

 3. Don’t be afraid of white space. - This might be the most difficult concept to sell to a client. Break away from the old conventions of web design where you need a left and right border. While borders are purely preference, white space should not be. White space does not just mean the color white. It simply means to leave a little extra “air” in between your elements. Too tight and your elements will visually appear as one confusing mess.

4. The fold is very important. - Keep in mind most screens are still around 1280×760, so the fold will most likely under 760px. Try to keep your most important elements, like call to actions, above the fold.

5.Follow common typography rules.

- Hang your first quotation mark outside the body of text.

- Line height for body text should be at least 4px above the font size. For example: 12px Helvetica should have at least a 16px line height. Lines of text that are too close will be harder to read.

- Your main body of text should be around 10-16 words per line. Too long and the reader will struggle to find the next line down.

- Use no more than 2 font-families. I generally try to use just one. There are times, however, where you might want to use a different font for headings.

- Keep it simple. If you want a heading to stand out from the body, use no more than two differences. A good example: bigger type size and bold. A bad example: bigger type size, bold and italic. Sometimes just making the type size bigger is the perfect solution.

6. Reset your CSS browser defaults. - When it comes time to code your design remember to reset browser defaults in your css document. Different browsers like to add their own padding and margins to elements on the page. This will save time and major frustration.

Content vs. Images – Where Does the Emphasis Lay in Web Design

Thursday, October 8th, 2009

Are you placing enough emphasis on the importance of images in web design?

In the ongoing debate of content vs. image with regards to web design, one thing has become apparent; a website is most successful when the two elements complement each other. Yes, even on a website, a picture truly is worth a thousand words. An image may be the easiest, and the most appealing, way to send a message. Images are an integral part of web design, they hold the power to enhance the overall look and feel of a website and capture the attention of incoming traffic.

The “content is king” way of thinking, may hurt some websites. Images are an important part of web design, and their significance should be evenly considered with that of the content. While content gives necessary information and is constructed with the needs and desires of visitors in mind,  images are used to aid the information visually to the web users. When appropriate images and content work together your website is both informative and memorable to visitors. Unnecessary usage of images and inadequate content will result in a weak website.

Why incorporate images on your website?
• Influences the buying habit of the customers
• Images demonstrates the products and services effectively
• Images work to create a memorable impression

Images have a mesmerizing influence on the human mind. There has been a lot of experimentation with images on the Internet to give a more interactive, appealing look and thereby enhance effective communication. No matter how well-constructed and informative website content may be, it will never have the ability that images have to bring a visitor into a magical fold at the first glance.