Le secret de la conception de sites Web créatifs

(Aline Kesting) (2 septembre 2020)

La conception de sites Web comporte de nombreux éléments, mais il y a une chose que nous croyons extrêmement importante en matière de sites créatifs: une étroite collaboration entre les concepteurs et les développeurs.

Après le lancement dun tout nouveau 14islands.com il y a quelques semaines, on nous a demandé comment nous avions créé les animations de survol ondulé. Alors que la magie du code derrière ces interactions apparaîtra dans un prochain article de blog (restez à lécoute!), Je veux me concentrer sur la façon dont nous avons réellement conçu ces animations. Vous pourriez être surpris.

Mettez votre processus à lenvers

Lors du démarrage dun nouveau projet, il est facile de tomber dans un type de processus en cascade. Vous passez de la recherche utilisateur à la conception et vous obtenez des prototypes cliquables. Vous avez des points de contrôle déquipe en cours de route, mais la collaboration de conception et de développement ne démarre généralement pas tant que les prototypes ne sont pas déjà réalisés. Bien que ce processus fonctionne pour certains types de projets, en particulier ceux avec plus de stratégie, il est loin dêtre le plus créatif.

Lorsque nous avons commencé notre nouveau processus de conception de site Web, nous avons décidé de laborder de la même manière ( nous approchons de nos vendredis créatifs), dans lesquels les expériences sinspirent souvent de nouvelles technologies passionnantes. Cela signifie que les développeurs créatifs peuvent être ceux qui ont une idée et que les concepteurs se joignent à eux pour aider à construire un concept autour de celle-ci. De cette façon, nous concevons et codons ensemble, depuis le début, à plein temps, tout le temps. 🚀

Concevoir des concepts de mouvement dans le code

Lavantage de ce processus de conception partagé est assez simple. Souvent, nous, les concepteurs, imaginons une conception au pixel près et laissons les développeurs trouver la meilleure façon dimiter cette conception avec du code. Mais surtout en ce qui concerne les sites Web créatifs, ce que nous imaginons peut ne pas toujours être réalisable, ne pas se ressembler ou simplement se transformer en une expérience lourde de performances. Donc, après avoir passé pas mal de temps à peaufiner vos conceptions minimalistes, vous manquez de temps et choisissez la solution qui fonctionne le mieux.

Si seulement nous pouvions comprendre toutes les opportunités de WebGL, Three.js et CSS au lieu de voir leurs limites, nous pourrions repousser les limites et faire évoluer nos concepts de conception en fonction de la technologie. Lorsque les développeurs créatifs font partie du processus de conception, cest exactement ce qui se passe. Ils remettent en question nos façons de penser et apportent des solutions uniques auxquelles nous naurions jamais pensé par nous-mêmes. Et faire correspondre ces connaissances à un concept fort mène à la magie. ✨

En ce qui concerne notre site Web, nous avons passé des semaines à explorer, à mettre au rebut des idées et à partir de zéro. Au fil du temps, nous avons défini ensemble où nous voulions aller et avons abouti à une interaction qui nous plaisait. Une fois que nous avons eu un concept de mouvement, tout le reste sest mis en place.

Voici quelques-unes de nos premières explorations:

Explorations de mouvement dans le code

Comment nous lavons fait

Pas de surprise, notre concept de mouvement final a été inspiré par les îles. Ce qui définit une île, cest le paysage en constante évolution de leau qui façonne la terre. Quand on y pense, un site Web nest pas façonné par leau, mais il réagit constamment aux défilements, clics, survols et autres mauvais traitements.

Nous avons exploré lidée de la distorsion de leau pour chaque interaction de lutilisateur, mais nous lavons voulu pour rester très minimaliste, sans effets inutiles qui volent lattention du contenu réel.

Le concept de mouvement va comme ceci: Regardez le site, et vous obtenez le calme des îles tropicales avec une eau cristalline. Mais commencez à faire défiler et à interagir – cest là que les vagues entrent en jeu. 🌊.

Mouvement final du site Web sur 14islands.com

En tant que concepteur, je navais aucune idée quil était possible dobtenir un tel morphing fluide des bords des vignettes, alors comment pourrais-je trouver ce concept de design? Nous avons commencé le processus ensemble, travaillé ensemble vers un concept et collaboré chaque jour jusquau lancement. Et faisant partie de lensemble du processus, notre équipe de développement a joué un rôle crucial dans la conception de lexpérience finale.

Bien sûr, la conception en code ne signifie pas que vous devez arrêter tout type de motion design pendant votre processus. Il existe des outils de prototypage fantastiques tels que Figma et Flinto et ils sont parfaits pour tester les flux et les micro-interactions. En matière de créativité pure, After Effects fonctionne le mieux pour nous car il donne beaucoup de liberté.Même si vous nêtes pas un expert en mouvement, il est utile de laisser un peu votre fichier de conception et dexplorer des idées de haut niveau en mouvement. Vous obtiendrez des résultats plus tangibles à rejeter ou à avancer, et vous donnerez à votre équipe de développement une base sur laquelle commencer à itérer.

Tout ce que les concepteurs peuvent apprendre de la technologie

Voilà : Impliquez un développeur créatif à plein temps pendant le processus de conception. Mettez-vous au défi, explorez le mouvement en parallèle et poussez les interactions plus loin jusquà ce que vous arriviez à votre concept de mouvement. Une fois que cela est en place, concentrez-vous sur la conception détaillée de votre site Web. Le concept inspirera non seulement un grand nombre de vos décisions de conception à venir, mais aidera également à construire lexpérience de manière plus cohérente en répétant le mouvement.

Chez 14islands, nous avons la chance davoir une équipe très serrée de concepteurs et de développeurs travaillant ensemble chaque jour et améliorons constamment nos façons de collaborer. Jusquà présent, cela a porté ses fruits et a apporté beaucoup de créativité dans notre processus de conception. Rester curieux de savoir comment les choses sont construites et se remettre en question à la fois dans la conception et le code nous aide à créer des expériences utilisateur fonctionnelles et minimalistes, mais qui ont également ce petit plus de personnalité.

Jespère que cette lecture a été utile, faites-nous savoir si vous avez des questions ou des suggestions. Jusquà la prochaine fois ✌️