Design isn't universal

Some of you may know I left Sprint (was in usability) not too long ago. It was only a 6 month contract. I was so excited to get out on my own again. Just to refresh, I teach Adobe products including: Photoshop, Illustrator, InDesign, Dreamweaver and Flash, and I forgot, Acrobat. I am also a web designer who specializes in XHTML and CSS and usability. Of course this is on top of being a user group manager.

Being back on my own has me working with others again and me not always being the designer. I am often the person making the designers work live XHTML and sometimes Flash. So in that sometimes frustrating process I've worked with too many designers over the years who seem to think that just because they design for print means they can design for the web.

Design is not universal! If you design for print, it does not mean you will be a good web designer without some serious studying.

This is for those designers who are previously a print designer:

• If you are using either Fireworks or Photoshop (don't get me started with the fact Fireworks should be in the Design Premium package; Keep your layers organized. Name your layers and put them in folders for like items.
• Put each object on a separate layer.
• Go ahead and put your content in the Photoshop file, so you can make sure all is going to fit in your design, just make sure you are using one of the fonts on both platforms (I prefer Verdana myself) and NO anti-alias and take leading and space after into consideration. I can change that in the CSS to whatever is needed.
• Do not use that font at 9.2 points and 80percent tracking. Use a normal size like 11 or 12 points.
• I do NOT use tables to lay out anything in CSS, so do not change the layout for each page to be different widths and think in print like columns of text like a newsletter. The web is not print.
• Along with no tables means I will not be "slicing" things up like we all did for tables. Think in background images. This is also the case for navigation. I would prefer to use live text anywhere there is text with the exception of the company logo.

  I may only need 1 image for each state in a button and it's rollover image because I can attach that to the state itself.

• Bring me into the decision making process BEFORE it goes to the client, not after. When in doubt, ask if it can be done.
• Keep things consistent. Don't change elements around on each page. Think of the user and will he/she be confused by your choices.
• Backgrounds: If the page isn't white take into consideration what you'd want the page to look like printed. I can make a style sheet to do that, but also take into consideration who your audience is. Will they be older and if so we'll need to be able to size things up easily so they can read the page.
• Do your research first before you design. Get inspiration from other CSS sites (I am not advocating copying a design). CSSBeauty.com is a good site to see what others are doing.
• The first page in the site does not have to look totally different and be like a cover to a booklet.
• The user, most of the time (considering on the content/usage of the site) should not have to scroll on the first page. Show them everything they need to know to make the decision where to go next in as little text as possible. On the other hand do not put so much imagery on the index page that they can not find their way around.
• Do not trick the user with a page that makes them guess what is navigation and what is not.
• Decide who the user is before you design the page. Are they Ad execs, or someone who doesn't always use the internet. What size font should you use, what size page do you use?

  If you decide on lets say, 1024X768, remember that isn't the size to make your Photoshop file. You need to take browsers into consideration. I like a 955 or 960 grid system. Like athttp://960.gs/.

Usability rules

Usability is important, do not kid yourself. There are some super simple things to consider:

• Along with the consistency thought, if your site is for the general public, do not put navigation/typical elements in odd places. Meaning, if you have a search, people are going to look for that in the upper right hand corner because that is where it is on most sites.
• Navigation names: Will I know what your navigation means? Is it something cute/thoughtful/inspirational? If so, I may not understand what you mean. Make your navigation something meaningful so the user isn't afraid to click on it.
• Do not put as much text on your main pages as you would in a print brochure. No one will read that much. If you need text, give them first a shorter page and tell them in as few words as necessary why they need to click a link to read more. Either take them to another page in the site, or if they might want to also print it out, make it a PDF they can download and print themselves.
• Flash: It is getting much better at being searchable, but ask yourself why you need Flash before you just automatically put it in. Splash pages are thankfully mostly gone. Consider you have just seconds to grab the users attention to keep them at your site. Do not "tap dance" for awhile first before you show them what the came for; your web site.

After you finish the site, make sure and do some usability testing. If you don't have deep pockets, grab 10-15 typical users and have them complete a series of tasks on your site. Take notes and you'll be surprised at how that will change how you design from then on.

So get out there and design some sites that everyone will enjoy visiting.

Dee