March 17, 2020

Notre processus de conception de site Web

Découvrez notre processus structuré de conception de site web qui nous permet de fournir des sites Web plus performants plus rapidement et plus efficacement.

Notre processus de conception web


Aujourd'hui, tout le monde peut concevoir un site Web, mais tout le monde ne devrait pas et tout le monde ne peut pas le construire à un niveau élevé. N'importe qui peut créer un site de modèles à l'aide d'un générateur en ligne, mais vous permettra-t-il de le trouver et de faire des affaires? La création d'un site Web est plus que la conception, le code et la technologie. Construire un site Web, c'est comme créer une histoire, et comme toutes les histoires exceptionnelles, la conception d'un site Web exceptionnel est le résultat d'un processus exceptionnel.

Chaque expérience en ligne est construite autour de 4 piliers fondamentaux: découvrir, définir, concevoir et livrer. Chaque pilier est très important pour la réussite d'un projet web.

Des sites Web bien conçus offrent bien plus qu'une simple esthétique. Ils attirent les visiteurs et aident les gens à comprendre le produit, l'entreprise et l'image de marque à travers une variété d'indicateurs, englobant les visuels, le texte et les interactions. Cela signifie que chaque élément de votre site doit travailler vers un objectif défini.

Mais comment réaliser cette synthèse harmonieuse des éléments? Grâce à un processus de conception Web holistique qui prend en compte à la fois la forme et la fonction.

processus site internet

Pour moi, les étapes de conception d'un site Web nécessitent 7 étapes:

-Identification des objectifs: où je travaille avec le client pour déterminer les objectifs que le nouveau site Web doit atteindre. C'est-à-dire quel est son but.

-Définition du scope of work : Une fois que nous connaissons les objectifs du site, nous pouvons définir la portée du projet. C'est-à-dire, quelles sont les pages Web et les fonctionnalités dont le site a besoin pour atteindre l'objectif, et le calendrier pour les construire.

-Plan du site et création des premiers mocqups: avec l'étendue bien définie, nous pouvons commencer à creuser dans le plan du site, en définissant comment le contenu et les fonctionnalités que nous avons définis dans la définition de l'étendue seront liés.

-Création de contenu: Maintenant que nous avons une vue d'ensemble du site à l'esprit, nous pouvons commencer à créer du contenu pour les pages individuelles, en gardant toujours à l'esprit l'optimisation des moteurs de recherche (SEO) pour aider à garder les pages concentrées sur un seul sujet. Il est essentiel que vous ayez un vrai contenu à utiliser pour notre prochaine étape:

-Éléments visuels: Avec l'architecture du site et du contenu en place, nous pouvons commencer à travailler sur la marque visuelle. Selon le client, cela peut déjà être bien défini, mais vous pouvez également définir le style visuel à partir de zéro. Des outils tels que les tuiles de style, les moodboards et les collages d'éléments peuvent vous aider dans ce processus.

-Test: maintenant, vous avez toutes vos pages et défini comment elles s'affichent pour le visiteur du site, il est donc temps de vous assurer que tout fonctionne. Combinez la navigation manuelle du site sur une variété d'appareils avec des robots d'exploration de site automatisés pour tout identifier, des problèmes d'expérience utilisateur aux simples liens rompus.

-Lancement: Une fois que tout fonctionne à merveille, il est temps de planifier et d'exécuter le lancement de votre site! Cela devrait inclure la planification du calendrier de lancement et des stratégies de communication - c'est-à-dire quand allez-vous lancer et comment allez-vous informer le monde? Après cela, il est temps d'éclater le pétillant.

Maintenant que nous avons décrit le processus, approfondissons un peu chaque étape.

Le processus de conception Web en 7 étapes simples


Pour concevoir, créer et lancer votre site Web, il est important de suivre ces étapes:

1. Identification des objectifs

