How we built
The renowned design agency made waves with its striking new site; we discover the thinking behind its side-scrolling delights
Johnson Banks on their brand-new sidescrolling company site
(1) The site’s blocks scroll sideways in a linear sequence, eventually moving the tiny projects from the bottom to the big spaces at the top. (2) Users can filter by sector or discipline, or both. (3) The rectangular blocks re-shuffle to display the results, and repeat to fill the screen. (4) When a user chooses a project, the transition creates a ‘test card’ effect… (5)… before resolving to the project page. (6) Other sections follow the same idea, but a change of colour scheme makes it easy to navigate. (7) Search results are displayed in vertical strips that scroll sideways. (8) The new site applies css drop shadows where needed, meaning the drop shadow style is consistent throughout the site. (9) The site’s responsive design means it can be used across any device.
Johnson Banks ( johnsonbanks.co.uk) is a design consultancy that prides itself on working with brands that make a difference to the world. It brought in Dublinand Amsterdam-based agency Bong ( bong.international) to create a bold new side-scrolling site that gleefully challenges web design conventions and looks entirely unlike every other agency site out there. Here’s how it happened.
What did Johnson Banks want from its new site?
KH: We really wanted something that allowed us to talk deeply about our projects. We’ve recently opened up our processes, in a book ( Branding: In
Five and a Half Steps) and a project (the rebrand of Mozilla, done entirely in the open). We wanted something just as transparent, that shares our work, and a lot of our thinking, with the world.
What made Bong the right team for the build?
KH: Bong are first and foremost creatives with a great design sensibility, and we really wanted someone prepared to co-design, collaborate and search for something that challenged the norm. They like to experiment and push boundaries, and the fact that they can also code like fiends helped too. How did you arrive at the site’s sidescrolling aesthetic?
KH: Our initial conversations centred around the predictability of most ‘portfolio’ sites; we knew we wanted to approach our site differently. What started as a sketch of the hierarchy of content – most important and recent at the top, older towards the bottom – morphed into a way of displaying content in ever-reducing modules.
BONG: There’s a really simple idea in the middle of it, which is this halving and doubling thing: a grid system where the height of each row is 1/2, then 1/4, then 1/8th of the screen, and in each row there are two, then four, then eight items. This allowed us to fit a lot of items on the screen, but there’s a clear hierarchy, and it doesn’t feel too stuffed.
The last part of the idea was to move the grid sideways on scroll, and halve the movement speed again and again for each row. That means that each item will slide off the end of a row and onto the larger row above, eventually moving the tiny projects from the bottom of the screen up to the big spaces at the top. So now we have a linear, continuous thing, as well as hierarchy.
What sort of usability conversations came up along the way?
KH: The tension between UX and brand is possibly highest for projects like ours. If our site looks like everyone else’s, what does it say about our work? Equally, if our site wasn’t easy to use, what would that say about our understanding of design? It’s a fine balance.
BONG: The things we make sometimes are intentionally challenging to use because we’re trying to make something we haven’t seen before. We think the state the internet is in now means you can make pretty much anything, so why standardise interaction? The usual UX crowd probably think we’re idiots.
Can you talk us through how it all fits together?
BONG: Our CMS of choice is Craft, and its job here is to serve feeds of content from a JSON API for the scrolling blocks, and HTML templates for the content pages. It seemed complicated at the time but seems stupidly simple now. What technologies are running things behind the scenes? Over the course of the project we wrote three versions of the frontend. The first used the Angular framework, which was helpful to get a first version of the idea running quickly, but it became obvious soon after that the framework was too big and too heavy, and we didn’t really know what we were doing with it. The second and third iterations didn’t use any frameworks or big view libraries, just a handful of small tools for awkward little things like routing (page. js), AJAX (xhr), or creating elements (hyperscript). It felt much better to have full control over what was going on, and we were able to optimise for performance in ways that hadn’t been possible in a framework.
Did testing bring up any major problems?
BONG: In the second version of the build, the main content area was a huge fixed element being moved up and down with CSS. We were listening to all kinds of events and jumping through hoops to make it behave like a scrolling page does by default; the idea was that it would be simpler if it worked the same way as all the other boxes on the screen. That idea was garbage, which became clear when the site was tested on older phones and the animation for simply pushing a page of text up and down wasn’t keeping up. So that’s when we went for the third and final rewrite, where that area is a totally conventional old-fashioned scrolling webpage, and the boxes alongside it are managed separately. Did you learn any useful lessons while building the site?
KH: It was really useful to start prototyping quickly. So much of the concept relies on interaction and movement that we found it incredibly useful to start understanding how the pieces fit together.
BONG: Most of the hard learning for us came from the process of working with a studio as well-known as Johnson Banks. Because they are designers too, albeit with a focus on the arguably much more difficult area of branding, we had to be aware of their aesthetic preferences and try to create interactions and layout that were congruent, but also challenging.
Did you expect a positive response?
KH: We thought that people would either love it or hate it, we just didn’t know which was more likely! Frankly, we’re pleased that on the whole people seem to like it, and appreciate that we were trying to do something different. BONG: We had no idea how it would land, it’s been a bloody delight.
1 6 4 2 7 5 3 8
Real estate On iPad, screen space is prioritised, but a ‘reducing modules’ idea is still present
The rainbow As pages transition the coloured blocks create a ‘test card’ effect