# Atlas: Case Study | Gr8r Studio

> Atlas: a design agency website that walks you through a gallery. A website concept for a Lisbon design studio, told as a museum visit. Old master paintings, reworked as dot prints with captions to match, carry the services, work, process and contact form.

Source: https://gr8rstudio.com/work/atlas

# Atlas: a design agency website that walks you through a gallery.

A website concept for a Lisbon design studio, told as a museum visit. Old master paintings, reworked as dot prints with captions to match, carry the services, work, process and contact form.

Built by Gr8r for its own portfolio. Not client work.

Client

Atlas

Project

Agency website

Platforms

Website, desktop and mobile

- [Motion Design](https://gr8rstudio.com/services/motion-design)
- [Brand Identity](https://gr8rstudio.com/services/brand-identity)

[Visit the website](https://atlas-phi-amber-12.vercel.app/)[Discuss your website](https://gr8rstudio.com/contact)

The problem

## Make an agency site people remember.

Most agency websites look the same: a bold claim, a grid of logos and a contact button. Visitors skim them and forget them. Atlas sells strange ideas, so its own site had to be one. It needed a clear visual idea that could hold seven services, five projects, a team and a contact form without getting in the way.

- 1Agency sites blur into one another
- 2Lots of content to fit in one story
- 3Personality can't cost clarity

The first room: one line, two buttons and a painting captioned "Restored with Wi-Fi".

Each service is its own room, with its own colour and its own painting.

The workflow

## A visit, room by room.

1. 1
Enter
The hero sets the idea: strange ideas, made clear.
2. 2
Browse
Seven service rooms and five projects, each with its own colour.
3. 3
Wander
A horizontal gallery of experiments and a tapestry of the process.
4. 4
Write
The contact form is a letter you fill in.

The website

## One idea, carried through every page.

Every section is a numbered room with a painting and a museum caption. The joke stays light, and the content stays easy to read.

1. Work
### Projects as cards
Five projects on coloured cards, each with its discipline, year, a one-line summary and a link to the full case.
2. Gallery
### A wall you scroll sideways
Experiments hang in a horizontal gallery that moves as you scroll down, each print with its own caption.
3. Process
### The process as a tapestry
Six scenes, from Discover to Launch, play out across one drawn tapestry as you scroll.
4. Contact
### A letter, not a form
Name, company, service, budget and idea are blanks in a letter to the studio, sent with a "Seal and send" button.

Engineering

## Motion that serves the story.

Atlas is a React single-page site with client-side routing between its pages. Smooth scrolling drives the pinned sections: the sideways gallery and the tapestry that changes scene as you scroll. The full-screen menu previews each page's painting on hover, and the layout reflows to a single column on phones.

- React single-page app
- Lenis smooth scrolling
- Scroll-driven gallery and tapestry
- Responsive down to phone width

1. Navigate: the menu previews each page
2. Explore: one room per service
3. Close: the gate at the end of the visit

Outcomes

## Designed to be remembered.

What the website demonstrably does. Measured results will be added only with evidence and approval.

- ### One clear visual idea
Every page is a room with a painting and a caption.
- ### Content that stays readable
Services, work, team and insights each have a plain, scannable page.
- ### An easy first message
The contact letter asks for the essentials in a single paragraph.

## Want a website people remember?

Gr8r helps teams turn a strong idea into a website that is clear, distinctive and quick to use.

[Discuss your website](https://gr8rstudio.com/contact)

## Next project

- [SaaSCRMCloseCRMA structured CRM for busy sales teams: tasks, deals, records and automation that reps can scan in seconds. Read the case study ](https://gr8rstudio.com/work/closecrm)
- [AISaaSSellerOSOne workspace for marketplace sellers: sales, stock, shipments and profit, with an AI briefing. Read the case study ](https://gr8rstudio.com/work/selleros)
- [AIFintechLedgerOSFinance operations where AI agents handle the routine work and people make the risky calls. Read the case study ](https://gr8rstudio.com/work/ledgeros)
- [SaaSProductivityTask Management AppOne workspace for projects, tasks, deadlines and updates, from each person's list to the company timeline. Read the case study ](https://gr8rstudio.com/work/task-management-app)
- [ProcurementOnboardingVelunoSupplier onboarding with parallel reviews, documents, renewals and a supplier portal in one workspace. Read the case study ](https://gr8rstudio.com/work/veluno)
- [AIAutomationRelayA workflow automation workspace where AI agents run the work and people approve the risky steps. Read the case study ](https://gr8rstudio.com/work/relay)
- [DronesLogisticsSortieMission control for autonomous delivery drones, with a live 3D map of every flight. Read the case study ](https://gr8rstudio.com/work/sortie)
- [LogisticsOperationsAxleA fleet command centre for live tracking, dispatch, safety, compliance and maintenance. Read the case study ](https://gr8rstudio.com/work/axle)
- [HealthcareSaaSCendaraHealthcare claim denials worked to resolution: documents, appeals, reviews and payer replies. Read the case study ](https://gr8rstudio.com/work/cendara)
- [3DLogisticsLoadlineA transport operations platform with 3D load planning, dispatch and live fleet tracking. Read the case study ](https://gr8rstudio.com/work/loadline)
- [WebsiteTravelContrailFlight search where every flight opens a 3D model of its aircraft, so you choose your seat inside the cabin. Read the case study ](https://gr8rstudio.com/work/contrail)
- [WebsiteLearningKnowspaceA zoomable canvas of surprising facts, explored by topic, search and a small daily goal. Read the case study ](https://gr8rstudio.com/work/knowspace)
- [WebsiteWellbeingHinterlandAn illustrated mental health publication: topics, essays, short practices and a clear route to support. Read the case study ](https://gr8rstudio.com/work/hinterland)
- [UX auditProcurementVeluno UX AuditOur own supplier onboarding product, audited like a client’s: 13 findings, 3 high, and what to leave alone. Read the case study ](https://gr8rstudio.com/work/veluno-ux-audit)
- [UX auditHealthcareCendara UX AuditOur own claims product, audited like a client's: 12 findings ranked by impact, from sideways tables to hidden logins. Read the case study ](https://gr8rstudio.com/work/cendara-ux-audit)

Ask Ali