team CreativeSplashWebCreativeSplash_Subscribe 20 amazing HTML examples
We hand-pick some great HTML examples, and talk to the designers behind them to find out how they went about creating them.
Some of these sites use the latest technologies to push the boundaries of what’s possible on the web; others use traditional design principles to build beautiful, usable sites. Whether you’re using simple HTML or diving into WebGL and 3D CSS, you’ll find something here to inspire you.
We also have a brilliant selection of inspirational examples of CSS as well as some great CSS and JavaScript tutorials to power up your skills. Meanwhile, if you want to learn more about HTML5 then check out our list of great HTML5 resources.
01. Karim Rashid
Karim Rashid’s new site rocks
Designer Karim Rashid is as prolific as he is celebrated. With over 3,000 designs in production and work in 20 permanent collections worldwide, it is perhaps no surprise that his own website had taken a back seat for the past 10 years. Until he commissioned Anton & Irene, that is.
With its trademark embrace of engaging interactions, emotive typography and truly device-agnostic layouts, the duo has delivered a site that invites vigorous exploration. Which was, of course, the point: “Our main goal was to showcase the plethora of products and projects in a visually enticing way,” say the pair on their blog.
This plethora of products also presented a challenge. How does one deliver 5,000-plus images of varying shapes and sizes in a responsive environment? The solution: a re-imagining of conventional layouts and a lo-fi approach to structuring to give a precise, flexible grid combined with bold (yet unobtrusive) typography.
Perhaps the most impressive thing about Rashid’s new site is the seamless transitions between viewports. “We always design all screens simultaneously … The moment we have an idea for a component or a layout we try it on all screens and see if it makes sense across the board.”
02. Histography
An interactive timeline from the Big Bang to present day
Histography – Israeli designer and developer Matan Stauber‘s final year project at Bezalel Academy of Arts and Design – is an interactive timeline spanning no fewer than 14 billion years, from the Big Bang to present day. Literally extending over the entire history of the known universe, it is an immense, interactive infographic that challenges our preconceptions of how to communicate complex subjects.
Covering topics ranging from literature and music to assassinations, inventions and religion, Histography’s timeline invites us to explore events from our rich past, each dynamically pulled from Wikipedia and represented on screen as a small black dot. There are two modes: the horizontal, left-to-right view that allows the user to home in on a specific time period; or the helix-like time machine that presents a curated list of key events.
Stauber says he has always been fascinated by the idea of showing history unfold over time: “Timelines are the most popular way of visualising history, and yet I felt they where always very limited. From the beginning of this project I knew I wanted to create a timeline that is not limited to a year, decade or a period. I wanted a timeline that could contain all of history.”
03. On the Grid
On the Grid: an international neighbourhood guide, curated by designers
Although stressful to many, moving office can also be a great source of inspiration. When Hyperakt relocated to Gowanus, Brooklyn, the team’s excitement at discovering the hidden treasures of their new surroundings led to the incarnation of On the Grid: an international neighbourhood guide, curated by designers.
What strikes me most about the site is the minimalist yet impressionable brand, which was “designed to be highly structured, yet playful and dynamic, just like the content on the site“. The no-nonsense aesthetic shuns the typical hero image trap and makes great use of the viewport even at extreme sizes.
And then there’s the attention to detail. From the animated logo to the 100 (and counting) unique city illustrations and simple animations, On the Grid clearly isn’t just another lifestyle blog.
On its blog, Hyperakt explains how it wanted to create “a reliable resource that captures the true essence of the places we love, through beautiful photography, candid descriptions and design-driven curation.” With more curators joining every month, On the Grid may soon come to a neighbourhood near you.
04. LS Productions
LS Productions’ new branding and website was produced by Edinburgh agency Whitespace.
LS Productions recently broadened its horizons from sourcing great locations (under the moniker Location Scotland) to become what is now the UK’s largest stills and motion service production company. Its new branding and website was produced by Edinburgh agency Whitespace.
Senior designer Mike Bryant says the piority was to let the company’s work do the talking: “They have such an incredible portfolio, ranging from stills to motion, that our main task was to create a structure that complemented minimal type with image.” This approach is immediately evident on the homepage, which encapsulates the company’s broad offering with a fitting mixture of animated typography and video.
The main technical challenges – keeping load times to a minimum and managing different crops for the high-quality imagery – were overcome by replacing higher-res images where required, and using JavaScript to dynamically manage the height and aspect ratios of images at various screen sizes.
The final result, Bryant says, is a “stripped-back site that uses modular panels, clean type and a minimal colour palette to act as a subtle backdrop for the beautiful work”.
05. Lordz
Lordz, a dance academy based in Switzerland
“Play is older than culture, for culture … always presupposes human society, and animals have not waited for man to teach them their playing.” Thus begins Johan Huizinga’s Homo Ludens, where the author discusses the impact of play in society.
The element of play is one that Lordz, a dance academy based in Switzerland, takes seriously. For Lordz, dance is not just about movement; it is an art form, a playful means of cultural expression. Tasked with designing a site for the academy, Eidenbenz/Zürcher used this ethos to guide its artistic direction.
“We wanted to create something that confronts the digital experience with the very heart of Homo Ludens,” explains art director and partner Daniel Zürcher. “A playful way of getting an insight into the daily practice of dancing; the movement, the feelings, and so on. To achieve this, we used the newest technology in filming, post-production and, of course, programming.”
The result is quite stunning; a uniquely recognisable and inspiring site that truly captures the heart of the organisation through the use of video – a rare feat these days.
06. Monotype
The deeper you dive in the richer it gets
The new Monotype site is, at first glance, extremely simple. Yet its journey from conception to launch started as far back as 2013, when iA joined an in-house team at the type foundry to help develop the vision for the future of Monotype online.
The project started 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,” Oliver says, “Monotype.com was a model of modern web development, from research, to concept to production. And we hope it shows.”
07. Vibrant Composites
Small visual effects on scroll echo the surprise and interest that parallax scrolling usually tries to achieve
This site for Vibrant’s haptic communicator Thumper has a beautiful balance of subtlety in motion and moments of innovation and impact. I was immediately drawn to the attention to detail, use of asymmetry, and how precise and refined the small animations were.
Site animator Chris Gannon‘s explanation of what was done makes it even more intriguing: “Whilst working out the speed of the Thumper pulse, we had to refer to an algorithm that says if ‘m’ is the slope of the line, the speed should be proportional to sqrt(1+m2).” That could not have been easy! A perfect example of how informative animation can catch the eye of the viewer, educate them and be beautiful, all at once. And Gannon is a master.
Small visual effects on scroll echo the surprise and interest that parallax scrolling usually tries to achieve, but are subtle enough that the viewer can feel at ease while navigating. A beautiful overall synthesis of information and design.
08. Halo 5: Guardians Visualizer
The new Halo website
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. “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.
09. Over the Tiny Hills
The marriage of music, interaction, incredible design and innovation have kept us coming back to this site for months
Over the Hills was created by French digital studio ultranoir, working with illustrator mcbess 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.
The whole experience is monochromatic, save some very small bursts of colour. Overall, the marriage of music, interaction, incredible design and innovation have kept me coming back to this site for months.
10. U.S. Web Design Standards
One of the things that’s most powerful about this set of design standards is its accessibility
Anyone who has used a US government site has, for the most part, endured a mixture of disorienting design patterns and dysfunctional code. This set of design standards for the US government is a breath of fresh air.
One of the things that’s most powerful about this set of design standards is its accessibility. “We have examples of how to use the colours, and show examples that have already been tested for colour contrast. Accessibility is probably one of the key differentiators between what we’re doing and other frameworks,” says lead frontend engineer at 18F Maya Benari.
It’s impressive that this framework has taken measures to be well-built, beautifully designed and carefully thought-out. The team took the time to write good documentation, not just for what CSS should be written, but for how it should be written. “That provides that gel, that language that you all speak together,” explains Benari.
Design standards and frontend style guides with these types of systems put in place at the get-go promise an easier system to build off and maintain in the future. It’s very exciting work, especially as it pertains to a user experience that can really impact people’s lives and livelihoods.
11. Omm Experience
A visualisation of the phases your brain goes though when trying to solve a problem
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.
I’m always impressed 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.
12. Sennheiser Reshaping Excellence
Users are invited to explore a forgotten stone ruin
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.
13. Ba Ba Dum
Play and learn site Ba Ba Dum was created using HTML5
Ba Ba Dum, a ‘play and learn’ site featuring five games that work in nine languages, is 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 MizielinÌski. “We’re also programmers and wanted to create a fun, immersive experience which gives the opportunity to learn something.”
14. Prospek
Prospek’s design is bold and uses strong, unforgiving graphic design
Designing agencies’ websites can be the source of a lot of creative freedom. Most agencies have similar content: homepage, a portfolio, an about page, team page and contact page, but the fun part is creating a visual identity for the website. Every agency has a different personality, different aspirations, goals and target customers. So, it’s interesting to see how different agencies present themselves on the web.
‘Integrated communication agency’ Prospek is based in Montreal and specialises in interactive strategies. It has some impressive portfolio work from a wide range of clients, but the Prospek site stands out for its visual impact. It’s bold and uses strong, unforgiving graphic design… and the team page is great! It’s a huge sheet of red with white copy and black/red team pics. The graphic design is beautiful and there are some really nice and fun animations of each team member when you hover on them.
Prospek’s staff clearly don’t take themselves too seriously, but they take what they do very seriously… and it shows. “For Prospek’s new website, we truly achieved our goals: build a fully responsive site, showcase the multiple talents of the agency and refresh its image towards one free of unnecessary embellishments,” enthuses creative director Emmanuel BeÌgin.
15. M. Power Yoga Studio
The M.Power Yoga Studio website is a beautifully simple example of single-page design
The M.Power Yoga Studio website is a beautifully simple example of single-page design. The site uses bold and emotionally engaging imagery of people practising yoga in an urban setting. The slightly desaturated colour processing of the photos strikes a perfect balance with the soft yet bold colour palette and the simplicity of the page layout.
The M.Power message is clear, and is delivered with elegant typography and informative copy. There’s not too much too read – but enough to understand the M.Power mission. Other neat touches include some simple but effective animation as you scroll through the various sections of the pages.
As you arrive at a new piece of content, text fades in as the previous images fade out. Not only is it a nice visual detail, it draws your eye to the content you should be reading at that point.
“Just as important as design was the refined CSS and JavaScript we used to reveal each section as users scroll,” explains an M.Power spokesperson. “We were able to achieve this using just a few lines of code, allowing us to keep the site as simple and approachable as our studio.”
16. The Music Bed
The Music Bed really stands out in terms of how it tells the story of what it does
The Music Bed really stands out in terms of how it tells the story of what it does. It’s a music licensing site: if you have a short film and you’d like to put some music to it, you’d come here. I’ve used a few of these sites and normally they’re awful – badly designed, and finding the right music is impossible. The Music Bed is different in a number of ways.
First, what it does is conveyed instantly via the site design. The landing page has the strapline ‘Licensing Relevant Music’; behind this is a montage of moving image containing images of a filmmaker and people making music. There’s also video that perfectly demonstrates the power of using relevant music on a film. The site makes a play for the users it’s after. The homepage and video are very emotionally engaging and tell you straight away that you’ve come to the right place.
“We wanted to make a site that was as beautiful as it was functional,” says owner Daniel McCarthy. “A filmmaker has to be able to find the perfect song as fast as possible. Not only did we have to build our database from the ground up; we had to retag over 10,000 songs so users could find things accurately.
“From a design perspective we went with a left nav, large images, and large text and icons because we believe our market is going to be moving more towards tablets [from desktops],” he adds. “It was important for us to be ahead of the curve.”
17. James Anderson
The cricket player’s website uses inline SVG for graphic visualisation of his stats
James Anderson is one of the best fast bowlers in world cricket and this site, created by Manchester-based agency Cahoona, celebrates his 10th year in the game.
The site focuses on Anderson’s career in numbers, with inline SVG being 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 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.”
18. Fritzo Keys
This experimental site uses audio elements, canvas and web workers
Fritzo Keys is a musical instrument app that has a continually playing, 32-voice background accompaniment. Developer Fritz Obermeyer 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.
19. Font Dragr
Font Dragr has gone from proof of concept to working app
Font Dragr provides a revolutionary way to test custom fonts in the browser. No coding or uploading is required – you simply drag and drop.
20. Wonen zoals ik dat wil
Architect Dirk-Jan Schotanus’ site makes a big impact with this fantastic photography
‘Wonen zoals ik dat wil’ (or ‘living the way I want to’, for those of us whose Dutch is a little rusty) is the site of Groningen-based architect Dirk-Jan Schotanus.
The site was built by Arno Hoogma, with Bart Wortel providing the concept and Wouter Nip the design. Even if the site’s a little incomprehensible to those who don’t speak Dutch, it’s hard not to be charmed by its smart design and fantasticarchitectural photography.
