Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Couleurs d’album a commencé en 2015 lorsque nous avons découvert que la plupart des albums de notre bibliothèque étaient en noir et blanc. Était-ce la tendance de 2015? Non seulement cela, nous sommes tous des designers qui aiment les œuvres d’art. La question sur cette tendance était réelle, ainsi que notre passion pour elle, ce sont les choses qui nous ont motivés à créer la première version: Album couleurs de l’année 2015. Le site Web, publié au début de 2016, a reçu 10 000 visites au cours de la première semaine.


Album couleurs de l'année 2015.
Album couleurs de l’année 2015.

Avance rapide de 6 ans et nous y sommes. 2020 n’a pas été la meilleure année pour tant de gens pour tant de raisons, mais la musique était toujours là. La musique nous a éloignés de tout ce qui se passait dans le monde extérieur. La musique a créé des moments où nous pouvions respirer un peu. Nous avons donc décidé de rendre au monde un petit morceau de bonheur coloré – car qui n’aime pas la musique?

Cette fois, c’était un peu différent et Dieu merci, Figma existe. Chacun de nous travaillait depuis un endroit différent. José Gasparian à San Francisco, Marcos Rodriguez à São Paulo et Edgard Kozlowski à Rio de Janeiro. Nous voulions garder le même concept de la version 2015: 150 albums de l’année sélectionnés et soigneusement sélectionnés.

Le processus

Depuis le début du projet en 2015, nous pensions que la curation serait l’aspect principal. Nous avons choisi tout ce que nous avons entendu toute l’année. Des EP aux LP, nous avons rassemblé plus de 200 pochettes d’albums. La prochaine étape serait d’organiser les couleurs. Nous avons appliqué la même règle que nous avions pour la version 2015: passer du rose au violet et utiliser le violet comme ancre pour commencer le noir, puis au blanc.

(…) passer du rose au violet et utiliser le violet comme ancre pour commencer le noir, puis passer au blanc.

Une chose que nous avons essayée auparavant et qui n’a pas fonctionné était d’utiliser des algorithmes de couleur pour lire la couverture de l’album et en fournir deux couleurs principales. Si nous nous sommes organisés en fonction de l’algorithme, cela ne fonctionnait pas correctement, par exemple: une œuvre d’art peut avoir plus de bleu que de rouge, mais elle ressortira mieux des albums rouges. Conclusion: L’œil humain a gagné cette fois.

Oui, nous avons décidé d’organiser tous les albums manuellement. Cela a été un long processus, mais les résultats en valent la peine. Nous les avons divisés en 12 couleurs différentes dont le rose, le rouge, l’orange, le beige, le jaune, le vert, le bleu, le violet, le noir, le gris, le blanc et le spécial: les arcs-en-ciel car il y a des œuvres d’art qui n’ont pas de couleur principale.


12 couleurs.  Organisez chaque album manuellement.
12 couleurs. Organisez chaque album manuellement.

La conception

Pendant que nous sélectionnions et organisions, nous travaillions également de côté. La direction de conception de cette version était plus éditoriale, avec une grille modulaire bien établie qui se concentre sur les informations de l’album. Nous ne voulions pas de limbes cette fois-ci et les seules interactions que nous voulions étaient la possibilité de passer des couvertures aux couleurs, de copier l’hexagone et de cliquer sur l’album qui pointe vers le lien Spotify.

Avant de commencer le projet, nous avions quelques objectifs: créer la page, un compte Instagram et une liste de lecture qui s’adapterait à la page. Afin d’obtenir la même identité visuelle pour tous, nous avons créé une grille modulaire qui prend en compte certains aspects de notre logo.

Nous ne voulions pas perdre le concept derrière le logo que nous avons créé en 2015 car c’est la forme la plus simple d’un CD. Et nous voulions vraiment créer une grille modulaire qui inclurait 3 pochettes d’album par rangée, mais aussi en mettre en évidence une grande. L’identité visuelle a donc vraiment poussé les formes les plus simples du CD, à savoir un carré et le cercle au milieu.

Procédé de design.

