CONCEVOIR SA MAQUETTE WEB
Concevoir un site web, c'est d'abord en définir le contenu, puis l'architecture de celuici. L’établissement d’un projet web, c'est avant toute chose, un fichier texte.
Travaillez donc avec votre éditeur de texte favori, avant de vous lancer dans le HTML.
Il convient de se poser d’abord quelques questions avant de passer à l'action. Un site web, pour quoi faire ? Voulez-vous un site vitrine (pure " carte de visite ", de présentation) ou un site d'information (plus dynamique, plus agitateur) ? Pour satisfaire quel(s) public(s) ? Comment le web peut-il améliorer votre communication ? A quelles questions des lecteurs votre site devra-t-il répondre ? Quel message voulez-vous leur faire passer ? Quel type de contacts aurez-vous avec lui ? (e-mail, liste d'annonces, forum de discussion, formulaires ). Comment évoluera votre site ?
Notion d'ergonomie
L'ergonomie est l'utilisation de connaissances scientifiques relatives à l'homme (psychologie, physiologie, médecine) dans le but d'améliorer son environnement de travail. L'ergonomie se caractérise généralement selon deux composantes :
L'efficacité, consistant à adopter des solutions appropriées d'utilisation d'un produit, au-delà du bon sens du concepteur ;
L'utilisabilité, marquant l'adéquation aux capacités de l'utilisateur. Elle se décline en : confort d'utilisation, consistant à réduire au maximum la fatigue physique et nerveuse. sécurité, consistant à choisir des solutions adéquates pour protéger l'utilisateur ;
Appliquée au domaine du web, l'ergonomie d'un site web peut être définie par sa capacité à répondre efficacement aux attentes des utilisateurs et à leur fournir un confort de navigation.
La principale difficulté que tente de lever l'ergonomie est la diversité des profils des visiteurs. Les critères suivants sont généralement déterminants pour un site web :
attentes de l'utilisateur : tous les visiteurs du site ne recherchent pas nécessairement la même information ou n'ont pas nécessairement les mêmes exigences en terme de graphisme.
● habitudes de l'utilisateur : elles correspondent à des comportements acquis.
● âge de l'utilisateur : il caractérise en général la capacité d'adaptation de l'utilisateur et sa rapidité de navigation.
● équipements : il s'agit d'une des difficultés majeures. En effet, l'affichage du site pourra varier d'un équipement à l'autre, en particulier selon le navigateur et la résolution d'affichage.
● niveau de connaissances : tous les visiteurs du site ne sont pas nécessairement des as de l'informatique. L'ergonomie du site doit être pensée pour l'utilisateur le moins expérimenté.
Critères d'ergonomie
Les principaux critères d'ergonomie d'un site web sont les suivants (liste non exhaustive) :
Critère Sous-critère Description
Sobriété Simplicité un site web très épuré renforcera la crédibilité de l'organisation.
Peu chargé Les images animées sont déconseillées. Les animations doivent être privilégiées pour afficher des messages forts car elles attirent le regard de l'internaute.
Lisibilité Clarté Il convient de prendre en compte le fait que les informations écrites sont moins faciles à lire sur un écran que sur papier (25% de temps de lecture supplémentaire). Ainsi, le texte devra être suffisamment aéré.
Structuration Le texte devra être structuré à l'aide de
paragraphes et de titres de différents niveaux, afin d'en faciliter la lecture
Organisation Les éléments d'informations doivent être hiérarchisé par niveau d'importance. Les éléments les plus importants doivent figurer en haut de page.
Utilisabilité Facilité de La « règle des 3 clics », globalement suivie, navigation stipule que toute information doît être accessible en moins de 3 clics
Repérage A tout moment le visiteur doit pouvoir être en mesure de se repérer dans le site. Qui plus est, le logo doit être présent sur toutes les pages, au même emplacement, et une charte graphique uniforme doit être appliquée à l'ensemble des pages afin de permettre à l'usager de savoir qu'il est toujours sur le même site. Un plan du site peut constituer un excellent moyen de permettre au visiteur de savoir où il est.
Liberté de Le site doit laisser la possibilité à l'utilisateur de navigation revenir à la page d'accueil et aux principales rubriques par un simple clic, quelle que soit la page sur laquelle il se trouve (grâce à une barre de navigation par exemple). Dans la mesure du possible, l'utilisateur devra pouvoir naviguer dans le contenu selon des chemins transversaux. Les pages d'introduction ou pages interstitielles (splash screen) sont à éviter car elles énerveront la plupart des visiteurs.
Visibilité de L'URL de la page en cours doit être constamment l'adresse visible et suffisamment explicite pour permettre à l'utilisateur de se repérer afin de pouvoir revenir facilement.
Tangibilité de Les informations présentes sur le site doivent être l'information qualifiées, c'est-à-dire que des éléments permettant d'en connaître la date de mise à jour où l'auteur doivent être présents. D'autre part, il est néfaste pour un site de proposer une façade accrocheuse aboutissant sur des sections en travaux.
Homogénéité de Les éléments de navigation doivent être situés au
la structure même endroit sur toutes les pages, si possible avec une présentation uniforme d'une page à une autre.
Rapidité Temps de Le temps d'affichage d'une page doit être le plus chargement petit possible car la majorité des internautes ne patientent pas plus de 15 secondes lors du chargement d'une page. Ce facteur dépend notamment de la connexion du visiteur, de la taille de la page et de ses images, ainsi que des capacités du serveur web.
Images Il convient d'optimiser au maximum la taille des optimisées images, en choisissant un format adapté et un nombre de couleurs le plus petit possible. Il est recommandé de ne pas dépasser 30 à 40 ko maximum par image, sauf action volontaire de votre part (par exemple dans le cas d'une image téléchargeable en haute résolution).
Images non Pour la même raison, les images doivent redimensionnée préférentiellement être dans leur taille réelle, sans s redimensionnement.
Interactivité Liens L'interactivité caractérise les interactions hypertextes possibles entre l'utilisateur et le site web. Les liens hypertextes offrent de vastes possibilités dans ce domaine et permettent d'offrir au visiteur des parcours multiples, au gré de ses envies. Il est conseillé de mettre suffisamment de liens entre les différentes pages. A l'inverse, trop de liens peuvent rendre difficile la lecture.
Découpage de Afin de permettre au visiteur de mieux assimiler l'information l'information et, dans certains cas de susciter sa curiosité, il est préconisé de découper
l'information. Le découpage de l'information peut notamment se traduire par un texte d'accroche et un lien hypertexte conduisant à la suite de l'article.
Facilitation des Il est souhaitable de tout mettre en place pour échanges faciliter l'échange avec les visiteurs, notamment afin de recueillir leurs impressions et leurs demandes, en vue de faire évoluer le site. A minima, le visiteur doit pouvoir trouver facilement le moyen de contacter une personne, par courrier électronique ou grâce à un formulaire de contact.
Adaptabilité L'adaptabilité caractérise la possibilité de
personnalisation du site web sur intervention de l'utilisateur.
Redimensionne Les textes du site doivent préférentiellement ment des polices utiliser des polices dont la taille n'est pas exprimée en valeur absolue, afin de laisser la possibilité de les redimensionner aux personnes le souhaitant.
Adaptativité L'adaptativité caractérise la possibilité de personnalisation du site web à personnaliser automatiquement le site web sans intervention de l'usager.
Accessibilité Universalité de L'accessibilité est la capacité du site web à être l'accès consulté universellement, c'est-à-dire par tout type d'utilisateurs, y compris les malvoyants et non voyants. Il existe un certain nombre de règles d'accessibilité simples, à respecter afin de permettre l'accès au site web au plus grand nombre, quelle que soit leur configuration logicielle et matérielle ou leur handicap.
Interopérabilité Le respect des standards, en particulier les
dupermet de garantir un bon niveau d'interopérabilité, c'està-dire la capacité du site web à être consultable par différents clients logiciels.
Transparence Les formats utilisés doivent préférentiellement des formats être transparents, c'est-à-dire consultable en mode texte. Ainsi le HTML sera utilisé préférentiellement au Flash. Par ailleurs, les images ou animation ne doivent pas se soustraire aux informations textuelles ou provoquer une gêne pour les non-voyants. Les illustrations graphiques doivent donc uniquement être utilisées en tant que complément visuel au texte.
Légende Une légende ou un texte de remplacement doivent être prévu en lieu et place des images (grâce à l'attribut alt), afin de permettre aux déficients visuels de comprendre le sens de l'image.
Choix des Les couleurs doivent être choisies afin de laisser
couleurs l'information lisible aux personnes ne distinguant pas les couleurs correctement (daltoniens).
Usage sain des L'information doit pouvoir être accessible, y feuilles de style compris sans feuille de style.
Contraste Le niveau de contraste entre la couleur d'arrièreadapté plan et le texte en avant plan doit être suffisant pour en permettre la lecture aux malvoyants.
Taille des La taille des polices doit être adaptable afin de polices laisser la possibilité de grossir les textes si modifiable nécessaire.
Les polices utilisées ne doivent également pas être trop petites, au risque de fatiguer la vue des lecteurs ou d'être illisibles.
La structure d'un site web doit être le reflet d'une stratégie. Des scénarios de navigation doivent être élaborés afin de pousser l'utilisateur à suivre un chemin dans le site web.
Néanmoins il ne faut pas emprisonner le visiteur et le laisser libre de s'en aller ou de changer de rubrique à tout moment.
Des études ont montré que l'oeil de l'internaute moyen parcourt généralement la page web selon un cheminement global en « zigzag » commençant à l'angle supérieur gauche, jusqu'à l'angle inférieur droit.
La zone centrale supérieure représente ainsi un endroit particulièrement stratégique pour placer des informations.
La structuration du site web consiste à bâtir l'architecture globale du site web en organisant les différentes informations.
Il s'agit dans un premier temps de faire l'inventaire des contenus du site web et de les regrouper par thématique afin de constituer des rubriques, on parle alors de rubriquage.
Dès lors que les principales rubriques sont identifiées (on veillera à ne pas dépasser une dizaine de rubriques principales), il faut alors déterminer leur organisation et leur découpage en sous-rubriques. La plupart du temps la structuration du site peut se représenter sous la forme d'une arborescence dont la racine est la page d'accueil :
Certaines caractéristiques se retrouvent généralement d'un site web à l'autre :
● Logo du site web en haut à gauche. Un clic sur ce logo conduit directement à la page d'accueil du site ;
● Lien vers la page d'accueil présent sur chaque page du site ;
● Eléments de navigation présents sur chaque page afin de permettre à l'utilisateur de se situer dans le site et de revenir facilement à la rubrique principale.
Les éléments de navigation sont des outils permettant au visiteur de savoir où il se situe dans le site, de revenir d'où il vient et de se déplacer dans les rubriques. Il existe plusieurs moyens de mettre en oeuvre des éléments de navigation :
● Le fil d'ariane ;
● La navigation par onglets ; ● La carte du site.
On appelle fil d'ariane (ou chemin de fer et en anglais breadcrumbs trail), un outil de navigation constitué d'une suite de liens hiérarchisée. Le fil d'Arian représente le chemin de navigation et permet à l'usager :
● de se repérer dans le site
● de remonter facilement aux rubriques principales.
Un fil d'Ariane se présente sous la forme suivante : [Accueil] > Webmastering > Navigation
Un fil d'Ariane possède les caractéristiques suivantes :
● Liens séparés par le caractère « > », afin de symboliser la notion de hiérarchie.
● Dernier lien non cliquable et en gras. Il représente la page sur laquelle le visiteur se trouve.
Le terme anglais « breadcrumb » (littéralement « miette de pain ») fait référence au conte de Grimm, « Hansel et Gretel », relatant l'histoire de deux enfants perdus dans la forêt laissant tomber des morceaux de pain pour retrouver leur chemin.
Le terme français « fil d'Ariane » se réfère à la mythologie grecque. Ariane, amoureuse de Thésée, lui confie une pelote de laine lorsqu'il s'engouffre dans le labyrithe pour tuer le Minotaure. En la déroulant, puis en l'enroulant à nouveau, Thésée parvient à sortir du labyrinthe.
Les onglets sont des outils de navigation utiles permettant de distinguer des rubriques dans un site web et de passer facilement de l'une à l'autre. Des codes couleurs peuvent également être utilisés afin de renforcer la différenciation entre les rubriques.
Un plan du site (ou carte du site, en anglais site map) permet aux internautes d'appréhender le site dans sa globalité en un seul coup d'oeil. Un item « vous êtes ici » peut de plus permettre à l'internaute de se situer dans le site.
La présence de flêches de navigation (suivant, précédent, retour au chapitre, retour à la page d'accueil) permet de fournir une navigation intuitive à l'utilisateur.
Le terme « webdesign » désigne la discipline consistant à structurer les éléments graphiques d'un site web afin de traduire, à travers une dimension esthétique, l'identité visuelle de la société ou de l'organisation. Il s'agit ainsi d'une étape de conception visuelle, par opposition à la conception fonctionnelle (ergonomie, navigation).
L'objet du webdesign est de valoriser l'image de l'entreprise ou de l'organisation par le biais d'éléments graphiques afin de renforcer son identité visuelle et de procurer un sentiment de confiance à l'utilisateur. Néanmoins, en vertu des critères d'ergonomie, un site web doit avant tout répondre aux attentes des utilisateurs et lui permettre de trouver facilement l'information qu'il cherche.
Le webdesign est ainsi un compromis entre une présentation possédant un graphisme époustouflant, permettant de donner une crédibilité et une image de marque à l'entreprise et une navigation sobre (voire dépouillée) permettant à l'utilisateur de trouver facilement ce qu'il cherche.
Par extension le terme webdesigner désigne le métier consistant à concevoir le design d'un site web.
Le design d'une page web est avant tout un acte artistique mettant en oeuvre l'inventivité et la création. Le but de ce guide est de donner quelques éléments clés permettant d'obtenir un design efficace, néanmoins une bonne source d'inspiration peut consister à visiter des sites de référence, notamment des sites professionnels. Il est notamment intéressant d'étudier comment chacun d'entre-eux dispose l'information, comment les menus et les blocs d'information sont mis en avant et d'une manière générale de déterminer ce qui fait qu'un site paraît pro.
Elle aboutit généralement à la création de modèles de pages (en anglais templates), servant de gabarits pour la création du site web. Les templates sont des images, créées sous forme de calques, ou bien des pages web représentant le squelette graphique d'une page type.
La structure traditionnelle d'une page web est la suivante :
● un logo situé en haut à gauche. La plupart du temps le logo est cliquable et mène à la page d'accueil ;
● une zone de navigation (menu), située à gauche et/ou à droite ;
● un en-tête contenant le nom du site, un bandeau de navigation et une zone prévue pour une bannière (publicitaire ou non) ;
● un corps de page, contenant l'essentiel de l'information ;
● un pied de page regroupant des informations utiles telles que la date de mise à jour, un lien vers un formulaire de contact, un plan d'accès, etc.
Il est essentiel de distinguer dans le template ce qui relève d'éléments invariables, identiques sur toutes les pages, ou bien variables d'une page à l'autre.
On trouve une tendance générale à construire les pages de la façon suivante:
On trouvera de légères variantes avec le menu à droite ou en haut, ou encore deux colonnes plutôt qu'une, mais la tendance générale est établie sur ce schéma. Cette standardisation s'explique par le fait qu'il est plus facile pour l'internaute d'y retrouver l'information.
Bien entendu, il n'est pas obligatoire de respecter ce type de mise en page et il appartient à chacun de présenter le contenu de ses pages comme il le souhaite. Certains secteurs d'activité ont même tout intérêt à jouer la carte de l'originalité.
On appelle « charte graphique » (en anglais graphic charter) le document synthétique récapitulant les règles de présentation des éléments graphiques d'un site web, traduisant son identité visuelle.
La charte graphique définit l'habillement graphique de la page, notamment les tailles, couleurs et apparences des textes, images et boutons du site ainsi que le positionnement relatif des objets dans la page.
Une maquette est un site web factice et sommaire (prototype) présentant le graphisme du site et sa navigation. La maquette permet de formaliser la conception du site et constitue généralement l'étape de validation de cette phase, pour passer à la phase de réalisation.
La maquette représente les pages principales du site (sans contenu) à l'aide de pages statiques et permet de simuler la navigation. Ainsi, les éléments dynamiques tels que le moteur de recherche pourront par exemple conduire à une page présentant des résultats factices.
La taille de la page web dépend essentiellement de la définition d'affichage (le terme résolution est utilisée à tort) des internautes.
En terme de largeur, l'idéal est d'opter pour une valeur inférieure à la définition horizontale de la majorité des visiteurs, afin de ne pas les contraindre à faire défiler l'écran avec l'ascenceur horizontal. Une page courte permet en effet au visiteur de survoler facilement l'information pour repérer les éléments qui l'intéressent.
Concernant la longueur, il est souhaitable de ne pas dépasser trois à cinq hauteurs d'écran. En effet, les pages trop longues risquent de ne pas être lues en entier et sont plus longues à charger.
Pour garantir un affichage optimal pour la majeure partie des visiteurs il existe plusieurs stratégies :
● Choisir la plus petite largeur supportée par le plus grand nombre (entre 600 et 800 pixels de largeur par exemple) ;
● Choisir une page comportant des tableaux invisibles de largeurs variables (définies en pourcentages) ;
● Détecter la résolution des visiteurs à l'aide d'un script (en javascript par exemple), et rediriger le visiteur vers une page de la bonne largeur. Cette méthode nécessite que les visiteurs aient un navigateur avec le Javascript activé et demande de créer autant de pages que de largeurs souhaitées .
Largeur fixe ou extensible ?
Après cette première réflexion pour déterminer la tendance de votre mise en page, vous devrez vous poser la question de savoir si vous donnez à votre site une largeur fixe ou extensible.
En effet, il y a ici un phénomène important à gérer lors de la conception d'un site, il s'agit de la résolution d'écran.
En consultant les propriétés d'affichage de votre ordinateur (Clic droit sur le bureau + propriétés), l'onglet Paramètres vous indique la résolution de votre écran comme le montre l'image ci-dessous:
Ici, l'écran est réglé avec une résolution de 1440 x 900 pixels. Cela signifie que l'écran affiche une fenêtre de 1440 pixels horizontalement et 900 verticalement. Il est bien entendu possible de choisir la résolution qui correspond le mieux à ses préférences mais c'est là qu'intervient le problème lors de la mise en page d'un site web car on ne connaît pas la résolution que chaque internaute a choisi. Il est donc nécessaire de construire des pages qui s'adaptent aussi bien à une résolution de 1024 x 768 qu'une autre de 1280 x 1024.
La tendance générale consiste alors à choisir entre un site de largeur fixe (exemple 960 pixels) centré horizontalement et un site à largeur variable s'adaptant à la largeur de la fenêtre.
Exemple de largeur fixe:
La largeur du site reste la même quelque soit la résolution de l'écran mais les bandes latérales sont plus ou moins larges.
Exemple de largeur extensible:
Le site s'adapte à la largeur de la fenêtre en variant la largeur de la colonne centrale de texte.
Lors de la création des pages, la position des information a son importance. Etant donné le sens de lecture des informations (en diagonale du coin supérieur gauche au coin inférieur droit), l'information située en haut de page aura plus de chances d'être lue par les internautes.
Il est conseillé de ne pas utiliser plus de trois couleurs différentes dans un site web afin de respecter le critère de sobriété. Le choix des couleurs devra correspondre, le cas échéant, aux couleurs de l'organisation (notamment aux couleurs du logo) et exprimer une ambiance particulière.
Quel que soit le choix des couleurs, il est recommandé d'établir une couleur prédominante, représentant la majeure partie de la page web, et une ou plusieurs couleurs secondaires plus dynamiques (plus vives), en moindres proportions , afin de mettre des éléments en exergue.
Les couleurs possèdent une symbolique implicite. Il est donc important de les choisir en connaissance de cause. En effet, les couleurs influent sur le comportement des individus :
● physiquement : appétit, sommeil, température du corps, etc.
● émotionnellement : sentiment de peur, de sécurité, de joie, etc. ● psychologiquement : dynamisme, concentration, etc.
Le tableau ci-dessous récapitule la signification classiquement associée aux couleurs
:
Couleur Symbolique méliorative Symbolique Domaine
péjorative
Bleu Calme, confiance, autorisation, Froid, sommeil Voile, nouvelles apaisement, sérénité, protection, technologies, sérieux, mystique, bonté, eau, informatique,
espace, paix médecine
Violet Délicatesse, passion, discrétion, Mélancolie, Culture, modestie, religion. tristesse, deuil, politique
insatisfaction
Rose Charme, intimité, femme, beauté Naïveté Journal personnel, femmes
Rouge Chaleur, force, courage, Violence, colère, Luxe, mode, dynamisme, triomphe, amour, danger, urgence, sport,
enthousiasme. interdit, sang, marketing, enfer. médias
Orange Tiédeur, confort, gloire, bonheur, Feu, alerte Divertissement, richesse, honneur, plaisir, fruit, sport, voyage odeur, tonus, vitalité.
Jaune Lumière, gaieté, soleil, vie, Tromperie, Tourisme pouvoir, dignité, or, richesse, égoïsme,
immortalité. jalousie, orgueil,
alerte
Vert Nature, vie végétale, secours, Découverte, équilibre, foi, apaisement, repos, nature, voyage,
confiance, tolérance, espoir, éducation orgueil, jeunesse, charité.
Brun Calme, philosophie, terroir. Saleté Environnement
La composition des couleurs a également une influence sur la perception des volumes. La composition des couleurs peut permettre de dégager une sensation de bien être, aussi bien pour la décoration d'une maison, que pour le graphisme d'un site web.
Le cercle chromatique est un bon outil permettant d'apréhender les interactions entre les couleurs. Le cercle chromatique est une représentation circulaire des couleurs, sur laquelle figurent les couleurs suivantes :
● Les couleurs primaires (rouge, jaune, vert), couleurs « pures », ne pouvant être obtenues par mélange d'autres couleurs ;
● Les couleurs secondaires (cyan, magenta, jaune), obtenues par mélange à parts égales de deux couleurs primaires adjacentes. Les couleurs secondaires sont diamétralement opposées à leur couleur complémentaire (soustractive) sur le cercle chromatique ;
● Les couleurs tertiaires, obtenues par mélange d'une couleur primaire et d'une couleur secondaire.
Les couleurs sont également catégorises en couleurs « chaudes » (dont le ton est proche du rouge) et « froides » (dont le ton est proche du bleu).
Il existe des règles universelles régissant l'harmonie des couleurs, dûes à des propriétés physiques de l'oeil. En effet, lorsqu'il contemple une couleur, l'oeil crée automatiquement, sur son contour, un filtre de la couleur complémentaire. On parle de « contraste simultané ». Avec ce mécanisme, la perception des couleurs dépend des couleurs avoisinantes. Ainsi, le jaune paraîtra plus orangé lorsqu'il est associé à du bleu et le bleu paraîtra plus violet. Un bleu à côté d'un rouge apparaîtra vert, etc.
Par ailleurs, des couleurs voisines sur le diagramme chromatique créent une sensation d'équilibre pour l'oeil, en vertu de l'absence de contraste, on parle ainsi d'« harmonie d'analogie ».
Il existe donc globalement deux façons principales de choisir des couleurs harmonieuses :
● en choisissant des nuances d'une même couleur, soit des couleurs de même teinte dont les tons sont proches,
● en mêlant des couleurs complémentaires (chaudes et froides), c'est-àdire des couleurs éloignées sur le diagramme chromatique. Pour deux couleurs, il suffit de choisir des couleurs complémentaires, diamétralement opposées ; pour trois couleurs, les couleurs choisies doivent former un triangle équilatéral, etc.
Enfin, des éléments de couleur chaude paraîtront globalement plus grands que des éléments de couleur froide.
Les images permettent d'agrémenter un site web et de le rendre plus gai. Néanmoins l'abus d'image peut gêner le confort visuel, ainsi que le chargement des pages.
Les webmasters débutant aiment à égayer leur site avec des animations amusantes glanées sur le web. Dans la mesure du possible il est préférable de s'en passer car elles peuvent énerver le lecteur et car elles donnent un caractère amateur au site. Lorsque l'on parle d'images sur un site web, on peut tout de suite distinguer deux catégories: celles crées par le webdesigner, il s'agit de la bannière, le logo, le menu, les boutons et autres éléments graphiques qui font partie intégrante du design du site et celles fournies par le client en vue d'illustrer l'information. Il s'agit bien souvent de photos présentant un lieu, un objet ou une personne
La qualité des images
La résolutiondesécrans n'étant pas supérieure à 72dpi pour la majorité, le web a ses limites. En effet, la qualité d'une image étant étroitement liée à sa résolution, celles des écrans nous apportent son lot de contraintes. Néanmoins, en partant d'une bonne photo de départ, il est possible d'optimiser l'image en ayant un seuil de qualité tout à fait acceptable pour une utilisation sur le web.
La taille des images
La taille des images se définit en pixels. A titre indicatif, l'image ci-dessus a une largeur de 445px et une hauteur de 334px.
Outre le fait que chacun est libre de choisir la taille des images qu'il souhaite présenter, il ne faut pas perdre de vue que le poids de l'image dépend en partie de la taille choisie. Autant dire que plus les images seront lourdes, plus elle consommeront de bande passante sur votre hébergeur. L'autre élément déterminant concernant la qualité et le poids des images étant la compression. Plus une image est enregistrée avec un taux de compression bas, plus légère elle sera mais plus elle perdra en qualité.
Le format des images
Dans le domaine du web, on utilise principalement le format .jpg qui s'adapte très bien à la présentation des photos. On utilise généralement un format de compression supérieur ou égal à 70%. Les formats .png ou .gif sont également utilisés pour gérer la transparence.
La notion de propriété
Notez qu'à partir du moment où vous diffusez des photos sur le web, aucun système ne permet de les protéger efficacement contre la copie illégale.
La bannière d'un site web
On entend par bannière la partie supérieure d'une page web.
Il existe de nombreuses possibilités pour présenter un site mais très vite, telle l'enseigne d'un magasin, la bannière est devenue un standard dans lamiseenpagede la majorité des sites web.
Comment organiser une bannière?
De manière générale, on retrouve les éléments suivants dans la bannière: Le logo de la société, une description de l'activité et les éléments graphiques. On peut également y trouver un slogan, le menu du site ou encore un champ d'inscription ou de recherche Les possibilités sont nombreuses.
La bannière étant un élément présent sur chaque page du site, il faut s'assurer qu'elle ne soit pas trop envahissante et qu'elle ne fatigue pas l'intérêt du visiteur. D'un point de vue design, la bannière est souvent l'élément qui imprègne la touche graphique du site. Il est donc important de la soigner pour qu'avec les autres éléments graphiques du site, elle constitue un tout homogène qui donnera un cachet visuel à votre image.
Le choix de la couleur d'arrière-plan (en anglais background) est primordial, car un arrière-plan mal choisi peut gêner la lisibilité. Un bon contraste entre la couleur d'avant-plan et la couleur dominante de l'arrière plan est nécessaire. A ce titre, il est fortement déconseillé d'opter pour un arrière-plan graphique car il peut gêner la lecture et dégage généralement un sentiment d'amateurisme. L'arrière-plan devra ainsi généralement être choisi très pâle.
Dans le domaine du web design, les couleurs jouent un très grand rôle sur la façon dont les visiteurs vont percevoir l'état d'esprit d'un site.
Chaque tendance colorée aura un impact sur le visiteur. Ainsi, certaines couleurs paraitront plus douces et d'autres plus agressives, certaines plus joyeuses et d'autres plus tristes etc
Il est important de mettre en relation le choix des couleurs avec la thématique du site.
Ainsi, un thème lié à la nature se verra plutôt avec une tendance verte, un thème lié à l'enfance aura plutôt une tendance de couleurs vives ou pastels.
Le blanc (ou couleurs claires) est intéressant pour la lisibilité.
Le noir (ou couleurs sombres) est intéressant pour présenter des oeuvres artistiques.
Si vous doutez de vos accords de couleurs, privilégiez l'utilisation de camaïeux d'une même couleur (accord par analogie)
Selon que la police a un caractère arrondi ou au contraire très angulaire, selon qu'elle est fine ou épaisse, espacée ou serrée, tout cela donne une dimension particulière au designdespagesweb.
Les trois polices ci-dessous, par exemple, ont chacune des particularités qui leur sont propres et génèrent par conséquent des sensations bien différentes.
Il est fortement contre-indiqué d'utiliser plus de deux polices sur un site web. Les polices stylisées doivent être utilisées avec parcimonie (pour le titre par exemple) et l'essentiel de la page web devra être réalisée avec une police classique (Arial, Verdana, Helvetica, etc.).
Pour une utilisation imprimée traditionnelle, les polices à empattement (serif) facilitent généralement la lecture car les empattements permettent d'accompagner le regard du lecteur.
Sur le web, l'utilisation de telles polices est déconseillée car selon la définition de l'écran du visiteur, les empattements peuvent très vite devenir des pattes de mouche gênantes pour la lecture. Ainsi, il est souhaitable d'opter pour des polices sans empattement (sans serif), plus rondes.
Enfin, sachez que les textes utilisant des polices non standard risquent de ne pas apparaître correctement sur les écrans des internautes. Pour créer des titres avec de telles polices, il est néanmoins possible de contourner cette limitation en créant des images transparentes comportant le texte.
Tout comme pour les couleurs, les polices d'écriture ont un impact important sur le ressenti du visiteur lorsqu'il parcourt une page web. Le choix de la police d’écriture
Là encore, il n'existe pas de règle absolue et il appartient à l'appréciation de chacun de décider de la pertinence de telle ou telle typographie. Cependant, on peut facilement affirmer qu'il est important de respecter des critères de lisibilité. Aussi il est plus sage d'utiliser des polices traditionnelles pour les textes qui diffusent l'information et de réserver les polices plus typées pour les titres, les menus ou les logos.
Où trouver des polices d'écriture?
Il existe de nombreux sites sur le web qui proposent de télécharger des polices d'écriture (.ttf, .otf ou .fon) également appelées Font.
Voici un petit échantillon:
●
● Dafont . com
● Myfonts . com
● Fonts . com
Comment installer de nouvelles polices?
Lorsque vous disposez de nouvelles Fonts, il suffit simplement d'en faire une copie dans le répertoire destiné à cet effet:
Sous Windows: dans C:\WINDOWS\Fonts. Sous Mac OS: dans /Library/Fonts.
Comment utiliser de nouvelles polices sur les pages web?
Lorsque vous avez installé de nouvelles Fonts, elles sont disponibles dans la plupart de vos logiciels qui permettent d'écrire du texte. Ainsi, avec un logiciel de traitement de texte ou de retouche d'image par exemple, il vous sera possible de choisir et d'utiliser vos nouvelles polices d'écriture.
Malheureusement, il n'en va pas de même avec les pages web puisque tout texte écrit dans le langage html est lu avec les polices installées sur l'ordinateur qui lit la page et non pas celui qui l'a créée. Autrement dit, si je construis une page avec une police de mon choix, vous ne pourrez la voir correctement que si cette même police est installée sur votre ordinateur. Si non, votre navigateur choisira une de vos polices par défaut.
Les possibilités sont plutôt restreintes, les polices dites « standards » sont les suivantes :
● arial
● verdana
● tahoma
● trebuchet
● georgia
Si toutefois , vous souhaitiez vraiment utiliser une police bien particulière dans vos textes, il existe des parades avec l'utilisation conjointe de Flash ou Javascript, mais qui ont des faiblesses au point de vue accessibilité ou référencement.
Une bonne formule consiste à choisir une police universelle pour les textes et des polices plus typées pour les images: logo, bannière, menu etc
Il est conseillé de faire usage de pictogrammes ou d'icônes afin d'établir une signalisation visuelle. Attention tout de même au choix des symboles car le sens perçu par l'utilisateur peut être différent de celui qu'on lui attribue, notamment si le site web a une vocation internationale. Les pictogrammes suivants sont ainsi communément utilisé :
● une loupe symbolise habituellement une fonction de recherche ;
● une enveloppe signale la possibilité de contacter le webmaster par mail ;
● un point d’interrogation caractérise une aide en ligne ;
● une maison représente un lien vers la page d'accueil ;
● un drapeau signale la langue de la page en cours ou bien la possibilité de changer de langue.
Une fois que vous aurez établi votre rubriquage, votre arborescence et votre contenu, vous pourrez vous pencher sur l’aspect graphique de vos pages et préparer une maquette.
« Le design d’un site web concerne à la fois son aspect visuel, son ergonomie (système de navigation) et son architecture (arborescence des menus, liens hypertextes…) »
On peut identifier trois principaux objectifs du webdesign :
● Navigation intuitive pour les visiteurs.
● Facilité d’administration (mise à jour, modifications…).
● Fidélité par rapport à l’image et à l’identité graphique de l’entreprise
Comme certains ont pu l’apprendre à leurs dépens, le beau ne suffit pas à la réussite d’un site web. Pour l’internaute, la facilité d’utilisation et la qualité du contenu restent prédéterminants.
A partir de ce constat, il est possible d’identifier certaines règles en matière de design Internet :
● Ne pas surcharger les pages en multipliant les effets graphiques et les animations. L’utilisation de ces éléments doit toujours répondre à un objectif précis et non pas seulement servir à embellir le site.
● Conserver la cohérence avec la charte graphique dans l’emploi des couleurs mais aussi des polices. L’utilisation répétée de plus de trois couleurs sur un site ne facilite pas sa visualisation par l’internaute.
● Une attention particulière peut être apportée à certains éléments comme le menu principal de navigation ou à des objets graphiques comme le symbole du panier. Cela permettra une mise en valeur de ces éléments qui sont récurrents sur le site et traduira un certain professionnalisme.
● L’élaboration du design d’un site web doit se faire en gardant à l’esprit que l’aspect graphique ne doit jamais prendre le pas sur la facilité d’utilisation.
• Préparez vos textes et éventuellement vos documents à télécharger (PDF ou RTF)
• Préparez vos images, optimisées et de taille réduites, au format gif, jpeg, ou png.
• Rangez et classez tous ces éléments dans un répertoire de votre disque dur
Sources morphemzero +
