The product
Alternatively Worldwide is a decentralised design collective. Its members work remotely and split creative input on strategy, visual identity and motion work. The site had to say that in a few pages, look like a design studio made it, and work as well on a phone as on a wide screen.
It is a small Next.js site with five pages: a home page, World for projects, Atelier for the collective's layers, Identity for services, and About with the manifesto.
The home page: a heavy grotesk headline against a full-height photo.
My part
Two of us built the site over about four weeks in spring 2023. I wrote 13 of its 35 commits. I set the project up and built the frame every page sits in. My teammate built most of the inner pages and the responsive pass.
What I built:
The Next.js project, the shared layout and the page routes, with one CSS module per page and per section
The custom display font and the round logo in the header
The home hero, which I split out into its own section component
The subscribe block that closes every page, and the footer around it
A clients strip and a "work together" call to action, both built and later held back
Styling passes on the services page, which became Identity, and the finishing touches on About, including wiring the nav links to the right pages
My teammate built the World, Atelier and Identity sections, the About content, and made the header, footer and pages responsive.
A frame every page shares
Every page uses the same layout: the header with the logo and Connect button, the page itself, then a short statement, the subscribe card and the footer. Keeping that in one layout file meant a new page was just its sections, and a change to the footer showed up everywhere at once.
The closing block on every page: a statement, the subscribe card and the footer.
Sections, not pages
I set the pages up as thin files that stack section components, each with its own stylesheet in a folder named after the page. That is why the services page could be renamed to Collective Identity in one commit with nothing broken: the sections moved as a folder.
Identity: the services by discipline. I did styling passes here; the sections are my teammate's.
About, with the manifesto as a large pull quote.
On a phone
Below the desktop breakpoint the hero turns black and centres the text, and the nav collapses into a full-screen menu.
The hero, the menu and the subscribe card on a phone.