The Burger Bar

A personal project in which I designed and coded a website for a fictitious restaurant.

July 2016

Desktop View
Skills Utilized

HTML5, CSS, SASS, JavaScript, jQuery

Scenario

The Burger Bar is a popular fast food restaurant which prides itself on making gourmet burgers at an affordable price. It's a hotspot for lunch goers in Central London. The Burger Bar requires a new website which is responsive and gives customers access to the menu, online booking, and information about the restaurant.

Personas

Before I started the design phase, I came up with personas that reflected different visitors to the site and prospective Burger Bar diners. This would enable me to keep in mind the kinds of users I would be designing the site for and also help when thinking about layout, structure, and content.

Sitemapping and Wireframing

I now had a better idea of what sections were needed and how to map them out. Knowing that my users led busy lives and would need quick access to content like menus and location, I decided to incorporate all of the sections into a one-page layout. This would allow for a seamless experience as they wouldn't have to jump from page-to-page to find the information they need.

Design and Development

It was now time to jump into the design and development phases. I decided to combine the two together and 'design in the browser'. This was partly because I was really eager to jump into the text editor and start shaping my code. I used bootstrap to help structure my content and also keep things responsive as I built out the website. That meant that by the end of the build I would only have to add a few media queries to components like the navigation. I also made use of Sass to structure my CSS. You can see the live prototype here.