Catégories
Astuces et Design

Ali Ali by Exo Ape remporte le site du mois d'août 2020

Félicitations à Exo Ape pour avoir remporté le site du mois d'août avec Ali Ali. Merci à tous ceux qui ont pris le temps de voter, retrouvez le gagnant du Plan Pro dans notre Annuaire des créateurs, en bas de l'article.

Ali Ali est un réalisateur de publicités du Caire, en Égypte et le co-fondateur de Good People Films. Il est probablement surtout connu pour ses débuts en tant que réalisateur, «Never Say No to Panda» qui lui a valu un Lions d'or à Cannes, et avec plus de 100 millions de vues sur YouTube, a été nommé par le Guardian comme l'une des campagnes virales les plus regardées de tous les temps. Huit ans plus tard, Ali a réalisé plus de soixante publicités et campagnes mondiales pour des marques telles que Vodafone, Google, Coca-Cola, Budweiser et Amazon.

Étude de cas Ali Ali
Ali Ali, également connu sous le nom de «Alitwotimes»

Approche

Ali a approché Exo Ape plus tôt cette année pour créer un portfolio unique de réalisateur qui devait refléter la qualité de son travail, ainsi que sa forte affinité pour design minimaliste et typographie. Comme il est toujours sur le plateau, nous avons rapidement appris qu'il était (et nous le citons) «notoirement lent à revenir aux courriels», donc des appels soigneusement planifiés étaient nécessaires pour faire de ce projet un succès.

UNE portfolio de réalisateur unique qui devait refléter la qualité de son travail, ainsi que sa forte affinité pour design minimaliste et typographie

Concept

Lors de nos appels, nous avons découvert que les personnes qui souhaitent embaucher Ali sont occupées et toujours sur la route. Par conséquent, nous avions besoin d'un facile à utiliser site Web avec des CTA de contact toujours à portée de main. En outre, il devait devenir un lieu où les gens pourraient mieux connaître Ali et en apprendre davantage sur son travail et ses antécédents. Nous avons décidé d'opter pour une approche moins est plus, dans laquelle nous prioriserions les informations importantes, tout en racontant son histoire d'une manière typographiquement intéressante.

Accueil et animation d'introduction

Direction artistique

Ali a une forte opinion sur conception et typographie donc la pression était sur le premier jour.

Typographie

Le fait que le prénom d’Ali soit le même que son nom de famille était un point de départ intéressant et pourrait servir d’élément typographique principal sur la page. Afin de créer une cohérence dans la taille de la police, nous utilisons une échelle typographique dans le reste des pages.

Nous avons donné vie à la typographie en ajoutant une couche d'expérience de micro-animations et de transitions de page.

Nous avons soigneusement sélectionné Monument Grotesk par l'agence de design typographique suisse Dinamo qui permettrait variations de mise en page distinctes et contrastes de taille spectaculaires. Nous avons ensuite donné vie à la typographie en ajoutant une couche d'expérience de micro-animations et de transitions de page.

Étude de cas Ali Ali
Contraste de taille spectaculaire et détails typographiques intéressants sur la page Bio

Détails

Comme un clin d'œil subtil à l'industrie cinématographique, nous avons ajouté un film effet de grain qui se superpose sur chaque page. La page bio a été divisée en chapitres, afin que nous puissions raconter l'histoire d'Ali d'une manière plus convaincante. Des images personnelles ont été ajoutées pour créer des connexions émotionnelleset les événements importants de la vie sont présentés chronologiquement afin que les visiteurs aient une meilleure idée du temps et du lieu.

Étude de cas Ali Ali
Sur la page Bio, l’histoire d’Ali est racontée de manière typographique

Étude de cas Ali Ali
Version bureau et mobile pour la page de la campagne

Lorsque nous avons envoyé notre premier projet de conception, nous avons été ravis d'apprendre qu'il «a adoré ça

Mouvement

Après l'approbation de la conception, nous avons continué en créant études de mouvement afin de montrer comment certains éléments et les interactions devrait se comporter dans le site Web final. C'est une étape importante pour avoir une meilleure idée si les choses fonctionnent ou non, et pour communiquer à notre développeur comment les choses ont été envisagées pendant le processus de conception. Nous créons souvent quelques variations dans Adobe After Effects pour voir quel type de mouvement fonctionne le mieux avec la marque ou le produit. Dans chaque variante, nous testons différents concepts et assouplissements, pour obtenir le mouvement qui fonctionne le mieux dans l'expérience finale.

Transition Work & Bio Wipe

Effacer la transition

La transition d'effacement est l'un des points forts du site Web. Nous voulions créer un commutateur subtil de gauche à droite entre les travail et bio, où l'élément typographique principal «ali ali» occupe une place prépondérante sur les deux pages.
Comme les pages «travail» et «bio» ont une relation forte, nous avons consciemment regroupé les deux boutons de navigation en haut à gauche, tandis que nous avons séparé le bouton de contact et l'avons placé en haut à droite. Cela met l'accent sur les deux sections de la navigation principale, car elles sont tout aussi importantes.

À l'intérieur du lecteur vidéo, le panneau d'information peut être ouvert en faisant défiler vers le bas. L'audio s'estompe pour donner à l'interaction globale une touche premium.

Interactions avec le lecteur vidéo

Lecteur vidéo personnalisé

