Web Design for
Pizzeria Lardo
Every time I come to Korea I make sure to eat at Pizzeria Lardo, a pizza restaurant of a close family friend Sangmok Jung. Though he keeps up a good Instagram presence, he has no official website or form of online advertising beyond social media. After hearing I was looking for design projects, Sangmok asked if I would be willing to develop a website mockup for his business, in the case that he wanted to expand his pizzeria online. I was more than happy to, not only because I was a huge fan of his pizzas (they are seriously so good!!), but I was also interested in the challenge of designing for a brand that had an existing storefront but no official visual guidelines.
Objective
Develop an official branding guideline to keep Pizzeria Lardo's visuals consistent.
Deliverable
A visual style guide and an interactive, high-fidelity prototype of a website homepage made with Figma.
Client /
Pizzeria Lardo owner, Sangmok Jung
Role /
Brand and Web Designer
Team /
Myself
Tools /
Figma
Timeline /
3 weeks, 2024
Brand Research
Brand Overview
Pizzeria Lardo is a small chain of Italian restaurants with a handful of locations around Korea, known for their homemade pizzas and pasta. It's run by one person (Sangmok), and he prioritizes a comforting, feel-good atmosphere at each store.
Brand Personality
-
Respectable, but approachable.
-
Casual dining, but want to emphasize delicious and quality food
-
Drafting
To understand my source material, I take a look at the restaurant’s menu and pick some of their key items to use as inspiration. I do some quick warm-up studies of them, using their colors and shapes as a starting point for my web mockups. I want to ensure my designs call back to the focus of the pizzeria: their delicious food.
After pulling some common colors and shapes, I start with a quick brainstorming session, giving myself only 30 seconds to sketch some different homepage ideas. You can see where I draw in the inspired colors and shapes, like the oval curve of the lemons or the trapezoidal edges of the lasagna pan.
Using these sketches as a base, I start blocking out colors. What sort of feeling do I want the viewer to have upon coming to Pizzeria Lardo’s website, and what’s the first thing I want them to see? Ultimately, I want the viewer to be drawn to photos of their mouth-watering food, and the best way to do that is to give ample space to these photos. I also reference the websites of some local pizzerias near me and see that most headers are short and succinct, choosing to capture people’s attention visually and presenting the lengthy, wordy menu on another page.
Once I have the first sketch drafts, I send them over to Sangmok to get his opinion. I offer suggestions for which I personally prefer, but because this is his brand, I ensure I get his feedback throughout the design process. He picks 5 drafts he’s especially drawn to, appealed by their large photos and simplistic layout. Keeping these insights in mind, I move my work into Figma for a high-fidelity prototype.
Style Guide
Before I start building the homepage drafts, I develop a style guide for Pizzeria Lardo to ensure all the drafts are consistent. I do so by pulling from their existing logo and fonts (using photos of the storefront as a reference) and consolidating a color scheme, body text, and potential logo use cases.
.png)
Once the style guide is finalized, I move on to the first iteration drafts for the homepage.
Homepage Header Mockup
Referencing my sketches, I built mockups of the designs he was most interested in through Figma. Making these mockups allows me (and my client) to visualize the impact of the text and images when pulled up on a full desktop. One large concern is regarding readability — design #3, for example, requires a dark image to contrast the white text on top of it, otherwise, the text is inaccessible for those with visual perceptual deficits.
After showing these to Sangmok and my peers for feedback, we came to an agreement that the fourth design is the one we want to push.
Homepage Layout Drafting
Now that I have a header, I start extending the design into a larger homepage. Referencing other local pizzeria websites, I begin assembling a list of information to incorporate:
-
Menu
-
General “About Us”
-
Reservations
-
Locations
-
-
Footer
-
Contact information
-
Opening and closing times
-
Keeping this list in mind, I return to sketching, focusing on a full webpage imitating the style of the chosen header while incorporating sections for these pieces of information.
With these sketches as a reference, I begin exploring general layouts in Figma.
High Fidelity Homepage Layout
I divide up the menu, “about us”, and footer section and focus on each individually, playing around with photo and text placement and colors to see which layout is appealing while fitting cohesively with the others.
The menu section allowed for the most diversity, as I considered what sort of information I’d like to show from the homepage: for example, do people want to see some examples from the menu? If so, do they want to see the price and ingredients? Or would it be more appealing to show the photo alone? Ultimately, I decided that a preview of menu items in a general grid layout registers more easily to the viewer as a menu.
After pulling together different sections and getting feedback about which to use, I develop a quick prototype for Sangmok to look through to imitate the functionality of a real website. To help with the interactivity of a prototype, I also expanded the menu into its own page to test how it would look on its own.
Final High-Fidelity Prototype
Not only did I adore designing for a business I was personally passionate about, this project was unique in that I got to work closely with a client throughout the process. This project helped me understand the importance of client feedback; knowing not only how Sangmok conceptualized his brand, but also how he wished the general public to view his restaurants. For me, the fun part of the challenge was being conscientious in using design to shape public perception of his brand.