Restaurant Web Site

Project Calendar    Restaurant Branding    Print Menu

Scenario:

You are a graphic designer working for a graphic design studio. A local firm that operates small restaurants in our area is planning one more restaurant.
They would like you to design the web site; tell the story of the brand, present the food offerings, and take care of the details like location, contacts, jobs, and such.

Warming up

Read pages 240-264 in the Branding chapter of Robin Landa's Graphic Design Solutions.

Review the process of critical thinking.

Design Process

Here are some resources:

2017 Student examples and 2016 Student examples

The workflow, as told by Graphic Design Solutions

We will extract some of the wisdom from Robin Landa's 13th chapter, Interactive Design and Motion Graphics. The chapter is immense, so skim through it and we will concentrate on the web design areas. The following is Robin's workflow; we will follow it loosely.

  1. Project plan: orientation and analysis to set and guide the goals and form the team of experts
  2. Creative brief: to outline creative strategy as it relates to the broader brand or visual identity, positioning and tar-get audience, and all the other objectives of a brief
  3. Site structure: plan, map, and prepare content and information architecture (functional specifications) and address technological challenges
  4. Content outline
  5. Conceptual design: generate a design concept based on strategy and brief
  6. Visual design development: design grid/template and element placement; determine visualization method; set color palette, web type styles, style of navigational cues/graphic interface (link buttons), style of photos, illustrations, and other graphic elements; determine how to integrate media; layout main screens to determine geography, almost like a storyboard
  7. Technical specs
  8. Prototype
  9. Technology: technical solutions, alpha, beta I and II
  10. Implementation: launch, promotion, updating, and ongoing testing for usability

Project Plan and Creative Brief

  1. Review the results of the branding and menu phases of this project:
    • The creative brief
    • The samples of restaurant sites and menus
    • The branding from local competitors.
    • The menu copy.
  2. Identify design techniques used in web sites.
    • Review your research of web pages.
      (What do you see in the code of other retaurants?)
    • Look for presentation of navigation, food items, content areas, and interaction.
    • Consider interesting trends from any genre of sites.
    • Note how pages' navigation and contents respond to changes in viewport size.
    • Examine underlying layout grids
    • Note techniques used to indicate hierarchy
    • Use of spacing and proximity to “chunk” information?
    • Methods to display prices
    • The use of texture, colors, and imagery
    • Animations, transforms, and transitions
    • Submit a mood board for Step 1 sign-off.

Site Structure and Content Outline

  1. Create thumbnails/wireframes meeting the following criteria:
    • show a minimum of three different concepts
    • show composition variations for each concept
    • are fast and un-detailed
    • are drawn in proportion to the dimensions of the finished piece
    • show emphasis, balance, unity, rhythm
    • convey composition, sizing and position
    • show general shapes of graphic elements (images, text, etc.)
    • display readable headline type
  2. Submit thumbnails/wireframes for Step 2 sign-off on or before the deadline date.
  3. Collect the contents for the page.
    • Menu items
    • History and story
    • Mission statement and philosophy
    • Location, catering
    • Meetings and parties
    • Other?

Conceptual and Visual Design

  1. Review the concept and design in the brief and print menu.
  2. Create rough mockups of the page layouts. Show the view for the phones and desktop.
  3. Submit the final mockups for Step 3 sign-off on or before the deadline date.

Technical specs, Prototype, Technology

  1. Obtain Technical Strategy Step 4 sign-off.
  2. Set up a Dreamweaver site for the project. Create a “working files” folder, and turn on cloaking.
  3. Build the HTML/CSS layouts to mimic the wireframes.
  4. Add CSS styling to add the graphics and typography to match the mockup.
  5. Test the behavior the available browsers.
  6. Submit final coded site for Step 5 sign-off on or before the deadline date.
  7. Make design revisions and obtain Step 6 sign-off.

Implementation

  • Check final files for unused parts or excessive image sizes.
  • Store extra parts in a cloaked "Working files" folder.
  • Upload the site to the class server. This is the Winter 2018 directory.
  • Save a ZIP archive of the site to the class folder.
  • Obtain the Final Deliverables, Step 7 sign-off.

    Design Technology

    Exercises, discussions

    Process:

    1. Mind maps
    2. Mood boards-how they are used...listen to this discussion from the Reflex Blue Show podcast. For the full context, here is the whole show. Paul Boag explains why he uses mood boards in this Smashing Magazine article. This article gives 24 practical tips; also, here is a short explantion. A simple template.
    3. What is a persona? How about stereotypes? These episodes from the film People Like Us: Social Class in America are show some examples of "middle class".
    4. A general FYI-How to be a better designer-Nigel French nails it!

    Technology:

    1. Halftones
    2. Bit depth
    3. Web graphics formats, optimization; GIF, JPEG, and PNG
    4. Use paragraph and character styles (print) and CSS (web) to format text
    5. Bootstrap frameworks
    6. Online fonts
    7. Media queries
    8. Scanning line art

     

    top of page