Nous avons sélectionné 10 œuvres d’art qui détermineront les couleurs sur toute la page. Nous voulions vraiment que les couleurs 2020 établissent l’identité plutôt que la fournissent. Et nous avons eu l’idée de rafraîchir la page et d’apporter une nouvelle couleur / expérience à chaque fois que vous y accédez.


Les héros d'Album Colors.
Les héros d’Album Colors.

Nous avons utilisé une grille 3×3 afin d’avoir plus de contrôle et de mettre en évidence certaines illustrations au fur et à mesure que l’utilisateur fait défiler, par rapport à la grille réactive que nous avons créée pour la version 2015 de 5×5 à 3×3 et 1×1 sur mobile. Et puisque nous voulions créer un compte Instagram pour les couleurs de l’album cette fois, la grille 3×3 correspondait au profil Instagram.

L’effet de défilement était une autre chose dont nous voulions garder l’essence, comme nous l’avons fait en 2015. Si vous faites défiler très rapidement, vous pouvez voir l’effet arc-en-ciel créé par les pochettes d’album. C’est merveilleux.

La production

Nous avons créé une feuille Google dans laquelle nous pouvons insérer le titre de l’album, le nom de l’artiste, le code hexadécimal, la couleur principale et le lien Spotify. Ainsi, tout ce qui est lié au site Web correspondra à la page, quel que soit l’ordre que nous avons choisi sur la feuille.


Titre de l'album, nom de l'artiste, code hexadécimal, couleur principale et lien Spotify.
Titre de l’album, nom de l’artiste, code hexadécimal, couleur principale et lien Spotify.

La création de cette feuille a beaucoup aidé, en particulier pendant la phase de contrôle qualité, car tout le monde dans l’équipe pouvait apporter des corrections telles que des erreurs de frappe ou des liens incorrects en cours de route et celles-ci s’appliqueraient immédiatement à la page. Cela dit, le développeur n’était pas le seul responsable de modifier les informations de l’album.

Le social

Cette fois-ci, nous avons décidé de créer un compte Instagram qui viendrait compléter l’expérience du site. Nous voulions vraiment que les gens partagent leurs pochettes d’albums préférées, et Instagram était le support idéal pour cela.

Bien que nous ayons trié les couvertures par couleur, nous avons également utilisé le ratio de portrait Instagram que nous utiliserions pour l’afficher sous forme de «carte» avec le nom de l’artiste et le titre de l’album en haut et le code hexadécimal en bas. Sur notre profil Instagram, la carte est recadrée exactement au rapport carré de la couverture de l’album et une fois que vous cliquez dessus, les informations s’affichent. Il y avait ce bel élément de surprise pour les gens qui seraient curieux de cliquer dessus.


L'Instagram
Les « cartes » d’Instagram.

Il était bon de choisir non seulement la couleur saillante, mais également la couleur secondaire qui apparaîtrait sur le texte. Nous avons testé l’inverse – le texte est la couleur dominante et l’arrière-plan est la couleur secondaire – mais cela n’a pas fonctionné comme prévu car il y avait tellement de contraste et nous voulions vraiment que tout le monde puisse dire très rapidement de quelle couleur il s’agissait. le plus important.


@album_colors
@album_colors

La playlist

Les couleurs de l’album ne vivraient pas sans une liste de lecture. Nous avons dû nous rappeler que nous voulions mettre en valeur non seulement les œuvres d’art mais aussi la musique qu’elles contiennent. Pour ajouter à l’expérience, nous avons créé une liste de lecture avec une chanson de chaque album en suivant le même ordre que la page intitulée La même sensation d’effet de défilement lorsque vous faites défiler la liste de lecture.


Couvertures Spotify et Apple Music.
Couvertures Spotify et Apple Music.

Cela nous a également permis de créer notre propre pochette d’album pour Spotify et Apple Music et de découvrir rapidement toutes les chansons / albums disponibles sur notre site. Nous voulions vraiment que les gens profitent de l’expérience: écouter les illustrations et regarder les chansons.

(…) écouter les œuvres d’art et regarder les chansons.

La version

