Conseils pour améliorer le transfert de la conception de votre site Web

Dans le processus de création d'un site Web, il y a quelques étapes qui ont lieu. Si nous devions le simplifier et regarder un site Web standard, les étapes seraient:

1. Le besoin - Quelqu'un a besoin d'un site Web pour une raison ou une autre.
2. Brainstorming - Décider de la structure générale, des objectifs et plus encore.
3. La proposition - Le client trouve un pigiste ou une agence pour faire construire le site.
4. Contenu - Articles, images, etc., tout ce qui peut être trouvé sur les pages de destination, les plans de site, etc.
5. Conception - Une personne / équipe travaille sur la conception et la mise en page en fonction du contenu.
6. Développement - Une personne / équipe développe la partie fonctionnelle du site en fonction de la conception.

La plupart du temps, vous pouvez le mélanger ici. Vous pouvez changer l'ordre des choses qui sont faites et l'équipe peut toujours produire d'excellents résultats. Cependant, cela peut être difficile lorsque des personnes de différentes agences travaillent sur le même projet, ce qui est la principale raison d'opter pour une agence polyvalente qui peut s'occuper de tout.

Pour cet article, nous passons de l'étape 5, la conception à l'étape 6, le développement. C'est là que les choses peuvent mal tourner en ralentissant le développement et en gâchant ce qui a été précédemment décidé dans le processus de planification.

Les choses qu'un concepteur devrait considérer

«Les concepteurs doivent-ils savoir coder?» est une question courante et très raisonnable. Si un concepteur comprend le code derrière et, idéalement, il peut le produire (dans une certaine mesure), alors il / elle peut aider toute l'équipe dans son effort pour terminer le projet plus rapidement.

Voici quelques raisons pour lesquelles c'est le cas:

1 - Au final, tout se termine dans le navigateur.

Tous les designs que vous créez dans Figma, Adobe, etc. apparaîtront dans le navigateur. Tous les navigateurs utilisent un type de langage de programmation appelé HTML / CSS pour rendre une page. Si Javascript est utilisé, vous pouvez rendre vos créations interactives.

La remarque importante à retenir est que toute conception doit être faisable en HTML / CSS. De nombreux développeurs frontaux talentueux peuvent implémenter presque tout tant que la technologie le permet. Mais rappelez-vous, - il ne s'agit pas toujours de «pouvez-vous le faire?», Mais de «pouvez-vous bien le faire et le rendre maintenable».

2 - Cohérence

Être maintenable est le secret d'un projet réussi. Vous ne voulez pas passer des heures et des heures à peaufiner des éléments de site existants et à en ajouter de nouveaux, car la base de code est en désordre. Parfois, des conceptions extrêmement complexes avec peu ou pas de composants réutilisables se retrouvent dans le désordre.

Quelques conseils de concepteur Web:

• Concevez avec les composants à l'esprit. La plupart des outils proposent désormais cette fonctionnalité (Figma, Adobe XD, Sketch). Forcez-vous à les utiliser plus souvent jusqu'à ce que cela ne devienne plus ennuyeux de le faire.
• Alignez bien les éléments. Les sections similaires doivent avoir la même distance entre elles. 80px est une bonne séparation à maintenir, par exemple. N'espacez pas au hasard les sections en utilisant 80 ici, 86 là, 92 sur un troisième et 78 sur l'autre. Gardez-le bien rangé.
• Utilisez une grille! Tous les outils fournissent un système de grille. Idéalement, optez pour une grille de 12 colonnes.
• Présentez votre design sur des écrans larges (1920 px ou plus). Cela aide les développeurs à comprendre comment chaque section et leurs arrière-plans fonctionnent.

3 - Poids du site

Nous voulons tous un site Web rapide, non? Eh bien, le designer en fait également partie. Considérez ceci: Un site Web avec 8 immenses images haute résolution, quatre vidéos et des éléments animés. . Bonne chance pour optimiser cela à temps. Bien que cela soit faisable, il faudra du temps et des techniques de développement supplémentaires pour charger les images et les vidéos paresseux, optimiser les médias lors du téléchargement, prendre en charge de meilleurs formats de fichiers image et ajouter des approches d'animation intelligentes pour des performances élevées.

Si les développeurs ne sont pas très expérimentés ou ne s'inquiètent pas de la vitesse, votre site Web pourrait se retrouver extrêmement lent sur les smartphones et les ordinateurs portables de bas à moyen niveau.

Comment aider les développeurs?

En tant que concepteur, l'un de vos objectifs à garder à l'esprit est de rendre le développement plus facile et plus rapide tout en conservant l'aspect et la convivialité du site.

Vous devriez considérer ce qui est facilement faisable sur le Web.

