Je crée un site internet, d’accord ! Mais par où commencer ? Quelles sont les différentes étapes de réflexion en amont, pendant et post projet ? Quelles sont toutes mes possibilités et comment choisir les solutions adaptées à chaque client ?
Cet article a pour but de présenter la façon d’aborder la création d’un site internet, de façon subjective bien entendu. Il s’agit de partager ma vision et mon expérience en tant que webdesigner indépendant.
À l’inverse de l’article “À quoi penser au lancement d’un projet web ?” qui s’adresse aux clients, celui-ci concerne principalement les créateurs de site.
Voici les différents thèmes abordés :
- La connaissance du client et de son activité
- La recherche d’inspiration
- L’adaptation aux tendances graphiques actuelles
- Les échanges webdesigner / développeur / client
- L’UI et l’UX design
- La mise en route du projet, avec quels outils ?
- Les phases de validation avec le client
- La livraison des éléments graphiques
- Les retours d’expérience utilisateur
1. La connaissance du client et de son activité
La personnalisation d’un projet débute ici. Bien connaître son client, son activité et ses besoins, permet de répondre parfaitement à la demande. Et quoi de mieux qu’un client satisfait ?
Classiques et récurrentes, voici quelques questions à lui poser :
- Présentez-moi votre activité en quelques mots ?
- Quels sont vos atouts et vos objectifs à court/moyen/long terme ?
- Qui sont vos concurrents principaux ?
- Quels sont vos besoins ? Pouvez-vous définir leur priorité ?
- Quelles sont les contraintes techniques du projet ?
- Avez-vous une idée du budget ?
- Quels sont les délais de mise en ligne ?
2. La recherche d’inspiration
Maintenant que je connais tout sur le client, qu’il n’a plus aucun secret pour moi, je suis prêt à commencer les recherches. Je visite les sites internet de ses concurrents, j’essaie de comprendre son univers professionnel et les termes techniques qui peuvent être liés.
J’analyse les tendances graphiques de son secteur d’activité. En effet, un artisan cordonnier ne devra pas renvoyer la même image qu’une PME dans le domaine pharmaceutique.
Au delà de l’image client, il est essentiel également de comprendre sa cible. À qui notre client doit-il plaire ? D’un projet à l’autre, les cibles diffèrent : âge, sexe, csp, domaine d’activité, etc… Inévitablement, la recherche d’inspiration doit inclure l’ensemble de ces facteurs.
Voici une liste (non exhaustive) de sites qui aide à éveiller l’inspiration :
3. L’adaptation aux tendances graphiques actuelles
Grâce aux sites d’inspiration vus précédemment, je reste en veille permanente sur l’actualité du web et les tendances graphiques, d’aujourd’hui et de demain. J’offre à mes clients une vision temporelle de leur projet. Il serait trop prétentieux d’évoquer la notion d’avant-gardisme, mais il me paraît indispensable de créer des solutions pérennes, dont le design s’adapte aux futures tendances graphiques.
Bien entendu, je conseille à mes clients une refonte de leur image dès qu’elle semble passée de mode. Cela permet notamment de faire un point sur les nouveaux besoins et de redéfinir les composantes de son identité visuelle.
4. Les échanges webdesigner / développeur / client
En tant que webdesigner, et avant de partir tout feu tout flamme en phase de création, il est important de prendre en compte l’ensemble des échanges client et développeur.
Côté client
Après le chapitre “La connaissance du client et de son activité”, je sonde plus en profondeur ses besoins réels. Il y a parfois (même très souvent) des divergences entre le brief de départ et les envies “changeantes” du client. J’essaie d’en savoir plus sur ses attentes, comme par exemple, dresser une liste de sites “coup de coeur” et “à éviter”, tout en déterminant pourquoi. Mettre le client face à ses propres contradictions peut faire gagner beaucoup de temps !
Côté développeur
Le graphisme est directement lié au développement du site et inversement. Je consacre beaucoup de temps avec le développeur pour analyser ensemble les besoins du client et de ses utilisateurs, étudier les différentes technologies à déployer et concocter une solution optimale. Un (futur) article est prévu pour entrer dans les coulisses de notre quotidien et détailler la relation et les méthodes de travail entre un webdesigner et un développeur.
5. L’UI et l’UX design
Quésaco ? Bien que ces termes deviennent de plus en plus populaires même chez les néophytes, de nombreux professionnels ignorent la différence entre les deux, voire même la signification précise.
L’UI design (user interface) correspond au design de l’interface utilisateur, soit le design d’une façon globale : les couleurs, les typographies, les formes, les visuels, etc…
L’UX design (user experience) est quant à lui axé sur le design de l’expérience utilisateur : anticiper les attentes des visiteurs, rendre l’interface ergonomique, intuitive et facile d’utilisation.
Je porte un intérêt particulier à la complémentarité de ces deux disciplines, décisives à la réussite de tout projet web. Ainsi, je dois connaître parfaitement les attentes de mon client, mais aussi et surtout, celles des utilisateurs finaux (plus couramment appelés “users”).
6. La mise en route du projet, avec quels outils ?
J’utilise les logiciels de la suite Adobe Creative Cloud, en particulier Photoshop, Illustrator et Adobe XD.
Pour chaque client, je crée une bibliothèque dédiée aux éléments graphiques du projet : palette de couleurs, styles typographiques, pictogrammes, formes, illustrations, etc…
Très pratique, car elle me permet d’accéder à tous ces éléments sur l’ensemble de mes logiciels, sans avoir à les importer/exporter d’un logiciel à l’autre. Un gain de temps considérable !
Au delà des logiciels de création purs, voici une petite sélection d’outils très pratiques :
Pour la création d’une palette de couleur personnalisée ou directement depuis une image.
Pour la recherche de typographies compatibles avec l’ensemble des navigateurs.
Pour l’inspiration et la recherche d’une collection de pictogrammes.
Pour la correspondance des couleurs “dark” et “light”.
Pour la recherche de photographies libres d’utilisation (veillez à citer l’auteur de chaque visuel).
Vous n’avez pas trouvé votre bonheur ? Faites-un tour par ici :)
7. Les phases de validation avec le client
Il y a plusieurs façons de fonctionner :
- Avancer pas à pas avec le client en lui dévoilant les maquettes du site au fur et à mesure des validations
- Réaliser l’ensemble des maquettes du site pour une présentation globale du projet
Personnellement, j’adopte la première méthode. Bien que le client n’ait pas une vue globale du projet, il bénéficie d’une plus large souplesse. Elle lui permet de moduler sa vision initiale du projet, également sous l’influence de mes conseils.
Pourquoi choisir d’avancer “step by step” ? Imaginez avoir mal compris la demande de votre client. Après des heures de travail, vous lui livrez toutes les maquettes et malheureusement, ça ne lui convient pas… Que faire ? (hum… à part pleurer)
Pour éviter cette situation embarrassante, j’avance progressivement et collectivement avec le client. Son investissement dans les étapes de création des maquettes facilite les validations futures et offre un gain de temps pour tous. Bien entendu, il s’agit de jauger le niveau d’implication que l’on souhaite accorder à ses clients, selon leur degré de complexité.
8. La livraison des éléments graphiques
Une fois l’ensemble des maquettes validées, je prépare un document regroupant :
- les maquettes (chacune classée selon l’arborescence)
- la charte graphique web
- les typographies
- les pictogrammes
- les patterns
- les visuels
- un dossier d’inspiration (non livré au client)
J’envoie ensuite ce document à mon développeur et au client via Wetransfer. La version gratuite permet d’envoyer des fichiers jusqu’à 2 GB, sans limite du nombre d’utilisation. Autre atout, il compresse automatiquement vos fichiers / dossiers.
9. Les retours d’expérience utilisateur
Le site est maintenant en ligne depuis quelques mois. Le client me fait part de ses retours d’expérience et celui de ses utilisateurs. Je note les points d’amélioration et concerte mon développeur pour l’étude de faisabilité et la mise en place des solutions cohérentes. Les interventions sont définies par ordre de priorité.
Il est très pratique d’utiliser l’outil Trello pour une meilleure collaboration et une répartition des tâches entre webdesigner et développeur (possibilité d’inclure également le client).
Conclusion
À la fin de cet article, je constate que chaque thème abordé peut faire l’objet d’un article dédié. En l’occurrence ici, il s’agit de répondre aux différentes phases de réflexions que nécessite la création d’un site internet et de vous proposer les outils que j’utilise au quotidien pour mener à bien mes projets en tant que webdesigner indépendant.
J’espère sincèrement que cet article vous aura plu. N’hésitez pas à me le faire savoir et/ou à me contacter pour toute suggestion.
# Tags
Cet article vous a-t-il plu ?
Dernière mise à jour, le 6 janvier 2021