The following is a comment I posted on reddit.com last night, but I think it deserves some more play. There is are premises that a lot of people come to web design with about what a site should be, but fail to realize that the web can be so much more than their limited premise allows. I run into this all the time with clients and at work.

Here is some advice I offered to someone moving from print design, learning web design about what the web can and should be.

I think the most important thing to realize is that interactive design is a whole different discipline than print design. There will be times when you are able to use the beautiful graphics you are used to creating in illustrator, but these are secondary and are really just window dressing on top of what really matters.*

There are generally three types of websites:

Web App: This is the google type email where you are there to accomplish a task, to take some form of data and transform it into some other form of data. Most sites have some portion of them that relies on a Web App (to varying degrees), be it the CMS or the site in general.

http://www.gmail.com

http://www.youtube.com/my_videos_upload

http://demo.joomla.org/

Content Consumption: This is the type of site, like reddit where you come to get content. The public facing side of blogs and news sites and even youtube are Consumption sites. They generally have some adherence to web standard navigation to make it very easy for the user to get around, but are allowed some leeway in order to implement a new and interesting feature.

http://www.nytimes.com

http://www.espn.com

http://www.reddit.com

Experience: Experience sites are generally light on content, but rely on the interactive nature of the web to draw their audience. They have a “cool” factor, as this is where the most creative people on the web spend their time and energy, because it is the most fun for them. Experience sites generally break some usability guidelines in favor of an enhanced emotional link to the content. They are a favorite of advertising agencies.

http://www.whitegoldiswhitegold.com/

http://ge.ecomagination.com/smartgrid/

http://watchmenmovie.warnerbros.com/

When tasked with creating a new site, evaluate what the purpose of the site is, and use the best style of interface to accomplish that task.

*Really good visual design on a site can set it apart from competitors and create a feeling of quality and trustworthiness for the brand, and I am not trying to diminish its importance, in-fact I am a web designer myself. I take the content of the page, the flow of the content and the visual design into account with every piece I work on.

In other words: The web is fundamentally a guided conversation, while print is fundamentally a one-way communication.

Welcome everyone from The FWA. Thanks for checking the site. Make sure you check out my flickr photostream for my latest work.

DPI

Many people who are used to working with printed documents are used to dealing with a measuring system based on inches or centimeters because the design and the final product are completed on two different mediums (screen and paper) an interplay must be created translating the resolution s of the design and the the printed page. When thinking of an image, dots per inch is a ratio of how many dots (pixels) are present in a linear inch when printed. This ratio can range from 150:1 (150dpi) to 1200:1 (1200dpi). So the math works like this: if your image is 300 pixels across, and you want it to fill 1 inch of page, then it prints at 300 dpi, if you want it to fill 2 inches of page, it will print at 150 dpi.

Screen Dots Per Inch

When designing for the screen, as in email or web design, thinking in terms of DPI is an unnecessary step. Since the final document is measured in pixels, the same as the image, there is no need to create a translation between the measuring unit of the document and the measuring unit of the image, it is always 1:1. An image that is 300 pixels across will always take up 300 pixels of screen space.

Canvas Size

When thinking about the size you are going to design a web page at, take the following things into consideration:

• While the full screen resolution of about 11% of internet user’s monitors is 800×600 pixels, the actual usable space in the browser window is closer to 770×460 pixels because of the toolbars, and scrollbars that are part of the browser. Similar reductions are present in ALL resolution sizes.
• As of Dec 2006 89% of users browse the web with a screen size of 1024×768 (leaving 990×560 above the fold) or larger, that means 11% (and growing thanks to mobile devices) are still smaller.
• The most important dimension is width, users don’t mind (and expect to) scroll down to see content, but pages should be designed to use a masthead/navigation/headline area that fits above-the-fold.
• About 15% (and rising) of internet users use a mobile device (blackberry or sidekick), that won’t render HTML email, to access their email.

Columns

Text just doesn’t span columns in HTML. if you have a block of text, it can only go in one long column.

Fonts

One of the major problems designers have when moving to the web is font usage. Any font that isn’t Arial/Helvetica or Times/Times New Roman is likely not to be present on the end users system. That means that unless you convert your text to images (very bad practice) or use Flash based output (impractical for large sites and emails), you are limited to the basic system fonts. Anything else will show up on the users screen as a system font anyway, so it is better to just use the system font in your design.