Rebranding : Refonte de site internet avec Webflow

‍

Sortez les mouchoirs. Votre site web fait grise mine, il ne reflète plus l’orientation de votre entreprise … Que faire ? Un rebranding, pardi !

Le rebranding c’est l’art de refondre l’image de marque d’une entreprise. Faire un rebranding revient à donner un nouveau visage à votre marque. L’idée est que cette nouvelle identité visuelle soit plus en adéquation avec les valeurs, la mission et la cible de votre entreprise ... et que votre site reflète cela !

Prêt à donner un coup de bistouri à votre site web ? Je vous explique pourquoi vous devriez utiliser Webflow pour la refonte de votre site et on vous livre les meilleurs outils pour un relooking de star.

Pourquoi utiliser Webflow ?

Dans votre stratégie de rebranding, vous avez prévu la refonte de votre site. Aïe, aïe, aïe ... créer un site professionnel c'est tout un programme : il faut une équipe, un designer, des compétences graphiques, un logiciel de création, ça prend énormément de temps et c'est payant ...

Sans oublier qu'il y a une multitude de solutions permettant de créer un site web ce qui fait que vous vous sentez un peu perdu ...

‍

‍

Mais si je vous disais que vous pouvez avoir un site avec un design unique, qui vous procure un effet wahou, qui a une vitesse de chargement rapide et de bonnes performances SEO ?

Si cette description ressemble à votre cahier des charges, votre solution pour mener à bien votre projet de refonte de site tient en un seul mot : Webflow. Webflow. Webflow (3 du coup).

Qu’est-ce que l'outil No-code Webflow ?

Webflow est un outil de création et de gestion de site. Il s’agit d’un outil no-code qui a été spécifiquement conçu pour permettre à ses utilisateurs de faire un site performant, au design unique sans toucher au code source.

En clair, Webflow offre de nombreuses fonctionnalités qui offre à l’utilisateur de créer un site internet sur-mesure sans coder. Du coup, vous n’avez pas besoin d’avoir des connaissances poussées en informatique pour prendre en main Webflow. Il vous faudra seulement du temps, 2-3 connaissances de base en développement et un brin de logique … et bim ! Votre site sera en ligne.

‍

‍

Webflow vs Wordpress vs Wix

Au final, Webflow peut être vu comme un hybride entre les logiciels de création de site classique comme Wix, et les systèmes de gestion de contenu (Content Management System CMS) comme WordPress. En effet, une fois votre site publié et accessible sur Internet, vous aurez la possibilité de le mettre à jour autant que vous voulez. C'est important car si vous souhaitez améliorer les performances SEO de vos pages, il vous faudra ajouter régulièrement du contenu en alimentant un blog avec des articles et des images. Ainsi, vous pourrez espérer avoir un meilleur référencement sur Google.

Est-ce que Webflow a des templates gratuits ?

La réponse est oui ! Vous pouvez tout à fait sélectionner un template créé et mis à disposition par un membre de la communauté Webflow et l’utiliser gratuitement. Pour faire le plein d'idées pour votre nouveau site, rendez-vous ici.

Vous aurez aussi la possibilité de sélectionner un template payant. Sachez que les prix sont variables d’un modèle à l’autre. En naviguant dans les catégories, vous pourrez trouver des tarifs allant de 49 $ jusque 129 $ à ce jour.

Créer son nouveau site Webflow de A à Z

‍

Création d'un wireframe qui convertit

Avant de vous lancer tête baissée dans la création de votre site, je recommande d'élaborer votre wireframe. C'est une étape essentielle car le wireframe est la base d'un site internet. Il permet de réunir tous les contenus visuels et textuels du site ainsi que son arborescence. Il s'agit d'une sorte de maquette sans design.

Pour l'élaborer facilement, vous devez vous demander : "Qu'est-ce que je veux dire dans mon site" ?

L'idée est alors de définir les pages du site > chaque section de chaque page > les contenus de chacune des sections.

Et n'oubliez pas, il ne doit pas y avoir aucun élément graphique dans votre wireframe !

Pour ce qui est des contenus textuels, souvenez-vous que vous écrivez pour votre cible. Qui est-elle ? Quels sont ses besoins ? Ses désirs ? Son mode de vie ? Ses mots ? Quel est son problème ? Comment vous pouvez le résoudre ? Ce sont les questions que vous devrez vous poser avant de rédiger la moindre ligne. Je vous invite à vous intéresser au copywriting 😉 ou à faire appel à un professionnel !

