Jusqu'à présent cette semaine, nous vous avons montré comment créer un site web. Nous allons maintenant voir comment créer le design parfait pour votre petit coin d'Internet. À la fin de cet article, vous saurez comment procéder :
- Créer une page Web à partir de zéro
- Conception de pages Web
- Comment tester un cadre de site Web
- Comment créer un prototype de site Web
- Comment appliquer votre marque à votre site Web
Avant de commencer, tenez compte de votre temps et de vos objectifs
Dans cette section, nous allons nous attaquer en détail à la conception d'un site Web, depuis les premières esquisses de mise en page jusqu'à la production finale. Il est très important de comprendre que la création de sites Web volumineux et de qualité est un processus itératif qui prend du temps.
Ce processus commence maintenant mais se poursuivra… pour toujours. Le Web est un domaine en constante évolution et il est censé continuer à évoluer. Vous travaillerez toujours sur votre site Web à mesure que vous améliorerez ses performances au fil du temps ou que vous modifierez les objectifs de votre site Web pour réagir aux changements du marché.
Pour mettre en place quelque chose rapidement, vous devez être très stratégique quant à ce que vous choisissez de faire en premier. Vous n'avez pas besoin de tout lancer immédiatement. Revenez sur vos objectifs et décrivez à quoi ressemblerait le plus petit site Web possible pour atteindre ces objectifs - un produit minimum viable.
Concentrez-vous maintenant sur cet objectif. Si vous vous lancez trop tôt, vous risquez de vous retrouver embourbé pendant des semaines. Choisissez judicieusement le travail que vous choisissez.
Peut-être que tout ce que vous pouvez accomplir cette semaine est de créer un site Web d'une page avec votre logo prototype et le texte « à venir » ! C'est certainement mieux que rien et cela vous permet de vous préparer à développer plus tard.
Créer votre site Web peut sembler une tâche ardue, mais en planifiant votre site Web, vous vous rendrez compte quelles pages sont absolument essentielles pour le lancement et quelles pages peuvent être ajoutées ultérieurement. Il est préférable de créer un site Web plus petit et de haute qualité plutôt qu'un site plus vaste avec de nombreuses pages contenant du contenu médiocre ou manquant. Vous ne perdrez rien à supprimer ces pages supplémentaires dès le départ. Les sites Web sont censés évoluer et changer au fil du temps et vous pouvez facilement développer votre site Web après son lancement.
Planification d'une page Web
Lorsque vous commencez à créer votre site Web, la première chose à considérer est de savoir avec quelles pages lancer votre site Web et comment vous allez les lier entre elles afin que les utilisateurs puissent facilement trouver le contenu que vous créez.
La navigation est un élément essentiel à maîtriser. Si les visiteurs ne trouvent pas rapidement ce qu'ils recherchent, ils partiront aussi vite qu'ils sont arrivés !
Pour résoudre ce problème, il faut généralement une barre de navigation qui reste verrouillée en haut de la page lorsque l'utilisateur fait défiler la page vers le bas. Pour 95 % des sites Web, la navigation se présente sous la forme d'une barre en haut de la page qui se réduit à une icône sur les sites mobiles. Il est donc essentiel de choisir les bonnes pages de niveau supérieur pour cette barre de navigation. Vous ne souhaitez pas nécessairement que chaque page soit liée en haut de la page, car cela encombrerait très rapidement la barre, ce qui gênerait la navigation.
Si votre site Web nécessite beaucoup de pages, même dès son lancement, vous devrez les regrouper en catégories et les imbriquer dans des menus déroulants dans votre barre de navigation. Vous avez déjà vu cela de nombreuses fois sur les sites Web de mode, où ils proposent une large gamme de produits répartis en plusieurs catégories. Ils utilisent généralement de grands panneaux déroulants spacieux pour s'adapter à cela. Les meilleurs exemples parviennent à afficher clairement une large gamme d'options sans que cela ne se transforme en un tas de menus confus à l'intérieur des menus. Si vous envisagez de créer une entreprise de mode ou toute autre entreprise proposant une gamme diversifiée de produits, cela vaut la peine de passer beaucoup de temps à bien naviguer. Si les gens ne peuvent pas trouver vos produits, ils ne peuvent pas non plus les acheter.
Reportez-vous à votre étude de marché pour comprendre ce que vos visiteurs pourraient vouloir accomplir en visitant votre site Web et amenez-les à ce point le plus rapidement possible avec le moins de confusion possible.
Votre étude de marché devrait également contribuer à éclairer la conception générale de votre site Web.
Conception de pages Web
L’une des choses auxquelles vous devez penser lorsque vous concevez une page Web à partir de zéro est la conception.
La semaine dernière, nous avons créé un mood board pour vous aider à définir l'apparence de votre marque et à rassembler des idées. Vous devriez vous en inspirer à nouveau pour votre site Web. Vous pouvez même créer un mood board entièrement dédié à l'inspiration pour votre site Web. Une fois de plus, il existe de nombreuses ressources présentant des conceptions de sites Web incroyables.
Vous trouverez ci-dessous quelques ressources que vous pourriez utiliser pour vous aider dans ce processus :
- Articles du site Abduzeedo
- Exemples de sites Web Dribbble
- Exemples de sites Web Behance
- Exemples de sites Web Pinterest
Wireframing de site Web
Le wireframing est une étape courante et extrêmement utile dans la conception, que vous créiez un site de destination d'une seule page ou une boutique de commerce électronique étendue.
Il vous permet de jouer rapidement avec les mises en page sans avoir à élaborer des conceptions de haute qualité. Le wireframing peut être réalisé avec un stylo et du papier et le processus consiste à simuler chaque page Web à l'aide de lignes et de cases pour indiquer où le contenu peut être placé. Cela vous permet de générer rapidement des mises en page et d'imaginer le flux de la page sans y consacrer beaucoup de temps. Utilisez-le pour réfléchir au placement de vos appels à l'action (CTA), images, blocs de texte et navigation.
Prototype de site Web
Il s'agit d'une étape supplémentaire que vous pouvez effectuer lors de la création de votre site Web. C'est beaucoup plus simple qu'il n'y paraît car cela n'implique aucun codage, car il existe de nombreuses applications conçues pour rendre ce processus rapide et facile.
L'idée est de numériser vos wireframes (vous pouvez toujours utiliser des espaces réservés pour le texte et l'image) et d'utiliser le logiciel de prototypage pour les lier ensemble afin que vous puissiez avoir une idée encore plus claire du flux et de la navigation du site.
Vous pouvez créer des images statiques en niveaux de gris de vos maquettes dans un logiciel d'image tel que Photoshop, puis les télécharger sur ces sites de prototypage. Ces sites vous permettront ensuite de lier plusieurs prototypes entre eux pour créer une maquette de votre site Web que vous pourrez prévisualiser et tester.
La plupart de ces applications vous permettront de réaliser des conceptions directement dans le logiciel :
Vous pouvez commencer à utiliser vos prototypes pour déterminer où vous allez placer vos messages pour qu'ils soient les plus efficaces. Lorsque vous remplacez le contenu d'espace réservé par du contenu réel, assurez-vous qu'il contribue à la réalisation de votre stratégie. Lorsqu'un internaute arrive sur votre page de destination, saura-t-il exactement ce que fait votre entreprise en quelques secondes ? Le site Web l'oriente-t-il rapidement vers les actions que vous souhaitez que les utilisateurs effectuent ?
Bien entendu, cela concerne autant les messages eux-mêmes que l’endroit où ils sont placés et présentés sur la page.
Conception de site Web de marque
Une fois que vous avez défini vos mises en page idéales, la conception sera naturellement réalisée par votre marque. Vous devez appliquer le travail que vous avez effectué la semaine dernière à votre site Web, car la cohérence est essentielle pour construire votre marque. Votre site Web doit avoir une apparence appropriée et s'intégrer au reste de vos activités marketing et de communication.
L'image de marque que vous avez choisie sera essentielle pour créer un site attrayant et engageant. Des images de haute qualité sont essentielles pour garantir que votre site Web soit net dans de nombreuses tailles différentes. Une image floue crée une mauvaise première impression.
Le logo que vous avez conçu pendant la semaine de branding doit être votre premier point de contact. Assurez-vous qu'il soit visible en haut de votre site Web sur chaque page. De nombreux sites Web l'intègrent dans le menu de navigation supérieur qui sera probablement présent sur chaque page. Vous pouvez également utiliser le logo pour la navigation, en cliquant dessus pour revenir à la page d'accueil du site.
Emplacements des couleurs de la marque
Appliquer la palette de couleurs de votre marque à votre site Web permet de faire ressortir clairement votre marque. Cela peut suffire à rendre votre site Web immédiatement reconnaissable. La couleur principale de votre marque doit être présente de manière cohérente sur l'ensemble de votre site.
Voici les endroits courants où vous pouvez appliquer la couleur principale de votre marque :
- Rubriques de navigation
- Couleurs d'arrière-plan de la bannière supérieure (attention si vous avez une couleur dominante)
- Titres et sous-titres des pages
- Liens hypertextes
- Couleurs des boutons – (bien que vous souhaitiez peut-être choisir une couleur contrastante pour faire ressortir vos CTA)
- Icônes de couleur
- Superpositions sur vos photos d'archives
Vous pouvez utiliser vos couleurs secondaires de la même manière pour créer de l'intérêt, de la variation et du contraste. Restez simplement cohérent avec votre méthode d'application. N'oubliez pas que vous pouvez utiliser votre logiciel de prototypage pour expérimenter autant que vous le souhaitez. Tester des variantes et itérer sur vos conceptions est la clé pour arriver rapidement à un design final qui vous convient.
Choisir les bonnes images
Pour choisir de bons éléments graphiques pour votre site Web, vous devez utiliser les ressources de marque que nous avons décrites dans la semaine 8. Voici quelques conseils supplémentaires pour les appliquer à votre site Web :
- Assurez-vous que les images que vous choisissez complètent le texte que vous écrivez pour les accompagner. Elles doivent soutenir le message clair que vous essayez de faire passer.
- Faites attention lorsque vous placez du texte au-dessus des images. Cela peut nuire à la lisibilité. L'application d'une couleur d'accentuation par-dessus peut aider à réduire le bruit en arrière-plan.
- Les images volumineuses peuvent affecter les temps de chargement. Vous pouvez toujours les enregistrer au format jpeg pour compresser la taille du fichier si tel est le cas.
- Évitez les stocks qui semblent trop génériques ou contrefaits. Cela est vraiment évident et nuira à la confiance et à l'authenticité de votre site Web (nous y reviendrons plus tard).
- N'abusez pas des images. Les images sont très puissantes et peuvent être gênantes si elles sont utilisées à outrance. N'oubliez pas les objectifs de votre site Web et assurez-vous que chaque image a un rôle à jouer et ne les gêne pas.
Se concentrer sur le site Web
Un autre élément essentiel de la conception d'un site Web est la manière dont vous rédigez et présentez votre contenu de manière à ce que les gens prennent réellement le temps de le lire. Rédiger des essais sur des produits sur votre page d'accueil ne fonctionne tout simplement pas et n'est pas assez engageant.
Une partie de ce problème peut être résolue en utilisant une police Web claire, avec un bon contraste, une bonne taille et un bon espacement. Si vous utilisez des thèmes intégrés à une plateforme de site Web, il existe de nombreux thèmes qui offrent naturellement une excellente lisibilité intégrée. Cependant, ce n'est que la moitié de la bataille. La fatigue de lecture, en particulier sur les écrans, est bien réelle et vous devez faire preuve d'intelligence pour vous assurer d'écrire et de positionner votre texte de manière à ce qu'il soit réellement lu.
Suivez ces directives:
- Assurez-vous que votre copie est claire et évitez les ambiguïtés.
- Gardez une structure de phrase simple. Évitez les mots et les combinaisons complexes.
- Allez droit au but rapidement.
- Divisez de grandes quantités de texte en blocs séparés et plus petits avec leur propre titre.
- N'essayez pas de transmettre trop de choses à la fois. Déterminez le message que chaque bloc de texte tente de transmettre et tenez-vous-en à celui-ci.
- Utilisez des images à côté du texte pour encourager les gens à lire.
- Utilisez des espaces blancs ! Prévoyez un espace généreux (rembourrage) autour de votre contenu afin qu'il ne soit pas surchargé.
Comment vous assurer de créer un site Web adapté aux mobiles
Il est extrêmement important que votre site Web fonctionne correctement sur les téléphones portables et les tablettes, car de nombreuses personnes consomment désormais du contenu via ces appareils. Google pénalisera en fait les sites Web dans leurs recherches si vous ne respectez pas cette règle !
Heureusement, c'est assez facile de nos jours. La plupart des thèmes standards fournis avec une plateforme de site Web doivent utiliser une conception « réactive ». Cela signifie qu'à mesure que la largeur de l'écran diminue, le contenu s'ajustera automatiquement pour s'adapter à cette nouvelle taille, parfait !
Il est néanmoins utile de vérifier que les images et vidéos que vous utilisez restent visibles lorsqu'elles sont réduites et que le texte est toujours lisible. Si vous ne possédez pas plusieurs types de tablettes et de téléphones portables différents, vous vous demandez peut-être comment vérifier cela. Le moyen le plus rapide est de saisir le bord gauche ou droit de votre navigateur (assurez-vous qu'il n'est pas en plein écran) et de le faire glisser vers la gauche ou la droite pour agrandir ou réduire la fenêtre. Vous verrez le contenu de votre site Web s'ajuster au fur et à mesure et vous pourrez ainsi analyser vos mises en page à différentes tailles. Il existe également une méthode plus précise qui consiste à utiliser un outil intégré au navigateur Chrome :
- Faites un clic droit sur votre page Web
- Cliquez sur « Inspecter » (cela fait apparaître un panneau)
- En bas à gauche de ce nouveau panneau se trouve une icône représentant un écran et un téléphone (basculer la barre d'outils de l'appareil)
- Cliquez sur cette icône
Maintenant, en haut, vous avez plusieurs barres grises qui vous permettent de simuler à quoi ressemble votre navigateur à des résolutions spécifiques. Il y a même un menu déroulant pour choisir les téléphones/tablettes les plus populaires et les résolutions qu'ils utilisent. Génial !
Que vous choisissiez de créer vous-même le site Web de votre entreprise ou de faire appel à une agence pour le faire à votre place, la conception d'un site Web entraîne de nombreux coûts. Vous devrez non seulement payer votre nom de domaine, les frais d'hébergement et la plateforme Web que vous choisirez, mais également les frais de maintenance du site Web.
Si vous engagez une agence de design pour le faire à votre place, cela représentera un coût important pour votre startup. Vous devez vous demander si vos fonds couvriront ce coût ou s'il sera moins cher de le faire vous-même. Comme nous l'avons montré dans les derniers articles, la création d'un site Web est beaucoup plus facile que vous ne le pensez. Bien que des coûts soient associés aux deux approches de conception de votre site Web, vous devez déterminer laquelle est la plus réalisable pour vous.
Résumé
Lorsque vous concevez un site Web, réfléchissez à la manière dont vous souhaitez que votre marque soit représentée. Il y a de fortes chances que votre site Web soit l'une des premières impressions que les clients auront de votre marque. Il est donc essentiel que vous transmettiez le bon message. Vous devez également vous assurer que votre site Web est convivial et qu'il peut être utilisé sur un large éventail d'appareils. Un site Web qui n'est pas très beau sur mobile peut inciter un utilisateur à partir.
Revenez à votre stratégie et réfléchissez à la manière dont vous pouvez utiliser votre conception pour encourager vos utilisateurs à se déplacer sur le site Web comme vous le souhaitez pour atteindre votre objectif souhaité.
Une fois que vous avez conçu et lancé votre site Web, vous souhaiterez vérifier s'il remplit réellement son objectif.
