Elias, Branding Studio, webflow partner

Rebranding: Website redesign with Webflow

Your brand, our focus
Your brand, our focus
Your brand, our focus
Your brand, our focus
Branding
resources
/
Branding
/
Rebranding: Website redesign with Webflow
August 2022
7
Min

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

Home page www.elias.studio

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 !

From the start, you have several choices: starting from a template (knowing that you can customize it later), or not. It is best to select a pre-designed model if you are not very comfortable using the tool.

Next, you'll need to start a project, change the body (All pages) tag, set the text color, background color, text size, and font. Of course, all this is done in accordance with your model 😉

You must then modify the other “All pages” tags (heading H1,2,3 etc... + Paragraph + All Links) directly on the styleguide page. Then, add your assets and organize them in different folders (you'll thank me later 😇).

At this stage, you will have to reproduce your model Pixel-perfect.

But don't panic! The interface is very intuitive and allows you to easily modify the site.

The top 5 best tools for your rebranding

🥁 Drum roll... Here are our scrunchies:

Webflow the No. 1 tool for creating a no-code website: very easy to use

  1. Illustrator to design your new logo
  2. Canva To format the graphic chart
  3. Figma to prototype your application or your showcase site
  4. Gather Town to communicate on the web with your team
  5. Notion to gather all the information and set deadlines for your team

Bonus: 10 web design trends to integrate into your website

The monograms : This emblem, which combines several initials in one symbol, makes it possible to properly represent the identity of a person or a company.

The drawings : These childish patterns give a certain authenticity to a brand.

The handwritten font : Personal signature, the handwritten font makes it possible to convey an identity, a personality.

The animated logo : Animating your logo makes it lively and adds originality and pep to your business.

Disruptive branding : The watchword? Anything but smooth! Disruptive branding allows businesses to show that they don't always follow the rules.

Minimalism : Less is more. You know the formula, this trend is still current.

The abandonment of the ecological style : Eco-brands are abandoning shades of green and brown as well as the classic imagery of environmental protection.

Negative spaces : Negative space makes it possible to lighten a design, it is an area empty of content that surrounds one or more elements.

The return of the neon of the 80s : This is a trend that will continue in 2022. We find original text alignments and neon effects (well yes that's the principle).

Natural colors : Nature is a source of inspiration! Soft and natural colors are the order of the day this year.

That's it, all I have to do is wish you a good rebranding 👋!

To go further and learn more about the 2022 branding trends, I invite you to take a look at this item ✌🏼

Elias, Branding Studio, webflow partner

Brand Strategy
Brand Identity
Brand Experience
Naming
Copywriting
Brand Idea
Logo
Photography
Illustration
3D & Motion
SEO
Website
Webflow
Custom Animation
Maintenance
Webdesgin

We are brand creators. We transform projects into a strong, online brand.

Related articles

Your Webflow website, your new superpower

Brand Strategy
Brand Identity
Brand Experience
Brand Strategy
Brand Identity
Brand Experience