10 astuces pour perfectionner vos compétences Webflow

1. Utilisez les raccourcis Webflow

Apprendre les raccourcis est la première étape et la plus importante pour devenir un meilleur développeur Webflow. Travailler plus rapidement et plus efficacement vous permettra d'être plus précis avec les projets que vous entreprenez et de fournir un service de qualité. Utiliser des raccourcis peut vous faire économiser jusqu'à 8 jours de travail complets par an.

Les raccourcis clavier généraux vous aideront à naviguer plus facilement. Quelques exemples sont :

• Afficher la feuille de triche des raccourcis : Maj + /
• Désélectionner un élément ou quitter : Échap
• Supprimer un élément : Suppr

Les raccourcis de vue vous aideront à basculer plus rapidement entre le mode aperçu et le mode concepteur. Quelques exemples sont :

• Mode aperçu : Maj + Commande + P
• Superposition des guides : Maj + Commande + G
• Montrer les bords des éléments : Maj + Commande + E

Pour en savoir plus sur les raccourcis Webflow, suivez ce lien et apprenez tous les raccourcis essentiels de Webflow pour accélérer votre flux de travail.

2. Ajoutez un texte convaincant

Pour une expérience utilisateur supérieure, le texte et le design doivent travailler main dans la main. Un excellent design web devrait avoir un texte convaincant qui ajoute de la valeur au parcours client. De nombreuses entreprises de marketing respectées comme Hubspot suggèrent que la construction d'un site web devrait commencer par le texte. L'idée est que le texte doit dicter le design et non l'inverse.

Ainsi, collaborer avec votre département marketing dans les phases initiales de construction du site jouera un rôle crucial dans le succès du site. Obtenez un texte, construisez un wireframe et seulement ensuite construisez dans Webflow.

Suivre le principe du texte d'abord, du design ensuite aidera également à améliorer la structure de votre site pour le SEO. Le texte déterminera la hiérarchie des titres et établira les mots-clés et les informations méta appropriés.

Lorsque vous construisez un site web, utilisez toujours une approche centrée sur l'utilisateur. Assurez-vous de savoir pour qui vous construisez votre site et comment communiquer avec votre public cible. Votre public appréciera-t-il des couleurs et une communication ludiques, ou devriez-vous adopter une approche plus classique et formelle ?

Posez-vous les questions suivantes :

• Qui sont mes utilisateurs et pourquoi sont-ils ici ?
• Cela résonnera-t-il avec l'utilisateur ?
• Cela les maintient-il engagés et les aide-t-il à atteindre leur objectif plus rapidement ?
• Est-ce que cela a du sens ?

3. Améliorez le pied de page de votre site

Une section qui ne reçoit pas suffisamment de reconnaissance est le pied de page d'un site web. Le pied de page représente un ensemble d'éléments trouvés en bas d'une page web. L'objectif d'un pied de page est d'aider les utilisateurs à effectuer l'action souhaitée et de les maintenir engagés sur le site.

Le pied de page peut jouer comme une extension importante de la navigation principale. Son rôle peut agir comme un filet de sécurité pour les visiteurs du site perdus et les aider à naviguer à travers le site comme une feuille de route solide. Un pied de page bien structuré peut même vous aider à mieux vous classer sur Google et rendre votre site plus découvrable sur le web.

Comme vous pouvez le voir, le pied de page est une section importante de votre site. Mais encore, ne le surchargez pas et gardez-le minimaliste. Un pied de page rempli de contenu excessif est une mauvaise expérience utilisateur. Évitez donc de trop remplir de liens inutiles et de pages non pertinentes.

Une bonne pratique à suivre lors de la construction d'un pied de page est d'inclure :

• La politique de confidentialité est obligatoire par la loi pour tous ceux qui collectent des données personnelles des utilisateurs. Vous devez rédiger une politique de confidentialité conforme à la loi et vous assurer que cette politique est facile à localiser et à accéder.
• Mention de droit d'auteur pour dissuader quiconque de copier les actifs de votre site web. Vous aurez besoin du symbole du droit d'auteur © (ou des mots "Copyright" ou "Copr."), de l'année de publication ou de la dernière mise à jour du site web, et du nom du propriétaire du droit d'auteur.
• Un plan du site sert de feuille de route supplémentaire pour les différentes parties de votre site web. Le plan du site encourage les visiteurs à continuer à parcourir le site web et les aide à découvrir différentes sections de la page.
• Informations commerciales incluant les coordonnées, les numéros d'enregistrement, les adresses et les logos.
• Liens vers les réseaux sociaux pour maintenir les utilisateurs engagés en les liant à d'autres plateformes sur lesquelles vous êtes présent.

4. Utilisez l'espace blanc

L'espace blanc est un espace vide autour du contenu et des éléments de page. Son rôle est de laisser votre design respirer, d'aider à la concentration de l'utilisateur et de rendre son parcours sur le site plus facile. L'espace blanc améliore l'expérience utilisateur et leur permet de digérer votre contenu plus efficacement.

L'espace blanc n'est pas nécessairement blanc. Il peut être n'importe quel type d'espace utilisé comme fond pour le contenu web et les éléments. Ses éléments incluent l'espacement des lignes, l'espacement des lettres pour le texte, et les marges et les paddings autour des éléments fonctionnels.

Une utilisation appropriée de l'espace blanc permettra de :

• Rendre le contenu plus lisible.
• Créer des connexions entre les éléments individuels.
• Attirer l'attention des visiteurs sur des objets particuliers.
• Améliorer la hiérarchie visuelle.
• Rendre un design plus premium.

5. Comprenez la théorie des couleurs

En créant des pages Webflow, vous devriez vous familiariser avec la roue des couleurs et comment les couleurs complémentaires, contrastées et analogues fonctionnent ensemble. Les découvertes montrent que 21% des visiteurs quitteront un site web avec des couleurs absurdes. Utiliser une palette de couleurs appropriée joue donc un rôle vital dans le design web. Un bon point de départ est de suivre la règle des 60/30/10. Lorsque vous sélectionnez une palette de couleurs, 60% du design devrait être la couleur dominante, 30% la couleur secondaire et 10% la couleur d'accent.

Les schémas de couleurs du site web refléteront la personnalité de votre marque et vous aideront à vous démarquer de la concurrence. Les consommateurs associent souvent des marques à certaines couleurs, donc garder votre schéma de couleurs cohérent améliorera la reconnaissance de votre marque.

6. Utilisez un système de gestion de contenu (CMS)

L'une des meilleures fonctionnalités qui rend Webflow spécial est son système de gestion de contenu. Utiliser un CMS vous permettra de modifier, ajuster et mettre à jour de grands blocs de contenu sans trop de tracas.

Le CMS est l'endroit où tout le contenu dynamique est stocké et entretenu. Le contenu dynamique inclut les articles de blog, les pages de destination, les recettes ou les événements. Utiliser un CMS signifie que chaque fois que vous changez le contenu dans le CMS, le changement sera visible sur toutes les pages où il est référencé.

Utiliser un CMS vous permettra de créer un contenu structuré et de concevoir autour de ce code sans jamais avoir à écrire une ligne de code.

Consultez l'article Intro to Webflow CMS et apprenez tout ce que vous devez savoir sur le CMS Webflow.

7. Renforcez la convention de nommage des classes

Si vous avez déjà travaillé avec CSS auparavant, vous savez probablement à quel point une convention de nommage des classes sémantique est importante. Les classes de Webflow fonctionnent exactement comme les classes en CSS. Nommer correctement les choses en CSS rendra votre code plus facile à lire et à maintenir.

L'une des manières les plus populaires de nommer les classes est d'utiliser la convention de nommage BEM. BEM signifie bloc, élément et modificateur. Elle nous aide à diviser l'interface utilisateur en petits composants réutilisables qui nous aident à ajuster et modifier le design sur toutes nos pages.

• Les blocs représentent des éléments de haut niveau et autonomes, tels que la navigation, le menu et les éléments héros.
• Les éléments font partie des blocs et n'ont pas de signification autonome. Un bloc contient des éléments comme des liens de navigation et un lien social.
• Les modificateurs indiquent les variations de ou les changements apportés aux éléments. Presser un bouton changera son apparence de bleu à blanc, par exemple.

La convention BEM est populaire dans Webflow en raison de l'amélioration de la fonctionnalité de copier/coller entre sites. Utiliser BEM vous aide à rendre les éléments réutilisables que vous pouvez facilement copier et coller sur d'autres pages.

8. Suivez les meilleures pratiques UI

Le design UI se réfère au design esthétique de tous les éléments visuels de l'interface utilisateur d'un produit numérique. En termes simples, le design UI est le design de l'interface du produit - ce que l'utilisateur voit réellement.

Pour créer une excellente UI, la plupart des designers suivent des principes de design établis. Ces principes représentent des concepts de haut niveau qui guident les designers dans la création d'une UI centrée sur le client.

Une bonne pratique est de suivre les 10 principes généraux de design de Jakobs Nielsen pour l'UI. Ses 10 heuristiques d'UI parlent de :

• Visibilité de l'état du système. Elle maintient l'utilisateur informé de ce qui se passe grâce à un retour approprié.
• Le design devrait parler le langage de l'utilisateur, rendant les informations apparues dans un ordre naturel.
• Contrôle utilisateur et liberté leur permettant d'abandonner des actions indésirables sans tracas.
• Cohérence et standards fournissent une meilleure clarté et compréhension de la page.
• Éliminer les conditions propices aux erreurs pour éviter que les utilisateurs ne rencontrent des échecs sur le site web.
• Les informations nécessaires à l'utilisation du design devraient être visibles ou facilement récupérables lorsque nécessaire.
• Le design esthétique et minimaliste rend la compréhension d'un site web aussi facile que possible.
• Les messages d'erreur devraient être exprimés en langage clair pour aider les utilisateurs à reconnaître et à se remettre des erreurs.
• L'aide et la documentation peuvent aider les utilisateurs à comprendre comment accomplir leurs tâches.

9. Incluez une navigation claire

Nous avons déjà parlé du pied de page, attaquons-nous maintenant à la navigation. Créer une navigation propre conduira à plus de conversions sur le site, un taux de rebond plus bas et une meilleure expérience utilisateur globale.

Imaginez atterrir sur un site web et ne pas pouvoir trouver votre chemin. Tôt ou tard, vous quitteriez le site sans intention de revenir. Une navigation de site web claire et hiérarchique aide vos visiteurs à trouver instantanément ce qu'ils veulent.

CrazyEgg propose une excellente règle générale pour une bonne navigation :

• La structure de navigation de votre site web devrait permettre à quelqu'un d'atterrir sur n'importe quelle page de votre site et de trouver ce dont il a besoin en 3 clics.

Les étapes fondamentales pour créer une excellente navigation de site web sont :

• Placez la navigation en haut de votre page. Les visiteurs devraient pouvoir naviguer sur le site sans trop réfléchir. Votre navigation principale devrait donc être visible en tout temps.
• Évitez trop de menus déroulants qui forcent les utilisateurs à passer plus de temps à trouver le contenu qu'ils recherchent.
• Gardez la navigation simple et minimaliste. Trop de liens submergeront le visiteur et pourraient potentiellement le pousser à quitter le site.
• Réfléchissez à la hiérarchie des liens de navigation. L'effet de primauté est une chose réelle, ce qui signifie que les utilisateurs accorderont plus d'importance aux liens qu'ils voient en premier.

10. Demandez des retours

Dernier point, mais non des moindres, demandez constamment des retours. Comment allez-vous vous améliorer si vous ne savez pas ce que vous faites bien et ce que vous faites mal ?

Laissez les visiteurs et d'autres professionnels vous donner des retours constructifs qui vous aideront à améliorer vos compétences Webflow. Assurez-vous que les critiques comprennent la portée et l'objectif du projet.

Voici quelques questions que vous pourriez poser aux personnes analysant et critiquant votre travail :

• Ma page manque-t-elle d'éléments de design importants ?
• Le contenu peut-il être mieux organisé pour améliorer la lisibilité ?
• La fonctionnalité de l'UI a-t-elle du sens ?
• La hiérarchie visuelle fonctionne-t-elle ?
• Que peut-on faire pour améliorer l'expérience utilisateur ?
• Mes classes sont-elles correctement nommées ?
• Comment améliorer la performance de ma page ?
• À quoi ressemble le parcours d'un visiteur sur ma page ?

Assurez-vous de demander des retours de personnes de diverses industries. Après tout, vos visiteurs auront des antécédents différents et travailleront dans différents rôles. Entendre la perspective de différentes personnes vous donnera une meilleure vue d'ensemble sur ce sur quoi insister et ce qui ne l'est pas.

Conclusion

Le design web et le développement web évoluent constamment. Webflow fait le pont entre les deux disciplines, faisant évoluer l'espace sans code encore plus rapidement. Pour rester compétitif et produire des projets de haute qualité, vous devrez travailler dur et apprendre constamment. Bien qu'il y ait de nombreuses autres compétences à maîtriser, nous avons souligné les 10 compétences principales qui peuvent vous aider à rester au top et à vous améliorer sur Webflow.

Pour revoir ces compétences une fois de plus, ce sont :

• Utilisez les raccourcis Webflow.
• Ajoutez un texte convaincant.
• Améliorez le pied de page de votre site.
• Utilisez l'espace blanc.
• Comprenez la théorie des couleurs.
• Utilisez un système de gestion de contenu (CMS).
• Insistez sur la convention de nommage des classes.
• Suivez les meilleures pratiques UI.
• Incluez une navigation claire.
• Demandez des retours.