Skip to content

06Editorial · Magazine site

Material Studies

An issue-based editorial site on materials and a quieter future — objects, research and stories.

Self-initiated demonstration (live, completed)

Role
Design and development: Syed Ahad Haider
Type
Editorial · Magazine site
Source
github.com/syedahadhaider/react-material-website
History
Published to GitHub 12 September 2026

Stack

  • Next.js 16
  • TypeScript
  • Tailwind CSS 4
  • Framer Motion
Material Studies home page: "A quieter kind of future" over a dusk-lit concrete facade

About the project

A multi-page editorial site presented as a numbered issue, built as a demonstration of long-form layout. The home page opens on the current issue, an Objects archive collects material studies, Research and Stories carry the long-form pieces, and a contact page closes the loop — all in a dark, cinematic art direction set in Bodoni Moda and Manrope.

The problem it solves

Editorial hierarchy that survives a phone. A display face as high-contrast as Bodoni Moda and full-bleed photography both stop working at small sizes, so the type scale, measure and image crops are set per breakpoint rather than scaled down — and the issue structure keeps five page types reading as one publication.

Scope and limits

  • Deployed as a demonstration: the issue, its studies and its stories are self-created content, not a running publication.
  • Content is authored in the codebase — there is no CMS behind it.

What it does

  • Issue-style home page
  • Objects archive — paper, glass, surface and metal studies
  • Research and Stories sections with issue anchors
  • Contact page
  • Dark cinematic art direction with full-bleed photography

Worth noticing

  1. 01Editorial hierarchy: Bodoni Moda display over Manrope text
  2. 02Photography-led layouts that stay readable on small screens
  3. 03Built on the Next.js App Router with Framer Motion transitions
Material Studies home page on a phone

Want something like this?

Open the live site, poke at it, then tell me what you have in mind. A two-line brief is enough to start.