Quel sera l'aspect de votre site web ?

Quel sera l'aspect de votre site web ? parle de planifier et concevoir (design), travaux à faire avant d'écrire du code. Voici les questions que cela comprend : « Quelles informations mon site web offrira-t-il ? », « Quelles polices de caractères et quelles couleurs souhaité-je ? » et « Que fait mon site web ? ».

Commençons par le commencement : planification

Avant de faire quoi que ce soit, vous avez besoin d'idées. Qu'est-ce que votre site web doit-il réellement faire ? Un site web peut pratiquement faire tout ce que vous voulez, mais pour un premier essai, vous devez 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 :

  1. De quoi va parler mon site web ? Aimez-vous les chiens, New York ou Pacman ?
  2. Quelles informations vais-je présenter sur le sujet ? Écrivez un titre et quelques paragraphes, et trouvez une image que vous aimeriez mettre sur votre page.
  3. Quelle sera l'apparence de mon site web, en simple termes de survol ? Quelle sera la couleur de l'arrière plan ? Quelle sorte de police de caractères est appropriée : formelle, dessin animé, grasse et lourde, subtile ?

Note : Les projets complexes nécessitent des lignes directrices (guidelines) détaillées précisant tout : couleurs, polices, espacement entre éléments de la page, style d'écriture adapté, etc. Ceci est parfois appelé un guide de conception ou une charte graphique, vous pouvez en voir un exemple dans Firefox OS Guidelines.

Esquisse de votre concept

Ensuite, prenez un crayon et du papier et faites une esquisse de l'apparence souhaitée pour votre site. Pour une 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 — vous n'avez pas à être Van Gogh !

Note : Même sur les sites web réels et complexes, l'équipe de conception commence par faire des esquisses sur papier, puis des maquettes numériques en utilisant un éditeur graphique ou des techniques Web.

Les équipes Web intègrent souvent un concepteur graphique et user-experience (UX). Les concepteurs graphiques, bien sûr, regroupent les visuels du site web. Les concepteurs UX ont un rôle un peu plus abstrait qui consiste à s'occuper de la manière dont les utilisateurs découvriront et interagiront avec le site web.

Choix de vos ressources

À ce stade, il est bon de commencer à regrouper les contenus qui apparaitront peut-être sur votre page web.

Texte

Vous devriez encore avoir vos paragraphes et votre titre puisque 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 #660066. 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.

  1. Quand vous avez trouvé l'image que vous voulez, cliquez sur l'image.
  2. Appuyez sur le bouton Afficher l'image.
  3. 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 enregistrer l'image. Ou bien, copiez l'adresse web de l'image depuis la barre d'adresse de votre navigateur pour une utilisation ultérieure.

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'auteur, vous pouvez utiliser le filtre de licence de Google. Tout simplement 1) cliquez sur Outils de recherche, puis 2) Droits d'usage :

Police de caractères

Pour choisir une police :

  1. 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.
  2. Cliquez sur l'icône « + » (ajouter) à côté de la police que vous voulez.
  3. Cliquez sur le bouton « * Family Selected » dans le panneau en bas de la page (« * » dépend du nombre de polices sélectionnées).
  4. Sur la fenêtre contextuelle suivante, vous pouvez copier les lignes de code que Google vous donne dans votre éditeur de texte pour les garder pour plus tard.