For this website about the history of the St. Louis Browns baseball team, digital agency HLK has crafted a very beautiful experience. The site reads like a well-crafted vintage book, complete with chapters and textured typography. Users can scroll through each chapter for a time-based, story-like experience.
Inspiration for the site has been pulled from 1920s manuscripts and advertisements, with many of the images directly from the years they are describing. This brings a uniquely dated feel to a modern, digital space. This is complemented by a grey-and-brown toned colour scheme, accented by a single shade of orange.
Some of my favourite parts of this site are the little details, such as the menu button (circular with a hamburger menu inside) that converts to a baseball on hover. I also love the timeline on the left-hand side, which follows the screen and updates on scroll.
The site is built using Node.js and the Express framework to allow for smooth updating and flow between content.
02. Leg Work Studio
Leg Work does a lot of great work on the web, from graphic design to interaction and media. So it comes as no surprise to find that its own personal site is no exception. The studio's personality shines through via fun, mixed-media illustrations. It combines vintage photo effects (such as the dot grid pattern) with digitally painted white accents and scans of physical handwriting to create unique art to represent the agency.
However, it is not just the illustrations that make this website notable – the interactive animations really bring it to life. Some of the illustrations themselves are actually videos instead of static visuals, created with After Effects, and website components like the sidebar animate smoothly.
The website is designed with mobile in mind, and mobile interactions are mirrored in the desktop experience, where the user can swipe with the track pad to get through the sections. The website is built using Modernizr to ensure compatibility, and jQuery for interactions.
03. Code Conf
The site for CodeConf really goes above and beyond the standard conference website. The conference was held in Nashville, Tennessee, and everything about this design pays homage to this location.
The website itself is nicely responsive and has a warm, cohesive colour palette. The whimsical illustrations give the site character and create a playful country-rock aesthetic that continues throughout the page (and even into the event itself).
No details are spared, as even the menu's decorative horizontal rules (only seen on smaller screen sizes) flow with the country-rock aesthetic. The site implements Google Maps for location features, and is built with jQuery and AngularJS.
Everything is illustrated: all of the venues, the 'set list' of speakers, the call to action for buying tickets, and breaks between sections. There is also a fun cast of characters that can be found dotted around the site: vector cacti, unicorns, dragons, octocats, and cowboys and girls playing music and posing playfully around the page.
04. IBM Design
In the past few years, IBM has invested in growing a design programme and steering the company towards a human-centric approach to creating software. It recently came out with the IBM Design Language, which contains an update for its animation vocabulary. It provides design guidance and resources for web developers, all open-sourced on GitHub.
What I love about this animation update (even more than the fact that it's open sourced) is how the studio looks at IBM's heritage and the physical world for inspiration, instead of other digital properties. Hayley Hughes, IBM design language lead, says that the team pulled inspiration from machines; in particular their solid planes, physical mass and rigid surfaces.
"From the powerful strike of a printing arm to the smooth slide of a typewriter carriage, each movement was fit for purpose and designed with intent," she explains. "Our software demands the same attention to detail to make products feel lively and realistic."
Why is animation so critical to IBM's Design Language? "Just as a person's body language helps you read the conversation, animation relays critical information that helps users understand how to navigate and use our products," Hughes says.
05. Masi Tupungato
This wonderful website from international digital creative agency AQuest for Masi Tupungato, a winemaking project based in Italy, almost lets the imagery speak for itself.
Unusually, a loading screen is used for each of the pages as the crisp fullscreen images load up. Usually this would be a big no-no – users want the content as soon as possible. However, here it actually improves the user's experience by ensuring images are fully loaded before any content is unveiled. The design creates a sense of empathy, leaving users feeling like they've been to the winery and picked the grapes themselves.
The site can be on the heavy side on some pages (ranging from 1.2MB up to 5MB in weight), which could be improved by introducing some lazy loading techniques. However, despite its weight, the site is well-built, with the start render in under one second and return visits loading within the second mark too. The framework is based on unsemantic.com, which is a successor to the 960 Grid System.
When viewing the site on desktop and larger viewports, users are able to see and interact with each of the wines separately. They can take advantage of the larger screen size to display all of the wine characteristics and details side- by-side. In contrast, on the mobile site the details and description slide in and can be slid away again smoothly.
Making accessible websites is critically important. However, the techniques and testing involved often seem like they require deep specialisation that can make web developers and designers feel like they're adrift.
Wayward elements are flagged visually, making it easy to snap a screen grab and show team members or clients exactly what the issues are, while the expanded explanations coach users on methods to quickly fix the glitches.
Khan Academy's website for tota11y is not overtly glamorous, but then, important work isn't always glitzy. The down-to-business simplicity of the text – both in appearance and in content – belies the complexity of the problem the tool itself aims to alleviate.
"That was beautiful – what the heck just happened?" So you might say to yourself after your first visit to Void, a (predominantly) monochrome, glitchy outer-space meditation that straddles the line between soothing and eerie. London agency Hi-ReS! built the journey by stitching several pre-existing interactive web projects into a tapestry of sound and motion.
Void calls to mind two award-winning and immensely atmospheric iOS games: it has that cosmic aural floatiness of Hemisphere Games' Osmos and the impossible geometries of ustwo's Monument Valley. But this is very much of the web. Three-dimensional effects (which at times feel six- or 10-dimensional) were created using the three.js library, and Web Audio has been pushed to its limits.
Working with Web Audio was "fun and interesting", says Nicholas Salzano, head of production at Hi-ReS! "We used a sound synthesis programming library, CoffeeCollider, to create and distort the sounds for the Hi-Res! artwork."
As with the experience of, say, watching movies by David Lynch, the best mindset for visiting Void may be one of a non-rigid mindfulness, paying attention without trying to analyse things too concretely. Like a labyrinth or a nautilus shell, this project serves, in Salzano's words, as an "interactive playground", offering us mystery, rhythm and the opportunity to reflect.
08. Know Lupus
The Lupus Foundation of America (LFA) is a national organisation working to solve the mystery of lupus. Viget partnered with the LFA on a pro bono public awareness project to help the general public understand the disease.
"LFA wanted to create a fun yet informative game that would help educate the public in an engaging way, to help overcome that issue," explains Laura Sweltz, UX designer and project lead. "Our design process focused on accomplishing that goal, while also creating something that people with lupus would actually feel excited about sharing."
Viget's solution was a casino-inspired card game built using React, in which each card highlights a fact about lupus. Custom illustrations by designer Blair Culbreth keep the game lighthearted while addressing the serious subject matter. Casino-inspired sound effects weave through the game.
The animations are smooth and snappy, adding another layer of delight to the game. The mobile experience is just as interactive as desktop, and responsive transitions have been fully considered. The end result is a playful experience that makes learning feel effortless.
09. The Boat
Longform storytelling has been steadily gaining popularity on news and media sites, but broadcasting network SBS's The Boat, an online graphic novel based on a story by Nam Le, feels unique in both its style and execution. Sumi ink illustrations, expertly executed animations and a chilling soundscape capture the story of a young Vietnamese refugee's journey.
To bring the story to life, illustrator Matty Huynh spent six months with Nam Le's original prose, sketching thumbnails and iteratively creating the characters.
"I think the balance you see comes from this extended period of development," explains producer Kylie Boltin. "That deep inward-looking period enabled the core team members to know the story inside out. We knew the story beats and we knew which moments needed to be highlighted. The guiding principle was to complement the core storytelling, rather than overpower it or add an element just for the sake of it."
The graphic panels feel like diary sketches – urgent, imperfect and deeply emotional. This site proves just how powerful and engaging online storytelling can be in the right hands.
Moscow-based Hungry Boys designed this show-stopping campaign site for the World Wildlife Fund Russia to raise public awareness for its Save The Tiger campaign. Why race your friends when you can race a GPS-tracked Amur tiger?
The site lets you sync your running app of choice (it currently supports nine different apps!) and pits you and other runners against the big cat, which averages 20km a day. If the tiger beats you, you donate $5 to WWF.
It's a great concept, and there's a great design to go with it. The sharp black and yellow colour palette – uncharacteristically bold for a charity app – conveys the urgency of the Save The Tiger initiative.
Run4Tiger's creator Ksenia Apresyan says the team definitely had movement in mind when designing: "We wanted to make the website as dynamic as it could be. That's why we decided to use the most fresh technologies and show our main message, made of dynamic particles, on the main page."
11. Design Matters
Design Matters is a radio show launched by Debbie Millman in 2005. Over the years, Millman has interviewed over 200 designers, artists and creatives around the world. These are now housed on a beautifully redesigned site.
The first thing you notice is the morphing gradient background, which is subtle yet unique and mesmerising. The next thing you notice when you jump into an interview page is the enormous play icon overlaying the content.
"From the beginning I knew I wanted to have a giant play button on the screen, and after playing around with the design I settled on a completely transparent button," says Armin Vit of UnderConsideration, the studio behind the site. "Since the interviews are all about transparency between Debbie and her guests, I enjoyed the visual extension of that."
Vit used JS layout library Masonry to create a Pinterest-like grid of interview 'pods', each of which contains a well thought-out type hierarchy and image. As the audio is housed on SoundCloud, Vit had to figure out how to make the play button trigger a SoundCloud file via its unique ID.
What does Millman think of the site? "Armin took all the myriad must-haves for this site and created one design for me to look at," she smiles. "I loved it the second I saw it."
12. Wrap Genius
NYC-based designer and developer Sam Slover and team set out on a mission to document what he ate for 10 weeks, and created an interesting visual look into his diet.
"We wanted to tell the story of one person trying to figure out how to make his personal food data more meaningful," says Slover. "So we took the audience on a journey: what does it mean to track your own food data and what insights can come of it?"
The result of his data-gathering is a one-page site that houses a beautiful collection of infographics. "It turns out there was quite a bit of data to design around," he smiles. "We needed to make hard decisions about which areas to pursue when doing visualisations."
Along with outlining what food was purchased, the team chose to focus on representing where the food came from, the ingredients, and an awards system where the best and worst foods were rated.
The team used Illustrator to develop the visuals, and Chart.js and D3.js to render some of the charts. While the site's layout is simple, don't be fooled – some serious number crunching went on behind the scenes, with the aid of a Node.js and MongoDB stack.
The local Palate is the South's premiere food culture magazine. In redesigning the site, the team at Fuzzco took its cues from the print magazine. "We started with a grid structure similar to the one similar found throughout the magazine," says Fuzzco founder and creative director Helen rice. "For the typography we took a bold, modern approach and allowed space for large, engrossing photographs to reflect the engaging feeling found in print." The navigation also mimics the look of the spine of the magazine.
The site's stunning food photography and striking typography are arranged in a refreshingly simple layout that is a pleasure to view on any device. The recipe grids and full article pages are especially beautiful.
To build the site, the team used the – as they put it – "usual suspects" of jQuery, Sass and Typekit to serve the type. WordPress was selected to give editors flexibility in how the content is presented.
"We set up a system for editors to change the colour of some of the homepage elements to represent the current feature article," continues rice. "This creates the same effect as a new magazine cover."
14. Mike Kus
Here designer Mike Kus presents his stunning work in a refreshingly clean and understated manner, in which large images live alongside simple user interface elements. Bold dashes of colour come through from the portfolio items themselves, rather than from unnecessary decorative elements.
"I think of my work as the brand, hence there was no need to add a lot of style to the actual site [or its] UI," says Kus.
The website is fully responsive and equally easy to navigate on larger and smaller screens. What makes the site such a pleasure to explore, however, is the image selection: each portfolio item uses strong, carefully selected imagery that make you want to see more of the project.
Kus notes that "one of the main issues was making sure the site had the same visual impact across all viewport sizes" – and in our opinion, it certainly does.
Multeor is a multiplayer web game developed by Arjen de Vries and Filidor Wiese and designed by Arthur van 't Hoog. The idea of the game is to control a meteor crashing into earth. You score points by ensuring you leave the biggest trail of destruction. Up to eight players can connect to a single game simultaneously.
Rather than using one of the many game libraries, Wiese built entirely from stratch. "We decided not to use a prefab game engine," he says, "which means rendering the graphics, detecting collisions, keeping track of entities and coding a particle system for the explosions. Not depending on a specific game engine was great fun: it gave us a lot of creative freedom and we definitely learned a lot because of it."
16. Here Is Today
Here is Today was created by designer Luke Twyman. He explains the motive behind the site: "Being fascinated by the scale of time, I wanted to create something that would clearly give people a sense of that vastness, and a feeling of where we sit in relation to all that's gone before. To do this, two important features on the technical side would be some kind of zooming/scaling mechanic, and also a super clean layout."
Twyman kept all widths relative to make the site's message convey equally well on a smaller screen: "From the start I decided to do away with pixel measurements and pt sizes for type, and instead set my own measurement unit based on a fraction of the screen width. I set one unit to be 1/22 of the screen width and positioned and scaled everything using that unit, so the spacious layout would be maintained on different displays."
17. The Trip
MapsTD is a tower defence game, but with a difference. You tell it where your home is, and through the power of Google Maps, it will produce a game in which you're defending your hometown, with the baddies relentlessly charging past the streets and houses of your neighbourhood.
As the game progresses, more enemies (or 'creeps' as he has called them) appear on screen. Barclay found himself battling to keep performance high and timings correct: "One of the biggest challenges – one that still isn't quite right - was the timing. Firstly, if the page isn't active, most browsers reduce how often they check if timeouts have reached the end, resulting in creeps moving in bursts rather than moving steadily. I ended up fixing that by pausing the game when the tab loses focus. The detection code was taken from David Walsh's blog and is in the game credits.
"The other problem was that as you progressed, there were too many things happening, which resulted in the game slowing down a lot. The workaround ended up being to use harder creeps rather than more of them, and making the game incrementally more difficult each level after level 50."
This is an amazing example of how powerful today's tools are. Aditya Ravi Shankar has used them to create an online version of classic real-time strategy game Command and Conquer.
Recreating the original 1995 game was a long and painstaking process, says Shankar. "Every little thing took time - things like selecting single units or multiple units; being able to select by drawing the box from left to right or from right to left; making sure the panning was smooth; figuring out a decent fog of war implementation; allowing for building construction, dependencies (the Power Plant is needed for the Refinery, which is needed for the Factory) and building placement (buildings cannot be constructed on top of other buildings); and depth sorting when drawing so units could move behind buildings and trees."
20. Peanut Gallery
Peanut Gallery is a project from the Google Creative Lab. Valdean Klump, a producer at the Lab, explains the concept. "The Peanut Gallery is a Chrome experiment that lets users add intertitles to silent film clips by talking to their browser," he says.
"One of our favourite features of the API is that text updates in real time while you speak," Klump continues. "For example, if you say 'European Union' slowly, you can watch as the API begins by printing 'your' or 'year' and then corrects it to 'European Union'. "Another neat feature (for English speakers only at this point), is punctuation. Say 'question mark', 'exclamation point', 'comma', or 'period' and the API will insert the correct punctuation for you," adds Klump.
Liked this? Read these!