Comment concevoir un site Web pour les débutants
Transformez la conception de votre site Web en un processus reproductible
Il ne s’agit pas d’un « comment concevoir 101 » professionnel, c’est juste d’un processus que j’ai utilisé pour créer et concevoir des sites Web sans expérience en conception et cela m’a été très utile. Je sais que beaucoup de gens ont du mal à repartir de zéro pour concevoir un site Web, c'est pourquoi je voulais partager avec tout le monde mon processus.
La première chose que vous devez faire est de vous exposer à des designs esthétiques et pratiques. J'aime aller à ThèmeForêt et regardez tous les thèmes Wordpress les mieux notés et étudiez simplement toutes les façons dont vous pouvez organiser le contenu. Ensuite, vous pouvez emprunter quelques objets ici et là et créer quelque chose vous-même. Tous les designs ne sont pas du pur contenu original. Le design est presque toujours basé sur autre chose ou inspiré de quelque chose. Cela aide de s’y exposer et d’avoir simplement une bonne idée des différentes mises en page qui existent.
Il existe des modèles plus typiques que vous trouverez utilisés pour les entreprises régulières dans le monde réel sur ThemeForest. Je trouve que des endroits comme celui-ci contiennent beaucoup de choses sophistiquées qui ne se transfèrent pas bien à de nombreux marchés commerciaux. Un peu comme il y a des trucs bizarres dans les défilés de mode de New York qu'aucune personne sensée ne porterait jamais, c'est comme ça que je vois beaucoup de trucs awwwards. Peut-être que si vous travaillez dans une startup technologique haut de gamme, certaines d'entre elles pourraient fonctionner, mais en créant des sites Web pour petites et moyennes entreprises ? Ce n’est pas vraiment le bon look et ne sera pas bien transféré.
Ensuite, une fois que j’ai trouvé quelques choses que j’aime, je trouve que c’est plus facile de dessiner mes créations sur papier. Je colle 4 à 5 morceaux de papier ensemble, j'ai commencé au crayon et j'ai terminé au marqueur. Juste un wireframe général. Rien d'extraordinaire.
Et puis je prends ce design et je vais sur Figma et j'essaie de le recréer, de l'affiner et de l'améliorer en ajoutant des couleurs, des images, du texte et un espacement approprié. Voici le lien figma de la maquette que j'ai dessinée à partir du dessin papier que j'ai réalisé.
Première ébauche utilisant Figma
Le client a adoré. Mais ils avaient quelques notes et voulaient des éléments supplémentaires ou modifiaient quelques éléments, ce qui est normal. Vous prenez en compte ces commentaires, jouez avec le fichier figma et l'envoyez en espérant que c'est ce qu'ils veulent. Voici la V2 du design figma original avec leurs modifications et demandes :
2ème brouillon utilisant Figma
3ème brouillon utilisant Figma
Cela commence vraiment à se mettre en place maintenant, du papier au Figma. C'est mon processus sur la façon dont j'aime commencer à concevoir un site Web. Passons maintenant aux détails sur COMMENT j’aime concevoir un site Web.
Pour plus de précision, je ne suis pas un designer qualifié. Ce sont des choses que j’ai apprises tout au long de mon processus et qui ont abouti à un certain succès et facilitent le processus.
Numéro 1: Il est important de comprendre la hiérarchie visuelle et de savoir comment mettre en page un site Web quels éléments sont les plus importants et lesquels ne le sont pas. Vous souhaitez que vos informations les plus importantes soient affichées bien en évidence, et non cachées derrière d'autres éléments ou encombrées par d'autres. Voici quelques excellentes ressources pour en savoir plus :
Lire 2étalons adoptent une hiérarchie visuelle
Lire les informations d'Adobe sur les principes de hiérarchie visuelle
J'aime aussi beaucoup cette vidéo sur la conception de pages de destination qui aborde la hiérarchie visuelle, la conception créative et les espaces blancs.
Regardez une bonne vidéo sur la conception de la page de destination
Et j'aime les informations contenues dans cette courte vidéo sur les espaces blancs :
Une bonne vidéo sur les espaces blancs
L'espace blanc est ÉNORME. Je vois beaucoup de portfolios et de sites Web en ligne et dans des forums dont le contenu est trop proche les uns des autres. Il n’y a pas de marge de manœuvre et le design semble encombré. Par exemple, sur tous mes sites Web, j'ai un remplissage de 50 pixels en haut et en bas pour chaque section du site sur mobile afin de maintenir le contenu espacé uniformément des bords du contenu au-dessus et en dessous. Parfois, je vois que ces sections n'ont que 10 à 20 pixels d'espace et ce n'est tout simplement pas suffisant. Ensuite, sur le bureau, je l'augmente à 75-100px pour mes grandes sections principales. Vos paragraphes doivent avoir une hauteur de ligne de 1,4 à 1,5 em pour un espacement optimal et une lisibilité facile. Je les vois parfois monter jusqu'à 1,7. Et si vous souhaitez créer un titre sur un paragraphe, assurez-vous qu'il fait au moins 1,5 fois la taille de police du paragraphe pour une bonne hiérarchie visuelle, et j'aime les mettre en gras pour aider également à les séparer et à attirer l'attention sur eux.
Pour la structure du site Web, j'aime faire ceci :
ATTERRISSAGE
h1 – Principale chose qu'ils font avec la phrase clé la plus importante
h2 - Soyez plus descriptif des services et solutions qu'ils proposent liés au h1
1 à 2 boutons d'appel à l'action (quelles sont les premières choses que vous voulez que le client fasse lorsqu'il arrive sur votre site Web ?)
SERVICES
- Que font-ils ? Quels problèmes résolvent-ils ? J'aime généralement faire des cartes pour ces sections. Peut-être avoir des icônes pour la couleur.
ABOUT
- L'histoire de l'entreprise, qui ils sont, pourquoi ils sont les experts, etc. Laissez le client découvrir qui est l'entreprise, aidez-le à l'humaniser et à se familiariser davantage avec elle. C’est là que le client se vend et pourquoi il constitue le meilleur choix.
CONTENU SUPPLÉMENTAIRE
Cela peut être n'importe quoi. Google aime voir du contenu et je recommande au moins 1 200 mots sur votre page d'accueil. J'aime utiliser la section centrale du site Web pour ajouter du contenu supplémentaire autour de leurs mots-clés et des services qu'ils proposent. Aide à mieux leur classement. Je l'ai mis ici parce que les gens ont tendance à se souvenir de la première et de la dernière parties du site Web. Nous avons donc les services en haut parce que nous voulons que les gens se souviennent de ce qu'ils font, et les témoignages en bas pour qu'ils se souviennent des belles choses que les gens ont à dire à leur sujet et soient ce dernier coup de pouce pour les choisir en fonction de leurs besoins. Placez donc votre contenu supplémentaire de classement de recherche au milieu. Cela fonctionne vraiment. J'aime aussi mettre des « raisons de nous choisir » dans cette action.
Cette section peut également contenir du contenu supplémentaire que le client souhaite afficher sur son site. Peut-être un processus étape par étape sur la façon dont se déroule leur processus d'estimation, ou nous mettons en évidence quelques produits et services, n'importe quoi.
GALERIE/PORTFOLIO
- Une collection des meilleurs travaux de votre client.
TÉMOIGNAGES/COMPARAISON CONCURRENTS
- Terminez sur une bonne note pour qu’ils se rappellent pourquoi votre service est le meilleur et les problèmes qu’ils résolvent. J'aime créer un lien vers une page de témoignages dédiée et ajouter tous leurs avis. C’est une mine d’or de contenu. Il s’agit d’un contenu organique et naturel rédigé par de vraies personnes contenant tous les mots-clés de vos clients. Les témoignages sont IDÉAUX pour un contenu gratuit permettant d’aider à se classer sur Google. Ajoutez-en autant que possible à cette page.
PIED DE PIED
- Mettez les coordonnées ici, peut-être un plan du site, le logo et les liens vers les réseaux sociaux
Et c’est la « mise en page » générale d’un site Web que j’aime faire. Une fois que vous avez cette structure, il est plus facile de concevoir un site Web car vous savez DE QUEL contenu vous avez besoin et OÙ il doit aller. C’est comme une sorte de peinture par numéros, mais au lieu de peindre avec un pinceau et de l’acrylique, vous peignez avec du contenu.
Et c'est tout !
Exposez-vous simplement à de bonnes conceptions et étudiez la manière dont le contenu peut être organisé, ayez une structure générale, dessinez-le sur papier, affinez-le dans Figma, utilisez-le pour l'envoyer au client pour approbation et ajustements, et développez-le à partir de cela. Une fois que vous avez compris, les choses deviennent beaucoup plus faciles.
De plus, si vous avez besoin d'aide pour créer une conception de bureau mobile et réactive, voici un autre article que j'ai écrit expliquant mon processus sur la façon dont je démarre d'abord un nouveau site Web pour mobile.
Conception de sites Web réactifs pour les débutants
Il existe une tonne d'ouvrages formidables en ligne sur la façon de devenir un meilleur designer, et ceux-ci sont géniaux et valent la peine d'être lus. Mais je ne vois pas vraiment de bon processus ou de feuille de route à suivre pour chaque site pour les développeurs qui débutent tout juste la conception. Il peut être fastidieux de parcourir toutes les règles et directives de conception, et je n'ai pas vraiment vu de bonnes ressources pour aider à structurer ces informations et à créer un processus à suivre dans lequel vous pouvez utiliser ces pépites de conception. . Je voulais donc rédiger un article rapide, qui puisse avoir un impact immédiat sur votre travail de conception et vous aider à démarrer. Je pense qu'il est très utile de savoir comment planifier votre site Web, puis d'utiliser tous les autres didacticiels et guides de conception pour affiner, peaufiner et créer quelque chose d'unique. J'espère que cela aide!
