Mini projet Web

Pascal FurlanCMS

Un exercice très complet de création d’un mini site Web nous a été demandé.

Les instructions sont les suivantes :

La toute nouvelle société Modulox est l’importateur ou le constructeur et distributeur exclusif en France d’une gamme de 3 modèles de panacotrons qu’elle souhaite vendre en ligne.
(ne cherchez pas ce que sont des panacotrons, ça n’existe pas ! Vous êtes, en fait, libre de remplacer le nom de la société, le type de produits et l’étendue de la gamme par ce que vous voulez !).

Modulox a besoin d’un site web mais avoir en interne les compétence pour en définir les caractéristiques précises, encore moins pour le réaliser.
Plutôt que déléguer la réalisation d’un cahier des charge à un tiers elle préfère pouvoir directement en discuter avec le prestataire réalisant le site.

Etape 1 : Créer le cahier des charges

Etape 2 : Établir l’arborescence du site

Etape 3 : Zoning des pages principales

Etape 4 : Wireframe et planche tendance

Etape 5 : Charte graphique

Etape 6 : Mockups responsives

Etape 7 : Réalisation et mise en ligne

Etape 8 : Conformité RGPD

Etape 9 : Référencement, veille concurrentielle

Etape 10 : Newsletter, landing page

 

Je vous présente ci-dessous mes réalisations :

1. Cahier des charges

Un cahier des charges de site internet est un document référentiel formalisant à la fois les objectifs à atteindre tout en intégrant toutes les contraintes techniques, esthétiques et fonctionnelles du projet.

En fonction de la complexité du projet, le cahier des charges à produire sera plus ou moins détaillé, les quelques informations suivantes sont indispensables pour tous les types de sites internet :

  • Qui êtes vous ? Vos coordonnées complètes, vos activités, vos produits, vos services, …
  • Est-ce une création ou une refonte de site internet ?
  • Le ou les objectifs de votre présence sur Internet, à quoi va servir votre site internet ?
  • Le type de site internet  (e-commerce, site vitrine, site institutionnel, CV, etc…)
  • Le public ou les publics ciblés,
  • Votre identité visuelle si elle existe, des lignes directrices en terme de design,
  • Les contenus texte, photo, et vidéo que vous voulez mettre en ligne.

L’image que j’ai utilisée pour illustrer la fiche tendance est libre de droit et provient du site Unsplash.

>> Accéder à mon cahier des charges

 

2. Arborescence du site

L’arborescence permet d’avoir une vision globale du site web et des parcours de navigation avant de réaliser les maquettes des pages principales. L’arborescence, ou plan de site, se présente généralement sous la forme d’un schéma qui organise les pages du site en rubriques et définit les différents niveaux de navigation. C’est généralement la première étape lors de la conception d’un site web.

Pour réaliser l’arborescence de son site web, il faut lister tous les contenus du site, organiser et hiérarchiser le contenu, et formaliser l’arborescence sur papier ou à l’aide d’un logiciel de maquettage.

>> Accéder à l’arborescence du site

 

3. Zoning des pages principales

Après la création de l’arborescence du futur site web ou de l’application, le zoning d’un site web consiste à définir et positionner les différentes zones fonctionnelles (les blocs) dans la page web. On va ainsi pouvoir placer le logo, la zone de menu, le contenu principal, les colonnes et les éventuels widgets. C’est donc la première étape permettant de définir l’organisation générale des pages d’un projet. Une organisation souvent schématisée grossièrement, mais indispensable pour passer à l’étape suivante : le wireframe.

>> Accéder au zoning

 

4. Wireframe et planche tendance

Le wireframe ou « maquette fil de fer » , part du zoning et détaille certaines parties contenues dans les différents blocs : emplacement des boutons, nature des contenus (image, vidéo…)… A ce stade, aucun design n’est appliqué, on chercher seulement à valider l’aspect fonctionnel du projet. Ici aussi, les contenus sont encore fictifs pour pouvoir se projeter, car il est rare qu’un client ait déjà les contenus définitifs. On y met par exemple des textes Lorem Ipsum : de faux textes sans aucune signification, dont l’objectif est seulement le calibrage du contenu éventuel du futur site web.

Les avantages du schéma est compris par tous (client, graphiste, développeur, ergonome …) et est modifiable facilement. Dès lors, les échanges entre chaque partie sont rapides et la maquette évolue rapidement. Un wireframe peut tout aussi bien être dessiné sur du papier ou conçu sur informatique. Ce dernier cas est pratique pour tester les fonctionnalités du site (exemple : effet de survol de la souris utilisable, navigation …).

>> Accéder au wireframe

 

La planche tendance a pour objectif de décrire un univers visuel à travers différentes propositions de textures, formes et couleurs. Appliquée au design web, la planche tendance est un support proposé par le webdesigner, afin de représenter les éléments essentiels qui constitueront le futur site web.

