Concevoir un site Web

Auteur: Judy Howell
Date De Création: 25 Juillet 2021
Date De Mise À Jour: 1 Juillet 2024
Anonim
CREER UN SITE ? HTML/CSS #1 - LES BASES
Vidéo: CREER UN SITE ? HTML/CSS #1 - LES BASES

Contenu

Concevoir un excellent site Web peut sembler une tâche ardue, mais tant que vous gardez les bases à l'esprit, vous trouverez le processus intéressant et amusant. C'est plus que juste de la beauté! Nous allons vous montrer les bases et quelques directives générales pour vous aider à concevoir des sites Web que les gens visiteront encore et encore.

Avancer d'un pas

Méthode 1 sur 2: Les 3 règles de base

  1. Règle 1:Écoutez votre client. Vous êtes peut-être en train de concevoir "le plus grand site Web au monde de l'histoire de l'univers et au-delà", avec des noirs riches, des polices raffinées et des couleurs vives et artistiques pour un site qui crie "explorez-moi maintenant!" Malheureusement, votre client voulait une barre de menu orange avec des lettres rose vif et orange. Vous avez été licencié et votre meilleur site Web - sur lequel le client a les droits - se trouve quelque part sur son disque de sauvegarde, sans que personne ne le revoie.
    • Étudiez l'identité corporative de votre client. Demandez au client de vous montrer quelques sites Web qu'il aime. Non seulement cela vous donnera une idée de ce qu'ils aiment, mais cela vous donnera également quelques idées de design auxquelles vous n'auriez peut-être pas pensé.
    • Si vous pensiez que nous plaisantions sur le site Web orange et rose, considérez ce site cool et sophistiqué:
  2. Règle n ° 2:Connaissez votre public et ce qu'il recherche et adaptez votre design en conséquence. La raison pour laquelle les gens ont des sites Web est qu'ils veulent que d'autres personnes les voient. Il peut être informatif, commercial ou divertir un public cible spécifique. Votre travail en tant que designer est de savoir pour qui vous concevez et de les garder sur la page lorsqu'ils y arrivent.
    • Vous pourriez penser: «Si ça a l'air bien, ils resteront». Mais cela ne doit pas nécessairement être le cas. Prenons l'exemple de l'immobilier. Voici un site au design épuré et amusant. Il a beaucoup d'espace blanc qui donne un aspect ouvert, des couleurs vives et un format grand écran moderne avec des liens bien en vue:
    • Jetez maintenant un œil à cette approche de la vente de biens immobiliers dans la même zone: encombrée et très fréquentée, couleurs ternes et couvertes de publicité.
    • Devinez lequel fonctionne le mieux pour ceux qui recherchent une maison? Bon, celui où Maisons! Lorsque les gens recherchent des «maisons à vendre à Santa Monica», ils ne se soucient pas de l'apparence d'un site. Ils ne veulent pas lire sur l'agent immobilier ou voir de jolies photos de la ville. Ils veulent voir des maisons.
  3. Règle n ° 3:Écoutez-vous. Vous comprenez ce que veut le client et vous savez ce que recherche votre marché. Il est enfin temps de prêter attention à vous, la créatrice!
    • Créez un modèle dans le logiciel graphique de votre choix. Créez les éléments de votre page sur différents calques (afin que vous puissiez modifier les choses plus tard sans détruire tout le modèle). Ces éléments peuvent être:
      • Entête. C'est un élément qui est le même sur chaque page de votre site. L'en-tête se compose du titre et du logo du site, ainsi que des liens vers les autres parties du site (par exemple À propos, Contact, etc.). Visuellement et pratiquement, cela liera le tout. Il est recommandé de lier le premier bouton d'une barre de menus à la page d'accueil.
      • Par exemple, jetons un coup d'œil à Apple:
      • Comme pour la plupart des produits Apple, leur page d'accueil a un design très propre et simple. Notez la barre de menu en haut, avec des sujets logiques pour chaque bouton, plus un champ de recherche - toujours une bonne idée si votre site le prend en charge. Regardons maintenant une page de destination pour l'un des boutons, l'iPad, pour voir quelques éléments:
      • La barre de menus change uniquement en assombrissant le bouton iPad.
      • Le sujet de la page de destination est affiché en grandes lettres noires.
      • Un nouveau sous-menu apparaîtra afin que vous puissiez en savoir plus sur le produit. Si vous cliquez sur l'un de ces boutons, vous verrez que chaque page propose un nouveau contenu en fonction du sujet, mais sera identique dans la mise en page et le design.
      • Souvent, chaque sujet principal de votre barre de menus aura des sous-titres différents à remplir. Au lieu de créer une deuxième barre de menus, vous pouvez utiliser des menus contextuels comme cet exemple de Musicians Friend:
      • Barre latérale. Cela apparaîtra sur de nombreuses pages de votre site, mais pas nécessairement sur toutes - le contexte le détermine. Cependant, c'est un élément très important et doit être soigneusement conçu pour être intuitif et pas trop encombré. Contrairement à la barre de menus, le contenu d'une barre latérale peut être très dynamique. Découvrez ces deux barres latérales du spécialiste du marketing immobilier Trulia Le premier est destiné aux acheteurs:

