Feb 24 10

Assignment: Design Comps

You’ve designed wireframes, now it’s time to move on to the design phase.

In this phase you’ll be designing the website as it will actually appear. You’ll create static design files, or comps in Photoshop. A note to all you Illustrator folks: Photoshop is generally a better tool and the de facto standard for designing comps, while Illustrator is generally used for icon, logo and artwork design. We’ll be delivering the result as layered .psd files, and exported static files. But don’t worry, you can export and import artwork back and forth between the two programs.

Scope

  • There should be one comp for each page style across your site. If your wireframes were created correctly, this will mean one design comp for each separate wireframed page.
    • Tip: Usually, a website’s design files are kept in a single .psd file, with a top-level layer for each page. That way, you can look at the different pages by hiding/showing them.

Delivery

The project will be delivered via Smart Class in the Interactive_Media_1/comps/ folder. It should consist of the following:

  • A folder containing the design files. Name it last-first (for example: brander-gordon)
    • The layered .psd file containing the artwork
    • “Flat” .png images, one for each page design.

Due

The first design round is due March 15th (updated deadline). We’ll be doing a critique of the designs in class on the 10th as well. Critique classes are mandatory and you will be graded on participation.