Topics:
- Research Presentations:
- Victor
- Paul
- Design Phase: Design Comps
- Screen size
- Typography
- Settings
- Using Layers and Layer Comps
- Functional Spec Revisions
Screen Size
The first thing to consider, before you even open Photoshop, is that designing for the screen has some special challenges that we don’t have to deal with when we are designing for the printed page. When we design for print, we are working with fixed parameters. When designing for the screen, there are many variables: screen size, resolution, color depth, browser use. These days Web designers are expected to create a design that will work equally well on a cell phone and a 24″ widescreen display! In practice, what we most often do is optimize a site for the most common Web browsing experience, while keeping it usable for the less common ones. Here’s some stats on current monitor sizes:
You can see that over three quarters of users are browsing the Web with monitors that are over 1024×768 pixels. Most web designers build for the lowest common denominator of 1024×768. Remember, however, even that is the maximum screen real estate available on the screen if the user has the browser maximized, you still have to account for what we call the browser “chrome”, the frames, buttons, location bar, etc. The content area that is left once you subtract the browser chrome varies from browser to browser, here’s a short article that has more or less up to date dimensions:
What I general do when I’m setting up a is create a document in Photoshop or Illustrator that is 1024×768, and then set guides to account for the lost height and width to browser chrome.
Keeping it “Above the Fold”
Now you may be thinking, “browsers have scroll bars, so do I really have to keep my design in the visible window area?”. The answer, like most things in the Web world, is qualified. One pretty unbreakable rule is that you should never make the user scroll horizontally and vertically - that’s just annoying. You’ll hear the term “above the fold” alot. This is appropriated from newspapers, referring to the part of a newspaper that shows on the front page when the newspaper is folded. I like to keep the most important information on the home page of a site, above the fold, and on any page the navigation and a good chunk of the page content should be visible above the fold. You should also plan things so that no single image or other graphic element requires scrolling to see the whole element at once.
Typography
As you’ve probably already discussed with your lab teachers, there are a limited number of fonts that you can use as HTML text on your sites. There are changes coming on the horizon that will expand our choices, but for now, you are limited to these fonts:
Live Text vs. Graphic Text
The decision on whether to use live or html text, or create graphic text all depends on what the purpose of the text is. Graphic text gives you access to a wider range of fonts, but live text is machine readable (so accessible by search engines and text-only / speech browsers), can be cut and pasted, resized for users with vision impairments, loads faster, and is much quicker to change. Generally, you should set as much of your copy as html text as possible, and leave graphic text to logos, nav buttons, and maybe page headings.
Settings
Here’s a screen shot of the settings you should use when you start a new comp: 
Using Layers and Layer Comps
When creating your design comp in Photoshop, using well organized layers and layer comps will allow you to do all your page designs in one document.
Homework
Each member of the team should create a different Design Comp for the homepage of your redesign site. This is one part of the project that I do not want you to do collaboratively, but on your own, so I can see everybody’s design chops, although you should discuss and share it with your team members before you present it in class on Thursday. Post the comp as a JPEG to your blog, and be prepared to present it on Thursday. We’re going to discuss this as a class and decide whose design your team will go forward with.