I chat with the respective designers behind the sites about how they designed them and what their aims were, including the tools and technologies they used.
Had a lot of fun writing this one and very happy to be asked to be this month’s contributor.
Why not subscribe to Net Magazine?
Here are my sites of the month, if you can’t get hold of a copy.
3 tools/technologies: Canvas / WebGL / Photoshop
Bold colours, beautiful fonts and stunning animations bring to life the creativity of the festival. Unique design at its best.” – Christine Berry, Lead UX Designer, COOK
This stunning site is linked to digital culture festival, the KIKK Festival, taking place in Belgium later this year. The theme is all about micro-organisms seen through the lens of a microscope. Just look at those vibrant colours and the playfulness – I love everything about it. The transitions, hover effects, and animations whilst scrolling and navigating are delightful and visually so impressive, as are the little touches throughout the responsive design. As you navigate deeper, a great example of implementing a complex, detailed timeline layout on mobile are the schedule pages, which need to quickly give us details and timings of the festival’s events. I chatted with Henry Daubrez, CEO of Dogstudio, whose team was behind the site and he explained how they wanted to convey a hand-drawn feeling to the whole design and during the build they hand-animated, frame by frame, all of the organisms – that’s attention to detail! He went on to explain how it runs on their own Content Management System (Emulsion) too and is fully editable, which is a feat for a website this crafted. A worthy winner of site of the month.
Just out this month is Bang & Olufsen’s biannual colour collections site and it’s outstanding work. Jakob Kahlen, Creative Director at Trouble gave me an insight into their design process, which didn’t just include the website but also involved defining the colours of the products and executing the entire campaign. He told me how they started from a solid design research in culture and lifestyle trends, then created a colour concept for the product palette. The limestone grey, terracotta red and dark-plum purple is wonderful. They fell in love with the idea that people need to feel human and more in touch with nature as the world gets more and more technology-driven.
To bring the AW18 collection to the market, they went to the ancient and beautiful city of Marrakech. With its clay walls and terracotta rooftops, it was the perfect place to stage the story. The collection website is the heart of the campaign. With it, they wanted to convey the feeling of having your feet on the ground, looking towards the future. They did that by contrasting of the beautiful fashion photography captured in Marrakech with subtle scroll-controlled animations of clouds. On the technology side, animations on the site are made by using the GSAP library in combination with ScrollMagic to trigger animations and control timelines.
3 tools/technologies: HTML, SASS, CSS Grid prototype
I really admire the returning New Adventures site with its distinct, modern visual identity. Simon Collison told me that 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. I like how you can pick an appropriate way of implementing Grid suitable for a particular design or system.” This prototype became actual, but it was only a few days before launch that device testing revealed just how poorly it would perform in IE11 and some older mobile OSs. He felt their comeback had to have the impact they intended, and not 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 with old-timey floats, but they were able to deliver a mostly consistent design 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% of the design was done with a combo of paper and Sketch, and the remaining 50% in the browser. I think CSS is one of the very best design tools, and I’ve always enjoyed taking a rough idea into the browser and then spending however long it takes to explore and refine all possibilities in code.”
So in the end a very simple build; just HTML and pre-processed (Sass) CSS and most graphic decoration is SVG, but a great insight into his design process.
3 tools/technologies: WordPress, Webpack, Babel, Node.js/npm, Twig, and PostCSS.
The Little League site is a great example of clean, consistent design and UX but with a complex IA. The responsive brackets are expertly designed too. If you’ll pardon the pun, they really hit a home run.
I chatted with Kyle Unzicker, Director of Design at Modern Tribe, who worked on the project and he said “We had a diverse set of stakeholders, both within and outside of the organisation. Our aim was to build a site that allowed a central team to edit, manage, and create a number of individual sites within the same administrative dashboard and allow them to quickly and easily share content across multiple properties. We developed a cohesive design system that could be shared across all properties yet supported unique branding aspects such swapping primary and secondary colours and logos when appropriate. The information architecture needed to support both users already involved in Little League but also introduced the organisation and its values to those who may not be involved with LL.”
Kyle continues “For the LL World Series site specifically, we aimed to create a visual system that heightened the fan experience by prominently featuring team logos, colours and player photos. With an emphasis on scores, schedules and a live tournament bracket, the site allows millions of fans to track the progress of their favourite teams.”
3 tools/technologies: Prismic.io, React, Mapbox, and TripAdvisor Booking API.
I recently ticked off Iceland from my travel bucket list – its breathtaking landscapes and incredible waterfalls everywhere you turn were unforgettable. Before I set off on my trip I really wish I could have planned and booked my sightseeing and tours all in one place. Introducing the new Icelandic Mountain Guides (IMG) website. It’s an absolute beauty – across all devices – showcasing the amazing adventures and experiences the company offers.
Founded in 1994, IMG have provided premium outdoor experiences in Iceland for tourists and locals alike. Across their tour pages they’ve implemented custom maps using Mapbox, an open source mapping platform, to show more detailed itineraries and exact routes – particularly impressive on mobile.
Marco Coppeto, Design Lead, told me the Ueno team worked with IMG on redesigning and developing their website and updating their digital branding. They created a new, intuitive way for website visitors to search for and book tours. This experience now includes interactive itineraries, image galleries, and enables customers to book activities in a brand new seamless checkout experience. I’m on the next plane to Reykjavik if anyone needs me.