La maintenance d'un site Web
Qu'est-ce que c'est ? Comment la réussir ?
Le web, ses technologies et applications sont en constante évolution. Vous devez donc organiser une veille technologique afin de vous renseigner sur ces évolutions et, si besoin, retravailler vôtre site internet en fonction de l’évolution des exigences des algorithmes Google ou celles de vôtre public.
Table of Contents
Refondre son site
Refonte d'un site, mais qu'est-ce que c'est ?
La refonte d’un site web, c’est modifier en profondeur son apparence, sa structure ou son message.
C’est bien souvent l’occasion d’y accoler un nouveau Webdesign par exemple, changer sa charte graphique, les couleurs de la marques et le logo.
Ce processus de refonte peut être plus ou moins lourd en fonction de vos objectifs mais aussi de l’état de vôtre site.
Quel Php ? Quelle version de WordPress, des extensions ? Où en est vôtre SEO, les algorithmes ont-ils beaucoup changé depuis la conception de vôtre site ?
Refondre son site Web est donc une étape clef pour moderniser votre image de marque sur internet afin de toujours offrir la meilleure expérience possible à vos visiteurs.
On distingue 2 types de refontes :
- La refonte visuelle : C’est une modification du webdesign, quelques modifications de l’arborescences et du contenus sont possibles ainsi que l’ajout de quelques nouvelles fonctionnalités.
- La refonte structurelle (et visuelle) : On modifie la structure même du site et on en profite pour opérer un relooking de celui-ci. Elle s’accompagne de changements plus profonds de l’arborescence.
Cela peut aller jusqu’à changer de CMS.
Les étapes de la refonte d'un site Web
Les étapes nécessaires à la refonte d’un site internet sont, dans les grandes lignes, les mêmes que pour la création d’un site internet.
- Maquettage : Création d'un prototype sur un logiciel de DAO/PAO
- L'intégration HTML/CSS/JS : Transformation de la maquette en page Web
- Développement : Développement des fonctionnalités du site, des outils nécessaires ou Mise en place d'un CMS
- Intégration du contenu : Intégration du texte, des images, mises en pages des contenus.
- Référencement : Identification des bons mots clefs, optimisation des titres, images, textes et création du maillage et redirections
- Recettage : Validation du développement et tests des différentes fonctionnalités avant la mise en ligne.
On parle aussi souvent de relooking ou de restylage pour désigner une refonte de site internet.
Comment réussir la refonte d'un site internet ?
Avant de commencer à opérer la refonte d’un site internet, il est vital de mener une réflexion en amont sur les attentes, les causes et les buts de cette refonte. Puis, ensuite, il vous faudra créer un cahier des charges structuré afin de mieux pouvoir le suivre étape par étape.
Quelques conseils pour réussir sa refonte :
- Définissez bien vos besoins et vos attentes ainsi que l’arborescence souhaitée.
- Faîtes auditer vôtre site afin d’en découvrir les forces et les faiblesses
- Sélectionnez et optimisez vos visuels
- Rédigez des textes optimisés pour vôtre SEO
- Déterminer vôtre charte graphique pour le web design, en accord avec l’image de vôtre marque.
- Compilez tout cela dans un cahier des charges
- Prévoyez dès maintenant vôtre maintenance.
Pourquoi se lancer dans la refonte de son site web ?
On peut trouver de nombreuses raisons de vouloir opérer une refonte de son site internet, parmi lesquelles :
Les raisons de la refonte d'un site internet
- Un design daté et obsolète ne correspondant plus aux goûts et exigences stylistiques de vos visiteurs
- Un site internet daté et obsolète ne correspondant plus aux exigences techniques actuelles du web
- Un site non responsive
- Le besoin d'ajouter des fonctionnalités importantes comme une boutique en ligne.
- Un changement d'identité visuelle de la marque ou de l'entreprise.
Les principaux objectifs d'une refonte
- Création d'un site avec un design responsive
- Un webdesign plus moderne et/ou efficace
- Une navigation plus simple et intuitive
- Développer l'audience du site
- L'amélioration du taux de conversion via des prospects plus qualifiés
- Actualisation d'un contenu (texte et/ou visuel) devenu obsolète.
Quelques exemples de refonte
SEO Mix
Avant refonte
Après refonte
Yellow Pages
Avant refonte
Après refonte
Avant refonte
Après refonte
Elan Pour Haïti
Avant refonte
Après refonte
Mozilla.org
Avant refonte
Après refonte
Courants principaux en Web Design
Skeuomorphic Design (2010)
Le Skeuomorphic design est un style de conception visuelle qui utilise des éléments de design qui imitent l’apparence et le fonctionnement d’objets du monde réel pour faciliter l’utilisation. Par exemple, un bouton de volume sur un écran d’un lecteur audio peut ressembler à un bouton réel que l’on tourne.
Cette esthétique a été popularisée par Apple dans les années 2000, notamment à travers des applications telles que l’iCal ou le carnet d’adresses qui reprennent les design des agendas et carnets en papier. Depuis, ce style a été utilisé dans de nombreux produits numériques, bien qu’il soit de plus en plus critiqué pour son manque d’innovation et sa résistance à l’évolution technologique.
Cependant, certaines marques continuent de l’utiliser comme une façon de rendre les produits numériques plus accessibles, en les rendant plus familiers pour les utilisateurs non-technophiles.
- Une approche réaliste
- Rappel des objets du quotidien & leur fonction
- Forme familière, réaliste, léger côté rétro,
- recherche l’authenticité
- Bcp relief, détail, textures, boutons en 3D
Flat Design (2013)
Le Flat Design est un style de design minimaliste qui est devenu populaire dans les années 2010. Ce style est caractérisé par des formes simples, des couleurs vives et un manque d’effets de profondeur tels que les ombres et les dégradés. Il est principalement utilisé dans les interfaces utilisateur, mais il est également présent dans l’impression, la publicité et l’emballage.
L’exemple le plus connu de Flat Design est sans doute le cas de McDonald’s au cours de l’année 2014.
- Une approche minimaliste
- Lisibilité+, Optimisation Espace, 2D
- Economie Couleur, Pas de dégradé
- Pas Ombre, pas Relief
- Plat et Unifié
Material Design (2014)
- Une approche matérielle minimaliste
- Rappelle le papier (éléments opaques,
plats et superposés avec axe Z différent) - Simple, épuré, intuitif
- Harmonisation UX toutes plateformes
Neumorphism Design (2020)
- On retrouve la 3D du Skeuomorphism
- Mais pas les textures
- « vrai relief », fond ni blanc, ni noir pour voir les ombres et lumières.
Le « Neumorphism Design » est un style de conception de l’interface utilisateur qui a récemment gagné en popularité. Il se caractérise par l’utilisation de formes douces et de dégradés en deux tons, qui créent un effet de surface en relief comme celui du néomorphisme. Le terme a été inventé par Michal Malewicz en 2019, qui a combiné le mot «neumatic» (en référence aux coussins d’air) avec le suffixe « ism » (pour désigner une approche philosophique ou esthétique).
Ce style de conception est considéré comme l’évolution du design « skeuomorphique » qui imitait les textures et les matériaux de la vie réelle. Le neumorphism reprend certains aspects de cette esthétique, tout en introduisant des éléments de conception plus modernes, comme les formes géométriques, les dégradés en deux tons et les ombres douces. Depuis sa création, le Neumorphism Design est devenu une tendance populaire dans le monde du design numérique.
Glassmorphism Design (2021... 2007!)
Le glassmorphisme est un style de design qui consiste en l’utilisation de formes et de graphismes transparents comme du verre dépoli. Ce style a récemment gagné en popularité en tant que tendance de conception moderne.
- Transparences
- Dégradé de couleurs vives et pastels
- Effets de 3D, de superpositions et de flous
Atomic Design
Partir de l’élément le plus petit jusqu’au plus grand pour définir la structure de notre site.
Cela ne se résume pas à un style graphique. C’est un mode de conception des pages
Atomic Design est une méthode de conception d’interfaces utilisateur développée par Brad Frost en 2013. Cette méthode de conception est basée sur le concept de l’organisation des éléments de conception en blocs de construction modulaires allant de l’atome à la molécule, à l’organisme et au modèle de page. Cette méthode permet d’avoir une approche systématique de la conception d’interfaces utilisateur, en utilisant des composants réutilisables afin de créer des interfaces cohérentes et évolutives.
L’Atomic Design a été créé pour résoudre les problèmes d’évolutivité et de maintenabilité rencontrés lors de la conception d’interfaces utilisateur complexes. En effet, avec la prolifération des appareils et des plateformes, il est devenu de plus en plus difficile de maintenir une interface utilisateur cohérente à travers différents canaux de communication.
Avec Atomic Design, les éléments de conception sont conçus de manière à être modulaires et réutilisables, ce qui facilite la création d’une interface utilisateur cohérente et évolutif face au changement constant dans les technologies et les plates-formes.
Visual Design
Le Visual Design est une démarche plutôt qu’un style.
Il prône les contrastes, placer les éléments en fonction de leur importance et que cela détermine aussi leur taille à l’écran.
La page doit être la plus claire possible sur les intérêts qu’elle expose.
