Coffee Cafe

The Brief

Coffee Cafe was a class assignment to mock up a website from a phone view. I designed a mobile-first layout for an independent coffee shop, framing the menu within a phone-sized canvas on a warm cream background. A condensed serif handles headings while a quiet body serif keeps menu items legible at small screen widths. Product photography and generous whitespace let the mobile menu breathe rather than crowd, so the site feels less like a price list and more like an invitation to sit down — even on a small screen.

Process

1. 01Designed the layout for a phone-view canvas, prioritizing legibility and thumb-friendly spacing at small widths.
2. 02Chose a cream and dark-brown palette to echo the warmth of a coffee shop interior.
3. 03Paired condensed serif headings with a readable body serif for menu items and prices, keeping the mobile mockup clean and inviting.