Méthode 2 sur 2: Lignes directrices

  1. Concevez une bonne interface utilisateur. Positionnez les différents éléments du site Web tels que le titre, les barres latérales, les logos, les images et le texte au même endroit sur chaque page pour rendre votre site navigable et intuitif.
    • Gardez le même en-tête en haut de chaque page. Que le contenu de votre site autorise ou non de nombreux éléments répétitifs, assurez-vous que le haut de chaque page est le même.
    • Utilisez la logique dans votre conception. Les éléments sur une seule page doivent être classés logiquement par importance ou sujet; les différentes pages du site devraient l'être aussi.
  2. Créez un style cohérent. Là où la mise en page doit donner à votre site une cohérence structurelle, le style doit fournir une harmonie thématique.
    • Tenez-vous en à deux ou trois couleurs principales et assurez-vous qu'elles vont bien ensemble.
    • Évitez d'utiliser trop de styles ou de tailles de police; si vous souhaitez en alterner quelques-uns, utilisez-les de la même manière sur chaque page.
    • Utilisez les feuilles de style en cascade (CSS) pour conserver un style uniforme et faciliter la modification des éléments sur l'ensemble d'un site Web sans avoir à accéder à chaque page séparément.
  3. Maximisez la lisibilité. Pour faciliter la lecture de votre texte, vous pouvez le diviser en parties plus petites.
    • Utilisez des sous-titres et un espacement approprié pour séparer chacune des parties.
    • Utilisez des lettres en gras ou des tailles différentes pour montrer la hiérarchie et l'importance des sujets.
    • Faites attention à la façon dont vous traitez le texte. Ne réduisez pas la taille de la police et augmentez l'interligne pour faciliter la lecture de gros morceaux de texte. Les grandes parcelles de texte sont plus difficiles à lire; le décomposer en petits paragraphes.
  4. Rendez votre site Web lisible universellement. Utilisez du HTML standard et évitez les balises, les fonctionnalités et les plug-ins qui ne sont disponibles que pour une seule marque ou version d'un navigateur.
    • Alors que la plupart des navigateurs et ordinateurs modernes peuvent gérer des images complexes, tout sera plus élégant si vous réduisez et optimisez vos images pour le Web. Pesez l'importance de la qualité par rapport à l'importance de la vitesse.
  5. Testez votre site Web. Sois sûr que chaque lien fonctionne comme vous vous en doutez, et les images s'affichent correctement.
    • Vous voudrez peut-être organiser des tests utilisateur en demandant aux membres de votre public cible de tester la clarté et la facilité d'utilisation de votre conception et de fournir des commentaires sur votre site Web.
  6. Publiez votre site Web. Achetez un nom de domaine si vous ne l'avez pas déjà fait. Vérifiez régulièrement si les liens fonctionnent toujours et écoutez les suggestions que les visiteurs vous envoient par e-mail.

Conseils

  • Bien que vous soyez libre de concevoir la mise en page en fonction de votre propre vision personnelle ou de ce que vous avez vu sur d'autres sites, il peut être plus facile d'acheter un design prêt à l'emploi.
  • Ne bombardez pas le visiteur avec des images mignonnes et spéciales. L'animation Flash, les couleurs vives, les arrière-plans à motifs et la musique qui joue automatiquement au chargement de la page étaient des expériences amusantes dans les années 90, mais elles vont maintenant effrayer les utilisateurs. Tenez-vous-en à des arrière-plans simples qui contrastent avec la couleur du texte pour une lisibilité maximale.
  • Vous pouvez toujours utiliser CSS pour optimiser l'espacement des paragraphes.
  • Pour les visiteurs malentendants ou malvoyants, vous pouvez sous-titrer des vidéos, transcrire l'audio et ajouter un message d'accessibilité. Alors que les tableaux peuvent être un moyen efficace d'organiser les informations, les visiteurs malvoyants utilisant un logiciel de lecture d'écran peuvent ne pas entendre le contenu dans le bon ordre.
  • Permettez à vos visiteurs d'économiser de l'encre: utilisez une feuille de style distincte pour imprimer les pages.
    • Désactivez les images d'arrière-plan lors de la définition des paramètres d'impression.
    • Utilisez du texte noir sur fond blanc.
    • Supprimez la barre de menus et les images inutiles.

Mises en garde

  • Évitez le plagiat et respectez toutes les lois sur les droits d'auteur. N'incluez pas d'images aléatoires que vous trouvez en ligne ou même d'éléments structurels sans approbation. Tout ce que vous utilisez sur votre site doit être à la fois légal et éthique.