New Adventures Conference
There’s a lot to admire in the returning New Adventures site with its modern visual identity. Designer Simon Collison reveals how after nailing the basic visual approach over a complicated grid in Sketch, he began building a prototype using CSS Grid. “It was my first attempt with Grid and I found it to be incredibly intuitive, flexible and lots of fun.” This prototype became actual but it was only a few days before launch that device testing revealed how poorly it would perform in IE11 and some older mobile OSs. He felt the New Adventures comeback couldn’t be a diluted visual experience, so he spent two days rebuilding every bit of HTML and CSS just before launch. A few precise alignments and pleasing bits of responsive fluid magic were lost but the site is now mostly consistent across all browsers and devices.
Still, what a phenomenal way to build: Grid really lends itself to prototyping in the browser. He went on to explain: “Around 50 per cent of the design was done with paper and Sketch and the remaining 50 per cent in the browser. CSS is one of the best design tools and I’ve always enjoyed taking a rough idea into the browser and then exploring and refining all possibilities in code.”
So in the end a very simple build; just HTML and preprocessed (Sass) CSS and most graphic decoration is SVG, but a great insight into his design process.