Pour qu’une planche tendance soit réussie et efficace, elle doit être suffisamment détaillée pour que le client puisse se projeter dans son futur univers graphique et assez synthétique pour ne pas s’éparpiller et donner une vision globale du projet. En se demandant quelles sont les lignes directrices du projet, la planche tendance permettra de travailler certains éléments indispensables (couleurs, textures et motifs, typographie, photographie, pictogrammes, etc.).

Les images que j’ai utilisées pour illustrer la fiche tendance sont libres de droit et proviennent du site Unsplash.

>> Accéder à la planche tendance

 

5. Charte graphique

La charte graphique d’un site web, c’est l’ensemble des symboles et des règles qui définissent l’identité graphique d’un site web. Par extension, on utilise souvent l’expression de charte graphique pour parler de l’ensemble de l’identité visuelle d’un site web. L’objectif d’une charte graphique est double. Il s’agit d’une part d’avoir une cohérence graphique quelle que soit la page du site web, et quel que soit le support de communication utilisé, pour renforcer l’image de marque et d’autre part de faciliter la navigation et la lecture grâce à l’utilisation de repères visuels constants.

Les principaux éléments de la charte graphique d’un site web doivent comprendre les couleurs, la typographie, le logo, les icônes et les boutons.

>> Accéder à la charte graphique

 

6. Mockups responsives

D’après Wikipedia,  un mockup est un prototype d’interface utilisateur, ayant pour rôle de présenter les idées sur l’utilisation d’un logiciel. Le but est de présenter des réalisations dans un univers prédéfini : sur une table, dans une main, accroché à un mur, dans la rue. Dans le webdesign, un mockup est une présentation visuelle montrant la succession des écrans prévue dans l’application. En finalité, le mock-up est utilisé pour présenter un projet à l’annonceur donneur d’ordre ou pour tester un projet auprès des futurs utilisateurs.

L’image que j’ai utilisée pour illustrer le mockup responsive est libre de droit et provient du site Mockup World.

>> Accéder aux mockups responsive

 

7. Réalisation et mise en ligne

Pour réaliser et mettre en ligne le mini site, je suis passé par le thème Hestia de WordPress. Il s’adapte aux entreprises créatrices et commerciales, aux agences et aux entreprises en ligne, et au e-commerce (woocommerce). Il propose un joli design, il est très facile à configurer et ne nécessite pas de page builder. Hestia propose justement une page d’accueil modulable de 11 sections personnalisables : section du gros titre (image d’accueil, titres et sous-titres), section “mise en avant”, section A Propos, section Team (présenter l’équipe), section Ribbon (permet d’ajouter une image de fond, un texte et un bouton d’appel à l’action), section Testimonial (avis clients), Clients Bar (logo des partenaires), section Abonnement (s’inscrire à votre Newsletter), section Blog, section Contact, section Boutique (compatible WooCommerce).

Toutes les images utilisées pour illustrer le site sont libres de droit, et proviennent des sites Unsplash et Freepik.

>> Accéder au site en ligne

 

8. Conformité RGPD

Le Règlement Général pour la Protection des Données est une réglementation européenne qui  a pris application le 25 mai 2018. Votée au Parlement Européen en 2016, sa mise en application est mondiale, et l’organisme en charge de son respect en France est la CNIL, la Commission Nationale de l’Informatique et des Libertés.

Le but de cette réglementation est d’assurer à tout individu le contrôle et la protection des données à caractère personnel qu’il dissémine lors de ses navigations sur la toile.

Avec la nouvelle réglementation, il faut ajouter une case à cocher à tous les formulaires (contact, newsletter…). Cette case doit avoir plusieurs caractéristiques :

  • Elle doit mentionner une phrase du type “J’ai lu et accepte la politique de confidentialité de ce site”
  • Elle ne doit pas être pré-cochée
  • Elle doit contenir un lien vers votre politique de confidentialité
  • Elle est obligatoire pour valider le formulaire.

Il est également obligatoire d’installer les extensions suivantes :

>> Accéder à mon formulaire de contact

 

9. Référencement, veille concurrentielle

Pour un référencement optimisé du site, il faut installer deux plugins : Wp Super Cache et Yoast.

  • Wp Super Cache est une extension qui permet d’améliorer la vitesse de chargement d’un site.
  • Yoast est l’extension indispensable pour optimiser le référencement d’un site WordPress. Yoast propose une check-list pour optimiser le référencement naturel (SEO) de chacune des pages et articles d’un site.

10. Newsletter, landing page

Pour utiliser une newsletter, j’ai utilisé l’extension Sendinblue, qui permet d’obtenir un widget de newsletter. Pour l’installer :

Apparence > Personnaliser > Section de page d’accueil > Abonnement > dans l’onglet « Réglages généraux », choix de l’image d’arrière-plan, du titre de la section et du sous-titre de la section > dans l’onglet « L’extension SendinBlue », on ajoute le widget «SendinBlue Newsletter».

Le formulaire de la newsletter est modifiable en allant sur « Sendinblue » du tableau de bord > Formulaires > cliquer sur « Edit » du formulaire (Default Form par défaut).