Pralie Dutzel's profile

Local Restaurant Site

I designed this site as a practice for HTML5, so the code includes some features from HTML5, such as sections. The layout itself was designed for use with a local restaurant or small business in mind, and was created so that it could be easily adapted to a different theme when necessary.

The header features a logo, which is centered in the navigation, and a large image that represents what the company is all about (in this case, it could be a restaurant that mostly serves burgers). Such a large image is intended to draw the user in and get them excited about what the company offers. By clicking one of the navigation links, the page will scroll to the appropriate section on the page, and to allow for easier navigation, a scroll to top button will appear along the side whenever the user is not already at the top of the page.

Since the focus of the layout is to get the user excited to eat the company's food, I decided to use images with collapsible tables for the menu rather than the traditional text-only menu. When the user clicks an image in the menu section, it will trigger a small javascript code that will toggle the table with food items and prices.

Finally, the design features a visual specials section that uses hover effects on images to detail the daily or weekly specials the company is offering. 

I decided to keep things simple with this design, especially since it was designed to be easily adapted to whatever restaurant or small business might use it. The red and green colors were pulled from the header image of the burger, and adjusted to be brighter, in the case of the red text, and more pastel-like, for the green background. With a different image or different theme for the site, those two colors could easily be adapted to fit the new theme's needs. Since the background is a pastel color, I chose simple black text that really pops from the background, and used white for dividers and borders, since white is too similar to the green to stand out from it. As for fonts, I only used two for the actual site, although there are two different ones used in the logo. All of the plain text is Walkway Black, while the headers, navigation, and captions for images are in Yanone Kaffeesatz, which contrasts with Walkway Black in that it is curvy and smoother. Both fonts are rather plain to help draw attention to the images and headers, which are in bold and a larger font size.
Local Restaurant Site
Published:

Local Restaurant Site

An adaptable website design for a local restaurant or small business that features a visual-based menu.

Published:

Creative Fields