Tips for better web design

Posted By: Mark Aplet 4 Comments May 30, 2008

I have designed websites for the better part of 7 to 8 years now. I am a designer and web developer, so I have a lot of experience being both the designer and the programmer. I  get to see both ends of the spectrum of web design. Over the years I have picked up a lot of tips to increase your productivity in the area of web design.

The most critical point of web design is the starting point. It all begins with the designer. The more informed a designer is, the more some basic steps are observed, then the more productive and profitable your next design project will be. Here are a few tips to help designers create a better and more profitable design.

Document Setup

1. Work at the proper scale and size. 72 DPI, In pixels not inches.
2. Work in RGB not CMYK
3. Work in photoshop for the bulk of the layout. Illustrator is the perfect companion but should not be the main layout tool. If you have illustrator graphics in your site, bring them into your photoshop project as a smart object or raster art. I recommend starting with a pixel perfect grid system like www.960.gs It allows you to design with sizes that translate well to the web. It also helps to ensure your gutters and padding are consistent all around.
4. Work with background transparency turned on. Setting it to white or some other color creates additional work in the the production phase.
5. Decide if your design will float in the middle of the screen or be justified left. Will it be liquid or fixed to a specific width? My recommendation is to use a fixed width (see 960.gs above) as line lengths are too long and unreadable when a wide screen monitor is maximized.

Graphics & Content

1. To create rules, use a 1 pixel pencil not an airbrush or line tool. It will give you a nice crisp line.
2. For objects that you want to use layer effects on (ie: transparent gradients, shadows, etc.) please fill your layer with a solid color first, then lower Fill Opacity. This removes the fill from the layer, but allows the layer effects to work as intended.
3. Graphics like photos or logos that get resized a lot in the concept phase need to be replaced with "good art" once finalized. You can also insert them as smart objects in the first place. Smart objects are not affected like raster objects when scaled frequently.
4. When placing objects into your design and you want the space around them to be even, make it pixel perfect in your design. For example: If you want a 20 pixel gutter between your columns, design it at 20 pixels exactly, not just close enough. HTML does not translate to close enough. Your designs will not look correct if you do not design it accurately.
5. Transparency is not supported on IE 6 or below. If your design has transparent items make sure they are aliased (no edge smoothing) or provide an alternate design that is non transparent for older browsers.
6. If possible do not use the vector shape tool for simple shapes like squares or circles. This tool is not as accurate as a pixel perfect marquee selection. It is also not as easy to sample a color from a vector object – especially when the opacity is changed from 100% or the blend mode is changed from normal.
7. Work from a palette of colors that are consistent. Don't just wing it and think it's close enough. I highly recommend ColorSchemer to develop your color palette and export those as a compatible Photoshop ACO (color pallet) file. When you collect your art for your developer include your ACO file with the assets. I typically store the ACO file with the job assets anyway just in case I have to go back and make changes or additions.
8. When creating your mockups it's common to design a homepage and at least one interior page. Go the extra mile and create a "contact us" page. Layout a form design that will set the standard for future and or additional form pages. Often the form is completely overlooked and as a result gets designed by a programmer. (Not what you want to happen at all.)
9. Web sites use html to markup a page similar to a word processor or similar to a style sheet in InDesign. Because the text is displayed this way it•s important to design a placeholder page showing how these styles should be rendered. Similar to a wordprocessor, a web page will have headings (1-6) body text, hyperlinks, quotations, ordered lists and unordered lists. These are the most common elements on a page and should be taken into consideration during the design phase.
10. Don't design with pop-ups in mind. You are annoyed by them, so am I, so are the visitors of the site. Don't do it unless absolutely necessary
11. Keep organized. Websites are complicated enough and navigating an unorganized mass of layers is a daunting task to say the least. Organize groups of objects that are similar into a single folder, unless there is no other way to achieve the look you're after. An example might be a login panel, or main navigation. These items can be grouped into a single folder and made portable and easy to turn off and on by your developer. It is also very important to name your layers. There is nothing more frustrating than trying to find a navigation background panel called "layer 58". A tip for speedy designers is to use shorthand. bg for background, btn for button, pic for picture. You get the point. The bottom line is don't be lazy and expect others to fix your messed up files.
    

Fonts & Typography

1. Use fonts that are common on ALL systems. Arial, Verdana, Courier, Times, Georgia, and Geneva. You may specify other fonts like Century Gothic, Lucida Sans, Impact, Tahoma, and wingdings. However you must know that the font may default to one of the common system fonts. Your design must allow for these variations.
2. Use fonts at whole sizes not less than 11 pixels. 12.266 is not a valid web size. Smaller than 11 pixels will no longer have the bold attribute and appear non bold.
3. Use proper line heights (leading). Chances are the default "auto" line height is not enough. Increase it to about 130% of the base height.
4. If you need gray text on the screen, use a gray color not black at 60% opacity.

Accessibility

1. If you're concerned at least with a basic level of accessibility. You will want to make sure your design has enough contrast between text and their background. A simple check that you can do is select all, copy merged and paste the entire website in the top of your document. Lower the saturation level to a grayscale image and see just how much contrast you have between elements. Here is a sample design converted to grayscale.
   
2. You can use a similar procedure to test if the links on your page are obvious enough to a user that may be a little blind without their glasses. Make a new copy and this time add a little bit of blur to the image. I tend to push my blur more than enough but I want to make sure parts are distinguishable even in the extreme. This is not accurate of course, but you can clearly see just how obvious links and buttons are to people with common vision problems. Here is the same sample design illustrating poor vision

Additional Resources

Dear Print Designer Doing Web Design – Andy Ford

Tags: Design

Categories

• Accessibility
• Code
• ColdFusion
• CSS
• General
• Design
• Freebies
• Inspiration
• Mango Blog
• Opinions & Rants
• Photography
• Photoshop
• Plugins
• SEO
• Software
• usability

Favorite Links

• A List Apart
• Mango Blog
• MangoWear
• Sacramento Web Standards Group
• Use It: Jakob Nielsen's Website
• Web Accessibility In Mind

Recent Tweets