Nous avons décidé de commencer un vendredi car de nouveaux albums sortiront ce jour-là et nous avons également fait une vidéo à ce sujet. Tout d’abord, nous avons créé un storyboard pour identifier les principaux points que nous voulions présenter dans la vidéo: le branding, les interactions des couleurs changeantes, la copie de l’hexagone, les cartes réalisées pour Instagram et les différents héros du site pour montrer la diversité des couleurs.


Le storyboard.
Le storyboard.

Deuxièmement, nous avons choisi une chanson qui est sortie en 2020 et qui a également été sélectionnée sur le site Web: « Affection » de Dreams Are Made To de l’EP « Hungry ». La chanson correspondait parfaitement au storyboard et le mouvement a été complètement créé par Principle avec une post-production sur Adobe Premiere.

Album couleurs de l’année 2020 a remporté le site Awwwards du jour et a enregistré 36 000 pages vues depuis son lancement. Le plus amusant est de voir des gens du monde entier partager notre site Web sur Twitter et Instagram.

Les technologies

En ce qui concerne le développement du projet, il a été déterminé que le plus gros problème serait la performance. Le site est un site simple mais compte 150 pochettes d’albums et nous voulions qu’il soit de bonne qualité mais pas non plus pour rendre le projet difficile.

Pour résoudre ce problème, nous avons utilisé l’observateur de l’API Intersection pour charger les images uniquement lorsqu’elles défilaient, et nous avons également opté pour le format .webp pour permettre plus de compression des images sans pour autant obtenir une perte de qualité.

L’utilisation d’Intersection Observer dans le projet a non seulement résolu les problèmes liés aux performances, mais a également eu un effet intéressant sur le scroll. L’utilisateur voit d’abord la couleur de l’album, puis la couverture s’affiche.

Défilement du site.

Un autre défi consistait à créer un environnement dans lequel le contenu était facile à gérer et les informations sur le site Web pouvaient être entièrement modifiées. Comme mentionné précédemment, nous utilisons Google Sheets comme éditeur de contenu. Pour que cela fonctionne, nous avons utilisé un package NPM appelé drive-db qui facilite l’utilisation de Google Sheets comme base de données.

De plus, nous avons utilisé React, Styled Components et d’autres choses intéressantes comme CSS Grid pour créer l’interface utilisateur, ce qui a rendu le projet beaucoup plus facile à développer.

Une autre bibliothèque intéressante était le Parchemin de Locomotive qui était capable de rendre le défilement plus fluide et d’implémenter la parallaxe dans certains éléments de manière très simple.

Puisqu’il s’agit d’un site Web statique, nous utilisons Netlify pour héberger notre site Web. L’utilisation d’un outil de livraison continue était également très importante car tous les participants au projet avaient une idée très claire du stade de développement du projet.

Rencontrer l’équipe:

José Gasparian est un designer et photographe brésilien basé à San Francisco, en Californie. Il a précédemment travaillé chez Huge (Rio de Janeiro et São Paulo) et Globo.com (Rio de Janeiro) et travaille actuellement chez Elephant. Soutenir les marques dans la création de produits numériques dans divers domaines tels que Apple, Twitch, KitchenAid, Itaú, Estadão et bien d’autres. Passionné par la relation entre le design et la musique, il a lancé d’innombrables projets personnels, et Album Colors est né de cette passion.

Marcos Rodrigues est un designer numérique brésilien basé à São Paulo, au Brésil. Il travaille actuellement chez Work & Co. Avec près de 10 ans d’expérience, il s’est développé avec des clients tels que Havaianas, Coca-Cola, T-Mobile, Itaú, GOL et de nombreuses autres marques et produits axés sur les médias numériques. Il est également militant pour les droits des Noirs au Brésil en tant que membre de l’équipe du Coletivo Negro Minervino de Oliveira (@ minervino.sp), végétarien et mélomane.

Edgard Kozlowski est un designer basé à Rio de Janeiro qui travaille actuellement chez Work & Co. Au cours de sa carrière, il a eu l’opportunité de travailler sur des projets pour MailChimp, T-Mobile, Vistaprint, Descomplica et Itaú. Edgard aime travailler sur des projets parallèles pendant son temps libre, principalement pour développer ses compétences en codage et s’amuser.



Source link

Recent Posts