Objective
Design a new home page and menu page layout for Butter Café.
Process
After initial research of coffee shop competitor websites, I pulled design elements that worked and took note of what does not work. I brought these into my wireframe for the web design.
Using darker tones I created a refined and moody atmosphere for the café. With the completion of the homepage, I made a menu page for the bakery items. Remembering other web design layouts that were not as effective, I made sure to keep this simple and light to read.
Butter Café Wed Design Mock Up
Butter Café Wireframe
annotation notes
1. COVID-19 Banner Message
2. Image: Company Logo
3. Main Navigation Bar: About, Coffee, Bakery, Classes, Contact
4. Image Carousel
5. COVID-19 Heading and Text
6. Coffee Heading, Text, and Button
7. Bakery Heading, Text, and Button
8. Image: Building Interior
9. Our Story Heading and Text
10. Barista Classes Heading, Text, and Button
11. Find Us On Instagram Heading
12. Instagram Posts Carousel
13. Image: Map
14. Contact Us Heading and Text
15. Hours Heading and Text
16. Image: Company Logo
17. Social Buttons: Facebook, Twitter, and Instagram
1. COVID-19 Banner Message
2. Image: Company Logo
3. Main Navigation Bar: About, Coffee, Bakery, Classes, Contact
4. Image Carousel
5. COVID-19 Heading and Text
6. Coffee Heading, Text, and Button
7. Bakery Heading, Text, and Button
8. Image: Building Interior
9. Our Story Heading and Text
10. Barista Classes Heading, Text, and Button
11. Find Us On Instagram Heading
12. Instagram Posts Carousel
13. Image: Map
14. Contact Us Heading and Text
15. Hours Heading and Text
16. Image: Company Logo
17. Social Buttons: Facebook, Twitter, and Instagram
Butter Café Wed Design: Home Page
Butter Café Wed Design: Menu Page
Butter Café Menu Page Mock Up
