La toile parfaite : pourquoi vous devriez combiner créativité et technologie sur votre site Web

Un site Web est sans doute l'outil de marketing en ligne le plus important d'une entreprise.

Dans de nombreux cas, c'est la première impression d'une marque, la plate-forme qui fournit le service d'une entreprise, et pour les sites de commerce électronique, l'expérience de vente.

Ce qui est génial avec eux, c'est qu'ils sont la toile parfaite pour mélanger la créativité et la technologie et c'est là que la vraie magie se produit - si vous le permettez. Jetez un œil à n'importe quel site Web présenté sur Awwwards - ils ne manqueront pas de laisser une impression durable.

Mais pourquoi certaines entreprises se donnent-elles tant de mal pour créer ces sites ?

Parce que les sites Web sont une plate-forme efficace et puissante pour communiquer le message de votre marque et vous différencier des autres sur le marché.

Et – peut-être plus important encore – un site Web n'est jamais terminé non plus. Il y a toujours des choses qui peuvent être améliorées en fonction de choses telles que l'expérience utilisateur, les résultats des tests A/B, etc.

Souvent, la meilleure façon d'améliorer votre site Web est d'intégrer les tendances technologiques émergentes, une créativité unique et de solides fonctionnalités.

Après tout, si le vôtre est aussi interactif qu'un dépliant papier, il ne crée probablement pas beaucoup de rappel de la marque.

Comment le major Tom a épousé la technologie et la créativité sur leur site Web

Il y a plus de 644 millions de sites actifs sur le world wide web en ce moment, donc il est plus important que jamais de se démarquer aux consommateurs pour les bonnes raisons.

Heureusement, il existe de nombreux exemples de marques améliorant leurs sites dont vous pouvez apprendre.

Examinons l'agence numérique de premier plan Major Tom, qui s'est rendu compte qu'elle pouvait réduire ses taux de rebond et augmenter le nombre de prospects en repensant sa page d'accueil et en lui insufflant des éléments de conception modernes.

Lorsque le major Tom a amélioré leur nouvelle page d'accueil, ils voulaient ce facteur « wow ». Pas simplement pour surprendre et ravir l'utilisateur, mais pour vraiment mettre en valeur la mission de leur marque.

Grâce à la collaboration étroite de leurs départements de création et de développement, le major Tom a pu donner vie au message de sa marque.

La vidéo ci-dessous vous donne un avant-goût de la page d'accueil si vous ne l'avez pas encore vue, mais comment la créativité et la technologie se sont-elles associées pour atteindre le résultat ?

Lorsque l'un des développeurs Web du major Tom, Michinobu, a organisé une présentation interne sur Three.js et leur a montré l'animation originale de Waves, Darren, leur directeur créatif, l'a immédiatement vu comme un excellent moyen de représenter le major Tom.

De plus, en le développant davantage, il avait le potentiel de communiquer aux futurs clients ce qu'est le travail avec le major Tom.

Bien que la version originale s'intitule « Waves », Darren ne l'a jamais vue comme ça. Au lieu de cela, il le considérait comme un paysage vallonné et vallonné.

Chaque sphère représentait une stratégie, une tactique, un canal, un support, une technologie, un logiciel, une agence possible – nommez-le – qui est disponible pour les spécialistes du marketing. Il a capturé la complexité du paysage marketing avec son nombre infini d'options.

La ligne d'horizon qui traverse leur image de marque était également évidente dans l'animation originale, renforçant le lien entre l'animation et leur marque.

Ainsi, le major Tom avait la vision créative – maintenant ils devaient plonger plus profondément dans la technologie.

Trois.js

Three.js est une bibliothèque et une API JavaScript qui permet aux développeurs de créer des graphiques 3D sur une page Web. C'est essentiellement un framework qui repose sur WebGL.

Bien que vous puissiez utiliser WebGL pour restituer des graphiques 2D et 3D interactifs, Three.js fait beaucoup de travail. La bibliothèque en ligne est idéale pour gérer les subtilités des animations WebGL et fournit le cadre de base pour démarrer les développeurs.

Pour les non-développeurs qui lisent ceci, la bibliothèque est un endroit amusant pour jouer avec tous les effets 3D interactifs et impressionnants que les développeurs ont partagés dessus.