• Boîtes - Ce sont toutes des boîtes. Vous pouvez arrondir certains coins, oui, vous pouvez faire des ellipses (qui sont définies dans une boîte) et plus encore. Cependant, lorsque vous utilisez des formes plus complexes qui interagissent avec la mise en page, les choses deviennent difficiles.
• L'animation d'une position précise est difficile - Imaginez que vous vouliez cliquer sur une image, puis la déplacer de l'autre côté du texte? Cela semble «facile», mais ce n'est pas le cas. La position vers laquelle l'image se déplacera doit rester relative au conteneur du site, qui change en fonction de la fenêtre et plus encore. Et puis que se passe-t-il si l'image est plus grande?
• L'animation des dimensions de la boîte affecte la mise en page. Cela fait référence à toute modification de la façon dont les éléments sont ordonnés pendant une animation. Cela peut être extrêmement lourd pour le navigateur et entraînera souvent un énorme décalage.

Considérez un contenu différent!

À quoi ressemblerait le design avec 2x le texte? Ou comme image de portrait au lieu d'une image de paysage? Vous ne savez jamais ce que l'équipe éditoriale téléchargera. Devrait-il y avoir des contraintes comme le rapport hauteur / largeur ou même les bords des images? Si vous le pouvez, présentez-le dans la conception.

Fournissez vos conceptions dans des outils comme Zeplin

La plupart des outils de conception comme Figma ou Adobe XD permettent de «partager» les conceptions avec les développeurs. À partir de là, l'équipe frontale peut inspecter les couleurs, les paramètres de typographie, les espacements et d'autres propriétés visuelles des calques, ce qui leur permettrait de coller très étroitement aux conceptions.

Fournir d'autres éléments tels que des polices ou des vidéos

Si vous avez utilisé une police spécifique sur le site, fournissez-la aux développeurs. S'il est sous licence et accessible via des URL spécifiques, assurez-vous de le partager également. Il est important pour un développeur de travailler avec les bonnes polices dès le premier jour. S'il y a des vidéos, assurez-vous de les partager aussi! Les vidéos seraient-elles sur YouTube, Vimeo ou auto-hébergées?

N'optez pas pour le "pixel parfait"

Cette notion de garder le look final du site parfaitement identique à la conception est un moyen facile de faire en sorte que votre équipe de développeurs vous déteste et peut détruire toute chance de mise en ligne à temps. Dans presque tous les cas, le design ne sera PAS parfait. Il est impossible d'être sûr à 100% qu'avant chaque bouton, vous avez exactement un espacement de 18 pixels? Et pas 19px? Ou que chaque titre est 38px et non 37px? Ou peut-être que chaque bordure est #ddd et qu'il n'y en a pas une qui soit noire mais qui a une opacité de 15%?

Les développeurs arrondissent ici et là de petites erreurs comme celles-ci pour maintenir la cohérence sur le site. Ils intègrent des composants qui suivent les mêmes règles. Tant qu'il n'y a pas de changement manifestement intentionnel dans un cas particulier, il ne devrait pas y avoir de raison pour laquelle un élément ne peut pas être le même dans tous les domaines.

En fin de compte, le site Web codé doit suivre l'aspect général de la conception.

Laisser des commentaires dans la conception

Si vous voulez qu'un certain élément soit interactif, comme des onglets, des accordéons, des curseurs, etc., prenez quelques secondes pour noter comment il devrait fonctionner sur un ordinateur de bureau, un mobile et ce qui est cliquable, devrait-on échanger.

Pensez comme un utilisateur

Lorsque vous avez terminé, arrêtez-vous une seconde et imaginez que vous utilisez le site. Lisez de haut en bas, faites défiler vers le bas, cliquez quelque part pour en voir plus. Y a-t-il quelque chose qui pourrait manquer dans le flux de travail? Y a-t-il une vue d'un certain élément qui change sur l'interaction de l'utilisateur? Si cela est vrai et qu'il n'y a pas de conception, alors vous laissez vos développeurs le faire, ce qui ajoute du stress au travail. Si les délais sont serrés, vous pouvez partager les fichiers généraux avec votre équipe et leur faire savoir qu'un quelques vues «d'état» sont à venir (assurez-vous de mentionner lesquelles).

Vues réactives

Il est décourageant de concevoir 15 pages sur le bureau, puis de créer une version mobile. C'est encore plus ennuyeux de faire une version de tablette légèrement différente en plus de cela. C'est pourquoi certains concepteurs ignorent l'ajout. Cependant, cela signifie que les développeurs devront le faire dans le code. Et prendre des décisions à cause de cela. Si vous voyez des éléments compliqués, présentez idéalement leurs vues de tablette, même si vous ne faites pas tout le site.

En résumé

Le concepteur peut faire de la vie du développeur un cauchemar ou une très bonne expérience. La clé pour atteindre ce dernier est de mieux comprendre la technologie utilisée, HTMl / CSS, quels éléments interactifs sont réalisables, etc.

Si vous avez la chance d'être entouré de développeurs et que certains éléments vous inquiètent, appelez-les pour tout voir. Ils vous donneront certainement des indications sur ce qui est délicat et ce qui est facile.