Les étapes de création d’un site web avec WordPress

La chaîne « théorique » de création d’un site web

La chaîne « pratique » de création d’un site web

En résumé, la création d’un site internet se découpe en 5 parties :

1. Enjeux
2. Contenus
3. Fonctionnalités
4. Webdesign
5. Technique

Enjeux

Par enjeux, il faut entendre :

• « Avant vente » à savoir bien écouter et faire parler le client sur ces besoins. Lui démontrer la plus-value ou la valeur ajoutée que l’on peut apporter.

• « You’re solution is not my fucking problem! Un site web doit s’adresser à une ou plusieurs cibles bien identifiée(s) et surtout répondre à un problème ou à un besoin.
• Enfin, l’enjeu logiquement conséquent d’un site web est celle du SEO « Search Engine Optimisation », comprenez référencement naturel. Il est important de définir la sémantique de votre site web afin d’en déterminer les mots et questions clefs. Pour se faire plusieurs exercices et techniques sont décrites dans la partie « contenus » ci-après:

Contenus

Du contenu vient le Design (et non l’inverse)

WPalex

Exercices pratiques !

1. À qui s’adresse votre site web ? (Introduire notions de Personas)
2. À quoi sert-il ? Répond-il bien à un besoin ou à un problème ?

Que taper dans Google pour me trouver ?

• Faites l’exercice dans Google
• Noter le nombre de résultats via Outils
• Consulter les recherche associés (en bas de page)
• Que dit la 1ère SERP de Google ? (Adwords, Position 0, Richs snippets…)

Exercice de la pyramide inversée :

• Décrivez votre site
• Résumer votre site en 1 phrase
• Résumer votre site en 4 mots
• Trouver votre (ou vos) mot.s clef.s

À vos post-its !

Travail individuel ou par 2 :

• Comment peux-tu m’aider ? (ou comment ton site va m’être utile, va m’aider ?)
• Qui es-tu ?
• Pourquoi faire appel à toi ?
• On fait quoi maintenant ?

Le cercle d’or de Simon SINEK :

• Quoi ?  Les organisations, entreprises, personnes savent ce qu’elles font, c’est le “What” de Simon Sinek.
• Comment ? Quelques-unes d’entre elles savent “comment” ils le font, c’est la proposition de valeur qui les différencie des concurrents, le “How”.
• Pourquoi ? Cependant, elles sont très peu nombreuses à savoir “pourquoi” elles font ce qu’elles font, le “Why”.

Pour éventuellement mieux comprendre : https://www.youtube.com/watch?v=_IgpS_HwwzU

Conceptions de la structure des informations et du menu du site web sur papier

1. Créer votre menu : Maximum 5 entrées entre la page d’accueil et la page contact [Accueil | ? | ? | ? | ? | ? | Contact]
2. La page d’accueil étant souvent la synthèse des autres pages, travailler là en dernier !
3. Quel sera la structure de Titre de votre site (h1, h2, h3, h4) et la ligne éditoriale ?
4. Quels seront les textes présents dans chacune de vos pages ? Qu’allons-nous trouver dans chacune des pages ?

Fonctionnalités

Les fonctionnalités natives de WordPress sont de pouvoir créer des pages (contenus statiques dit froid) et des Articles (contenus dynamiques dit chaud), gérer des commentaires, créer et gérer des comptes utilisateurs…

Par fonctionnalités, il faut souvent entendre « extensions ou plugins » qui permettent d’enrichir ou de compléter WordPress. Par exemple en installant l’extension WooCommerce votre WordPress sera transformé en E-commerce.

Autres exemples de fonctionnalités :

• Carte interactive pour un annuaire
• Formulaire de contact ou sur mesure
• Espace membre
• Prise de RDV en ligne

Webdesign, Zoning, wireframes, maquettes et Style guide

Des contenus vient le design, et non l’inverse ! Penser « mobile first » : Google ne référence que la version mobile d’un site web. Cherchez plutôt l’efficacité UX UI que l’effet Wahou…

Faites un zoning de votre site web

Un zoning de site web est une étape importante dans le processus de création d’un site web. Il s’agit d’un schéma visuel simplifié, souvent sous forme de croquis ou de maquette, qui définit l’organisation et la disposition des différentes zones d’une page web. L’objectif principal du zoning est de déterminer l’architecture de la page, en identifiant les emplacements des éléments principaux avant de passer à la phase de design détaillé.