Essentiellement, Three.js permet aux développeurs - comme le major Tom - de créer des graphiques élégants dans un environnement 3D plus convivial. Three.js étant basé sur JavaScript, les développeurs ont la possibilité de contrôler des facteurs tels que l'angle et la perspective de l'objet que l'utilisateur voit.

Par exemple, le major Tom fait-il en sorte que l'objet 3D se déplace et que la perspective sur la caméra soit statique ou la caméra se déplace-t-elle autour de lui ?

Ainsi, le major Tom avait Three.js qui leur donnait une longueur d'avance sur le développement de leur paysage par rapport au développement d'un objet 3D avec WebGL pur.

Mais leur page d'accueil a-t-elle été développée dans un laps de temps relativement court ? Définitivement pas.

Bien que Three.js fournisse les outils et un point de départ, il existe une courbe d'apprentissage abrupte pour le maîtriser. Développer des objets 3D aura toujours des défis.

Ajuster les angles et les mouvements de la caméra, la vitesse des sphères, transformer l'animation pour qu'elle soit juste, cela a demandé beaucoup de maths.

Et nous voulons dire beaucoup. Si nous avions un mème pour résumer ça, ce serait celui-ci :

Il y avait certainement un cycle constant d'essais et d'erreurs, mais après plusieurs mois de travail acharné et d'équations complexes, l'effet souhaité a été atteint.

Cependant, Three.js n'était pas la seule plate-forme d'animation utilisée.

Avec le paysage marketing complexe capturé, il était temps de communiquer l'objectif de l'agence dans l'animation de la page d'accueil.

Pour ce faire, la vision était que toutes les sphères en mouvement tombent en ligne. Apaiser l'environnement et créer un espace de respiration afin que les bons produits et solutions soient choisis afin d'amener les clients à leur objectif final.

Pour transformer cette idée en un visuel fonctionnel, Greensock a été impliqué.

Chaussette verte

Greensock est une plate-forme d'animation HTML5 que le major Tom a saupoudrée sur la page d'accueil pour des animations et un séquençage transparents.

Ils l'ont utilisé pour retourner le paysage en pointillés, amener la rangée de sphères, mettre en évidence ce que les quatre sphères à la fin représentent et l'appel à l'action à la fin.

Avez-vous besoin de plus de conseils de développement Web? Inscrivez-vous à la newsletter DesignRush et recevez-les directement dans votre boîte de réception !

Compromis

Presque tout dans la vie nécessite des compromis. Qu'il s'agisse d'un appareil photo compact avec un objectif zoom ou de toucher un large public avec votre campagne publicitaire sur les réseaux sociaux avec un petit budget.

Combiner créativité et technologie ne fait pas exception. La meilleure chose à faire est d'identifier ce qui est le plus important et de le hiérarchiser.

Par exemple, au lieu de faire disparaître et animer le paysage dans la rangée de sphères, la vision originale était de les faire descendre pour former une ligne.

Cependant, pour développer cela, il a fallu beaucoup de temps en plus des plusieurs mois nécessaires pour terminer l'ensemble de l'animation de la page d'accueil.

D'un simple point de vue coût-bénéfice, cet effort ne valait pas le temps supplémentaire. Surtout quand le Major Tom pouvait efficacement communiquer le même message d'une manière similaire.

Lorsque la technologie et la créativité se rencontrent, les possibilités sont infinies. Il repousse les limites, place la barre plus haut et crée un impact durable.

Ce qui est bien avec les sites Web, c'est qu'ils constituent le canevas parfait pour combiner les deux.

Alors, demandez-vous si votre site Web rend justice à votre marque ? Cela vous distingue-t-il de vos concurrents et offre-t-il une expérience agréable à vos utilisateurs ? Sinon, il est temps de réévaluer l'efficacité de votre site Web et à quel point il pourrait l'être.

Vous voulez en savoir plus sur la façon dont vous pouvez tirer parti de la créativité au sein de votre site Web ? Lisez « Le pouvoir de la créativité et le site Web qui n'a jamais existé ».

De plus, vous recherchez une agence numérique de premier ordre pour relooker votre site avec une technologie innovante ? Contactez le Major Tom ICI pour un devis sur leurs services.

Une version de cet article a été initialement publiée sur le Major Tom.