21 meilleurs exemples de JavaScript
Page 1 sur 2: Page 1- Page 1
- Page 2
JavaScript crée des plates-formes qui peuvent engager un utilisateur et s'assurer qu'il se souvient de votre site et continue à le revoir. Il peut être utilisé pour créer des jeux, des API, des capacités de défilement et bien plus encore.
Internet regorge de inspiration de conception Web , y compris d'excellents exemples d'utilisation de JavaScript pour donner vie à un site Web et offrir une expérience utilisateur exceptionnelle. Voici quelques-uns de nos exemples préférés de JavaScript en action pour votre inspiration.
01. Histographie
Si vous avez déjà regardé Cosmos, vous vous souvenez peut-être que Carl Sagan a parlé du calendrier cosmique. Si l'âge de l'univers était condensé en un an, l'histoire humaine enregistrée tiendrait dans les toutes dernières secondes du 31 décembre.
14 milliards d'années d'événements constituent un énorme ensemble de données et l'afficher dans un navigateur n'est pas une tâche facile. Mais le designer et développeur Matan Stauber a relevé le défi - même s'il n'était pas sûr que ce soit possible: «Je pense que le principal obstacle devrait être les proportions», explique-t-il. 'Comment créer une chronologie alors que 99,9% de l'histoire que nous connaissons devra être condensée en moins d'un pixel de l'écran?'
Fils d'historien, Stauber a créé l'histographie en tant qu'étudiant à l'Académie des arts et du design de Bezalel, sous la direction de Ronel Mor. «Si nous réfléchissons à la manière dont les gens visualisent l'histoire, les délais sont probablement les plus courants, et pourtant ils n'ont pas beaucoup changé depuis l'époque du papier imprimé», dit-il. «J'ai vu cela comme une opportunité de conception passionnante, surtout aujourd'hui avec l'accès à des sources de données volumineuses.
Le site analyse et indexe les événements de Wikipédia, saisit l'article et extrait une image Google et une vidéo YouTube. Les données sont facilement découvrables et une joie à consommer. Si vous avez déjà perdu des heures à explorer des articles de Wikipédia, prévoyez beaucoup de temps pour celui-ci.
02. Filippo Bello
Ce portfolio en ligne mettant en valeur le talent de l'artiste 3D italien Filippo Bello a été conçu, conçu et développé en interne à Adoratorio par Enea Rossi et Alessandro Rigobello. L'équipe a eu une totale liberté dans sa conception.
Le jeu avec la profondeur tout au long du site Web est très efficace - les images se déplacent lentement vers le spectateur, créant l'impression de plonger dans chaque projet. Ceci est réalisé en utilisant ce qu'on appelle un effet de segment: l'image d'arrière-plan est répliquée dans différentes cases qui se déplacent vers le spectateur. L'équipe s'est mise au défi en évitant les technologies les plus évidentes. «WebGL ne convient pas à tous les types d'utilisateurs», déclare Rossi, directeur artistique et co-fondateur. 'Le principal défi de ce site était donc de comprendre comment approfondir l'écran en utilisant uniquement des chaînes de code CSS3 et JavaScript.'
Les transitions de page et les petits effets de zoom sur les images sont une belle touche supplémentaire au résultat final, qui était - comme le décrit Rossi - «absolument au-delà de nos attentes».
03. Les Browns de Saint-Louis
Pour ce site sur l'histoire de l'équipe de baseball de St. Louis Browns, agence numérique HLK a créé une très belle expérience. Le site se lit comme un livre vintage bien conçu, avec des chapitres et une typographie texturée. Les utilisateurs peuvent faire défiler chaque chapitre pour une expérience de type histoire basée sur le temps.
L'inspiration pour le site a été tirée de manuscrits et de publicités des années 1920, de nombreuses images provenant directement des années qu'elles décrivent. Cela apporte une sensation de datation unique à un espace numérique moderne. Ceci est complété par une palette de couleurs aux tons gris et marron, accentuée par une seule nuance d'orange.
Certaines de mes parties préférées de ce site sont les petits détails, tels que le bouton de menu (circulaire avec un menu hamburger à l'intérieur) qui se transforme en balle de baseball en survol. J'aime aussi la chronologie sur le côté gauche, qui suit l'écran et se met à jour au défilement.
Le site est construit à l'aide de Node.js et du framework Express pour permettre une mise à jour fluide et un flux entre les contenus.
04. Studio de travail de jambe
Travail des jambes fait un excellent travail sur le Web, de la conception graphique à l'interaction et aux médias. Il n'est donc pas surprenant de constater que son propre site personnel ne fait pas exception. La personnalité du studio transparaît à travers des illustrations amusantes et mixtes. Il combine des effets de photo vintage (tels que le motif de la grille de points) avec des accents blancs peints numériquement et des numérisations d'écriture physique pour créer un art unique pour représenter l'agence.
Cependant, ce ne sont pas seulement les illustrations qui rendent ce site Web remarquable - les animations interactives lui donnent vraiment vie. Certaines des illustrations elles-mêmes sont en fait des vidéos au lieu de visuels statiques, créées avec After Effects, et des composants de site Web tels que la barre latérale s'animent en douceur.
Le site Web est conçu avec le mobile à l'esprit, et les interactions mobiles sont reflétées dans l'expérience de bureau, où l'utilisateur peut glisser avec le pavé tactile pour parcourir les sections. Le site Web est construit à l'aide de Modernizr pour assurer la compatibilité et de jQuery pour les interactions.
05. Code Conf
Le site de CodeConf va vraiment au-delà du site Web standard de la conférence. La conférence a eu lieu à Nashville, dans le Tennessee, et tout ce qui concerne cette conception rend hommage à cet endroit.
Le site Web lui-même est bien réactif et dispose d'une palette de couleurs chaleureuses et cohérentes. Les illustrations fantaisistes donnent du caractère au site et créent une esthétique country-rock ludique qui se poursuit tout au long de la page (et même dans l'événement lui-même).
Aucun détail n'est épargné, car même les règles horizontales décoratives du menu (uniquement visibles sur les écrans plus petits) s'harmonisent avec l'esthétique country-rock. Le site implémente Google Maps pour les fonctionnalités de localisation et est construit avec jQuery et AngularJS.
Tout est illustré: toutes les salles, la «set list» des intervenants, l'appel à l'action pour l'achat de billets, et les pauses entre les sections. Il y a aussi un casting amusant de personnages qui peuvent être trouvés sur le site: des cactus vectoriels, des licornes, des dragons, des octochats, des cow-boys et des filles jouant de la musique et posant de manière ludique sur la page.
06. Conception IBM
Au cours des dernières années, IBM a investi dans le développement d'un programme de conception et a orienté l'entreprise vers une approche centrée sur l'humain pour créer des logiciels. Il est récemment sorti avec IBM Design Language, qui contient une mise à jour de son vocabulaire d'animation. Il fournit des conseils de conception et des ressources aux développeurs Web, tous en open-source sur GitHub.
Ce que j'aime dans cette mise à jour d'animation (encore plus que le fait qu'elle soit open source), c'est la façon dont le studio regarde l'héritage d'IBM et le monde physique pour l'inspiration, au lieu d'autres propriétés numériques. Hayley Hughes, responsable du langage de conception IBM, explique que l'équipe s'est inspirée des machines; en particulier leurs plans solides, leur masse physique et leurs surfaces rigides.
«De la frappe puissante d'un bras d'impression à la coulisse douce d'un chariot de machine à écrire, chaque mouvement était adapté à son objectif et conçu avec intention», explique-t-elle. «Notre logiciel exige la même attention aux détails pour rendre les produits vivants et réalistes.
Pourquoi l'animation est-elle si essentielle au langage de conception d'IBM? «Tout comme le langage corporel d'une personne vous aide à lire la conversation, l'animation transmet des informations essentielles qui aident les utilisateurs à comprendre comment naviguer et utiliser nos produits», explique Hughes.
07. Masi Tupungato
Ce merveilleux site Web d'une agence de création numérique internationale Ce pour Masi Tupungato, un projet de vinification basé en Italie, laisse presque l'image parler d'elle-même.
De façon inhabituelle, un écran de chargement est utilisé pour chacune des pages lorsque les images nettes en plein écran se chargent. Habituellement, ce serait un non-non - les utilisateurs veulent le contenu dès que possible. Cependant, ici, cela améliore réellement l'expérience de l'utilisateur en garantissant que les images sont entièrement chargées avant que tout contenu ne soit dévoilé. Le design crée un sentiment d'empathie, donnant aux utilisateurs le sentiment d'avoir été à la cave et de cueillir les raisins eux-mêmes.
Le site peut être lourd sur certaines pages (allant de 1,2 Mo à 5 Mo de poids), ce qui pourrait être amélioré en introduisant certaines techniques de chargement paresseux. Cependant, malgré son poids, le site est bien construit, avec le rendu de départ en moins d'une seconde et le chargement des visites de retour dans la seconde marque également. Le framework est basé sur unsemantic.com, qui est le successeur du 960 Grid System.
Lors de la visualisation du site sur le bureau et dans des fenêtres plus grandes, les utilisateurs peuvent voir et interagir avec chacun des vins séparément. Ils peuvent profiter de la plus grande taille de l'écran pour afficher toutes les caractéristiques et détails du vin côte à côte. En revanche, sur le site mobile, les détails et la description glissent et peuvent être glissés à nouveau en douceur.
08. tota11y
Rendre des sites Web accessibles est d'une importance cruciale. Cependant, les techniques et les tests impliqués semblent souvent nécessiter une spécialisation approfondie qui peut donner aux développeurs Web et aux concepteurs l'impression d'être à la dérive.
Entrez tota11y: un outil simple qui peut être inclus sous forme de fichier JavaScript dans une page ou, plus simplement, utilisé comme bookmarklet sur n'importe quel site. Il signale les éléments de la page qui ne respectent pas les directives d'accessibilité - faible contraste visuel ou absence d'alternatives textuelles pour les images, par exemple.
Les éléments capricieux sont signalés visuellement, ce qui facilite la capture d'écran et montre aux membres de l'équipe ou aux clients exactement quels sont les problèmes, tandis que les explications développées entraînent les utilisateurs sur les méthodes pour résoudre rapidement les problèmes.
Académie Khan Le site Web de tota11y n'est pas ouvertement glamour, mais le travail important n'est pas toujours fastueux. La simplicité fonctionnelle du texte - à la fois en apparence et en contenu - dément la complexité du problème que l'outil lui-même vise à atténuer.
09. Connaître le lupus
La Lupus Foundation of America (LFA) est une organisation nationale qui s'efforce de résoudre le mystère du lupus. prospère s'est associé au LFA dans le cadre d'un projet de sensibilisation du public à titre bénévole pour aider le grand public à comprendre la maladie.
«LFA voulait créer un jeu amusant mais informatif qui aiderait à éduquer le public de manière engageante, pour aider à surmonter ce problème», explique Laura Sweltz, concepteur UX et chef de projet. «Notre processus de conception s'est concentré sur la réalisation de cet objectif, tout en créant quelque chose que les personnes atteintes de lupus se sentiraient vraiment excitées à l'idée de partager.
La solution de Viget était un jeu de cartes inspiré du casino construit à l'aide de React, dans lequel chaque carte met en évidence un fait sur le lupus. Les illustrations personnalisées du concepteur Blair Culbreth gardent le jeu léger tout en abordant le sujet sérieux. Des effets sonores inspirés du casino se faufilent dans le jeu.
Les animations sont fluides et vives, ajoutant une autre couche de plaisir au jeu. L'expérience mobile est tout aussi interactive que le bureau et les transitions réactives ont été pleinement prises en compte. Le résultat final est une expérience ludique qui rend l'apprentissage sans effort.
dix. Le bateau
La narration longue durée gagne progressivement en popularité sur les sites d'actualités et de médias, mais sur le réseau de diffusion SBS 's The Boat, un roman graphique en ligne basé sur une histoire de Nam Le, se sent unique dans son style et son exécution. Des illustrations à l'encre Sumi, des animations exécutées de manière experte et un paysage sonore effrayant capturent l'histoire du voyage d'un jeune réfugié vietnamien.
Pour donner vie à l'histoire, l'illustrateur Matty Huynh a passé six mois avec la prose originale de Nam Le, esquissant des vignettes et créant de manière itérative les personnages.
«Je pense que l'équilibre que vous voyez vient de cette longue période de développement», explique la productrice Kylie Boltin. Cette période profondément tournée vers l'intérieur a permis aux membres de l'équipe principale de connaître l'histoire à fond. Nous savions que l'histoire battait et nous savions quels moments devaient être soulignés. Le principe directeur était de compléter la narration principale, plutôt que de la maîtriser ou d'ajouter un élément juste pour le plaisir.
Les panneaux graphiques ressemblent à des croquis de journal - urgents, imparfaits et profondément émotionnels. Ce site prouve à quel point la narration en ligne peut être puissante et engageante entre de bonnes mains.
Onze. Run4Tiger
Basé à Moscou Garçons affamés a conçu ce site de campagne spectaculaire pour le World Wildlife Fund Russia afin de sensibiliser le public à sa campagne Save The Tiger. Pourquoi faire la course avec vos amis quand vous pouvez faire la course avec un tigre de l'Amour suivi par GPS?
Le site vous permet de synchroniser votre application de course de choix (il prend actuellement en charge neuf applications différentes!) Et vous oppose, ainsi que les autres coureurs, au big cat, qui parcourt en moyenne 20 km par jour. Si le tigre vous bat, vous donnez 5 $ au WWF.
C'est un excellent concept, et il y a un excellent design pour l'accompagner. La palette de couleurs noir et jaune vif - inhabituellement audacieuse pour une application caritative - exprime l'urgence de l'initiative Save The Tiger.
La créatrice de Run4Tiger, Ksenia Apresyan, a déclaré que l'équipe avait définitivement le mouvement à l'esprit lors de la conception: `` Nous voulions rendre le site Web aussi dynamique que possible. C'est pourquoi nous avons décidé d'utiliser les technologies les plus récentes et d'afficher notre message principal, fait de particules dynamiques, sur la page principale.
Page suivante: 10 autres meilleurs exemples de JavaScript pour vous inspirer ...
- 1
- deux
Page actuelle: Page 1
Page suivante Page 2
