Thurs, 1/23

MAIN HTML/CSS Concepts, Illustrator Tutorial, Introducing 1st Individual Assignment

• HTML and CSS lecture (Powerpoints are on Carmen):
  How HTML works
  How the Internet Works
• Short Illustrator Tutorial Specifically for Creating Wireframes and Graphics
  • Opening Illustrator and setting width/height, # of artboards, set units to pixels
  • Edit -> Preferences -> Guides & Grid to create a Grid, View -> Show Grid to show the grid
  • Create Rectangles with Rectangle tool, Stroke & Fill, Transform Controls for Exact Height and Width
  • File -> Document Setup to change the document background color and grid color
  • Using Pen tool, Text Tool, Scale Tool, Rotate & Reflect Tools to create graphics
  • Swatches
  • Saving in Illustrator vs. Export
• First Individual Assignment:
  It's restaurant week! Restaurants around Columbus create a prix-fixe menu with 3 courses.
  Your task will be to redesign La Fogata's web site!
  La Fogata is a Mexican Restaurant in the Short North on High Street. The word "fogata" means "bonfire" en español - a gathering place where people talk and roast food, and also a place with FLAMES (Notice the unsightly flames that seem to be engulfing the web site!).
  • Your site must include:
  • 5 Pages - A Home Page, A Menu Page, A Gallery Page, A Locations Page, and A Contact Page
  • You will construct the pages using HTML and a VERY SIMPLE .CSS Stylesheet that controls the page style of all 5 pages.
  • Site must include Rebranded Header Graphic and home page concept still retaining the same name "La Fogata" Mexican Grill. I am not grading you on your graphic design skills, but I have included some pics below of logos that brand this concept better. For those of you who may not have had a lot of graphic design experience, notice the Kindle Fire logotype. It can be simple! Do not use these exact logos on your site, use them only for inspiration:
    
    
  • Must have a Global Navigation Bar - All Pages must have a navigation bar or list of links so you can navigate to any page at any time
  • Home Page - Must include new brand concept and introduce site, maybe it has specials or the restaurant's catchphrase?! Maybe it has a phone number?!
  • Menu Page - Must include the information from High Street Menu using text.
  • Gallery Page - Minimum 3 Pictures. You may use some of their pictures, or maybe you can find some cleaner-looking stock photos of Mexican food that might work better and is more in-line with your new rebranded concept. This does not have to be fancy and have CSS rollover effects, unless you want it to!
  • Locations Page - Must include address of High Street Location and an embedded map using Google Maps. DO NOT use the same graphic as they have used.
    
    
  • Contact Page - Must have this basic information:
    • Phone Number - 614.294.7656
    • Email - lafogatashorthnorth@gmail.com
    • Street Address - 790 N. High Street, Columbus, Ohio 43215
  • The site must also list this information where you see fit:
    • Hours - Mon - Thu: 11:00 am - 12:00 am, Fri - Sat: 11:00 am - 1:00 am, Sun: 11:00 am - 10:00 pm
    • La Fogata takes Reservations, Walk-Ins are Welcome, Good For Groups, offers Take Out, offers Outdoor Seating
    • La Fogata offers Street Parking, a Parking Lot, and Valet Service
    • Payment Options include Visa, American Express, Mastercard, Discover
    • Include a link to their facebook page
  • You will follow page/site design fundamentals as described in chapter 6,7 & 8 of the web style guide.
    • Hierarchy
    • Typography
    • Legibility
    • Page widths
    • Consistency
    • Contrast
    • Templates
    • Page Structure
    • Global Navigation
  • Menu text and other body text cannot be comprised of graphics - but include graphics if you know how to make them and where you see fit, if it works with your brand.
  • Begin by looking at the current web site (As Is!). Look at how it currently works, its colors, its branding and how it might not be functional. Think about how you can improve usability and get the information across in a better way. Create a sketch of a wireframe for each page, and begin creating new branding - Generate Logo for the site header. Next, craft a single page using Dreamweaver and generate a stylesheet. Once this page is barebones and has the header, body, footer, and navigation, duplicate the file 4 more times and enter in the required info for each, naming each as such: index.html, menu.html, gallery.html, locations.html, and contact.html. Make sure to name your home page as "index.html."
  • This will be due February 13 and you must upload your site file structure containing all graphics, all 5 html pages, and the CSS stylesheet as a zip file in the DropBox. By graphics I mean ONLY the graphics you have inserted into the html - .jpgs or .pngs that appear in your site, NOT Photoshop or Illustrator files.
  • I can post them online and link them to the blog for the critique on Feb 13.
  • ***As a sidenote, for affordable, non-restaurant week Mexican cuisine, I recommend Los Guachos on Godown Rd. You can't be disappointed!!!! :)