In this installment I'll cover how to prepare Photoshop for web design. Preparing your finished design files for production will be covered in another post. The topic of web design is a deep well and there are more than enough books and websites out there to sufficiently cover the topic. For further reading, see the bottom of this post for some links.

Screen Real Estate
What's the optimal size for a website? A few years ago, most usability experts were recommending a maximum size of 800 x 600 pixels (actually, it ended up being 760 x 480 when you subtracted all the real estate the browser frame chewed up). The new standard is 1024 x 768 due to larger monitors and their higher screen resolutions. A size of 1024 x 768 is a guideline; you may decide to make your site larger or smaller. The final size of your website will depend on several factors: content, design, fixed-size elements such as banner ads, the target audience and client requests. Designing sites for hand held devices (like the iPhone) requires a different set of guidelines which I won't be covering here.

Your client might request that all of their important home page content reside "above the fold." This may have been a reasonable request a several years ago, but now it's irrelevant due to how web usage habits have changed over time.

Document Settings
When you open a new document in Photoshop, you'll be presented with a document settings panel in which you can select size, resolution, color mode and bit depth.

Resolution is 72 pixels per inch for on-screen design. It would be higher (266-400ppi) if you were designing for print. That's one of the advantages of designing for the web: you design at actual resolution or, in other words, what you design is what you get.

Color mode should be RGB since that's the native mode for anything viewed on-screen.

Color bit depth should be set to 8 bit. This yields a palette of 16 millions colors. The web-safe color palette (216 colors) is another antiquated web standard, due to advances in computer hardware.

Site Structure
One thing to consider when setting up your site is whether it will be centered or locked left. This effects how your site will behave if the browser window is expanded beyond the borders of your site. A centered site, such as netflix.com, will reposition itself to stay in the middle of the browser window while a locked left site, like Newfangled's, will stay attached to the left side of the browser window and expand to the right. It's important to consider what happens to your site's background when the browser window is expanded, especially if you're using a non-repeating image or pattern.

Another consideration is whether your site will be fixed or fluid. A fixed site will maintain its set width no matter how wide the browser window is extended while the content of a fluid site will expand and contract with the browser window. Actually, even most fluid sites use a mix of expandable and fixed content. Amazon.com has a fluid header and main content with fixed width side bars. Which should you use? That's like trying to decide which is better: Coke or Pepsi. Your choice will depend on the needs of the client, the target audience and the content of the site. You can read about the advantages and disadvantages of fluid vs. fixed here.

The web is a dynamic medium (unlike print, which is static) and your site will render differently based on which browser, OS platform and monitor it's viewed. However, that doesn't mean you should disregard grids and page templates. Setting up a grid for a website is just as important as it is for a magazine or newspaper and it can save you from reinventing the wheel every time you create a new page for your site. Your grid structure will vary depending on whether you've chosen to make your site fluid or fixed. Mark Boulton outlines some simple steps to designing grids on his blog; and his SXSW presentation (PDF) is excellent as well.

Creating page templates will help you avoid having to lay out every page in the site. No matter how complex the site is you should be able to break it down into a handful of template pages (each with its own grid) that can handle any content situation. Since the home page is the visual "front door" to a site, it usually is a "one off" design that contains functionality or components not found on any other page in the site.

Next time: How To Prepare Your Website Designs for Production

Web Design Resources
By no means a definitive list, just some of my favorite sites.

A List Apart
articles on graphic design, interface design, user experience design, typography 

Vitamin
resource for web designers, developers and entrepreneurs

Mark Boulton
simple, clean and effective web design

Andy Rutledge
articles and opinions on design professionalism, techniques and culture

Cameron Moll (portfolio)
inspiring web designs

Web Designer Wall
design ideas, web trends, and tutorials

The banner advertises a new type of litter box with three pull downs revealing a demo video, testimonials and an interactive diagram. I was impressed with how much layered information the banner was able to contain and I liked that I could explore the product without being jerked away to another site.

I suppose it won't be long until these mini-site banner ads start sporting banner ads themselves.

Adaptive Path has designed a future browser concept named Aurora for Mozilla Labs' Conceptual Browser Series. Four "walk through" videos featuring everyday scenarios show how Aurora would retrieve, display and contextually relate information.

While I like some of the elements presented in the concept such as natural interaction (Á la iPhone) and contextual data relationships, I find the overall UI complex and non-intuitive. For example, the browser's "data cloud" spatial view is a mess; it reminds me of my cluttered dining room table (from which I can never find anything, even if I'm staring right at it). Also, the over-reliance on icons without text identifiers will leave the user hunting and pecking for the correct action item.

What I found more far more intriguing (and executable) is the "dummy" NYT sports page used in the first video. It was designed by Andy Rutledge from Unit Interactive and contains some great UI concepts.