Voici quelques caractéristiques clés du zoning :

1. Disposition des zones fonctionnelles : Le zoning montre où seront placés les principaux éléments comme :
   • Le header (en-tête) : qui peut inclure le logo, le menu de navigation, et parfois des boutons d’appel à l’action.
   • Le contenu principal : texte, images, vidéos ou autres éléments de contenu.
   • Le sidebar (barre latérale) : pour des éléments comme des liens supplémentaires, des widgets ou des publicités.
   • Le footer (pied de page) : qui contient souvent les informations de contact, les mentions légales et les liens vers les réseaux sociaux.
2. Sans détails graphiques : Le zoning n’inclut pas encore les choix esthétiques tels que les couleurs, les typographies, ou les images précises. C’est un document qui se concentre uniquement sur la structure fonctionnelle.
3. Outil de communication : Le zoning est souvent utilisé pour communiquer entre les équipes de développement, les concepteurs graphiques et les clients. Cela permet à chacun de valider l’organisation du contenu avant d’aller plus loin.
4. Optimisation UX : Il aide aussi à réfléchir à l’expérience utilisateur (UX), en vérifiant que les éléments clés sont bien placés pour faciliter la navigation et atteindre les objectifs du site (par exemple, conversions, engagement).

En résumé, le zoning de site web est une sorte de « squelette » qui montre comment les différentes sections d’une page web seront organisées, avant d’aller dans les détails visuels ou fonctionnels.

Définissez un Style guide pour votre site web

Définir un style guide pour un site web est une étape essentielle dans le processus de création et de maintien de la cohérence visuelle et fonctionnelle d’un site. Un style guide (ou guide de style) établit les règles et les standards graphiques et typographiques, mais aussi l’expérience utilisateur (UX) pour tout ce qui concerne le design et l’interface. Voici les étapes et les éléments clés pour créer un style guide efficace :

1. Comprendre l’identité de la marque

Avant de commencer, il est crucial de comprendre l’identité et les valeurs de la marque. Posez des questions comme :

• Quelle est la mission et la vision de l’entreprise ?
• Qui est la cible principale du site web ?
• Quelle est la tonalité à adopter (formelle, amicale, professionnelle, etc.) ? Ces informations guideront le style visuel et le ton du contenu.

2. Palette de couleurs

