Cet article évoque le travail de planification et de conception (design) que vous devez faire avant d'écrire votre code. Cela répond notamment aux questions : « Quelles sont les informations que je veux rendre disponibles sur mon site web ? », « Qu'est-ce que je souhaite utiliser comme polices et couleurs ? », « Que fait mon site web ? ».
Commençons par le commencement : planifier
Avant de faire quoi que ce soit, vous avez besoin d'idées. Qu'est-ce que votre site web devrait faire ? Un site web peut pratiquement faire tout ce que vous voulez mais pour votre premier essai, vous devriez garder les choses simples. Nous allons commencer par créer une simple page web avec un en-tête, une image, et quelques paragraphes.
Pour commencer, posez vous ces questions :
- De quoi parle votre site web ? Aimez-vous les chiens, New York, ou Pacman ?
- Quelles informations allez-vous présenter sur le sujet ? Écrivez un titre et quelques paragraphes, et trouvez une image que vous aimeriez mettre sur votre page.
- De quoi a l'air votre site web, dans des termes de plus haut niveau. Quelle sera la couleur de l'arrière plan ? Quelle sorte de police est appropriée : formelle, cartoon, gras et criard, subtile ?
Note : Des projets complexes nécessitent des lignes directrices (guidelines) détaillées qui précisent tous les détails de couleurs, de polices, d'espacement entre les éléments de la page, un style d'écriture adapté, et ainsi de suite. Ceci est parfois appelé un guide de design ou une charte graphique, vous pouvez en voir un exemple avec les lignes directrices utilisées pour Firefox OS.
Esquisse de votre concept
Ensuite, prenez un crayon et du papier et faite une esquisse de l'apparence que vous souhaitez de votre site. Pour votre première et simple page web, il n'y a pas beaucoup à esquisser, mais vous devriez prendre l'habitude de le faire dès maintenant. Cela aide vraiment, et vous n'avez pas à être Van Gogh !
Note: Même sur les sites web réels et complexes, l'équipe de design commence par faire des esquisses sur papier, puis des maquettes numériques en utilisant un éditeur graphique ou des technologies Web.
Les équipes Web intègrent souvent un designer graphique et un designer d'expérience-utilisateur (UX). Les designers graphiques, bien sûr, regroupent les visuels du site web. Les designers UX ont un rôle un peu plus abstrait qui consiste à s'occuper de la manière dont les utilisateurs expérimenteront et interagiront avec le site web.
Choix de vos composants
À ce stade, il est bon de commencer à regrouper le contenu qui apparaitra peut-être sur votre page web.
Texte
Vous devriez encore avoir vos paragraphes et votre titre puique vous y avez songé un peu plus tôt. Gardez les à proximité.
Couleur du thème
Pour choisir une couleur, utilisez une palette de couleurs et trouvez une couleur que vous aimez. Quand vous cliquez sur une couleur, vous verrez un étrange code à six caractères comme #4BE8D3. Ceci est appelé un code hexadécimal et il représente votre couleur. Copiez le code dans un endroit sûr pour l'instant.
Images
Pour choisir une image, allez sur Google Images et cherchez une image qui convient.
- Quand vous avez trouvé l'image que vous voulez, cliquez sur l'image.
- Appuyez sur le bouton Afficher l'image.
- Sur la page suivante, faites un clic-droit sur l'image (Ctrl + clic sur Mac), choisissez Enregistrer l'image sous, et choisissez un endroit sûr pour sauvegarder votre image. Alternativement, copiez l'adresse de l'image depuis la barre d'adresse de votre navigateur pour une utilisation prochaine.
Note : La plupart des images sur le Web, dont celles dans Google Images, sont protégées. Pour réduire votre probabilité de commettre une violation de droits d'auteurs, vous pouvez utiliser le filtre de licence de Google. Tout simplement 1) cliquez sur Outils de recherche, 2) ensuite sur Droits d'usage et 3) sélectionnez Réutilisation et modification autorisée.
Police
Pour choisir une police :
- Allez sur Google Fonts et faites défiler la page jusqu'à en trouver une que vous aimez. Vous pouvez aussi utiliser les contrôles sur la gauche pour filtrer plus précisément les résultats.
- Cliquez sur le bouton Add to collection à côté de la police que vous voulez.
- Cliquez sur le bouton Use dans le panneau en bas de la page.
- Sur la page suivante, faites défiler la page jusqu'aux sections 3 et 4, et copiez les lignes de code que Google vous donne dans votre éditeur de texte pour les garder pour plus tard.
