C'est probablement l'une des étapes les plus importantes de tout le processus de développement Web. En plus de tout le codage, le style et les choses techniques, nous, en tant que développeurs Web, Que devons faire - nous devons également planifier et réfléchir à la façon dont nous voulons que notre site ressemble à la fin. Surtout pour les freelancers ou les développeurs Web indépendants.

Construire une maison

Pensez à construire une maison ... Pensez-vous que les constructeurs commencent à construire une maison au hasard en plaçant des briques et du bois? Pensez-vous que tout s'accorde comme par magie? Non, absolument pas! Il a été planifié, esquissé et soigneusement décidé sur la façon de le construire, les matériaux nécessaires et les caractéristiques de la maison.

C'est presque la même façon dont nous devrions penser lors de la planification d'un site Web. De la même manière avec la maison, nous devons planifier la mise en page que nous utiliserons, les couleurs, les fonctionnalités incluses, les images ou si nous utiliserons des ressources de style supplémentaires et s'il y aura des formulaires ou une capture d'entrée, la liste est longue. .

Couleurs

Décider à l'avance d'un jeu de couleurs / d'une palette pour votre site Web vous aidera vraiment à gagner du temps lorsque vous codez et développez votre site Web. Choisissez une couleur dominante et une couleur contrastante, choisissez également quelques variantes différentes de ces couleurs pour agir comme survols de boutons, liens, etc., ainsi que des couleurs de texte.

Famille de polices

C'est une bonne idée de déterminer au départ la police que vous souhaitez utilise sur votre site Web. Vous pouvez télécharger cette police et la préparer pour le développement. La police en dit vraiment long sur un site Web, il faut donc réfléchir à cette partie de la phase de planification si la police est lisible, facile à regarder et correspond à son objectif. Par exemple. S'il s'agit d'un site Web professionnel ou d'un portfolio, vous voudrez une belle police d'aspect professionnel. En comparaison, s'il s'agissait d'un site Web amusant de style blague, une police plus ludique conviendrait peut-être.

Images

Si vous prévoyez d'utiliser des images sur votre site Web, essayez de les préparer à l'avance et placez-les dans un dossier afin que vous puissiez vous concentrer sur le développement lors du codage. Vous devez toujours viser à optimiser les images également. Google Lighthouse est un bon moyen d'auditer un site Web pour obtenir des informations sur les performances et l'accessibilité, y compris l'optimisation de l'image.(je ferai un article dessus pour mieux vous expliquer).

La disposition

Vous voulez avoir une idée de la façon dont votre contenu sera présenté sur vos pages Web individuelles. Pensez à l'espacement de vos "conteneurs" de contenu, si vous avez un site Web centré ou un site Web pleine largeur, si vous avez un site Web à colonnes divisées ou plusieurs colonnes, etc.

Esquisser

La meilleure façon de planifier votre mise en page est de l'esquisser.

✏️ Utilisez un crayon (ou un stylo) et du papier - dessinez exactement ce qu'il y a dans votre tête sur un morceau de papier, et cela pourrait servir de mise en page / conception de base pour votre site Web. Cela élimine le jeu de devinettes lors du développement de votre site Web et vous garantira une mise en page cohérente.

Maquettes

Vous pouvez planifier votre mise en page un peu plus loin avec des wireframes. Que sont les wireframes? Ce sont comme un "croquis numérique" de votre mise en page / conception faite sur l'ordinateur où vous pouvez vraiment solidifier vos idées. Cette étape n'est cependant pas nécessaire si vous réussissez à dessiner votre mise en page à la main.

J'espère que vous avez apprécié ce court article sur la planification d'un site Web. C'est TRES important.