GMD 177 Web Page Design

Spring 2010

Instructor: Mark Daybell

Email: mark.daybell@canyons.edu

Web: www.daybell.com/siteplanning

Assignment #1: Silver Lake Wine Redesign Wireframe (100 points)

Objective:

Develop introductory knowledge in web page planning, layout, design and usability. Introduce (or advance) Photoshop skills. Develop skills in the area of web deliverables.

Assignment:

Using Photoshop, create a wireframe for the website silverlakewine.com. Your deliverable should define:

• The five basic elements of a website: Header, Primary Navigation, Content Area (maximized as much as possible), Footer and Defined Resolution (anchoring the site to the top-left)
• Placeholders for 5 images, each at a dimension of 200 pixels H by 100 pixels W
• Placeholders for 5 copy sections, each at a dimension of 200 pixels H by 200 pixels W
• Space for a company logo at a dimension of 100 pixels H by 300 pixels W
• A navigation bar large enough to accommodate 10 navigation buttons
• 10 navigation links (labeled as button 1, button 2, etc.)
• An overall dimension no larger than 1024 x 768

Photoshop Technique:

Use Photoshop to create properly sized documents

Apply Photoshop tools and techniques, such as: Layers, Color, Type and Shape

Organize Photoshop files using appropriately titled Layer Groups

Use Photoshop to export a PDF deliverable

You will turn in:

· One project folder titled “lastname_firstname”

· Inside your project folder should be one psd file, entitled “silverlakewine_wireframe.psd”

· Inside your project folder should be a duplicate of your psd file, but saved in the PDF format and entitled “silverlakewine_wireframe.pdf”

Your deliverable is due at the beginning of class on March 3^rd

Date: Spring 2010

Student: Name: _______________________________________

Assignment: Silver Lake Wine Redesign Wireframe

Overall Grade: _________/100 points

Webpage Planning, Layout, Design and Usability: __/60

q All five basic elements are either labeled or clearly defined

q Website has a defined resolution and anchored to the top-left corner

q Easily identifiable and appropriately sized placeholder graphics for 5 images

q Easily identifiable and appropriately sized placeholder graphics for 5 copy sections

q Both images and copy placeholders graphics appear well organized and follow an identifiable pattern

q A logically located and well defined logo placeholder graphic

q A logically located and well defined navigation placeholder graphic, including 10 navigation links

q An overall dimension no greater than 1024x768

Use of Photoshop Techniques: _ __/20

q An obvious use of Photoshop techniques and tools, such as layers, color, type and shape

q Photoshop file is well organized by use of Layer Groups

Presentation of Deliverables: _ __/20

q All files and folders are entitled as instructed

q Both PSD and PDF formats have been used

Comments: