Design Guidelines for Agencies, Part 3: Preparing Photoshop Files for Web Design

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