Catégories
Astuces et Design

2 ° C Earth by Jingqi Fan remporte le prix du site du mois de septembre 2020

Félicitations à Jingqi Fan pour avoir remporté le site du mois de septembre 2020 avec 2 ° C EARTH. Merci à tous ceux qui ont pris le temps de voter, retrouvez le gagnant du Plan Pro dans notre Design Directory à la fin de l'article.

Un travail d'amour qui a commencé au début de cette année dans le cadre de mon projet de premier cycle, 2 ° C Earth est un guide visuel qui explore cinq endroits à travers le monde dont le patrimoine naturel et culturel est menacé par le changement climatique. Créé pour être visuellement engageant, auditif immersif et facilement digestible pour un public désengagé de notre crise climatique, cette expérience interactive espère éduquer et inspirer plus de gens pour rejoindre le combat collectif pour notre avenir.

Le contexte

2020 a été une année de troubles, de catastrophes et – d'une pandémie continue. C'est l'année qui a non seulement défini mais aussi remis en question le concept et les objectifs de la Terre à 2 ° C. Lorsque je suis resté aux Fidji au début de cette année, le cyclone Sarai a ravagé ses îles. Mon temps là-bas s'est manifesté en un appel au réveil pour le changement climatique. Les fortes pluies, les crues soudaines et les vents destructeurs n'étaient pas seulement une fenêtre sur notre monde en mutation, mais aussi un ancrage émotionnel qui a formé la base de la Terre à 2 ° C.

2 ° C Terre
Avant et pendant le cyclone Sarai

Définition de projet

Fondation

La recherche a commencé par trouver des moyens convaincants d'aborder le sujet du changement climatique. En approfondissant mes recherches, j'ai trouvé un angle prometteur: le concept de degrés. J'ai été attiré par le fait que de petites augmentations de la température moyenne mondiale correspondent à des impacts environnementaux dévastateurs. Comme Dunne et Raby l'ont écrit dans Tout spéculatif, la conception critique doit «déstabiliser le présent plutôt que prédire l'avenir». Ce faisant, nous résidons dans l'espace entre le probable et le plausible. Pour ce projet, cela signifie un monde qui s'est réchauffé de 2 ° C au-dessus des niveaux préindustriels – un monde suffisamment chaud pour causer des conséquences graves et dans certains cas irréversibles mais récupérables si nous agissons maintenant.

… la conception critique doit «déstabiliser le présent plutôt que prédire l’avenir.

La torsion

En examinant le vaste sujet du changement climatique, il devient clair que ce phénomène mondial ne peut pas être considéré comme isolé de notre monde humain. Le voyage, à son tour, est devenu la tournure que je recherchais depuis le début. Le tourisme nous permet d'explorer des endroits incroyables partout dans le monde, fait encore des dégâts dans les endroits que nous visitons. À quoi ressembleraient certaines des plus belles destinations si la Terre se réchauffait de 2 ° C? Et si les gens pouvaient voyager virtuellement dans ces lieux et s'immerger dans ses paysages et son ambiance?

Terre 2 ° C
Gordon MacDonald dans le numéro du 8 octobre 1979 du magazine People.

Explorations visuelles

Tout au long du processus d'exploration des directions possibles, j'ai essayé de me donner beaucoup d'espace pour ruminer des idées et pousser le projet plus loin contre les limites de ce que son concept pouvait contenir.

Recherche

J'ai été attirée par le thème de la nostalgie, de la richesse des palettes de couleurs et de la notion de liberté que nous associons souvent aux voyages.

Terre 2 ° C
Sélectionnez les visuels rassemblés à partir de mon moodboard.

Directions potentielles

Au cours des premières phases de ce projet, j'étais assez accroché à quelques idées:

  • Une carte déplaçable dans laquelle les utilisateurs peuvent choisir différents endroits pour se rendre.
  • Les particules de dioxyde de carbone se superposent à l'expérience avec les particules de plus en plus denses à mesure que les utilisateurs se déplacent vers plus d'endroits.
  • Une fenêtre contextuelle ou une alerte de notification informant les utilisateurs de la météo, de l'empreinte carbone et d'autres informations liées à l'emplacement.
  • Page d'accueil quadrillée classique avec des images découpées en différentes formes, comme des cadres photo sur un mur.

Certaines des premières conceptions de mon fichier XD.

Plus tard dans le processus, il est devenu clair que les concepts élaborés de la page d'accueil dominaient le contenu principal de l'expérience – les destinations. Alors, j'ai changé ma concentration. La page d'accueil, à son tour, s'est retirée tandis que les pages de destination ont reçu leur coup de projecteur bien mérité.

Quelques designs plus raffinés de mon fichier Figma.

Développement du contenu

Contenu visuel

Pour créer une expérience immersive et attrayante pour le visiteur, les images sont choisies pour leur représentation idéalisée du caractère et de l'ambiance de chaque lieu.

2 ° C Terre
Photographies de la page de Wadi Rum et de la région florale du Cap.

Contenu écrit

