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.
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.
Practice safe design: use a concept
–Petrula Vontrikis