Huit commandements du processus de conception web (débutants et non – codeurs)

Apprenez Comment créer un site Web réussi selon un processus structuré de conception de site Web. Nous supposons que vous avez trouvé le nom de domaine et le fournisseur d’hébergement. Si vous n’avez pas sélectionné d’hôte, nous vous recommandons de choisir notre partenaire cloudways. L’exemple suivant montre les étapes à suivre pour créer un site Web pour vous – même. Si le site est orienté vers le client, de nouvelles mesures peuvent être prises en ce qui concerne la planification du projet, la fixation des échéances, les contrats, etc. Mais fondamentalement, vous devez encore suivre les étapes suivantes.
Voici maintenant les étapes: détermination de la portée: quels sont les besoins du site Web? À qui parle le site? Quels sont vos objectifs et vos motivations? Quelles entreprises ont la même couverture et le même public cible que vous? Définir la carte du site: Quelles sont les pages Web et les fonctionnalités qui aident les entreprises et le public à atteindre leurs objectifs? Création de contenu: préparer des copies des pages du site; Création de marques visuelles: préparer des palettes de couleurs, des polices et des graphiques pour la conception de sites Web et, en fin de compte, façonner votre image visuelle; Wireframe: dessine la disposition de la page Web; Conception du site: Découvrez les limites des outils que vous utilisez en créant le site lui – même; Test: Assurez – vous que tout va bien, du lien vers le module et le bouton. Tester le site Web sur divers navigateurs et appareils pour s’assurer qu’il fonctionne correctement; Démarrage: utilisez une stratégie de communication bien planifiée pour faire un peu de bruit avant la mise en ligne. Prenons – les un par un.
Étape 1 du processus de conception du site Web. À ce stade, vous et votre équipe devez trouver des réponses à certaines des questions suivantes: qui est le destinataire du site?
Quoi? Dans le cas du lundi, vous pouvez facilement apprendre leur conversion à partir de la page d’accueil. Le principal changement est évident dans l’appel à l’action \
Et votre site Web, il y a une conversion majeure? Y en a – t – il d’autres? Quel est le chemin du client? Une carte de voyage client est une représentation visuelle du voyage d’un visiteur à travers votre site depuis son entrée jusqu’à ses objectifs et départs prévus. La Feuille de route du client doit comprendre les informations suivantes: les pages visitées et leur ordre, les étapes nécessaires pour que les visiteurs du site atteignent leurs objectifs, les points d’interaction entre l’entreprise et les visiteurs du site (formulaires, chat, etc.), les points de friction potentiels.
Le voyage du client n’est pas fixe. Tu commences par une prémisse et tu t’adaptes tout le long. Vous pouvez utiliser des outils comme Google Analytics pour analyser le comportement d’un site Web et l’optimiser en fonction de la réalité. 2. Définition de la carte du site Source maintenant que le chemin du client est clair, il est temps de créer une carte du site. La carte du site Web sert à établir l’architecture de l’information du site et à expliquer les relations entre les pages. Vous pouvez utiliser des outils comme Excel à Figma pour créer des cartes de site.
3. Création de contenu Maintenant que la structure du site est établie, il est temps de créer du contenu pour chaque page. Voici quelques exemples de meilleures pratiques en rédaction: l’utilisation de mots et de concepts familiers à l’utilisateur idéal; N’utilisez pas de peluche ou d’argot; Essayez de communiquer comme dans un INCO normal
Vous définissez la typographie du site; Palette de sélection des sources. À partir de la palette, vous pouvez évoluer vers un guide de style dans lequel vous pouvez créer des couleurs pour les liens, les titres, les boutons, les arrière – plans, et plus encore. Pour ce faire, vous pouvez utiliser des outils comme Adobe Color wheel. Source planifie des images qui racontent l’histoire de la marque; Source: https:\/\/convertsquad.com\/blog\/ Dessinez votre logo La source prépare les ressources physiques (emballage du produit, etc.). Source la plupart des éléments ci – dessus peuvent être utilisés pour créer un tableau d’humeur. Lorsque vous recueillez vos personnages, graphiques, couleurs dans le tableau d’humeur, vous serez en mesure de mieux comprendre l’humeur générale du site. Quel est votre ton et votre voix habituels: clair ou foncé? Formel ou amusant? Source 5. Wireframe Un fil source est un croquis d’une page Web ou d’une application. Selon la complexité du site, vous pouvez le dessiner à la main et le créer dans Google docs, sketch ou Figma. Le wireframe est utilisé pour la mise en page du contenu et des fonctionnalités sur la page. Il devrait dire au concepteur où placer les vidéos, les images, les titres, les blocs de contenu, les boutons, etc. Avant de poursuivre la conception, il est préférable d’utiliser un fil métallique, car il vous donne plus de flexibilité. Il est plus facile de modifier la structure du fil métallique que celle d’un site Web déjà conçu. 6. Conception du site Web Source, Parlons affaires maintenant! Nous avons notre propre contenu, wireframes et éléments visuels, et il est temps de commencer à travailler. Comme mentionné dans le titre, il n’est pas nécessaire d’être un concepteur web ou un passionné de code pour créer un site Web. Il existe de nombreux outils pour vous aider à concevoir un site Web sans Code. On les appelle des générateurs de page. La plupart d’entre eux vous permettent de personnaliser chaque pouce de votre design et de le rendre réactif. Dans WordPress, vous pouvez utiliser notre constructeur Colibri ou
Par exemple, un élément. En dehors de WordPress, Wix et squaespace sont très populaires. Ces outils peuvent vous fournir des modèles que vous pouvez enrichir en ajoutant des sections, des visuels et du contenu. Maintenant, si votre conception nécessite une certaine animation et des effets, vous devrez peut – être ajouter du Code. Testez OK, en supposant que votre contenu et vos images soient actifs. Votre travail n’est pas encore prêt. Il est temps de s’assurer que tout fonctionne correctement: aucun lien ne pointera nulle part (c. – à – d. un lien déconnecté ou 404), tous les boutons et modules fonctionnent correctement et le site Web semble bien sur la plupart des navigateurs et des appareils. Maintenant, avant de publier, vous pouvez tester ce que les gens de l’extérieur pensent de votre site. De cette façon, vous éviterez de tomber dans vos propres préjugés. Pour ce faire, vous pouvez effectuer une recherche utilisateur simple: test de 5 secondes. Il s’agit d’une méthode qui vous aide à mesurer les premières impressions que les utilisateurs obtiennent au cours des cinq premières secondes de visualisation d’une page d’accueil (p. ex., 8). À partir de maintenant, appuyez simplement sur publier pour terminer. Non, tu dois faire du bruit, lancer des campagnes de relations publiques, crier sur les médias sociaux et faire savoir aux gens que tu es sorti! C’est un résumé. Vous avez maintenant maîtrisé les bonnes étapes du processus de conception web. Bonne construction de site! Si vous aimez cet article et souhaitez en savoir plus sur la conception du site WordPress, assurez – vous de vous abonner à la chaîne YouTube de Colibri et de nous suivre sur Twitter et Facebook!