Pull up a chair. Stay a while.
A responsive single-page coffee shop website — designed in Figma and built with HTML5 + CSS3. This is my first UI/UX capstone project, part of my personal portfolio development as a 2nd year CSE Student.
Mossy Mug is a fictional coffee shop designed for college students who need an affordable, relaxed hangout. The project follows a structured 6-phase roadmap — from UX research and wireframing all the way to a polished, responsive website.
**🌐 Live site: https://teju-0206.github.io/mossy-mug Figma design: [View hi-fi design] https://www.figma.com/design/CMYe2q64i32mwu1MVI9z8S/mossy-mug?node-id=18-2&t=26iO3dmfUPtTN27E-1.
| Name | Mossy Mug | | Tagline | Pull up a chair. Stay a while. | | Audience | College students — studiers, crews, first-timers, regulars | | Tone | Unhurried, welcoming, unpretentious, quietly aesthetic |
mossy-mug/
├── index.html # Main site
├── style.css # All styles (desktop + responsive)
├── images/ # Exported images from Figma
├── design/ # Figma screenshots (lo-fi + hi-fi)
├── .gitignore
└── README.md
| Phase | What | Status |
|---|---|---|
| 1 | UX Research & Planning — personas, brand identity, color, typography | ✅ Done |
| 2 | Figma Lo-fi Wireframe — all sections, layout flow | ✅ Done |
| 3 | Figma Hi-fi Design — desktop + mobile, Auto Layout, real images | ✅ Done |
| 4 | HTML + CSS Structure — translating Figma to code | ✅ Done |
| 5 | Responsive CSS — Flexbox + media queries, mobile layout | ✅ Done |
| 6 | Polish + Test — cross-device, accessibility, final review | ✅ Done |
- Design: Figma (lo-fi wireframes, hi-fi desktop + mobile)
- Frontend: HTML5, CSS3 (Flexbox, Media Queries)
- Fonts: Google Fonts — Playfair Display, Lora, DM Sans
- Version control: Git + GitHub (SSH)
Tejeswini B — 2nd year CSE Student, learning UI/UX and frontend development through hands-on capstone projects.