09. Monotype
The Monotype site is, at first glance, extremely simple. Its journey from conception to launch started when iA joined an in-house team at the type foundry to help develop the vision for the future of Monotype online.
The project began with extensive research in order to simplify the corporation's domain structure and information architecture. Rigorous user testing over a period of six months informed the initial HTML prototypes, from which the main concept was born.
"We worked on the the visual language, developing a series of font micro-sites that were tested and optimised over time. The basic idea is that the type is the star," explains Oliver Reichenstein, founder of iA. "The homepage is reduced to the essence. The deeper you dive in the richer it gets." The team also decided on the daring idea of using a type tester on the homepage.
The concepts were developed into content prototypes using Kirby. This allowed iA to not only test the design in a live environment, but also to produce new supporting content, and continuously refine and systematise the design. "Overall," Reichenstein says, "Monotype.com was a model of modern web development, from research, to concept to production. And we hope it shows."
10. Halo 5: Guardians Visualizer (opens in new tab)
This site for video game franchise Halo has such an extraordinary navigation structure. The user moves through an intuitive, timeline-esque view, with fractured pieces of Halo helmets acting as user engagements for the game.
"We used WebGL particles that use a 3D model to form the shape of the game characters' helmets, 3D CSS to animate in the pieces of user content, and Canvas to draw and animate the timeline at the bottom," says Rachel Smith, interactive developer at Active Theory (opens in new tab). "It's a good example of combining web technologies depending on what the interface needs."
The mysterious shattering and rebuilding of elements could be disorienting, but instead, feels completely fluid. The slight tilting of the user stories, and even elements such as contact modals, unite the design and motion across every part of the site. The spatial atmosphere becomes a language in itself.
11. Over the Tiny Hills (opens in new tab)
Over the Hills was created by French digital studio ultranoir (opens in new tab), working with illustrator mcbess (opens in new tab) to present his group's EP of the same name. The mixture of sound and exploration are perfectly coordinated to create a captivating experience.
"We tried to push the boundaries of what we thought was possible with interactive 3D and sound on the web. We had fun playing with mcbess' twisted cartoon style in building funny interactions based around a 3D spatial sound experience," says lead developer Jérémy Saint-Prix. The project even made it into the real world, when the gramophone built for the project was 3D printed, painted by mcbess and exhibited in a Parisian gallery.
The WebGL effects work seamlessly with the drawings, and since it's a pretty unique effect, the user remains curious about what they'll find at each turn. They can explore infinite tunnels, scratch their own turntable and activate the music themselves, but guidance is given so they never feel lost in this new world of UX.
12. OMM (opens in new tab)
A personal project by creative director Jean Helfenstein, this site visualises the three phases your brain goes though when trying to come up with a solution to a problem.
'Extract' ("When you have a problem but don't know the solution," says Helfenstein) is visualised as a black sphere representing a brain, which is solid and inaccessible. 'Sort' ("When you have all those wild ideas, but you need to analyse them to see if they're good") is shown as a collection of particles. When the user rolls over each, it either fades out or transforms into a bubble. Finally, there's 'connect': "Here you are able to connect the good ideas to find the idea that will solve your problem."
This project does a lot to immerse me in a new world. The light effects are like characters in themselves, and I'm particularly drawn to the movement during the user participation.
It's always impressive when personal projects look like they're created by a team. But aside from the amount of work this must have entailed, the design and development are so smoothly integrated it makes sense it was a single person's creation; clearly a labour of love.
13. Sennheiser: Reshaping Excellence (opens in new tab)
Marketing sites have a hard job of making an object seem epic and monumental, but Philipp und Keuntje took that challenge and ran with it. In this site for Sennheiser's Orpheus headphones, users can explore a monumental soundscape, or create their own.
The interface invites users to explore a forgotten stone ruin, where their duty is to both destroy a giant stone pillar and simultaneously create a track, generated by the sound of their strikes. They can then share their track with others within the site, or on other social networks.
Unit director of digital Mike John Otto says, "With an experience that includes both film elements and 3D graphics, one of our key objectives was to ensure these transitions were seamlessly executed. The website needed to have wide reach as well as the highest possible visual quality. WebGL was the logical choice."
The mixture of video and WebGL with a shared grainy quality, coupled with many bass tones in the sound, give the illusion of a lot of mass. I particularly enjoyed the marriage of creation and destruction as a tome.
14. Ba Ba Dum (opens in new tab)
Ba Ba Dum, a 'play and learn' site featuring five games that work in nine languages, created by husband-and-wife team Hipopotam Studio (opens in new tab). It's visually stunning, with beautiful graphic design, illustration and typography. It uses what look like simple hand-drawn illustrations that have been converted to vector illustrations: perfect for this word quiz.
The page layouts are simple and well balanced, and the colour palette – crazily multicoloured but also very considered – is amazing. The 'Mr Dum Dum' typeface designed for Ba Ba Dum perfectly complements the tone of the site. The UI is also easy to use, and the site's interactions and animations, and the games themselves, are fun and engaging.
"Me and my wife Aleksandra are authors of children's books," explains co-creator Daniel Mizieliński. "We're also programmers and wanted to create a fun, immersive experience which gives the opportunity to learn something."
15. James Anderson (opens in new tab)
James Anderson is one of the best fast bowlers in world cricket and this site, created by Manchester-based agency Cahoona, focuses on Anderson’s career in numbers. Inline SVG is used for the graphic visualisation and animation of the facts and figures, thus making the site perform like a large interactive infographic.
Lead developer Scotty Vernon (opens in new tab) explains that there was a big tussle over whether to use canvas or SVG. "SVG is resolution independent, has great support for animation and is also very cross-browser compatible," he says, "so it made sense to choose it over canvas."
16. The Rational Keyboard (opens in new tab)
The Rational Keyboard is a musical instrument app that has a continually playing, 32-voice background accompaniment. Developer Fritz Obermeyer (opens in new tab) created it as an experiment.
Obermeyer explains that, "to keep the UI responsive the app does all of its synthesis in a background web worker and sends a data URI of a wave file back to the main window about five times per second. The main window then creates audio elements and plays these back, overlapping the sounds to accommodate timing jitter."
It also plays foreground audio on mouse click and motion, which are taken from samples generated on page load. The keyboard is rendered using canvas because of its better frame rate than SVG.
Like this? Try these...
- 5 of the best resources for learning HTML and CSS (opens in new tab)
- How to use an HTML boilerplate (opens in new tab)
- 9 brilliant freelance portfolios for 2017 (opens in new tab)
