Project 1 — Wireframes

For the wireframes I started with some quick thumbnails just to get ideas down. Every page needs the header (logo, social media icons, optional tagline), navigation (Menu, Catering, Specials, About), and the footer (sitemap & copyright).

The homepage needs a large image, location/hours, a blurb about Eastside Bistro, brief information about specials/Happy Hour, and brief copy about Facebook/Twitter.

The menu page needs sub-navigation for each course, an image of the food, the menu items, and prices.

The about page needs an image, copy about the owners, how they “keep it fresh at the Bistro”, and brief information about social media.

I came up with three different layouts trying to keep the same feel for each page.

A (three at top left), B (three at bottom left), C (three at top & bottom right)

Layout A — centered logo, social media icons at top right, horizontal navbar, large centered image, the main body is basically three columns (with copy spanning 2 columns with the remaining one float left or right; or with copy in each column), and the footer is minimal (just text). The menu page is a little different because of the sub-navigation in a box to the left of the large image. The about page has a three column thumbnail gallery.

Layout B — logo aligned left, social media icons at top right, tagline, navigation buttons float left, large image float right. This layout is basically two columns but with some centered sections. In the wireframe I made the menu items centered but I think it would be better to use the one from Layout A. Again this has a somewhat minimal footer, possibly with Facebook and Twitter icons.

Layout C — header like Layout A, full width image, centered with some three column sections, minimal text-only footer.