Restaurant Website

Scenario:

Scenario: You are a web designer working for a graphic design firm. A local full service restaurant needs a website. The client would like the website to have the look and feel of their current menu design. The on-line information will need to be accessed by desktop computers, tablets, and smart phones.

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 one tight comprehensive design. The client has asked that the files be put on a web 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 on-line design as closely as possible. The client has asked that all optimized digital files (html, css and image files) be delivered in order to upload it to their internet service provider's (ISP) server.

Examples: 1 | 2 | 3 | 4 | 5

 

Research

STEP 1:

Think critically and problem solve.

  1. Define the target audience.
  2. Identify the competition.
  3. Define the web site's unique selling points.
  4. Plan, map, and prepare content and information architecture (functional specifications / site map).
  5. Research various Bootstrap template designs.
  6. Research and collect examples of well designed websites using:
    Webby Awards
    , Awwwards, The Best Designs or Communication Arts
  7. Clarify conclusions in design thinking by choosing examples that clearly show excellence in navigation and layout.
  8. Provide a minimum of 200 images.

Obtain Step 1: Research sign-off from your process instructor.

 

Design (Thumbnails / Concepts)

STEP 2:

  1. Brainstorm concepts and solutions.
  2. Develop quick concepts, in thumbnail form.
  3. Develop quick layouts using wire frames with a 12 column grid.: 1 | 2 | 3 | 4
  4. responsive web sketch template

  5. Verify that your work meets thumbnail criteria:
    • Generate as many thumbnail sketches necessary to...
      communicate a minimum of 10 different web design layouts.
    • shows composition variations for each concept
    • are fast and un-detailed
    • are drawn in proportion to the dimensions of the site
    • clearly conveys photographic or illustrative imagery: 1 | 2 | 3
    • conveys composition, sizing and position
    • includes typographic, photographic or illustrative imagery
    • shows general shapes of graphic elements (images, text, etc.)
    • displays readable headline type
    • are brand driven
    • indicates that you can come up with more then one good idea
  6. Work on visual design development by...
    • determining grid / template placement of elements
    • determining the color palette
    • defining the web type styles
    • determine style of navigational cues / graphic interface (link buttons)
    • determining style of photos, illustrations, and other graphic elements
    • determining potential integrated media
    • designing layouts for landing and main menu page

  7. Submit your 10 most promising web design layouts to the art director for review. Include both landing and menu pages (ie: qty 20)
  8. With your Art Director, determine the 3 best layouts to develop.

Obtain Step 2: Design (Thumbnails / Concepts) sign-off from your process instructor.

 

Moodboards

(Note: will be replaced by wire frames)

STEP 3:

  1. Assemble three wire frames to:
    - communicate potential navigation systems and layout to an art director or client

    Include the following...
    • user interface for mobile device: vertical aspect ratio (landing page)
    • user interface for tablet device: horizontal aspect ratio (landing page)
    • user interface for desktop device: horizontal aspect ratio (landing page)
  2. Obtain feedback from your Art Director.

Obtain Step 3: Mood Boards sign-off from your process instructor.

 

Roughs

STEP 4:

  1. Develop three rough layouts from the thumbnails selected by your Art Director that meet the following criteria:
    • show navigation system / interactivity
    • work off of the previous thumbnail sketches
    • indicate type choice (typeface, case, type style, etc)
    • are drawn in proportion or actual size
    • indicate usage of color
    • incorporate the design elements
    • are computer generated (or a combination of hand drawn / computer generated )
    • convey copyright free typographic, photographic or illustrative imagery
  2. Design layouts to mimic the wireframes.
  3. Use a 12 column grid system.
  4. Present your designs in PDF format.
  5. Take notes of any suggestions for improvement.
  6. The Art Director will then approve and sign off on one design layout to be taken to final stage.

Obtain Step 4: Roughs sign-off from your process instructor.

 

Technology Strategy

STEP 5:

  1. Determine the skills and steps necessary to produce your design.
  2. Discuss your digital strategy with the Production Manager.
  3. Choose the appropriate software to create / edit HTML and CSS.
  4. Address technology challenges.
  5. Ask the Production Manager about any issues you are unsure of.
  6. Create job folder(s) as instructed by your production manager.
  7. When it is clear that you understand how to produce your design correctly and efficiently, the production manager will sign off/approve your strategy.

Obtain Step 5: Technology Strategy sign-off from your technology instructor.

 

Final Design

STEP 6:

  1. Create all native files (raster and vector images).
  2. Build the HTML/CSS layouts to mimic the wireframes.
  3. Assemble text and images using HTML & CSS.
  4. Include necessary copy:
    introduction/history, appetizers, soups, salads, entrées, desserts, beverages, contact info and hours
  5. Show visual hierarchy within the body text.
    (usage of book, italics, bold, line / implied line, or shape for type reversal)
  6. Check site in various web browsers to make sure all images and interactivity function correctly before the presentation.
  7. Make backup copies of all files after each work session.
  8. Present your final designs to your art director using a web browser.

Obtain Step 6: Final Design sign-off from your process instructor.

 

Design Revisions

STEP 7:

  1. Using the suggestions for improvement... make necessary interactive, copy and design revisions.
  2. Submit final HTML, IMAGES and CSS files.
  3. Submit all components on or before the deadline date that indicates entry level graphic design by completing the list of items above.

Obtain Step 7: Design revisions sign off from your process instructor.

 

Final Deliverable

STEP 8:

DELIVERABLES INSTRUCTIONS

  1. Use, edit and manipulate HTML / CSS using Bootstrap.
  2. Create job folder(s) as instructed by your production manager.
  3. Produce and optimize web imagery.
  4. Use and name layers to isolate graphic elements in order to manipulate / change specific elements without effecting other elements of the design.
  5. Use and name layers as a communication tool for working with a web developer or within a team.
  6. Use ruler guides and 12 column grid system to align text and graphics.
  7. Use CSS to define typographic styles.
  8. Use effective file management and follow instructions for saving files to appropriate volumes by...
    • using descriptive file names, formats and extensions
    • using and saving sequential files or drafts
    • using a dedicated folder for working files
  9. Save the final HTML, CSS and IMAGE files by...
    • using dedicated root folder for working files
    • optimizing imagery for faster downloads
    • delete any un-necessary files
    • uploading final design to the web server (ie: SFCCdesign.com)
  10. Assess your work and make appropriate revisions.
  11. Package files and upload for archiving purposes to the server provided.
  12. Use a back up filing system.

Obtain Step 8: Final Deliverable sign-off from your technology instructor.

Assess your work for both Process and Technology and hand in the sign-off booklet.

 

Resources

Process

  1. TBD

Technology

  1. Bootstrap 4 Tutorial
  2. responsive web sketch template
  3. web typography cheatsheet
  4. How do I upload my website to Bluehost?

top of page