• Définir la palette de couleurs qui sera utilisée sur le site. Cela inclut les couleurs principales de la marque, les couleurs secondaires, et les couleurs pour les éléments spécifiques comme les boutons, les liens, ou les alertes.
• Indiquer les codes hexadécimaux (#) ou les valeurs RVB pour chaque couleur.
• Inclure des exemples de contrastes pour garantir l’accessibilité, notamment pour les personnes avec des déficiences visuelles (contraste texte/fond).

3. Typographie

• Choisir un ou plusieurs jeux de polices de caractères (fonts) pour les titres, le texte principal, les sous-titres, etc.
• Définir la taille, l’épaisseur (gras, normal), l’interlignage et les espacements.
• Préciser l’usage de chaque police (par exemple, une police pour les titres, une autre pour le texte courant).
• Penser à l’accessibilité et à la lisibilité sur tous les supports (ordinateurs, mobiles, tablettes).

4. Grille et mise en page

• Créer un système de grille pour organiser les éléments sur la page. Par exemple, une grille de 12 colonnes est couramment utilisée pour assurer un design réactif.
• Définir les marges et les espacements internes (padding) entre les différents éléments.
• Spécifier les tailles minimales et maximales des éléments pour assurer une expérience fluide sur différentes résolutions d’écran.

5. Boutons et éléments interactifs

• Définir le style des boutons : forme (carré, arrondi), couleur, et état (normal, survol, actif, désactivé).
• Spécifier le comportement des liens, qu’ils soient textuels ou sous forme de boutons.
• Préciser les interactions comme les animations (ex : changement de couleur au survol).

6. Icônes et visuels

• Choisir un style d’icônes cohérent (plat, ombré, linéaire, etc.).
• Inclure une bibliothèque d’icônes type fontawesome et préciser leur utilisation selon le contexte.
• Définir des règles pour l’utilisation des images : format, dimension, encadrement, et filtres. Cela garantit une homogénéité dans le traitement visuel.

7. Formulaires

• Préciser le style des champs de formulaires (taille, couleur de bordure, état normal ou survolé).
• Définir la manière d’afficher les messages d’erreur ou de validation, ainsi que les icônes associées.
• Inclure les espaces entre les champs, les labels et les boutons pour une meilleure lisibilité.

8. Tonalité et style rédactionnel

• Décrire le ton et le style de communication à adopter dans le contenu écrit (par exemple : ton formel vs ton amical).
• Inclure des exemples pour montrer la manière de formuler les appels à l’action, les titres, et les descriptions.
• Préciser les règles de grammaire ou d’usage des majuscules, des abréviations et des unités de mesure.

9. Responsivité et adaptabilité

• Inclure des directives sur l’adaptabilité des éléments du site pour qu’ils soient compatibles avec différents types d’appareils (mobile, tablette, ordinateur).
• Spécifier les points de rupture (breakpoints) pour modifier l’agencement de la page en fonction des tailles d’écran.

10. Accessibilité

• Inclure des directives pour garantir que le site soit accessible aux personnes ayant des handicaps, comme les contrastes, la navigation clavier, les textes alternatifs pour les images (balises alt), et les recommandations WCAG (Web Content Accessibility Guidelines).

11. Exemples d’utilisation

• Fournir des exemples de pages-types avec les éléments graphiques et textuels appliqués (pages d’accueil, pages produits, formulaire de contact, etc.).
• Cela aide à voir comment les directives sont appliquées dans la pratique et à maintenir la cohérence dans le futur développement du site.

12. Évolution du guide de style

• Prévoir un système pour mettre à jour le style guide lorsque des ajustements ou des évolutions sont nécessaires, afin qu’il reste pertinent dans le temps.

En résumé, un style guide pour un site web assure la cohérence visuelle et fonctionnelle tout au long du projet. Il aide à maintenir une identité de marque claire, facilite le travail en équipe (designers, développeurs, rédacteurs) et garantit une expérience utilisateur optimale.

Voici quelques exemples de guides de style de sites web qui peuvent vous inspirer :

1. Spotify – Le guide de Spotify met l’accent sur la palette de couleurs, les variations du logo et la manière d’utiliser les actifs de la marque.
2. Mozilla
3. MailChimp – Ce guide va plus loin en couvrant la navigation, les icônes, et en donnant des exemples d’animations intégrées dans les interfaces utilisateur.
4. Love to ride

Ces guides vous montreront comment structurer les éléments visuels, textuels et fonctionnels pour un site tout en garantissant une cohérence globale dans l’expérience utilisateur.

Webdesign, inspirations

• https://wpstarter.fr/starters/
• https://wpastra.com/website-templates/
• https://analogwp.com/style-kits/elementor-pattern-library/
• https://elements.envato.com/fr/wordpress/template-kits
• https://www.cssigniter.com/elementorism/

Technique

La technique dans ce cadre « enjeux » c’est deux choses :

1. Le nom de domaine, l’hébergement et éventuellement la messagerie (important pour le RGPD)
2. L’infogérance (important pour la sécurité, l’optimisation et la pérennité d’un site WordPress)

Voici toutes les publications relatives aux points techniques dont hébergement et infogérance :

En résumé pour créer un site internet WordPress il faut :

1. Comprendre et analyser les enjeux du site internet (positionnement SEO, analyse des partenaires ou de la concurrence)
2. Rédiger des contenus de qualité (Le sens : Pourquoi, Comment, Quoi. L’exercice de la pyramide inversé. Le menu et les textes des pages)
3. Schématiser vos pages en s’inspirant de benchmark ou de layouts (templates, librairies) pour PC, Tablette et Smartphone
4. Héberger WordPress et utiliser le bon thème (avec son enfant) et les bonnes extensions (plugins)
5. Protéger le site par un mot de passe et le désindexer des moteurs de recherches
6. Faire tester, relire et réitérer
7. Mettre en ligne et indexer le site auprès de Google (déclarer le site & ajuster le site selon les metrics et expériences utilisateurs
8. Infogérer (maintenir) et sécuriser le site internet WordPress