Comme tout le travail d'Ali est basé sur la vidéo, nous avons décidé d'ajouter des détails intéressants dans le lecteur vidéo pour créer un expérience délicieuse. À l'intérieur du lecteur vidéo, le panneau d'information peut être ouvert en faisant défiler vers le bas. L'audio disparaît pour donner à l'interaction globale un touche premium.

Effets de survol dynamiques

Effets de survol dynamiques

le approche de conception simpliste nous a permis de jouer avec différents états de survol dans la grille. Il était parfaitement logique d'utiliser de courtes vidéos de prévisualisation lors du survol d'une vignette, mais afin de rendre la grille plus intéressante, nous avons décidé d'ajouter plusieurs variantes de survol. Après avoir expérimenté diverses options, nous avons décidé d'utiliser une galerie d'images dans la vignette. Dans la galerie, Ali peut sélectionner plusieurs images fixes qui apparaîtront lorsqu'un utilisateur survole la vignette. En fonction du nombre d'images fixes sélectionnées, le code divisera automatiquement la vignette en plusieurs zones de sélection.

Générateur de grille personnalisé

Grille modulaire

La page d'accueil présente un système de grille flexible où Ali peut travailler avec des lignes prédéfinies pour créer une grille qui répond à tous les besoins. Nous avons ajouté un générateur de grille personnalisé dans le CMS afin qu'Ali puisse ajouter des blocs, organiser l'ordre et le type de contenu de chaque élément de la grille. Ceux-ci peuvent ensuite être liés à un seul film ou à une page de campagne.

Les technologies

Nous voulions nous assurer que le code refléterait le style du site Web, propre et maigre. Nous avons donc essayé d'éviter l'utilisation de bibliothèques inutiles et nous nous sommes assurés que la majeure partie du développement était Fait sur mesure, et construit à partir de zéro.

Backend

Nous avons utilisé WordPress en combinaison avec KeyCDN Cache Enabler qui crée des fichiers HTML statiques et les stocke sur le serveur. Cela signifie qu'un fichier HTML statique seront fournis chaque fois que possible, pour fournir aux utilisateurs les données de réponse qui impliqueraient autrement le processus gourmand en ressources d'utilisation d'une base de données.

WebP

Afin d'afficher des images dans des formats de nouvelle génération, nous avons utilisé Optimus pour convertir des images en WebP. WordPress Cache Enabler analyse les images JPEG et PNG qui sont ensuite incluses dans le HTML mis en cache WebP fichier.

Animations

Tous les paramètres d'animation ont été soigneusement recréés à partir de nos études de mouvement. La création de ces animations dans After Effects nous donne l'avantage d'explorer des solutions et des interactions sans aucune forme de limitation technique. De cette façon, notre développeur comprend mieux comment structurer le HTML et les animations peuvent être implémentées dans un cohérent et efficace façon.

Pour les animations de texte, nous avons utilisé GSAP pour diviser le texte HTML en mots et en lignes afin que nous puissions facilement appliquer le animations décalées masquées. Pour les transitions de page, nous avons utilisé un Rect clip CSS pour masquer toutes les pages entrantes et sortantes.

Le défilement est construit avec un défilement virtuel qui améliore la fluidité du site Web et l'expérience globale.

SPA

En ce qui concerne le chargement de page et les transitions de page, nous avons utilisé Highway.js en combinaison avec un chargeur de composants. Lors de la définition de plusieurs moteurs de rendu, vues et itinéraires, nous contrôlons totalement l'animation que nous déclenchons et le composant à charger pour chaque page.

Ce qui se passe dans les coulisses d'un site Web est tout aussi important que l'apparence des choses sur le devant.

Optimisation

Nous croyons qu'un entièrement optimisé Le site Web est tout aussi important pour l'expérience utilisateur que l'esthétique. Nous passons beaucoup de temps à valider méticuleusement notre code, à optimiser nos actifs et à nous assurer que notre score Lighthouse est (presque) parfait sur chaque page, ce qui se traduit par une expérience Web de chargement fluide et rapide.

SEO

L'une des demandes d'Ali était grande trouvabilité dans les résultats de la recherche. Étant donné qu’Ali n’avait pas de site Web existant sur son domaine alitwotimes.com, c’était tout un défi de classer le site Web. En plus de cela, la plupart de ses contenus sont des vidéos sans beaucoup de texte à indexer par Google.

Pour commencer avec une base solide, nous avons pris en charge toutes les exigences techniques du référencement. Après la période de lancement, le classement s'est amélioré grâce à la promotion sur de nombreux blogs de conception et Web. Le trafic a augmenté et le site Web a réussi à revendiquer la première place en quelques semaines.

Outils

Développement

Conception

Autre

Information d'entreprise

Exo Ape est une agence axée sur le design qui crée des expériences immersives qui inspirent, affectent et apprécient un monde d'abord numérique. Nous jouons quelque part à l'intersection entre le design, la technologie et le mouvement. Notre truc est 100% fait à la main et sur mesure pour révolutionner les marques dans l'espace numérique.

Crédits

Robbert Schefman, directeur artistique numérique et design visuel
Ronald Gijezen, Motion & Design d'expérience utilisateur
Rob Smittenaar, développement frontal et créatif

Merci de vous être impliqué dans le processus de vote et d'avoir tweeté à ce sujet, @belaklubos vous avez gagné le plan Pro, DM nous sur Twitter pour obtenir votre prix! 🙂

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *