16 exemples HTML étonnants
Page 1 sur 2: Page 1- Page 1
- Page 2
Certains de ces sites utilisent les dernières technologies pour repousser les limites du possible sur le Web; d'autres utilisent les principes de conception traditionnels pour créer de beaux sites utilisables. Que vous utilisiez du HTML simple ou que vous plongiez dans WebGL et CSS 3D, vous trouverez ici quelque chose pour vous inspirer.
Nous avons également une brillante sélection de exemples de CSS à explorer.
01. Appy Fizz
Appy Fizz est une boisson pétillante qui se décrit comme «le champagne des boissons aux fruits». Le nouveau site Web Appy Fizz faisait partie d'un projet de rebranding plus vaste de la société de design basée à New York. Sagmeister et Walsh . Comme l'expliquent les créateurs dans leur étude de cas, l'identité «visualise des bulles gazeuses à travers un langage graphique dynamique de sphères et de cercles 3D».
Le design est un mélange intéressant d'éléments tridimensionnels super plats et implicites. Le langage circulaire écrit en rouge vif, blanc et noir me rappelle le travail de Yayoi Kusama, l'artiste de renommée mondiale associé au pop art, au minimalisme et aux pois.
L'art et son espace dans les industries commerciales est un thème avec lequel Sagmeister & Walsh jouent tout au long de leur travail, et il est intéressant de voir comment cette combinaison se traduit sur le Web. Ici, de nombreuses animations et éléments de canevas interactifs parlent le même langage visuel - une simulation de carbonatation suit même la souris de l'utilisateur lors de son déplacement sur le site Web.
02. Fabriqué par quelques-uns
Made by Few est une conférence Web annuelle organisée par Quelque , une agence de design et de développement en Arkansas. Sally Nixon Les illustrations détaillées et lumineuses de la tête de mât et des descriptions des orateurs sont présentes, et il faut un moment pour se rendre compte qu'il y a une répétition dans la foule, car elle est si subtile.
Au fur et à mesure que vous explorez le site, il y a d'autres surprises. «Chez Few, nous aimons les accidents agréables et encourageons l'exploration», déclare Arlton Lowry, co-fondateur de Few et organisateur de la conférence. Fidèles à leur philosophie d'exploration, il y a des joyaux cachés disséminés sur le site (nous ne les dévoilerons pas tous, mais essayez d'utiliser le code Konami!).
Ces éléments amusants donnent au site beaucoup de personnalité qu'Arlton attribue directement à la culture de l'agence. «Nous pensons que lorsque vous offrez aux gens un environnement ouvert et amusant, on ne sait pas ce qu’il en résultera.»
03. Allbirds
Allbirds est une marque de chaussures de sport du pays des 29 221 344 moutons. Cela a commencé lorsque le co-fondateur Tim Brown a observé les qualités étonnantes de la laine mérinos et s'est demandé pourquoi elle n'avait jamais été utilisée dans les chaussures auparavant.
Le site Web, qui a été créé à l'aide de Shopify, mélange la photographie de style de vie avec des illustrations. Le résultat est une expérience délicieuse qui ne raconte pas seulement l’histoire des Allbirds, mais vous donne également une idée du produit lui-même.
«Il est conçu pour mettre en valeur l'incroyable attention portée aux détails et à la réflexion derrière la conception de nos produits», explique Brown à propos du raisonnement derrière le site. «Nous avons beaucoup investi dans la photographie - et le photographe kiwi Henry Hargreaves basé à New York - pour donner vie au site et articuler notre mission de fabriquer de meilleures chaussures d'une meilleure manière.
Brown et le Bois rouge L'équipe parle de leur dévouement extrême à l'UX du site et de la façon dont ils se sont penchés sur les détails qui sont si souvent négligés. La section FAQ banale prend vie avec des GIF animés, et l'illustration est utilisée dans tout le site comme motif de narration inattendu.
04. Karim Rashid
Le designer Karim Rashid est aussi prolifique que célébré. Avec plus de 3000 créations en production et travaillant dans 20 collections permanentes à travers le monde, il n'est peut-être pas surprenant que son propre site Web soit passé au second plan au cours des 10 dernières années. Jusqu'à ce qu'il commande Anton et Irene , C'est.
Avec sa marque de fabrique d'interactions engageantes, de typographie émotionnelle et de mises en page vraiment indépendantes des appareils, le duo a livré un site qui invite à une exploration vigoureuse. Ce qui était, bien sûr, le point: «Notre objectif principal était de présenter la pléthore de produits et de projets d'une manière visuellement attrayante», déclarent les deux sur leur blog.
Cette pléthore de produits représentait également un défi. Comment produire plus de 5000 images de formes et de tailles variées dans un environnement réactif? La solution: une réinvention des mises en page conventionnelles et une approche lo-fi de la structuration pour donner une grille précise et flexible combinée à une typographie audacieuse (mais discrète).
La chose la plus impressionnante à propos du nouveau site de Rashid est peut-être les transitions transparentes entre les fenêtres. «Nous concevons toujours tous les écrans simultanément ... Dès que nous avons une idée de composant ou de mise en page, nous l'essayons sur tous les écrans et voyons si cela a du sens dans tous les domaines.
05. Histographie
Histographie - designer et développeur israélien Tuer Stauber Le projet de dernière année de la Bezalel Academy of Arts and Design est une chronologie interactive couvrant pas moins de 14 milliards d'années, du Big Bang à nos jours. S'étendant littéralement sur toute l'histoire de l'univers connu, il s'agit d'une immense infographie interactive qui remet en question nos idées préconçues sur la façon de communiquer des sujets complexes.
Couvrant des sujets allant de la littérature et de la musique aux assassinats, aux inventions et à la religion, la chronologie de l'histographie nous invite à explorer les événements de notre riche passé, chacun tiré dynamiquement de Wikipédia et représenté à l'écran comme un petit point noir. Il existe deux modes: la vue horizontale, de gauche à droite, qui permet à l'utilisateur de revenir sur une période de temps spécifique; ou la machine à remonter le temps en forme d'hélice qui présente une liste organisée d'événements clés.
Stauber dit qu'il a toujours été fasciné par l'idée de montrer l'histoire se déroulant au fil du temps: «Les chronologies sont le moyen le plus populaire de visualiser l'histoire, et pourtant je sentais qu'elles étaient toujours très limitées. Dès le début de ce projet, j'ai su que je voulais créer une chronologie qui ne se limite pas à un an, une décennie ou une période. Je voulais une chronologie qui pourrait contenir toute l'histoire.
06. Sur la grille
Bien que stressant pour beaucoup, le déménagement de bureau peut également être une excellente source d'inspiration. Lorsque Hyperakt a déménagé à Gowanus, Brooklyn, l'enthousiasme de l'équipe à découvrir les trésors cachés de leur nouvel environnement a conduit à l'incarnation de On the Grid: un guide de quartier international, organisé par des designers.
Le site est minimaliste mais impressionnable, et était ' conçu pour être très structuré, mais ludique et dynamique, tout comme le contenu du site ». L'esthétique sans fioritures évite le piège d'image typique des héros et fait un grand usage de la fenêtre même à des tailles extrêmes.
Et puis il y a l'attention portée aux détails. Du logo animé aux 100 (et plus) illustrations de villes uniques et animations simples, On the Grid n'est clairement pas qu'un autre blog de style de vie.
Sur son blog, Hyperakt explique comment il voulait créer «une ressource fiable qui capture la véritable essence des endroits que nous aimons, à travers de belles photographies, des descriptions candides et une curation axée sur le design». Avec de plus en plus de conservateurs qui se joignent chaque mois, On the Grid pourrait bientôt venir dans un quartier près de chez vous.
07. Productions LS
LS Productions a récemment élargi ses horizons en passant de la recherche de grands emplacements (sous le nom de Location Scotland) pour devenir ce qui est maintenant la plus grande société de production d'images fixes et de services de mouvement du Royaume-Uni. Son image de marque et son site Web ont été produits par l'agence d'Édimbourg Espace blanc .
Le designer senior Mike Bryant a déclaré que la priorité était de laisser le travail de l'entreprise parler: `` Ils ont un portefeuille tellement incroyable, allant des images fixes au mouvement, que notre tâche principale était de créer une structure qui complète le type minimal avec l'image. '' Cette approche est immédiatement évidente sur la page d'accueil, qui résume l'offre large de l'entreprise avec un mélange approprié de typographie animée et de vidéo.
Les principaux défis techniques - réduire au minimum les temps de chargement et gérer différentes cultures pour les images de haute qualité - ont été surmontés en remplaçant les images à plus haute résolution si nécessaire et en utilisant JavaScript pour gérer dynamiquement la hauteur et les proportions des images à différentes tailles d'écran. .
Le résultat final, dit Bryant, est un «site dépouillé qui utilise des panneaux modulaires, un type épuré et une palette de couleurs minimale pour servir de toile de fond subtile pour le beau travail».
08. Seigneur
'Le jeu est plus ancien que la culture, car la culture ... présuppose toujours la société humaine, et les animaux n'ont pas attendu que l'homme leur apprenne leur jeu.' Ainsi commence Homo Ludens de Johan Huizinga, où l'auteur discute de l'impact du jeu dans la société.
L'élément du jeu est un élément que Lordz, une académie de danse basée en Suisse, prend au sérieux. Pour Lordz, la danse n'est pas qu'une question de mouvement; c'est une forme d'art, un moyen ludique d'expression culturelle. Chargé de concevoir un site pour l'académie, Eidenbenz / Zürcher a utilisé cette philosophie pour guider sa direction artistique.
«Nous voulions créer quelque chose qui confronte l'expérience numérique au cœur même de Homo Ludens», explique le directeur artistique et partenaire Daniel Zürcher. «Une manière ludique d'avoir un aperçu de la pratique quotidienne de la danse; le mouvement, les sentiments, etc. Pour y parvenir, nous avons utilisé les dernières technologies en matière de tournage, de post-production et, bien sûr, de programmation.
Le résultat est assez étonnant; un site unique reconnaissable et inspirant qui capture vraiment le cœur de l'organisation grâce à l'utilisation de la vidéo - un exploit rare de nos jours.
Page suivante: 8 autres exemples étonnants de HTML
- 1
- deux
Page actuelle: Page 1
Page suivante Page 2
