Café website landing page
Project summary
A single-page landing site for The Café designed to communicate a warm, handcrafted brand and drive two main actions: Reserve a table and Order featured items. Completed with ChatGPT’s assistance.
Key goals & users
- Convert local visitors into reservations or orders.
- Target: first-time searchers, locals deciding where to meet, and regulars checking the menu.
Core design decisions (brief)
- Color & imagery: deep coffee browns + warm orange CTA to evoke comfort and highlight actions.
- Hero: bold headline + large coffee photo to set the mood and encourage immediate action.
- Product cards: photo, price, short copy, and “Order Now” for quick comparisons.
- Testimonials: placed after products for social proof.
UX & accessibility highlights
- Clear visual hierarchy and touch-friendly CTAs.
- Alt text, focus states, and checked contrast for accessibility.
- Mobile-first responsive layout and image optimisation.
Metrics & next steps
- Track hero CTR, reservation conversions, and product orders. Run quick usability tests and A/B test hero CTA/image to lift conversions.
Opinion (concise)
Design balances emotion and conversion well — validate hero CTA with a simple A/B test next.
Reviews
9 reviews
Thanks for sub, Faizan!
This look very cool! I like the vibe that gives me! I would love to see more screens or a figma file in order to guide you more. From here, i can say only a little bit of inconsistency on button roundness.
Other than that, this is lovely! keep on creating!
Faizan, the landing page feels warm and inviting with clear CTAs, and adding café interior photos or tweaking product card hierarchy could elevate it even more—great job overall!
Brewtifully done, Faizan! Did you extract this design from a perfectly roasted bean or what?
The warmth of the palette and the grounded vibe match the theme so well. The “Reserve a Table” CTA is clear and well placed, and the feature products section guides the eye naturally.
I think if you tone down either the color or the font size of the prices in the product cards, the hierarchy would be clearer. Right now the numbers are competing for attention, almost like someone poured the affogato right on top of the avocado toast 😋 and since one of the goals is to convert users to reserve a table, it would help to also provide photos of the café’s interior so it feels more inviting to visit.
With that extra attention, the design hits the right blend: smooth, bold, and clear.
The Cafe landing page looks warm and inviting. I like how the colors and imagery support the brand feeling while keeping the CTAs clear.
The layout is easy to follow, and the product cards make it simple for users to compare and act quickly. Accessibility and mobile-first design are well considered.
One suggestion is to A/B test the hero CTA and image to see if it can improve conversions.
Overall, a clean, user-friendly design that balances emotion and functionality.
Nice landing page Faizan!
Positive points:
- Great job writing an overview and providing a more detailed description of your project.
- I like the colors you used; they fit the theme really well.
- Overall, nicely done project!
Questions / Suggestions:
- I would like to see the full design, since right now I can only see it on one picture. Do you have a Figma link or something similar?
- You mentioned that the page shows two main actions: Reserve a table and Order featured items. What happens after a user clicks one of these actions? Does it open an external system, or did you also plan to cover that process?
The project looks solid and cohesive – you can tell someone thought about hierarchy and conversion. Branding is clear, colors are warm, photos are nice. But honestly? It's a bit safe and generic – could be a ThemeForest template. I'm missing something that makes me remember this specific café.
Hero section – big coffee photo + clear message is good work. "Reserve a Table" CTA is visible and works.
Product cards – simple, functional, with prices and buttons. Nothing gets in the way of making a decision.
Testimonials – sensible placement (after products), good that there are visual ratings (stars).
Color consistency – orange on CTAs actually "pops" from the brown background.
This is competent work, but plays it safe. Meets the brief, but doesn't inspire. If the goal was "quickly build a working landing page" – mission accomplished. If the goal was to stand out in the local market – needs more character, details, local flavor. Cafés sell emotions and place, not just coffee – and that's a bit missing here. 😊✌️
Great UI design, very polished, scannable, and uses high quality photography. Very clean design and the colors and images invoke the feeling of warmth. Awesome work.
I wish I could see more of the process in creating it, maybe information architecture, sketches, lofi wireframes.
I love the combination of orange with brown!
I need a coffee after seeing this! haha!
You might also like
Customer Journey Map for a Co-Working Space
Workspace Booking Flow - UI/UX Design
Latios - Free Portfolio Template for UX/UI Designers
Talenvo Website - Web and Mobile
L I N E A - Minimalist Fashion Brand
Medivet - Responsive Landing Page
Popular Courses
Information Architecture
Design Composition
HTML Foundations
