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.

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.

Say my mom just landed at LAX, and wanted to get to my house in Westwood, I could tell her to take the 405 freeway and she’d get right here… almost. There is still the matter of getting to the freeway from LAX then getting from the freeway to my apartment. The start, goal and major route are there, but there are many more details that need to be fleshed out before you have a complete set of directions. Further, if my mom were to just start driving from LAX in hopes of finding the freeway it could take her hours to find it. and hours again to find my apartment after leaving the freeway.

Similarly, if I start building a website without knowing each piece that need to fit, my design is going to take far longer than if I had built a map. For this reason, I try to build websites in a somewhat backward fashion. I start with the tiniest piece, like a login form, then I build more and more modules that will be a part of the site.

Unfortunately for me though, the company is moving to Ireland after the World series of poker, and isn’t interested in taking me with them

I’ll survive, I think. So far though, I’ve learned how to shuffle poker chips from Chris “Jesus” Ferguson and I’ve started to play some poker. I’ve been told in the past that I needed to take up the game, but now I’m learning some of the intricacies from pro player who have made MILLIONS.

All in all, it’s the best job I’ve had. Thanks Full Tilt.

I think the problem most people are having is that Marketers and Good design don’t typically mix. Or, good design is not good marketing. Marketers want their ads to be in the face of users all the time. If not ads then something that says BUY BUY BUY!!!

The thing is, there are different levels. Look at Nike.com. Nike makes enough money that they can give LeBron James $10 Million a year for flashing his pearly whites. Their shopping site is amazingly understated. It consists of an orange logo, a couple of nicely arranged photos and some nice gray links.

The site is attractive and sophisticated and people buy their product.

Maybe it’s just because I have an inherent distrust of anyone trying to sell me something. If I don’t want it already or I can’t see how it will effect my life right now, I don’t need it.

I go to a website to buy or research (and usually I don’t trust facts and figures on their website anyway), not to be sold on something.

So what does this all have to do with design? Design can be effective and pretty. Not all designers can accomplish this.