Case study
Fullwidth Metro Gallery
This case study captures a common CID Creative brief: create a visual-first web experience that feels premium, loads fast, and remains usable on mobile. The goal is a layout that can scale into additional stories without becoming heavy or hard to maintain.
Overview
- Focus: full-width layout, image-led rhythm, clean typography
- Primary outcome: a coherent, scannable structure with a gallery that works on touch devices
- Constraints: lightweight build, minimal JavaScript, predictable maintenance
Goals
The layout needed to communicate quality quickly. That meant a bold headline, strong hierarchy, and a flexible gallery grid that didn’t introduce horizontal scrolling or tiny tap targets.
Deliverables
- Case study page structure (overview, goals, deliverables, process, outcomes)
- Reusable section patterns for future projects
- Responsive gallery grid with lightweight images
Process
1) Discovery
We established the content story first: what the project is, why it matters, and what the viewer should do next. This reduces the temptation to rely on decorative effects and keeps the page understandable without endless scrolling.
2) Design
We chose a calm, studio-like aesthetic: plenty of white space, crisp headings, and cards that feel tactile without using heavy shadows. The grid adapts at common breakpoints so images remain large enough to appreciate.
3) Build
The implementation prioritised semantic HTML, a single CSS file and minimal JavaScript for the mobile navigation. The gallery uses standard image tags and predictable sizing to avoid layout jumps.
Outcomes
The resulting page is simple to extend: new sections and new gallery items can be added without changing the underlying structure. The layout remains readable on smaller screens and stays lightweight.