Parler avec vous est une partie importante de la façon dont je crée des sites Web. Je veux savoir sur vous, votre entreprise, votre personnel, vos produits et services, comment votre entreprise a été lancée, pourquoi elle a été lancée, ce qui vous réveille chaque matin, et pourquoi vous voulez un site Web et surtout ce dont votre nouveau site Web a besoin à faire pour votre entreprise. Je veux connaître votre histoire afin que je puisse créer un site Web pour raconter votre histoire aux prospects et clients d'une manière qui les aidera à tomber amoureux de votre entreprise et à vous donner leur entreprise. Je veux également comprendre les différents personnages que vous attendez à visiter votre site et ce qu'ils feront lorsqu'ils seront sur le site. Un parcours à partir de la page d'accueil peut être adapté à chaque personnage différent.

À cette étape initiale, le concepteur doit identifier l'objectif final de la conception du site Web, généralement en étroite collaboration avec le client ou d'autres parties prenantes. Les questions à explorer et à répondre à cette étape du processus de conception et de développement de sites Web sont les suivantes:

À qui s'adresse le site?
Qu'espèrent-ils y trouver ou y faire?
Le but principal de ce site Web est-il d’informer, de vendre (commerce électronique, n’importe qui?) Ou d’amuser?
Le site Web doit-il transmettre clairement le message principal d'une marque, ou fait-il partie d'une stratégie de marque plus large avec son propre objectif unique?
Quels sites concurrents, le cas échéant, existent, et comment ce site devrait-il être inspiré par / différent de ces concurrents?

Le but est aussi de savoir donner un ton de voix à la communication visuelle

C'est la partie la plus importante de tout processus de développement Web. Si ces questions ne sont pas toutes clairement répondues dans le mémoire, tout le projet peut partir dans la mauvaise direction.

Il peut être utile de rédiger un ou plusieurs objectifs clairement identifiés ou un résumé en un paragraphe des objectifs attendus. Cela aidera à mettre la conception sur la bonne voie. Assurez-vous de comprendre le public cible du site Web et d'acquérir une connaissance pratique de la concurrence.

Outils pour l'étape d'identification des objectifs du site Web

Audience Persona
Dossier créatif
Analyses des concurrents
Attributs de marque

2. Définition de l'étendu du travail

Résultat de recherche d'images pour "statement of work"


L'un des problèmes les plus courants et les plus difficiles qui affligent les projets de conception Web est la définition du travail à accomplir, combien de temps ça va prendre, quelles ressources à allouer. Le client part avec un seul objectif en tête, mais celui-ci se développe, évolue ou change progressivement au cours du processus de conception - et la prochaine chose que vous savez, vous êtes non seulement la conception et la construction d'un site Web, mais également une application Web, des e-mails et notifications push.

Ce n'est pas nécessairement un problème pour les concepteurs, car cela peut souvent entraîner plus de travail. Mais si les attentes accrues ne correspondent pas à une augmentation du budget ou du calendrier, le projet peut rapidement devenir totalement irréaliste.

Tout d'abord, nous devons découvrir les grandes lignes de votre projet, vos ambitions et les résultats qui vous feraient voir un succès. Les premières discussions nous donnent l'occasion de décrire notre façon de travailler, notre vision et de nous assurer que nous sommes bien adaptés les uns aux autres. Nous vous aiderons à établir les meilleurs itinéraires à suivre et à définir quelques itinéraires ou options clés.

Un diagramme de Gantt, qui détaille un calendrier réaliste du projet, y compris les principaux points de repère, peut aider à fixer des limites et des délais réalisables. Cela fournit une référence inestimable pour les concepteurs et les clients et aide à garder tout le monde concentré sur la tâche et les objectifs à portée de main.

Outils pour la définition de la définition du travail :


Un contrat
Diagramme de Gantt (ou autre visualisation de la chronologie)

3. Création de plan du site et Wireframe

simple sitemap

Le plan du site constitue la base de tout site Web bien conçu. Il permet aux concepteurs Web d'avoir une idée claire de l'architecture des informations du site Web et explique les relations entre les différentes pages et les éléments de contenu.

Construire un site sans plan du site, c'est comme construire une maison sans plan. Et cela se révèle rarement bien.

L'étape suivante consiste à trouver une inspiration de conception et à construire une maquette. Les wireframes fournissent un cadre pour stocker la conception visuelle du site et les éléments de contenu, et peuvent aider à identifier les défis et les lacunes potentiels avec le plan du site.

La création d'une conception de site Web ou d'une campagne numérique est un processus collaboratif.

Pendant la phase de «définition», nos concepteurs UX développent l'architecture du site et examinent les chemins de navigation entre les pages. Nos analystes d'affaires utilisent cette étape du projet pour sonder les objectifs commerciaux d'une page spécifique. Nos développeurs examinent les structures filaires finales pour la précision fonctionnelle. Enfin, nos parties prenantes au projet sont impliquées tôt et souvent pour garantir que toutes les exigences sont satisfaites.


C'est là que nous pensons et planifions sous tous les angles et sur toutes les plateformes marketing. Nous discutons de la meilleure technologie à utiliser, co-créons le plan du site et les wireframes, et planifions tout le contenu de la page. Nous analysons également la photographie et l'imagerie qui correspondent le mieux aux objectifs de la marque.

A ce stade de la conception, notre équipe complète les atouts suivants:
Plan du site et cartographie du contenu
Maquettes
Rédaction de contenu

À la fin de la phase de définition, nous produisons un prototype précis de la page Web d'accueil, qui servira de base pour la conception, le mouvement / les animations et le développement front-end à back-end.
Une fois que nous sommes convaincus que nous avons le concept parfait, nous proposons l'idée à nos concepteurs de faire un tour dans l'usine wow.

Bien qu’un wireframe ne contienne aucun élément de conception final, il sert de guide sur l’aspect final du site. Il peut également servir d'inspiration pour la mise en forme de divers éléments. Certains concepteurs utilisent des outils sophistiqués comme Balsamiq ou Webflow pour créer leurs wireframes. Personnellement, j'aime revenir à l'essentiel et utiliser le papier et le crayon fidèles premièrement avant de passer par Adobe Xd et ensuite Webflow pour le design.

Outils de sitemapping et de wireframing


Stylo / crayon et papier
Balsamiq
Moqups
Esquisser
Axure
Webflow
Slickplan
Cartes écrites
Mindnode

4. Création de contenu

Une fois le cadre de votre site Web en place, vous pouvez commencer par l'aspect le plus important du site: le contenu écrit.

Le contenu sert deux objectifs essentiels:

Objectif 1. Le contenu stimule l'engagement et l'action
Tout d'abord, le contenu engage les lecteurs et les pousse à prendre les mesures nécessaires pour atteindre les objectifs d'un site. Cela est affecté à la fois par le contenu lui-même (l'écriture) et la façon dont il est présenté (la typographie et les éléments structurels).

La prose terne, sans vie et trop longue retient rarement l'attention des visiteurs pendant longtemps. Un contenu court, accrocheur et intrigant les saisit et les amène à cliquer sur d'autres pages. Même si vos pages ont besoin de beaucoup de contenu - et souvent, elles le font - en «segmentant» correctement ce contenu en le divisant en courts paragraphes complétés par des éléments visuels, vous pouvez l'aider à garder une sensation légère et engageante.

Objectif 2: SEO
Le contenu augmente également la visibilité d'un site pour les moteurs de recherche. La pratique de la création et de l'amélioration du contenu pour bien se classer dans la recherche est connue sous le nom d'optimisation de moteur de recherche, ou SEO.

Obtenir les bons mots clés et phrases clés est essentiel pour le succès de tout site Web. J'utilise toujours Google Keyword Planner. Cet outil affiche le volume de recherche de mots-clés et expressions cibles potentiels, afin que vous puissiez vous concentrer sur ce que les êtres humains recherchent réellement sur le Web. Alors que les moteurs de recherche deviennent de plus en plus intelligents, vos stratégies de contenu devraient l'être également. Google Trends est également pratique pour identifier les termes que les gens utilisent réellement lorsqu'ils recherchent.

Mon processus de conception se concentre sur la conception de sites Web autour du référencement. Les mots clés que vous souhaitez classer doivent être placés dans la balise de titre - plus le début est proche, mieux c'est. Les mots clés doivent également apparaître dans la balise H1, la méta description et le contenu du corps.

Le contenu bien rédigé, informatif et riche en mots clés est plus facilement récupéré par les moteurs de recherche, ce qui facilite la recherche du site.

En règle générale, votre client produira la majeure partie du contenu, mais il est essentiel que vous lui fournissiez des conseils sur les mots clés et les expressions qu'il doit inclure dans le texte.

Outils de création de contenu impressionnants


Google Docs
Dropbox Paper
Quolibet
Recolte de contenu
Webflow CMS (système de gestion de contenu)

Outils SEO pratiques
Planificateur de mots clés Google
tendances Google

5. Éléments visuels

web design style tile

Une fois que le ton de la voix est défini et que nous comprenons clairement la structure et le contenu du site Web, nous commençons à travailler sur la conception visuelle.


Trouver la bonne expression artistique est extrêmement important. Les visuels créatifs sont la vitrine d'une marque, son identité unique et un puissant moteur de réussite. Le contenu accrocheur est roi. Il permet de connecter une entreprise à ses clients et a un impact émotionnel.

Un autre aspect important de la conception sont les micro-interactions et les animations. Comme ils font partie de l'expérience utilisateur générale, ils sont généralement construits parallèlement à la représentation visuelle des différentes pages.
Des illustrations améliorées pour soutenir la création de contenu et la rédaction sont également produites pendant la phase de conception.

Enfin, il est temps de créer le style visuel du site. Cette partie du processus de conception sera souvent façonnée par les éléments de marque existants, les choix de couleurs et les logos, comme stipulé par le client. Mais c'est aussi l'étape du processus de conception Web où un bon concepteur Web peut vraiment briller.

Les images jouent un rôle plus important que jamais dans la conception de sites Web. Non seulement les images de haute qualité donnent à un site Web un aspect professionnel, mais elles communiquent également un message, sont adaptées aux mobiles et contribuent à instaurer la confiance.

Le contenu visuel est connu pour augmenter les clics, l'engagement et les revenus. Mais plus que cela, les gens veulent voir des images sur un site Web. Non seulement les images rendent une page moins lourde et plus facile à digérer, mais elles améliorent également le message dans le texte et peuvent même transmettre des messages vitaux sans que les gens n'aient même besoin de lire.

Je recommande d'utiliser un photographe professionnel pour obtenir les bonnes images. N'oubliez pas que de belles images massives peuvent sérieusement ralentir un site. J'utilise IloveIMG pour compresser les images sans perdre en qualité, en économisant sur les temps de chargement des pages. Vous devez également vous assurer que vos images sont aussi réactives que votre site.

Le design visuel est un moyen de communiquer et d'attirer les utilisateurs du site. Faites les choses correctement et cela peut déterminer le succès du site. Faites erreur et vous n’êtes qu’une autre adresse Web.

Outils pour les éléments visuels


Les suspects habituels (Sketch, Illustrator, Photoshop, etc.)
Moodboards, collages d'éléments
Guides de style visuel

6. Test

Nous effectuons divers tests tout au long du processus, y compris une révision complète du code après le développement initial ainsi que des tests inter-navigateurs et de temps de chargement avant la mise en ligne. Nous nous assurons que toutes nos conceptions fonctionnent sur des navigateurs et des plates-formes modernes pour offrir aux utilisateurs finaux une expérience cohérente et enrichissante. Nous pouvons prendre en charge les navigateurs plus anciens pour des publics spécifiques, mais cela doit être indiqué au début.

Une fois que le site a tous ses visuels et son contenu, vous êtes prêt pour les tests.

Testez soigneusement chaque page pour vous assurer que tous les liens fonctionnent et que le site Web se charge correctement sur tous les appareils et navigateurs. Les erreurs peuvent être le résultat de petites erreurs de codage, et bien qu'il soit souvent difficile de les trouver et de les corriger, il vaut mieux le faire maintenant que de présenter un site défectueux au public.

Note de l'éditeur: je recommande vivement Screaming Frog’s SEO Spider pour cette étape. Il vous permet d'effectuer la plupart des tâches d'audit standard dans un seul outil, et il est gratuit pour jusqu'à 500 URL.

Jetez un dernier coup d'œil aux méta-titres et descriptions des pages. Même l'ordre des mots dans le méta-titre peut affecter les performances de la page sur un moteur de recherche.

Outils de test de site Web

Vérificateur de liens W3C
SEO Spider

7. Lancement


Il est maintenant temps pour la partie préférée de tout le monde du processus de conception de site Web: lorsque tout a été soigneusement testé et que vous êtes satisfait du site, il est temps de le lancer.

Le développement fron commence immédiatement après l'approbation d'une conception. Contrairement à la plupart des entreprises, notre développement front comprend non seulement la transformation de la conception visuelle en code (HTML), mais également l'extension de l'expérience utilisateur à un niveau totalement différent, en mettant en œuvre des effets spéciaux et des animations. Tous les projets que nous concevons sont conçus pour des expériences multi-écrans, ce qui signifie que la création d'une version réactive d'un site Web / d'une campagne numérique se produit par défaut.

Lorsque la conception front est définitive, nos développeurs back-end prennent le relais. Tout le contenu dynamique est désormais lié à l'interface du système de gestion de contenu (CMS) du site Web.
Nous effectuons également une assurance qualité et des tests pour éliminer tout problème visuel et fonctionnel potentiel du projet sur tous les derniers navigateurs et appareils. Selon la complexité et les besoins du projet, l'assurance qualité peut prendre en charge divers tests utilisateurs. Lorsque tout est prêt, nous allons en ligne et déployons le site Web en ligne.

Ne vous attendez pas à ce que cela se passe parfaitement. Certains éléments doivent encore être corrigés. La conception Web est un processus fluide et continu qui nécessite une maintenance constante.

La conception Web - et vraiment, la conception en général - consiste à trouver le bon équilibre entre forme et fonction. Vous devez utiliser les bonnes polices, couleurs et motifs de conception. Mais la façon dont les gens naviguent et découvrent votre site est tout aussi importante.

Les concepteurs qualifiés doivent être bien familiarisés avec ce concept et capables de créer un site qui parcourt la corde raide délicate entre les deux.

Une chose clé à retenir à propos de la phase de lancement est qu'elle est loin de la fin du travail. La beauté du Web est qu'il n'est jamais terminé. Une fois le site mis en ligne, vous pouvez continuellement exécuter des tests utilisateur sur de nouveaux contenus et fonctionnalités, surveiller les analyses et affiner votre messagerie.

Bonus

Étape 8 - Maintenance optionnelle


Une fois votre site Web lancé, je vous propose un programme de maintenance complètement optionnel. Je peux vous aider à sauvegarder votre site Web, à maintenir des plugins, à bloguer régulièrement et à effectuer des mises à jour générales de votre contenu pour garder votre site Web frais et à jour.

Je suis toujours ravi de vous entendre et de discuter de la façon dont je peux vous aider avec vos besoins actuels de conception et de développement de sites Web.

Ça peut aussi vous intéresser :

<== Retour au blog
Copyright 2020 - DGTALSTORY | PARIS | MONTPELLIER | BARCELONA | London | lviv

Website Design
|Logo Design | Graphic Design | App et Web Development | E-commerce |  Photographie| Contact| `à propos| Marketplace