COFFEE SHOP WEBSITE
Les Crepes - Coffee Shop
Year
2023
Client
Coffee Shop
Services
Web Design
Tools
Adobe XD
Miro
Aobe Illustrator
DESCRIPTION
The primary objective is to create an engaging online platform that accurately represents the charm and offerings of the coffee shop while providing users with an intuitive and informative experience.
PROJECT PLAN
The project plan for the “Les Crêpes” coffee shop website encompasses meticulous stages of planning, design, development, and an orchestrated launch. The primary objective is to create an engaging online platform that accurately represents the charm and offerings of the coffee shop while providing users with an intuitive and informative experience.
- Planning
- Design
- Development
- Launch
DESIGN OVERVIEW
Theme Selection: The colour theme for the website based on the French flag colors. This choice was decided based on the client’s desires and requests gathered in the client interview held earlier this term. The choice to go for a French feeling on the website comes from the kind of establishment the client has and the user experience the client wanted for it. Used light colors for the background to prevent distractions from the users when navigating it so that they can focus on the content and products while also respecting the French flag, which has the colour white in it.
Figma Project Link
Les Crepes Logo
The layout was based on the best common practices for business websites. Used a clean design throughout all pages to let the content of the website shine. Another reason for using a clean design was to give a feeling of a sophisticated place, being beautiful and intuitive yet simple.
Went with a zig-zag layout for the Home, Contact Us, and About Our Restaurant pages, alternating in which side content is with each content block. Used a split-screen layout for the drinks and crepes menu pages, conveying all information in two different columns. Used a grid for the gallery page to let the users see all photos in small sizes and choose any of them to see it in a bigger size, in a way similar to various other websites, for example, YouTube.
IMPLEMENTATION DETAILES
Requirments: Have the same French theme atmosphere as the restaurant.
Derived req: The colors of the French flag will be used and respected on the website.
How we achieved it: The website uses elements, like the footer and buttons, with a blue colour that matches the French flag blue. It also uses some specific texts in the same red colour as the French flag as well. Both of them are used with less opacity, so it maintains the sophisticated feel of the website.
Primary Requirments: Showcase restaurant through a gallery
Derived req: We will use pictures from the restaurant given to us by the client.
How we achieved it: The gallery page is well organized and can show everything the client wants. All media used in this project is stock media, easily replaceable for the client’s custom pictures and images.
Contact and location information
Derived req: Put contact information text visible for the user and pin the restaurant location on the Google map embedded on the site.
How we achieved it: A website page is dedicated to giving users the contact and location information for the crepery. The phone number is also in the header of all pages. As for the embedded google maps, it was put in the website’s footer instead of being only on this specific page.
Highlight some premium, most popular products on the menu
Derived req: Showing products and prices the restaurant has to offer. According to the client, the menus will have 3 to 4 pictures. Showcase this premium section in a highlighted area.
How we achieved it: Any product that the client may want to highlight can be put as the image on the menu pages. The products can also be shown on the home page and even on the gallery page.