Project 1 – Store Redesign

GRAPHIC DESIGN FOR THE WEB

Online Store Redesign – Part One

Your assignment is to develop a redesign for an existing online store.

Selecting your ‘client’ store is up to you, but it must be a site not blocked by the division web filter. I recommend you pick a product type, one that you are interested in,  then google search for that item. A search for ‘guitar store’ will find many stores. The same would work for ‘jewelry store’, etc. Pick the UGLIEST store you can find.

You must identify the organizational and visual problems of the original site in a word document. Focus on the experience of a customer trying to shop at the store. Does the appearance of the store make you want to stay on the site and shop? Is the shopping experience enjoyable?

How would you reorganize the site to encourage customers to stay and shop? How would you make the shopping experience more enjoyable?

PROJECT REQUIREMENTS – DESIGN STAGE

This part of project will be marked on the following:

ASSESSMENT:25% from the design problem – Due Date:May 16th- NOTE: The DEADLINE for this part of the assignment is set in order to have time to complete  the rest of the assignment. If you are late for part one chances are part two, and your portfolio site will not be completed by the end of the course.

Identifying the organizational and visual problems in the original site – (Mark based on a word document reviewing the site, including a screen grab with notations) (10%)

  1. Assessment: How well did you identify the qualities of the existing site that require a redesign?
  2. Home Page Visual Comp- A 955px x 600px photoshop file, displaying the main elements of the home page, in full color, showing the banner graphic, main navigation system and content areas with representative content
  3. Home Page Visual Comp for mobile example iPhone 5-320 x 568 & 568 x 320(15%)
    Assessment: Overall visual style (Gestalt), Layout, Typography, Imagery, Product Branding

GRAPHIC DESIGN FOR THE WEB

Online Store Redesign – Part Two

PROJECT REQUIREMENTS – PRODUCTION

Sample page creation for desktop screen

You are not expected to recreate the entire site but you are expected to create new versions of the following:

  1. The home (index.html) page for the site, which contains links to at least four separate categories of merchandise, and a shopping cart page.
  2. A category page that describes one category of the merchandise, with links to specific products
  3. A product page that includes an image for the product, a description, applicable information such as brand, size, color, price depending on the product (selling games would require different information from dresses)
  4. A ‘shopping cart’ page that shows how an order would be displayed.

All pages must have the following:

  1. A consistent style, a ‘look and feel’ that reminds the customer where they are shopping, typically this would include a consistent banner graphic and navigation system.
  2. An easy method of finding other pages
  3. Working links to the all other completed pages
  4. Appropriate visually stimulating images which are not pixilated.
  5. Page layouts created in code using HTML 5 elements header, nav, aside, article, footer or DIV tags and CSS styles which organize the content in a logical and visually interesting way.
  6. All text should be formatted using CSS styles, text that is not styled shows as default Times Roman, and marks will be deducted. Typographic design should be evident in your font selection, line-height, word and letter spacing

ASSESSMENT:75% from the Site Redesign – Due Date:May 14th.

  1. Finished home, category, product and cart html pages.

NOTE: ONLY HTML PAGES WILL BE ASSESSED, SUBMISSION OF PHOTOSHOP FILES ONLY IS A FAIL.

Assessment:

Solution of the organization and visual problems identified on the site.

  • Organization and overall design 25%)
  • Overall completion of 4 html pages (20%)
  • Layout (10%)
  • Typography (10%)
  • Imagery (10%)
  • Completed Peer/Self-Assessment Sheet
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: