Screen-based design 3 M1

Brief: You will be creating a web page that serves as an online menu for a small restaurant. The web page will be coded from scratch using HTML and CSS (no website builders may be used).


I chose to make a menu for the restaurant, a vegan concept with green food menu items. I turned to google for inspiration from existing vegan restaurant websites. Visually, they varied between green – either all green or with a contrasting colour – and pastel with light wood tones somewhat in the style of Scandinavian interior design. A couple of them stood out; one in entirely black and white, and one with a dark saturated blue matched with equally saturated contrasting colours.

The food menu is presented in three ways: as a linked PDF, as a text-only page, or with a photo for each item (one of them is using a third-party service for this). I prefer seeing pictures of the food, especially when unfamiliar with the names and/ or the ingredients. However, I found myself turned off by the restaurant using photographs, simply because the visual style didn’t appeal to me. The restaurant in question did have the most modern and adaptable layout, while the ones with PDFs or text-only menus were surprisingly poorly excecuted in regards to responsive design. Still, as a fan of colours I found it eye-opening to note how much I “hated” the look of that site and preferred restaurants with outdated and boring presentations. During my research, I also looked into how the food transport service “Wolt” presents the food – clean, simple, neat.



From my own experience, what I want from a restaurant website – besides its menu – is its location, opening hours, and the owners’ (food) philosophy. This means that the website could easily be a one-pager (depending on the number of menu items!). Still, in most cases, the common wireframe of a home page with selling points paired with a couple of subpages for more information is an excellent template to build upon. I decided on the following wireframe alternatives for my restaurant website:

n.Eat wireframe

More detailed, the elements could be placed on each page similar to this:

Wireframe front page
Wireframe menu page