How we built

The renowned de­sign agency made waves with its strik­ing new site; we dis­cover the think­ing be­hind its side-scrolling de­lights

net magazine - - CONTENTS -

John­son Banks on their brand-new sidescrolling com­pany site

Close up

(1) The site’s blocks scroll sideways in a lin­ear se­quence, even­tu­ally mov­ing the tiny projects from the bot­tom to the big spa­ces at the top. (2) Users can fil­ter by sec­tor or dis­ci­pline, or both. (3) The rec­tan­gu­lar blocks re-shuf­fle to dis­play the re­sults, and re­peat to fill the screen. (4) When a user chooses a project, the tran­si­tion cre­ates a ‘test card’ ef­fect… (5)… be­fore re­solv­ing to the project page. (6) Other sec­tions fol­low the same idea, but a change of colour scheme makes it easy to nav­i­gate. (7) Search re­sults are dis­played in ver­ti­cal strips that scroll sideways. (8) The new site ap­plies css drop shad­ows where needed, mean­ing the drop shadow style is con­sis­tent through­out the site. (9) The site’s re­spon­sive de­sign means it can be used across any de­vice.

John­son Banks ( john­son­banks.co.uk) is a de­sign con­sul­tancy that prides it­self on work­ing with brands that make a dif­fer­ence to the world. It brought in Dubli­nand Am­s­ter­dam-based agency Bong ( bong.in­ter­na­tional) to cre­ate a bold new side-scrolling site that glee­fully chal­lenges web de­sign con­ven­tions and looks en­tirely un­like ev­ery other agency site out there. Here’s how it hap­pened.

What did John­son Banks want from its new site?

KH: We re­ally wanted some­thing that al­lowed us to talk deeply about our projects. We’ve re­cently opened up our pro­cesses, in a book ( Brand­ing: In

Five and a Half Steps) and a project (the re­brand of Mozilla, done en­tirely in the open). We wanted some­thing just as trans­par­ent, that shares our work, and a lot of our think­ing, with the world.

What made Bong the right team for the build?

KH: Bong are first and fore­most cre­atives with a great de­sign sen­si­bil­ity, and we re­ally wanted some­one pre­pared to co-de­sign, col­lab­o­rate and search for some­thing that chal­lenged the norm. They like to ex­per­i­ment and push bound­aries, and the fact that they can also code like fiends helped too. How did you ar­rive at the site’s sidescrolling aes­thetic?

KH: Our ini­tial con­ver­sa­tions cen­tred around the pre­dictabil­ity of most ‘port­fo­lio’ sites; we knew we wanted to ap­proach our site dif­fer­ently. What started as a sketch of the hi­er­ar­chy of con­tent – most im­por­tant and re­cent at the top, older to­wards the bot­tom – mor­phed into a way of dis­play­ing con­tent in ever-re­duc­ing mod­ules.

BONG: There’s a re­ally sim­ple idea in the mid­dle of it, which is this halv­ing and dou­bling thing: a grid sys­tem 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 al­lowed us to fit a lot of items on the screen, but there’s a clear hi­er­ar­chy, and it doesn’t feel too stuffed.

The last part of the idea was to move the grid sideways on scroll, and halve the move­ment 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, even­tu­ally mov­ing the tiny projects from the bot­tom of the screen up to the big spa­ces at the top. So now we have a lin­ear, con­tin­u­ous thing, as well as hi­er­ar­chy.

What sort of us­abil­ity con­ver­sa­tions came up along the way?

KH: The ten­sion be­tween UX and brand is pos­si­bly high­est for projects like ours. If our site looks like ev­ery­one else’s, what does it say about our work? Equally, if our site wasn’t easy to use, what would that say about our un­der­stand­ing of de­sign? It’s a fine bal­ance.

BONG: The things we make some­times are in­ten­tion­ally chal­leng­ing to use be­cause we’re try­ing to make some­thing we haven’t seen be­fore. We think the state the in­ter­net is in now means you can make pretty much any­thing, so why stan­dard­ise in­ter­ac­tion? The usual UX crowd prob­a­bly think we’re id­iots.

Can you talk us through how it all fits to­gether?

BONG: Our CMS of choice is Craft, and its job here is to serve feeds of con­tent from a JSON API for the scrolling blocks, and HTML tem­plates for the con­tent pages. It seemed com­pli­cated at the time but seems stupidly sim­ple now. What tech­nolo­gies are run­ning things be­hind the scenes? Over the course of the project we wrote three ver­sions of the fron­tend. The first used the An­gu­lar frame­work, which was help­ful to get a first ver­sion of the idea run­ning quickly, but it be­came ob­vi­ous soon af­ter that the frame­work was too big and too heavy, and we didn’t re­ally know what we were do­ing with it. The sec­ond and third it­er­a­tions didn’t use any frame­works or big view li­braries, just a hand­ful of small tools for awk­ward lit­tle things like rout­ing (page. js), AJAX (xhr), or cre­at­ing el­e­ments (hy­per­script). It felt much bet­ter to have full con­trol over what was go­ing on, and we were able to op­ti­mise for per­for­mance in ways that hadn’t been pos­si­ble in a frame­work.

Did test­ing bring up any ma­jor prob­lems?

BONG: In the sec­ond ver­sion of the build, the main con­tent area was a huge fixed el­e­ment be­ing moved up and down with CSS. We were lis­ten­ing to all kinds of events and jump­ing through hoops to make it be­have like a scrolling page does by de­fault; the idea was that it would be sim­pler if it worked the same way as all the other boxes on the screen. That idea was garbage, which be­came clear when the site was tested on older phones and the an­i­ma­tion for sim­ply push­ing a page of text up and down wasn’t keep­ing up. So that’s when we went for the third and fi­nal re­write, where that area is a to­tally con­ven­tional old-fash­ioned scrolling web­page, and the boxes along­side it are man­aged sep­a­rately. Did you learn any use­ful lessons while build­ing the site?

KH: It was re­ally use­ful to start pro­to­typ­ing quickly. So much of the con­cept re­lies on in­ter­ac­tion and move­ment that we found it in­cred­i­bly use­ful to start un­der­stand­ing how the pieces fit to­gether.

BONG: Most of the hard learn­ing for us came from the process of work­ing with a stu­dio as well-known as John­son Banks. Be­cause they are de­sign­ers too, al­beit with a fo­cus on the ar­guably much more dif­fi­cult area of brand­ing, we had to be aware of their aes­thetic pref­er­ences and try to cre­ate in­ter­ac­tions and lay­out that were con­gru­ent, but also chal­leng­ing.

Did you ex­pect a pos­i­tive re­sponse?

KH: We thought that peo­ple would ei­ther love it or hate it, we just didn’t know which was more likely! Frankly, we’re pleased that on the whole peo­ple seem to like it, and ap­pre­ci­ate that we were try­ing to do some­thing dif­fer­ent. BONG: We had no idea how it would land, it’s been a bloody delight.

1 6 4 2 7 5 3 8

9

Real es­tate On iPad, screen space is pri­ori­tised, but a ‘re­duc­ing mod­ules’ idea is still present

The rain­bow As pages tran­si­tion the coloured blocks cre­ate a ‘test card’ ef­fect

Newspapers in English

Newspapers from Australia

© PressReader. All rights reserved.