Il m’arrive souvent d’être confronté dans la situation où un client m’appelle :
« Allo, M. Girard ?
Bonjour, j’ai trouvé votre CV via : Malt / Connaissance / Ancien client…Etc
Nous souhaiterions lancer notre boutique en ligne de chaussettes, nous sommes assez pressé. Est-ce que vous seriez disponible pour commencer en début de semaine sur notre projet ? Nous aimerions avoir mis le site en ligne dans 1 mois. »
Moi : « Allo, M. le client, vous comprendrez que pour créer un site internet, je dois d’abord en savoir d’avantage sur votre entreprise. Quels sont vos objectifs ? »
Le client : « Nous souhaiterions être les leaders dans le marché de la chaussette ».
Moi : « J’aurais besoin de creuser avec vous pour dresser l’image que vous souhaitez renvoyer à vos prospects ».
Le client : « Nous n’avons pas le temps, nous voulons quelque chose de simple ».
Moi : « Avez-vous un budget ? »
Le client : « Que pouvez-vous faire avec 500€ ? »
Bref, ce genre de conversation avec des prospects, j’en ai des cartons entiers.
Aussi pour répondre à mes futurs prospects, et aider le maximum de freelance à répondre à cette question épineuse, je vais vous dévoiler : ma méthode pour travailler le webdesign et l’intégration du site web d’un client.
Étape 1 : la prise de brief
Durant cette phase, je vais prendre le temps de parler avec mon client de son projet. L’idée peut paraître saute, mais plus je vais creuser avec le client plus je vais pouvoir avoir une idée du chemin qu’il souhaite emprunter dans le futur, ou des pistes que je pourrais lui exposer.
Le but de cette étape pour moi comme pour le client est de connaître :
- Les valeurs que souhaite mettre en avant le client
- Les motivations profondes du client à diriger son entreprise
- La typologie de clients
- Le contexte et l’environnement concurrentiel
Étape 2 : le wireframing
Cette étape consiste à livrer rapidement les différentes vues (ou templates) qui seront utilisées à travers le site ou l’application web.
Le wireframe aussi appelé maquettage en fil de fer, vise à représenter les différentes zones d’une page web comme :
- le header
- les menus et autres éléments de navigation
- les titres HTML
- les zones de textes
- la sidebar
- le footer
- …etc
Pour réaliser cette étape, je n’ouvre pas encore de logiciel de graphisme, j’utilise l’outil balsamiq que j’affectionne particulièrement.
Le but de cette étape pour moi comme pour le client est de :
- Rapidement valider les principes de navigation sur le site
- Traiter facilement les demandes de corrections du client
Étape 3 : la création graphique / maquettage
A cette étape, le client a validé tous les principes de navigation. Il est temps pour moi de ressortir mon brief et de coucher sur papier (ou plutôt d’ouvrir Photoshop et Illustrator) pour libérer ma créativité.
Si l’identité graphique du client est déjà existante, le travail sera alors de décliner cette identité au site web, sinon il faudra également créer une identité graphique au préalable.
Je n’ai pas de conseils à donner en particulier, si ce n’est que j’ai pris pour habitude depuis plusieurs mois de ne plus commencer le travail sur une version Desktop d’ordinateur, mais au contraire de privilégier une version Mobile en premier lieu.
Le but de cette étape pour moi comme pour le client est de :
- Valider un design qui colle à l’identité graphique du client
- Faire des adaptations sur Photoshop avant de se lancer dans des heures de code
Étape 4 : l’intégration web
A cette étape, le client a validé toutes les maquettes (même si des petits ajustements restent possibles).
Une fois les maquettes prêtes, je les découpe et m’attaque au codage des pages web.
Je vais utiliser pour ce faire 4 langages de programmation :
HTML :
Ce langage va me permettre de déterminer la structure de la page internet.
Voici un exemple simple de page web HTML :
[code lang= »html »]
<!DOCTYPE html>
<html>
<head>
<title>Titre de ma page</title>
<link rel="stylesheet" href="/style.css">
<script src="/script.js"></script>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="/category1">Categorie 1</a></li>
<li><a href="/category2">Categorie 2</a></li>
</ul>
</nav>
</header>
<section>
<h1>Titre de premier niveau</h1>
<p class="intro">Mon texte introductif pour mettre en avant mon super site web !</p>
</section>
<footer>
<a href="/contact">Contact</a>
</footer>
</body>
</html>
[/code]
CSS :
Le CSS est un autre langage web permettant de styliser l’HTML. Il s’agit ici de reprendre les différents éléments HTML en les sélectionnant par tag, id, ou class et de leur appliquer les propriétés désirées.
Voici un exemple simple pour ma page HTML :
[code lang= »css »]
body {
font-family:Arial;
}
h1 {
color: #cccccc;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
[/code]
JavaScript :
J’utilise le language JavaScript pour donner du dynamisme à un site internet, car je sais d’expérience que servir du contenu à l’internaute directement avec JavaScript peut avoir des effets néfaste sur le SEO. Cependant ce language me permet de faire de belles animations et ainsi rendre le design du site beaucoup plus vivant.
PHP :
Une fois le design validé, je vais travailler les templates de façon à pouvoir faire des appels à la base de données. Cette étape est cruciale puisqu’il s’agit de se servir de chaque écran validé par le client pour mettre à jour les données en conséquence.
Par exemple : je suis sur une page de catégorie du site, il va me falloir lister l’ensemble des produits vendus par le client.
Étape 5 : les tests
Lorsque nous estimons que le projet est suffisamment avancé pour le montrer en activité, nous le basculons dans un environnement de pré-production. Le site devient visible par le client et nous pouvons le tester grandeur nature.
A cette phase-là, des ajustements seront effectués pour affiner le site. Il peut il avoir l’apparition de bug que je vais alors corriger, etc…
Étape 6 : la mise en production
Ça y est, c’est le jour J, nous avons décidé de montrer le site au grand public ! Nous basculons ainsi le site de l’environnement de pré-production à l’environnement de production. Je me charge d’effectuer les transferts de fichiers ainsi que les changements sur la base de données.
Étape 7 : le recettage de la production
Le site est en ligne !
Je dois maintenant avec le client m’assurer que nous avons un site fiable. Je repasse l’entièreté du site avec le client pour faire la chasse aux bugs ou aux anomalies. Si tout est OK le travail est terminé. Sinon j’applique les correctifs pour boucler le projet.
En conclusion, vous voyez qu’un projet web ne peut pas se prendre à la légère. J’ai tenu à insister sur ces points, pour rendre compte du travail non visible par le client. J’espère vous avoir répondu à votre interrogation sur la création du design d’un site web à travers ces lignes.