Louis Lunch Redesign: Wireframes
- Class: Digital Imagery in Web Design
- Scope: Wireframe
- Technologies: Photoshop
- Year: 2014
This week for Photoshop class, we had a choice of restaurants to make a website redesign. I chose Louis Lunch one of the claimants to the original hamburger. If you’re a Yank, it is the oldest; if a Texan, not so much. But in either case it’s a bit of living culinary history located in New Haven, CT. I chose it because it’s memorable and a fun bit of contention between me and my CT in-laws. Of course, I am not affiliated with Louis Lunch. You can read more about Louis lunch and their hatred of Ketchup on their website or on the wiki page.
For this project we had to start a redesign of their page, in particular make a wireframe. A wireframe is a rough sketch of a website (sans photos and actual copy text) that allows for blocking out information hierarchy and location. Though often in black and white, I prefer to add a little color, as color is a key informational and design element for me. I took inspiration for the wireframe from the building itself, and here is the finished wireframe:
To setup the 1280 x 972 pixel wireframe, I first pressed cntrl k to setup a grid at 80 px with 10 divisions within each 80px. And I used 80px and half of 80 (40) px as my design scale. I displayed the grid and set snap to, so that my guides and blocks would snap nicely to the grid. I first set guides at 80px from the left and right, and then set a grey background between them. Next I pulled the logo and shop image from Louis’ website and pulled the three swatches from them. Louis’ red and brown from the shop and the black from the logo. I then locked the background layers and proceeded to layout the different required elements.
I added guides inside the grey to give the content a left and right margin of 80px, and I laid out the header first. I placed the logo flush left and the tagline/navbar flush right both at a distance of 80 px from the top. I then placed 40 x 40 px boxes for social icons above the tagline in a black background to recall the black roof, and I added a Social feed above the logo. The social feed would be helpful for people to ensure the shop is open as it has hours, but it’s not always open when it says it will be, or closed when it’s supposed to be. And this is placed as the first element in the page, as this would be timely and helpful.
For the main content, I created full inner width slideshow, with a hovering text box which carries the specials (which would probably just be the menu, which doesn’t change). 40 px below that I divided the inner width in three and added three content boxes. The two outer boxes would have copy, perhaps history and hours; the middle would have a photo, perhaps of their famous burger.
And 40 px below the features, I added the footer, where contact information would go.
The color I used to create a Z layout, and pull the eyes across the information. The features I placed towards the end, as this is “extra information.” Since you would already know if the shop was open due to the feed, the hours become less important information, whereas the menu/specials is important for new visitors. And the slideshow should help whet your appetite.