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:

Student examples from 2016.

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 for McKinley's.
  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.
    • How do the pages' navigation and contents respond to changes in viewport size?
    • Underlying layout grids
    • Techniques to indicate hierarchy
    • Use of spacing and proximity used to “chunk” information?
    • Methods to display prices
    • The use of texture, colors, and imagery
    • Animations, transforms, and transitions

Site Structure and Content Outline

  1. Create thumbnails 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 for 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?
  4. Create wireframes (pencil or computer)
    • Show placeholder containers for navigation, sections, text, and images.
    • Establish and indicate the linking of pages and elements.
  5. Submit wireframes for sign-off on or before deadline date.

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 on or before the deadline date.
  4. Translate your mockup designs into HTML/CSS and upload the site to the server.

Technical specs, Prototype, Technology

  1. Set up a Dreamweaver site for the project. Create a “working files” folder, and turn on cloaking.
  2. Build the HTML/CSS layouts to mimic the wireframes.
  3. Add CSS styling to add the graphics and typography to match the mockup.
  4. Test the behavior the available browsers.
  5. Submit final coded site on or before the deadline date.

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 2017 directory.
  • Save a ZIP archive of the site to the class folder.
  • 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. Slicing in AI and PSD
    5. Bootstrap frameworks
    6. Online fonts
    7. Media queries
    8. Scanning line art

     

    top of page