New Ad­ven­tures Con­fer­ence

net magazine - - GALLERY - Https://newad­ven­

There’s a lot to ad­mire in the re­turn­ing New Ad­ven­tures site with its mod­ern vis­ual iden­tity. De­signer Si­mon Col­li­son re­veals how af­ter nail­ing the ba­sic vis­ual ap­proach over a com­pli­cated grid in Sketch, he be­gan build­ing a pro­to­type us­ing CSS Grid. “It was my first at­tempt with Grid and I found it to be in­cred­i­bly in­tu­itive, flex­i­ble and lots of fun.” This pro­to­type be­came ac­tual but it was only a few days be­fore launch that de­vice test­ing re­vealed how poorly it would per­form in IE11 and some older mo­bile OSs. He felt the New Ad­ven­tures come­back couldn’t be a di­luted vis­ual ex­pe­ri­ence, so he spent two days re­build­ing ev­ery bit of HTML and CSS just be­fore launch. A few pre­cise align­ments and pleas­ing bits of re­spon­sive fluid magic were lost but the site is now mostly con­sis­tent across all browsers and de­vices.

Still, what a phe­nom­e­nal way to build: Grid re­ally lends it­self to pro­to­typ­ing in the browser. He went on to ex­plain: “Around 50 per cent of the de­sign was done with paper and Sketch and the re­main­ing 50 per cent in the browser. CSS is one of the best de­sign tools and I’ve al­ways en­joyed tak­ing a rough idea into the browser and then ex­plor­ing and re­fin­ing all pos­si­bil­i­ties in code.”

So in the end a very sim­ple build; just HTML and pre­pro­cessed (Sass) CSS and most graphic dec­o­ra­tion is SVG, but a great in­sight into his de­sign process.

Newspapers in English

Newspapers from Australia

© PressReader. All rights reserved.