One family, lowercase
Type
Futura where it is installed and Jost where it is not, set in lowercase and worked by weight alone. Names keep their capitals.
3-Sixty
An independent Singapore advertising agency, working since 2002. One white page, one green, and a globe of its work that you turn by hand.
- Role
- Concept, design + build
- Type
- Agency site
- Stack
- three.js · WebGL
The brief
Modernise the site, and keep what makes it 3-Sixty. Circles, as the name says; an ink splash, from the agency’s first logo; and its typefaces. The rest was mine to propose: the ink that shows the wordmark, the dot that turns into a ring, a dial and a globe, and the build that runs it.
The site replaces an older one. Its job is the usual one for an agency: someone has already heard the name, and the page has to turn that into an enquiry.
The text ink is a dark grey, never full black.
One dot
The hero is their wordmark in white on a white page. You cannot see it until you move across it, and then a neon fluid shows it up like highlighter ink.
Then the dot of the i leaves the word. It becomes a green ring, travels down to the about section and turns into a dial from 000 to 360, with the agency's five services set around it. Scroll on and the ring opens into a globe.
Hero, about and work are one stage. That dot carries the reader through all three.
The build
One long page and twelve work pages. Six plates from them.
01 / 06Scroll or drag
What went into it
A list beside the globe
Access
The globe is one canvas. Beside it sits a plain list of twelve links, so a keyboard, a screen reader, a search engine or a browser with scripts off still reaches every piece of work.
Loaded when it is needed
Weight
The globe's code loads only as the reader gets near it. Its artwork was cut from about 6.2 MB to about 2.9 MB.
Motion has a switch
Motion
A control on every screen sets motion to full or still. It starts from the visitor's own system setting.
Old addresses still land
Redirects
Every page of the old site redirects to its place on the new one.
Their words
Copy
Every line on the site is 3-Sixty's, set as written.
In their words
Thanks for all your hard work on this. The site looks great.
From concept to handover, you were very thorough and helpful, which made the entire process a breeze. It's been a pleasure working with you and we will keep you in mind for future projects.
We appreciate the interesting concepts and designs you proposed, most of which eventually ended up in the live site.
You also had the programming chops to make it happen, including all the tweaks and adjustments we requested. It was also good that you were looking not just to get the job done, but looking out for our best interests too, including optimising the site for AI searches, navigating us through some of the more complex processes, and building an idiot-proof CMS.