Copy utilise un ton de voix qui rappelle les écrits des guides de voyage. Patrimoine mondial et tourisme dans un climat en évolution, publié par le PNUE, l'UNESCO et l'Union of Concerned Scientists, est devenu la principale référence pour ce projet. J'ai souvent fait référence au rapport pour choisir les destinations sur lesquelles me concentrer. Les données spécifiques à l'emplacement ont été obtenues à partir de sources crédibles, c'est-à-dire de revues et de bases de données scientifiques évaluées par des pairs (grâce à mon accès à la vaste bibliothèque de mon université).

Terre 2c
La section Expérience de chaque destination propose aux visiteurs une lecture courte et longue.

Construire l'expérience

L'état bascule

Une fois que j'ai eu un langage visuel et un système de contenu qui commençaient à prendre forme, les différentes pages clés à construire étaient claires. Parmi eux, la page de destination était la plus excitante mais aussi la plus stimulante. J'ai commencé par créer un composant de vue de destination avec une vue présente et future empilée l'une sur l'autre. Le basculement révélerait et masquerait la vue actuelle en animant sa propriété de chemin de clip CSS. Math.min () et Math.max () sont utilisés pour délimiter l'inclinaison de la forme découpée ainsi que pour obtenir l'effet d'angle de décalage lorsque les utilisateurs déplacent leur curseur sur la page.

Terre 2c
Basculer entre les états actuels et futurs sur la page du Wadi Rum.

Geste de basculement sur la page Région florale du Cap.

Synchroniser le parchemin

La page de destination est essentiellement composée de deux pages en une. Dans un monde idéal, les deux conteneurs défilants se déplaceraient ensemble. Je me suis rendu compte que c’était une solution impossible à mettre en œuvre; le navigateur renoncerait simplement à essayer et les ventilateurs de mon ordinateur portable deviendraient incontrôlables. Eh bien, que se passe-t-il si je synchronise les positions de défilement à droite lorsque les utilisateurs sont sur le point de voir l'autre vue afin de ne pas gaspiller d'énergie inutile? Je pourrais également masquer la vue qui n'est pas visible par l'utilisateur avec visibilité: masqué. Et voilà, la fréquence d'images a recommencé à osciller autour de 60 ips.

Terre 2c
Statistiques Fps dans Chrome dev. outils avant et après correction.

Du son

2 ° C La Terre est introduite à travers une voix douce mais captivante qui évoque la sensation de la Terre Mère. Ensuite, pour me concentrer sur l'aspect immersif de ce projet, j'ai ajouté des sons ambiants tout au long de l'expérience – mis en boucle. Des effets sonores spécifiques à l'emplacement ont été ajoutés à chaque destination et déclenchés lors du défilement pour synchroniser le parcours audiovisuel de l'utilisateur.

Expérience d'introduction.

Mouvement

Une fois le mécanisme de bascule en place, j'ai pu créer d'autres destinations assez rapidement en alimentant les paramètres et les paramètres à partir d'un fichier JSON. Avec les mises en page prêtes à l'emploi, j'avais besoin de créer une histoire de mouvement cohérente tout au long de l'expérience. Chemin du clip et débordement caché; révéler les animations fait écho stylistiquement au mouvement de bascule dans les pages de destination, tandis que l'opacité simple s'estompe pour adoucir les bords nets dans le reste de l'expérience.

La transition de la page d'accueil aux pages de destination fonctionne comme une fenêtre en expansion qui transporte les visiteurs vers ces emplacements.

Page de Wadi Rum.

Prendre la page d'action.

Géolocalisation

La seule pièce manquante dans l'expérience est un appel à l'action. Que pourrait être un plat à emporter pour les visiteurs après avoir voyagé vers différentes destinations et découvert son sort? J'ai décidé d'ajouter un élément d'impact personnel au bas de chaque page de destination qui effectue des comparaisons liées aux émissions en détectant l'emplacement de l'utilisateur – une façon légèrement effrayante mais personnelle pour les visiteurs de réaliser leur impact potentiel sur notre environnement.

Composant d'impact personnel affiché sur un ordinateur portable dans une forêt calme.

Les technologies

Nuxt est l'épine dorsale de cette expérience interactive. Les animations ont été créées avec GSAP, le défilement fluide et la parallaxe sont effectués avec Locomotive Scroll et le son contrôlé avec Howler.

Outils

Au départ, j'ai conçu en XD, puis je suis passé à Figma pour le reste de mes efforts de prototypage. Photoshop, Illustrator, Premiere Pro, After Effects et Audition sont utilisés pour concevoir et éditer le visuel, le mouvement et le son de l'expérience. Visual Studio Code est mon éditeur de code de choix. pyftsubset, ImageMagick et audiosprite étaient les outils de ligne de commande que j'utilisais pour optimiser efficacement les ressources pour la production.

Crédits

Jingqi Fan est un concepteur graphique et interactif qui crée des expériences significatives dans des contextes imprimés et numériques. Elle aime aussi le codage.

Merci de vous être impliqué dans le processus de vote et d'avoir tweeté à ce sujet, @glenncatteeuw 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 *