Pizza menu

Task: Design an online menu for a pizza restaurant. The menu text is provided, add whichever colours, graphics, photos etc. that you see fit. The finished page should function on various screen sizes and platforms – from desktop to mobile. Design is also of importance, with an emphasis on idea, typography, aesthetics and style.

Pizza menu responsive design

A responsive online pizza menu designed with a rustic, hand-lettered look and feel to emphasize the traditional art of pizza making.

Brand design

A photograph from a local Italian pizza restaurant provided a dark and rich colour palette.

The restaurant was aptly named “The Pizza place” – I designed its logo using the lettering font Conflow, embellished with pictograms of typical pizza ingredients.

I picked a slightly more legible hand-lettering style font (Merienda) for headers and for the body text a rounded, friendly, sans-serif font (Mulish). Both are from the Google Fonts library, they’re free to use and easy for a client to install for other purposes like printed menus and so on.

This is what Merienda looks like.

This is a sample of Mulish.

I designed a scalable SVG design element of the text that wasn’t directly relevant to the menu itself, placing the words in round shapes to mimic the look of pizzas. A CSS drop shadow ensures that the text in the graphic is legible even on a busy photo background.

Technology

The online pizza menu has a responsive design coded from scratch using flexbox. The code has been thoroughly checked and all elements optimized – the website scores an A (92% for performance and 95% for structure) in the GMetrix speed test. The colour contrast between background colour and text is checked for accessibility and legibility purposes.

Logo pizza menu
Pizza trivia
Colour palette pizza menu

A responsive online pizza menu designed with a rustic, hand-lettered look and feel to emphasize the traditional art of pizza making.

Brand design

A photograph from a local Italian pizza restaurant provided a dark and rich colour palette.

The restaurant was aptly named “The Pizza place” – I designed its logo using the lettering font Conflow, embellished with pictograms of typical pizza ingredients.

I picked a slightly more legible hand-lettering style font (Merienda) for headers and for the body text a rounded, friendly, sans-serif font (Mulish). Both are from the Google Fonts library, they’re free to use and easy for a client to install for other purposes like printed menus and so on.

This is what Merienda looks like.

This is a sample of Mulish.

I designed a scalable SVG design element of the text that wasn’t directly relevant to the menu itself, placing the words in round shapes to mimic the look of pizzas. A CSS drop shadow ensures that the text in the graphic is legible even on a busy photo background.

Technology

The online pizza menu has a responsive design coded from scratch using flexbox. The code has been thoroughly checked and all elements optimized – the website scores an A (92% for performance and 95% for structure) in the GMetrix speed test.

The colour contrast between background colour and text is checked for accessibility and legibility purposes.

Pizza menu responsive design
Logo pizza menu
Pizza trivia
Colour palette pizza menu

Practice safe design: use a concept

–Petrula Vontrikis

birdesigns symbol

 

© 2022 birdesigns