Réaliser un Webdesign unique pour votre site

Une fois que les contenus et l'arborescence du site sont prêts, on attaque le design. Place à la maquette !

Si vous n'avez pas de charte graphique, la bonne nouvelle c'est que vous devrez vous en créer une 😄 En effet, il vous faudra une identité visuelle cohérente que vous pourrez décliner sur tous vos supports.

Dès que ceci est prêt, grâce à votre wireframe vous pouvez vous lancer dans le prototypage de votre site internet. Cette étape consiste à "passer une couche de design" sur le wireframe. La première chose à faire est de trouver des inspirations (2 ou 3 sont suffisantes). La maquette devra faire preuve d'originalité, avec le respect d'une ou plusieurs tendances design 2021/2022 sans pour autant tomber dans le site complètement artistique ( vous n'avez pas besoin de réinventer la roue ).

Les outils que je vous recommande d'utiliser à ce stade ? Adobe XD ou Figma.

Intégrer le tout directement sur Webflow

On passe à Webflow !

Dès le début, plusieurs choix s'offre à vous : partir d'un template (tout en sachant que vous pourrez le personnaliser par la suite), ou non. Mieux vaut sélectionner un modèle préconçu si vous n'êtes pas très à l'aise avec l'outil.

Ensuite, vous devrez commencer un projet, modifier le body (All pages) tag, paramétrer la couleur de texte, la couleur de fond, la taille du texte et la police. Bien entendu, tout ceci se fait dans le respect de votre maquette 😉

Il faut ensuite modifier les autres “All pages” tags (heading H1,2,3 etc.. + Paragraph + All Links) directement sur la page styleguide. Puis, ajoutez vos assets et organisez-les dans différents dossiers (vous me remercierez plus tard 😇).

A ce stade, vous devrez reproduire votre maquette au pixel près.

Mais pas de panique ! L'interface est très intuitive et permet de modifier simplement le site.

Le top 5 des meilleurs outils pour votre rebranding

🥁 Roulement de tambour … Voici nos chouchous :

Webflow l'outil N°1 de création de site internet no-code : très facile d'utilisation

1. Illustrator pour designer votre nouveau logo
2. Canva pour mettre en forme la charte graphique
3. Figma pour prototyper votre application ou votre site vitrine
4. Gather Town pour communiquer sur le web avec votre team
5. Notion pour réunir toutes les informations et mettre des deadlines à votre équipe

Bonus : 10 tendances de webdesign à intégrer à votre site internet

Les monogrammes : Cet emblème qui réunit plusieurs initiales en un symbole, permet de bien représenter l’identité d'une personne ou d'une entreprise.

Les dessins : Ces tracés enfantins donnent une certaine authenticité à une marque.

La police manuscrite : Signature personnelle, la police manuscrite permet de véhiculer une identité, une personnalité.

Le logo animé : Animer son logo permet de le rendre vivant et d’ajouter de l'originalité et du peps à votre entreprise.

Le branding disruptif : Le mot d'ordre ? Tout sauf lisse ! Le branding disruptif permet aux entreprises de montrer qu’elles ne suivent pas toujours les règles.

Le minimalisme : Less is more. Vous connaissez la formule, cette tendance est toujours d'actualité.

L’abandon du style écolo : Les marques écologiques abandonnent les teintes de vert et de marron ainsi que l'imagerie classique de la protection environnementale.

Les espaces négatifs : L'espace négatif permet d'alléger un design, c'est une zone vide de contenu qui entoure un ou plusieurs éléments.

Le retour du néon des années 80 : Il s'agit d'une tendance qui perdure en 2022. On retrouve des alignements de textes originaux et des effet néon (bah oui c'est le principe).

Les couleurs naturelles : La nature est source d'inspiration ! Les couleurs douces et naturelles sont de mise cette année.

‍

Voilà, il ne me reste qu'à vous souhaiter un bon rebranding 👋 !

‍

‍

Pour aller plus loin et en savoir plus sur les tendances de branding de 2022, je vous invite à jeter un œil à cet article ✌🏼

‍