Prior to 1990, there were no standards for displaying nutrition information on food packaging. That year, Congress passed a law requiring the FDA to develop a new, universal label. It had to convey complex information in a manner that anyone could understand, it had to be devoid of any color or complex graphics to withstand poor quality printing and it had to be as small as possible to accommodate the demands of food manufacturers who did not want to relinquish valuable label real estate.

We encourage our agency partners to provide us with layered Photoshop files whenever possible. This is not because we're a bunch of whiny prima donnas, but because Photoshop provides the best platform for creating accurate web page layouts and the results save time and money for us, for our agency partners and for the agency's client.

Note: This post is a reworking of an October 2007 article in which I recommended a solution for sucessfully importing Illustrator files into Photoshop for the purposes of web page layout. After further research, I discovered the solution is incomplete and not adequate for Newfangled standards.

Next time: How to Set Up a Photoshop File for Web Design

Hardware Calibration
If you're designing on a Mac, it's important to set your monitor's gamma and color space to accepted web standards in order to produce consistent results between what you're designing and what will be displayed on the web. Gamma is a technical term for your monitor's luminance and color space refers to your monitor's ability to display a range of colors represented by RGB (red, green and blue). If you need the science behind the terms, check out these articles on gamma correction and RGB color space. There are different standards for Macs and PCs when it comes to displaying color (you're not surprised, are you?) and web standards most closely match those of the PC. Macs come with a default gamma setting of 1.8 and PCs are set to 2.2. So if you're designing on a Mac with a gamma of 1.8, your layouts will be darker when viewed on a PC and some of your subtle design elements may disappear altogether.

Important: The following calibration instructions pertain to creating images for the web. If you've already calibrated your equipment to be optimized for print, make a note of those settings (or save them as custom settings) so you can return to them later.

The simplest way to set your monitor to the correct gamma and color space is to open your system preferences panel and choose "Displays" under the Hardware category. Select the third tab, "Color." You'll see a list of Display Profiles on the left. The highlighted selection is your current color space. Scroll down until you see "sRGB IEC61966-2.1" and select it. If you have a laptop with an external monitor, make sure to adjust both your laptop screen and external monitor. Viola. Now you can close the System Preferences panel.

To calibrate your monitor for the lighting conditions of the room you're working in (I recommend this) click the "Calibrate…" button in the color preference window. Apple's Color Assistant will guide you through each step and allow you to set the gamma and white point manually. Simply select 2.2 for the gamma and D65 for the white point and save the custom calibration with your name and the date so you can find it in the profile list later.

Software Calibration
Now that you've calibrated your monitor, your Photoshop color space needs to match your monitor's color space. In Photoshop, select "Color Settings" from the Edit menu. This will bring up the Color Settings panel. From the Settings pull down menu, select "North America Web/Internet." This will set the RGB color space to "sRGB IEC61966-2.1" and fill in the appropriate settings for the other fields. You can save this setting as a custom by clicking the "Save…" button and giving it a name.

Next time: What's So Great About Photoshop?

Polaroid will be introducing a new ink-less photo printer called the PoGo on July 6th. I know what you're thinking. "Polaroid? They're still around?" Yeah, I figured Polaroid, Kodak, Fuji and Konica would have formed a murder-suicide pact by now given the ubiquitousness of digital cameras. But I guess the originator of instant film isn't ready to cash in their chips just yet.

The PoGo uses an ink-less technology that Polaroid has branded as ZINK (zero ink, get it?) which includes a special paper embedded with yellow, magenta and cyan dye crystals, activated with heat pulses from the PoGo printer. The prints are water-resistant, smudge-proof, tear-proof and have a peel-off sticky back.

The printer is about the size of small digital camera, runs on batteries and connects to your camera or phone via Bluetooth. What's that? Your camera doesn't have Bluetooth? Well, the PoGo has a USB port as well. Of course you can only buy the ZINK paper from Polaroid and, with over 100 pending patents, you're not going to see a Wal-Mart brand of this paper any time soon. The POGO printer costs about $150.

Will the PoGo and ZINK technology single-handedly save Polaroid from sinking? We'll have to wait and see how things...develop. Ok, you can penalize me for that last pun.

A clever flash-based photo browser that allows the viewer to "flip" through a stack of photos. You can download the source files from Andrew's site.

The stock photo companies are desperate for my money. How do I know this? The evidence is all the promotional stuff they send me.

Just today I received a package from Jupiter Images. It was a plastic eyeglass case with 3D glasses inside. The included insert directed me to their website where I could look at images from their collection that had been enhanced by another company to be viewed in 3D. So I went to their site and dutifully viewed the slide show. Hey, they sent me free stuff, right? Why wouldn't I oblige by giving them ten minutes of my time?

Then there are the countless mailings from Veer. Most of them are beautifully designed, lavishly produced booklets that feature Veer's photos and typefaces in some elaborate narrative such as, "What I Did On My Summer Vacation" or "Great Architectural Masterpieces of the World Reconstructed in Type." I worked as a print designer for several years and I know how expensive it can be to produce and mail these pieces.

So why are these stock photo companies wasting my time? Don't they know I have to scrape together the cheapest, most overused stock imagery for my projects because most of my clients don't have a stock photography budget? I would looove to license some of the rights-managed images from sites like Getty and Corbis but I have a hard enough time convincing my clients to spend $49.95 on an image, let alone $495.00.

Here's my idea. Instead of sending me 3D glasses or a 45 page booklet on the history of the internet, the stock companies should take the money they blow on promotional mailings and lower the prices of their images. Or, better yet, send me the money and then I can afford to purchase an image that hasn't been seen in every magazine, newspaper and online ad for the past three years.

Now you'll excuse me, I need to go see what cnn.com looks like in 3D.

If you surveyed 100 designers and asked them to name one thing they would like their clients to understand it would likely be: designers love to help clients solve their problems. This may be hard to believe, especially if a client recently had a bad experience with some prima donna designer who believes whatever they produce should be accepted without question.

Simply telling the designer "make the text blue" doesn't allow them to solve a problem. However, if the client says, "the text is hard to read" or "the site colors seem too dark" the designer can work with the client to come up with a solution. This is far more productive than simply providing the designer with a bulleted list of "solutions" and having them scratch their heads trying to figure out what the client's intentions were.

At Newfangled, we provide the client with a Website Profile at the beginning of the project to help them think through some of the aspects of their website that would not be necessarily be obvious to them. Then, when the first round of home page designs are presented, I'll write a brief "rationale" (why I think these designs are appropriate and the thought process behind it) and some prompting questions to help the client review the designs and provide useful feedback.

Things we ask clients to keep in mind as they review our website designs:

• Overall Look & Feel - which design best reflects your organization?
• Color Pallete - does the use of color accurately represent your organization? (is it too warm, too cool, too neutral?)
• Content - does the design have a good balance of content and white space?
• Navigation - does the navigation seem intuitive and well placed?
• Images - are the images appropriate for your market area? Do they strike the right tone?

If the designer can initiate an informative discussion between themselves and the client it will go a long way in helping the client be better engaged in the design process and help the designer come up with good solutions for the client's problems.

One of the most critical components of a website affected by color blindness is the text link. Andy Rutledge has posted a great article on how to style your site's text links to make them more distinctive without having to resort to the hideous <blink> tag.

Tinyteam.com is just over the line into clever. Instead of traditional navigation, this design studio's site uses a Russian-doll-like effect to take you from one page to the next. Of course, it's 100% Flash (and therefore 100% SEO unfriendly) but it is a fun site to play with. Tinyteam also does a good job at focusing their content and limiting the viewers choices (which can sometimes be a good thing).

Now comes FontStruct, a free, online font construction tool brought to you by FontShop (back in December I wrote about another cool FontShop service, HandFont). FontStruct allows you to build your own fonts using geometric shapes on a grid. When you've finished making your character set, FontStruct will "render" your font so you can download it in TrueType format. And did I mention it's free?

The wine-and-brie crowd might turn their collective noses up at such a pedestrian tool as FontStruct, but it's a lot of fun to play with and, who knows, you may discover your inner Erik Spiekermann.

Ever wonder where that Latin gibberish that designers use for placeholder text came from? You know, "Lorem ipsum dolor sit amet..." I used it for years without questioning its origins any more than turning on the tap or flicking on a light switch.

The text is not really gibberish but an excerpt from Cicero's, "The Extremes of Good and Evil" written in 45 B.C. You might be asking, "Why is this important?" Well it's not, really. But, just like designers today use type with no knowledge of its origins, Lorem Ipsum is taken for granted. I think having a full knowledge of one's craft makes one a better craftsman.

Want to learn how to keep your cat from scratching up your furniture? How to successfully take a cab in NYC? Maybe you've always wanted to build a water-squirting alarm clock. Howcast is the YouTube of how-to guides. It's conveniently organized by categories and the videos range from really useful (how to avoid jetlag) to really weird (how to grow grass in your office mate's keyboard).

Urban Dirty offers a selection of free background textures that range from grungy to gritty to slimy. The textures are asymmetrical so you can't create a seamless tiled background from any of them, but they're rendered at 180 DPI in small, medium and large sizes.

Go Media's Arsenal site offers textures, vector art and fonts that would appeal to just about any skate rat or tattoo artist. The art is offered in reasonably priced royalty-free collections but you can download free samples here.

For example, one of the keys of a successful website is its content. And one of the keys to good design is making sure your site's content is legible. Admittedly, since I've turned 40, I've had to increase the text size on a few of my favorite sites to reduce the strain on my eyes.

But the following example was clearly executed by a print designer who believes function follows form instead of the other way around. I had to hit command-plus on my keyboard three times before I could even make out what the text said.

So if you're a print designer looking to break into the world of web design do yourself a favor – before you buy Photoshop, read some books, take a class or kidnap Jakob Nielsen for a weekend and force him to tell you all he knows about user interface design and usability.