Sherwood's Restaurant Website Redesign
A Local, Comfortable, BBQ Establishment
Users
Users of all types will be using this website in a variety of possible contexts including mobile, tablet, and desktop. The site needs to be accessible, easy-to-navigate, and visually appealing to anyone at anytime and anywhere.
Functions
Basic Information
Name: Subname (Sherwoods: Established in 1989 in Larchmont, NY)
Tagline (Famous for ribs and wings since 1989)
Logo/Branding (the pig)
Location/Directions (map)
Review quote
Extra information (Gift Cards Available, no reservations, call for large parties)
Photos of attractive food (product shots) and location
Links to Menu, Specials, Directions/Contact
FIG restaurant in Charleston, SC has a very simple, clean, clear opening page with all of the necessary information.
Menu
Sherwood's Restaurant only has one menu (same for lunch and dinner). The menu could be easily divided into Starters/salads, main dishes, deserts, and drinks.
Menu should be clean
Menu should not be downloadable as this could be difficult for different devides
Specials should be highlighted
Pastaria's menu is simple and clean and gives filters to go to a specific place in the menu ( http://pastariastl.com )
Blue Smoke's Menu is also very clean and utilizes filters for the separate sections. (http://www.bluesmoke.com/flatiron/#location-menu )
Contact Us
Location
Map
Directions
Phone Number
Hours of Operation
Link to Facebook Page
Message Form
Whitman's in NYC has a very clean and clear page with a map and contact information. ( http://www.whitmansnyc.com/ )
Presentation
Sherwood's Restaurant's website should be simple and easy to use. Seeing as it is a local establishment, there is no need for excess information. I want to build a site that is contained in one scrolling page with a top navigation.
Responsive Design
Elements in responsive design include Media Queries. For this you must know and decide where are the breaking points and limits of the width of the browser?
Also having a fluid grid system that has page elements designed in relative units (percentages & ems) rather than absolute units. Must know at what point does the grid system change – grid, column width, headers, font sizes. Also you must think about moving from horizontal orientation to a vertical orientation. Parallax scroling and continuous scrolling designs seems to work well for responsive design.
Another issue is using flexible images that can display at percentages and resize to fit browsers. For this you should pay attention to cropping and resizing in extreme detail.
Concepts
The Mobile first concept is to begin your desiging and builing process with a basic mobile phone site then upgrade to smartphones and more complex designs. Device-awareness thinking will aide in the site being able to decide which site to use by the given context and style guides. You should also beware of image heavy site work.
There is a theory that mobile users only want context-specific information. Not every function is needed at any given time on a site and mobile users tend to have a specific function or action in mind, but users can use mobile devices for anything at anytime anywhere. You have to be able to serve all needs. However, making assumptions about your user is dangerous. If a function is too hard to find or perform on a mobile device, or any device for that matter, they may turn to another service or stop using your site altogether. Creating a clear hierarchy based upon market and user research of the most desired functions may be the best opportunity to solve this issue for responsive design without creating a specific mobile application.
One approach for designing for the web is thinking about it in four design scenarios: mobile in portrait screen view, mobile in landscape scree view, tablet in portrait screen view, and tablet in landscape screen view, will cover laptops and desktops as well. For this designers must now consider how the site will look at different widths in order to achieve truly great responsive design.
.PNG)
