Restaurant Website Design

Scenario: You are a graphic designer working for a graphic design firm and have recently designed a menu for a local restaurant. The client would now like you to develop a website for their restaurant.

The client would like to create web pages for:

1. Main navigation / Home Page
2. Restaurant info (Location, phone numbers, restaurant hours, history)
3. Reviews and Articles page (newspaper write ups)
4. Menu pages (Items and prices listed on menu) The client has asked that the website be easy to navigate.

The client would like to see 3 different creative approaches. The client will then sign off on one for the final design. Once the creative approach has been determined you will then produce a tight comprehensive design. The client has asked that the files be put on a server for review.

You will work with your art director on research, idea exploration, and concept development. You will submit thumbnails to the art director, who will then choose 3 concepts to develop into 3 tight roughs.

Once the roughs have been approved by the art director, the client will select one for the final comp. In order to make sure that the job is... a) scheduled appropriately, b) views correctly on various platforms / browsers, and c) all electronic files are configured correctly, you will be in close contact with the production manager.

The final comprehensive design will need to simulate the final online design as closely as possible. The client has asked that all digital files be delivered in order to upload it to their internet service provider's (ISP) server.Production Notes:

Design Concepts:

  1. One concept should repurpose your print menu to work on a website.
  2. Two additional concepts should be different from the print menu.

Roughs: Rough layouts should be JPG files and should include three pages from your site designs. Roughs should be submitted as instructed.

Comps: The final comp will be a fully functioning multi-page website.

Final comps should be submitted as instructed.

Due Date: See the project deadlines

Step 1: Meet with your projects instructor.

  1. Go to the Restaurant Website project page and collect the project information:
  2. Print out a copy of the sign-off sheet
  3. Schedule a meeting with the projects instructor, who will be your client for this project.
Step 2: Meet with your process instructor.
  1. Go to the Restaurant Website process page and collect the process information.
  2. Schedule a meeting with the process instructor, who will be your art director for this project.
Step 3: Meet with your technology instructor.
  1. Go to the Restaurant Website technology page and collect the tech information.
  2. Schedule a meeting with the technology instructor, who will be your production manager for this project.
  3. Determine prerequisite skills necessary to complete the project.
  4. Complete project exercises:
    • grid / table exercise
    • browser compatability exercise
    • tiled backgrounds exercise
Step 4: Complete project research.
  1. Define the target audience.
  2. Define the client need.
  3. Collect examples of online restaurant designs.
    1. Look at MenuPix.com.
Step 5: Develop thumbnails
  1. Create three different concepts for the online restaurant design.
  2. Sketch the main navigation and menu items page in thumbnail form.
  3. Create a hierarchy / flow chart
  4. Verify that your work meets thumbnail criteria.
  5. Submit thumbnails to the art director for approval.
Step 6: Develop rough layouts.
  1. Develop roughs from thumbnails which were approved by the art director.
  2. Rough layouts should be drawn in screen capture of a browser window and communicate more detail than the thumbnails.
  3. Verify that your work meets roughs criteria.
  4. Submit roughs to the art director for approval.
Step 7: Submit rough layouts to the client.
  1. After the art director approves our roughs, meet with the client and present your designs.
  2. The client will approve one of the designs to be taken to final stage.
Step 8: Meet with the production manager.
  1. Determine the skills and steps needed to produce your design (digital strategy).
  2. Discuss your digital strategy with the production manager.
  3. Ask the production manager about any issues you are unsure of.
  4. When it is clear that you understand how to produce your design correctly and efficiently, the production manager will approve your strategy.
Step 9: Produce the digital comp.
  1. Create imagery using Adobe Photoshop and Illustrator
  2. Assemble text, images and create html documents using Macromedia Dreamweaver
  3. Conform to standard web criteria for all file preparation and type formatting.
  4. Make backup copies of all files after each work session.
  5. Print a black and white laser proof within a browser window and check for correctness and accuracy.
  6. Have "PEER REVIEW / CRITIQUE" of your grayscale digital comps.
  7. Make appropriate revisions.
  8. Copy all final documents to the server folder(s) specified by the client and production manager.
  9. Make an appointment with your art director for sign off / approval.
Step 10: Verify correct file preparation with your lab instructor.
  1. Using the the web checklist have a "TECHNOLOGY PEER REVIEW" of your project files before meeting a lab instructor
  2. Make an appointment with your lab instructor to sign off on the following:
    • hand in studio (lab) time sheet
    • show back up filing system
    • discuss file organization and naming conventions
    • discuss learning strategies
  3. Verify:
    • Correct raster file sampling and preparation
    • Correct color usage
    • Only neccessary files are included for ISP
    • Correct sizing of web pages
    • Web browser compatabilty
    • PC and Mac Platform compatability
  4. Submit project checklist to your lab instructor for approval / sign-off.

Step 11: Submit final comp to the client.

Step 12: Fill out self-assessments: