petal plate
UX/UI
Project Overview
Creating the website for Petal Plate, a botanical gardens restaurant, was a thrilling journey that demanded research and creativity. I tailored the website toward our target audience while I researched locations, menu items, prices, etc. The highlight of the project was the design element, where the website came alive with captivating animations as users scrolled, mirroring the dynamic essence of the botanical surroundings. The result is a visually stunning and informative platform that perfectly encapsulates the spirit of Petal Plate, inviting guests to embark on a culinary journey amidst nature's beauty.
Planning & Research
Starting the design began with strategic planning. The first step involved crafting a sitemap, outlining the interconnected structure of the site. This process not only facilitated a clear understanding of how each page should relate but also established the optimal sequence for user navigation. Then, I transitioned to the creation of wireframes, which allowed me to visualize the arrangement of content, including images and text. These wireframes served as a blueprint, guiding the layout decisions and providing a tangible framework for development.
Persona
This restaurant will mainly focus on advertising to a market that is like this persona. It focuses mostly on a demographic that is upper middle class with income available to explore unique restaurant experiences. These people value personalized service with a higher quality experience.
Design
The design process aimed to capture the restaurant's elegance. To establish a refined theme, I opted for a cream and black color scheme, complemented by subtle hints of green and other pops of color, creating a sophisticated palette. To continue the elegant feel, I incorporated dark imagery to visually engage visitors without overwhelming the design. I maintained a unified look by using the same typeface throughout the entire website. To add hierarchy and visual interest, I strategically employed bold fonts and italics where needed.
Motion
I decided to incorporate some motion into the pages of this website as well. As users are scrolling, it takes them into a moving experience. Images and text slide in while you move through the website, which makes a more
engaging design.
