16 amazing HTML examples

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 for you to explore. 

01. Appy Fizz

This design mixes super-flat and 3D-effect elements

Appy Fizz is a sparkling drink that describes itself as ‘the champagne of fruit drinks’. The new Appy Fizz website was part of a more extensive rebranding project by NYC-based design firm Sagmeister & Walsh. As the creators explain in their case study, the identity “visualises carbonated bubbles through a dynamic graphic language of 3D spheres and circles.”

The design is an interesting mix of super-flat and implied three-dimensional elements. The circular language written in bold red, white and black reminds me of the work of Yayoi Kusama, the world- renowned artist associated with pop art, minimalism and polka dots. 

Art and its space in commercial industries is a theme Sagmeister & Walsh play with throughout their work, and it’s interesting to see how this combination translates to the web. Here there are many animations and interactive canvas elements that speak the same visual language – a carbonation simulation even follows the user’s mouse around as it is moved across the website.

02. Made by few

This conference site is packed with hidden suprises

Made by Few is an annual web conference hosted by Few, a design and development agency in Arkansas. Sally Nixon’s detailed, bright illustrations feature in the masthead and the speaker descriptions, and it takes a moment to realise there is repetition in the crowd, because it’s so subtle.

As you explore the site, there are more surprises. “At Few, we love pleasant accidents and encourage exploration,” says Arlton Lowry, co-founder of Few and conference organiser. Sticking close to their philosophy of exploration, there are hidden gems scattered throughout the site (we won’t give them all away, but try hitting the Konami Code!).

These fun elements give the site a lot of personality that Arlton attributes directly to the agency culture. “We believe when you provide people with an open and fun environment, there’s no telling what will come of it.”

03. Allbirds

Strong product photography gives this site impact

Allbirds is a sports shoe brand from the land of 29,221,344 sheep. It began when co-founder Tim Brown observed the amazing qualities of Merino wool, and wondered why it had never been used in footwear before.

The website, which has been built using Shopify, mixes lifestyle photography with illustrations. The result is a delightful experience that doesn’t just tell the story behind the Allbirds, but also gives you a feel for the product itself.

“It’s designed to showcase the incredible attention to detail and thought behind our product design,” explains Brown on the reasoning behind the site. “We invested heavily in photography – and NYC-based kiwi photographer Henry Hargreaves – to bring the site to life and articulate our mission of making better shoes in a better way.”

Both Brown and the Red Antler team talk of their extreme dedication to the UX of the site and how they leaned into the details that so often are overlooked. The mundane FAQ section is brought to life with animated GIFs, and illustration is used throughout the site as unexpected storytelling motif.

04. Karim Rashid

HTML examples: 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.”

05. Histography

HTML examples: 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.”

06. On the Grid

HTML examples: 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.

The site is minimalist yet impressionable, and 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.

07. LS Productions

HTML examples: LS Productions

LS Productions’ 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 branding and website was produced by Edinburgh agency Whitespace.

Senior designer Mike Bryant says the priority 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”.

08.

HTML examples: Lordz

Video helps capture the heart of this dance academy

“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.

Next page: 8 more stunning examples of HTML

09.

HTML examples: Monotype

The deeper you dive in the richer it gets

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

HTML examples: Halo 5: Guardians Visualizer

Active theory used WebGL to build this interactive, 3D helmet

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.

11. Over the Tiny Hills

HTML examples: over the tiny hills

The marriage of music, interaction, incredible design and innovation keep users coming back

Over the Hills was created by French digital studio , working with illustrator 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

HTML examples: 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.

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

HTML examples: 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.

14. Ba Ba Dum

HTML examples: 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, created by husband-and-wife team Hipopotam Studio. 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

Examples of HTML5: 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, 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 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

Examples of HTML5: Fritzo Keys

This experimental site uses audio elements, canvas and web workers

The Rational Keyboard 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.

Like this? Try these…

Source

http://www.creativebloq.com/web-design/examples-of-html-1233547