Rulo is an Italian restaurant that artfully combines the timeless elegance of retro design with innovative, contemporary flavors, creating a dining experience that feels both nostalgic and fresh.
Case Study
My Role:
Logo Design, Branding, Wireframing, Mockup, Brand Assets
Tools Used:
Adobe Illustrator: Used for logo design, menu and branding elements
Adobe Photoshop: Used for image editing.
Adobe XD: Used for wireframing, UI design, and prototyping the website.
Challenge:
The challenge was to capture the essence of mid-century modern design—known for its clean lines and warm tones—while ensuring the website was easy to navigate and user-friendly. The website needed to balance between conveying the restaurant's visual appeal and providing the elements guests would expect, such as menu access, reservation features, and contact information. Additionally, it was important to communicate the inviting, upscale experience that Rulo offers.
Research:
To begin, I did some research mid-century modern design. I analyzed the architecture, furniture, and design from the era, focusing on elements like clean lines, waves, and warm color palettes. Rulo’s interior design already embraced mid-century modern themes, and the goal was to translate this atmosphere into the website.
I studied a variety of restaurant websites that effectively incorporated design elements while maintaining ease of use. The key takeaway from this research was the importance of using design elements that are visually appealing but also functional.
Art Direction:
For the website’s visual direction, I focused on a warm color palette with earthy tones, rusty orange, muted pink, and deep green —colors typically seen in mid-century modern interiors. These colors were carefully selected to reflect the warmth and comfort that Rulo’s dining experience provides, while still maintaining a chic and modern feel.
I incorporated wavy lines to give it a sense of movement. These waves reflect the free-spirited design found in mid-century modern furniture and décor. These subtle but impactful design elements contributed to a relaxed yet sophisticated tone.
The typography was chosen to complement the mid-century aesthetic—using a modern serif font for headings and a clean sans-serif font for body text. The serif font has a slightly retro flair, while the sans-serif keeps the design feeling current and easy to read.
Logo:
The logo for Rulo features playful, bubbly typography with smooth, rounded edges that convey a sense of fun and approachability, perfectly capturing the restaurant's lively and welcoming vibe. The standout feature is the subtle nod to Italian cuisine through the inclusion of an olive in the letter “o”. The olive is simplified to maintain a modern and clean aesthetic, ensuring it doesn’t overpower the overall look but still adds a fun, unique touch.
Branding:
The branding elements for Rulo were designed to complement the retro yet modern aesthetic of the restaurant’s overall concept. The warm color palette was used consistently across the website, with accents of wavy lines creating visual interest without overwhelming the user.
The brand’s tone of voice was reflected in the website’s copy, which was casual, inviting, and confident, just like the restaurant experience itself. The branding was carefully crafted to exude both warmth and refinement, ensuring that Rulo felt both stylish and welcoming.
Website UI/UX Design:
In designing the website, the goal was to create a seamless user experience that allowed visitors to easily explore the menu, make reservations, and connect with Rulo. Using Adobe XD, I created a fully interactive prototype, focusing on smooth navigation, intuitive structure, and photos of the food/restaurant.
The homepage greets visitors with a large hero image showcasing the food, and sets the tone for the rest of the site.
Navigation is straightforward, with clear links to the menu, reservation system, about section, and contact information. The “Menu” page uses an elegant, easy-to-read layout that allows visitors to browse Rulo’s offerings effortlessly. Wavy line accents help guide the eye from one section to the next, creating a sense of flow and continuity throughout the page.
The reservations page is designed to be as user-friendly as possible, with a simple form and clear call-to-action buttons, allowing customers to book a table in just a few clicks.
Conclusion:
The design for Rulo’s website successfully merges mid-century modern design elements with a warm, inviting aesthetic that reflects the restaurant’s unique atmosphere. By combining a sophisticated color palette, playful wavy lines, and clean typography, I was able to create a visually appealing and functional website that elevates the restaurant’s brand. The design not only offers an engaging online experience but also strengthens Rulo’s identity, providing visitors with a preview of the vibrant, stylish dining experience they can expect when visiting in person.