Welcome to the whimsical world of Whimsy Cookie Workshop, a fictional cookie shop celebrated for its cozy ambiance, where you can relish artisanal cookies and create cherished moments with friends in São Carlos, Brazil.
- React
- Tailwind
- Framer Motion
- Figma
The primary goal of this project was to craft a polished landing page for the cookie shop. It needed to encompass essential information such as an introduction, menu, address and map while having a cool and inviting vibe.
The design was a unique challenge, I incopotared a lot of vibrant colors alongside smooth animations to create a jovial atmosphere.
Figma was employed for design, streamlining the interactive design process before implementation.
The website was built using React and styled with Tailwind. They are industry-standard tools known for their efficiency in development. Deployment was carried out on Vercel using Next.js, leveraging its excellent free tier.
Framer Motion added smooth animations with a more straightforward API than CSS. HeadlessUI was utilized to improve accessibility.
The project was intentionally designed with an expansive approach, resulting in a visually stunning website but a more leisurely development experience.
While the abundance of animations contributed to a polished appearance, I overutilized them, affecting the site's performance on older machines. The diverse color palette for each section brought vibrancy and charm to the website but proved to be cumbersome. This strategy diluted the shop's branding, lacking a distinctive main color. The use of a vibrant color as a background presented specificity challenges, essentially restricting foreground color choices to white. Moreover, this exponentially increased the number of colors, complicating the design process.
The contact section received special attention, prioritizing easy access to location, phone, and opening hours. Google Maps was integrated for the map functionality. Although the default appearance of Google Maps is acceptable, it lacks personality. Attempts to style it proved excessively time-consuming. Ultimately, I opted for Snazzy Maps, which offers a variety of appealing public styles.
Two significant lessons emerged from this project.
First, researching other websites, utilizing platforms like Web Design Inspiration, proved invaluable. Learning from experienced designers who have tackled similar challenges can provide valuable insights. However, it's essential not to adopt all their tricks at once.
Second, understanding when to narrow down the scope is crucial. Limiting animations, color palettes, text, and featured elements is essential to ensure timely project delivery.