Web Design for Graphic Artists II

 

Last Updated
02.18.2004

Final Project

Overview | Step 01 | Step 02 | Step 03 | Step 04 | Step 05 | Step 06

Final Project :: Step Three
Using the material created in Step One and Step Two, create a mock web site of your project, and begin creating the visual look and feel of your portfolio Web site in Photoshop.

Assignment ::
For Step Three, due at the beginning of class February 25th, do both of the following:

Mock Web Site: Using the site map you created in Step One, create the file structure for your web site. Starting from the home page, create links to each HTML page in the site. You do not need to worry about the visual presentation of these links, just create appropriately-labeled, functioning text links. These links, when finished, should appear on every page in the site. In the end you should have a complete, functional Web site, albeit without content or graphics.

Photoshop Design Files: Select one design sketch and flesh out that design using Photoshop. Design should reflect the content ideas listed in your creative brief and site map, and follow your preferred design sketch. For this assignment design only the home page for your site, but also be thinking about the presentation of the secondary pages as well.

Hints ::

  • Web designs need to be pixel-perfect, meaning that you must be careful in creating and aligning design elements. Designs that are not pixel perfect are often difficult to translate into HTML.
  • Always try to work at 100% in Photoshop so that every pixel of your page is visible (In Photoshop, select View > Actual Pixels).
  • Be sure to carry over the content grid you established in your site sketches. This grid guides the layout of all of your design objects, just like in print.
  • Look to design objects that you can repeat across pages. Doing so will decrease your design time and allow you to reuse your pages as templates when it comes time to build the site.
  • Look for way to make adding, editing and replacing work samples as easy as possible. Creating your work samples in a similar size, manner and page placement is one way to accomplish this.
  • Be sure to include the file extension (.psd) when naming your file.

Requirements ::
Mock Web Site: All HTML pages on the site map are present, named appropriately for use on the web, and are assigned page titles. All links work correctly, are labeled appropriately, and are present on every page. Assignment should be handed in on a zip disk. (10 points)

Photoshop Design Files: Design should present the primary navigation elements, layout grid, color palette, copy treatment, and other visual considerations. Design should meet the criteria listed above, and be thoughtful of layout, style, and usability. Design should also take into consideration the features and limitations of web browsers and HTML. Bring to class your unflattened Photoshop files to save to the Data Drive at the beginning of class. (30 points)

 
Home | Syllabus | Calendar | Projects | Good Stuff | References