S18 Project 2: Responsive restaurant scrolling site and mobile design (60 Points)

Design a single page scrolling site for a restaurant and a landing page for a mobile design using Photoshop (or equivalent -- InDesign, Illustrator)

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

 

Due Date:

The complete project is due the last week of class

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Description

For this project you will be creating a design for a fictitious restaurant of your choice in TWO different screen sizes. It should demonstrate how a layout needs to change to accommodate different devices. This is particularly important for a restaurant site that is very likely to be viewed on a mobile phone.

Screen Dimensions:

  • Mobile: 320 wide x 480 high
  • Laptop landing page: 1600 wide x 1000 high (vertical dimension can extend as far as necessary but landing page must be in this dimension)

Design Requirements

Your designs should clearly demonstrate:

  • The design principles: contrast, alignment, repetition and proximity (CARP) and their related techniques (negative space, simplicity, hierarchy, organization etc.).
  • Creative and readable typography
  • Understandable, logical and readable navigation for laptop
  • Use of texture (not excessive!)
  • Use of a harmonious color palette (in panels) that creates a mood for the restaurant
  • Creative treatment of photos (interesting cropping, colorizing, blurring, slicing, surface texture etc.)

Content and Production Requirements

You will probably need to use Photoshop to complete this project although Illustrator/InDesign might work ok. Two template files will be provided to create the illusion that your design is actually on a laptop or mobile screen (see the Project 3 assets folder).

Mobile Design: 
This should be designed so users can get to the most important information quickly. The name/logo and "brand/mood/style" of the restaurant must be clearly communicated and should be stylistically unified with the laptop design. The proportions are vertical at 320 pixels wide x 480 pixels high. You can use icons to indicate a drop down menu (three horizontal lines) but your screen layout must have THREE navigation buttons to essential information. Be sure to research restaurant sites and see how they format their mobile designs.

Laptop Landing Page and Scrolling Design: 
This design will feature a landing page (1600 pixels wide) and a set of colored/textured panels to create a one page scrolling layout. You will need to include the following:

Landing Page:

  • Navigation bar including important navigation links: Home, About, Menu, Location, Contact
  • Logo/name: Invent or redesign a name/logo for the restaurant. It can be a "word/name" logo or you can have a dingbat/icon as well. The name should be in an appropriate font for the type of restaurant (but it doesn't have to be an obvious choice like a font called "Asian" for a Chinese restaurant!)
  • Tag line/catch phrase: Come up with a tag line that describes the restaurant. Examples: "Truly the best restaurant in town" "Bringing the exquisite taste of Asia to your table"
  • Dynamic hero image: Locate a photo (or photos) that communicate the food/atmosphere of the restaurant. You need to do something creative with these (either cropping, slicing, blurring, colorizing... or something!)!

Scrolling Panels (below landing page):

  • About Panel: You need to have a "Welcome" "history" "about" paragraph about the restaurant. This should be at least 50 words and needs to demonstrate readability. It's fine to "borrow" and edit from an existing site!
  • Menu Panel: This can feature links to different menus/specials/wine lists/drinks, etc. (don't include entire menus!). Might be a great place to have some mouthwatering food photos!
  • Contact Panel: This should have important information such as: address, phone, map, hours, reservations form etc.

Here are some examples of one-page scrolling restaurant sites that are a close match to the design you will be creating:

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Submission

  1. You will be creating components of this design during the assignments (color, images and textures).

  2. Once you have completed all the components, you will use the Photoshop template files for mobile and laptop to insert your designs into a mobile and laptop image. For the laptop template, you will insert only the landing panel. Then, save both as a jpeg images at the actual size.

  3. Upload your final designs to Canvas by the due date (to be provided).

Here's a sample of what you're aiming for (although your laptop and mobile screens are separate):

devices with designs

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Project Samples

Here are a few samples you can use as a basis for your designs. These are from actual sites so some may not exactly represent the requirements of this project!

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Research/Inspiration

Here are some links to some one page sites for designers and an inspiration site:

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Points

This project is worth 60 points for the final design + extra points for each component (assignment)