By Loveprit SIDHU Le 28 janvier 2011 IHM: LE WEB DESIGN By Loveprit SIDHU Le 28 janvier 2011 Encadré par Catherine RECANATI Formation : M2EID² Web Design
Sommaire Introduction Structuration d’un site web Le web avec HTML Le design avec CSS Le W3C Structuration d’un site web Différents types de sites L’architecture d’un site L’arborescence d’un site La navigation avec les élément GUI La barre de navigation La fils d’Ariane Les liens Exemple Web Design
Sommaire Ergonomie pour le web design Accessibilité/Utilisabilité La charte graphique Les couleurs La police de caractère Les images Accessibilité/Utilisabilité La norme WCAG 2.0 Exemple : les daltoniens Outils pour le web design Photoshop Dreamweaver CMS Web Design
I.1) le web avec html - Le web est né dans les années 1990 au CERN (Organisation Européenne pour la Recherche Nucléaire) - L’inventeur du World Wide Web est Tim Berner-Lee et Rober Cailliau. Web Design
I.1) le web avec html World Wide Web (Définition) : « système hypertexte public fonctionnant sur Internet qui permet de consulter, avec un navigateur, des pages accessibles sur des sites. » appelé aussi la Toile ou le Web. Site web (Définition): « C’est un ensemble de pages Web hyperliées entre elles et mises en ligne à une adresse Web. » En 2010, il existe plus de 233 millions de sites web Web Design
Interaction entre un serveur web et un navigateur (browser) « La Toile » Interaction entre un serveur web et un navigateur (browser) Web Design
I.1) le web avec html Hypertexte (Définition) : c’est un média textuel contenant des liens entre divers points dans des documents. L'hypertexte permet de naviguer à l'intérieur d'un même document ou d'un document à un autre. Trois évolutions du web: Web 1.0 : pages statique Web 2.0 : axé sur les personnes Web 3.0 : axé sur les objets Web Design
I.1) le web avec html Le HTML (Hypertext Markup Language) est un format de données ou langage utilisé pour créer un site web C’est un langage qui utilise des balises <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title>WEB DESIGN</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" media="screen" type="text/css" title="Defaut" href="index.css" /> </head> <body> <p> Test pour la présentation orale d’IHM </p> </body> </html> indexihm.html index.html indexlee.html Web Design
I.2) le design avec CSS CSS (Cascading Style Sheets) : feuille de style en cascade. C’est est un langage informatique qui sert à décrire la présentation des documents HTML et XML Apparu en 1996 Objectifs: La structure et la présentation sont gérées séparément Il facilite la portabilité du contenu Le code HTML est réduit en taille et en complexité Portfolio\index.html Web Design
I.3) le W3C On a la norme NF pour les produits, pour le web il y a le W3C. C’est un organisme de standardisation Web Design
II.1) Les différents type de site Site vitrine : site pour promouvoir quelque chose Site d’information : site avec un contenu utile pour l’internaute Page de vente (landing page) : site pour vendre un produit comme le ferait un commercial Page de captation (squeeze page) : site pour attirer l’attention Site marchand ou e-commerce : site de vente en ligne (Cdiscount, Fnac,…) Bien savoir pourquoi on veut créer un site et pour quel public Web Design
II.1) Les différents type de site A quoi bon présenter de l'information de qualité si les internautes s'y perdent. A quoi bon avoir un beau site s'il n'est pas attractif Web Design
II.1) Les différents type de site Les bénéfices d’un site peuvent être multiples: accroître le chiffre d’affaire Avec de nouveaux clients Avec de nouveaux partenaires En améliorant les services diminuer les dépenses Frais de publicités Réduire les coût de fonctionnement développer sa notoriété En étant visible 24h/24 7j/7 Web Design
II.2) L’architecture d’un site L'architecture d'information d'un site doit être conçue d'une façon très rigoureuse. L’internaute doit pouvoir trouver l’information facilement sinon il pensera que l’information n’existe pas. Après cette étude on passe à l’organisation visuelle Web Design
Zoning web Web Design
Web Design
II.2) L’architecture d’un site Le zoning permet de découper la page en autant de zones que nécessaire. Cela permet de positionner : les zones de navigation, les contenus, le logo, le pied de page, le moteur de recherche, ou le fil d'Ariane... Web Design
II.3) L’arborescence d’un site Définissez vos rubriques principales Chaque thème représentera une rubrique de votre site. Chacune de vos rubriques doit contenir assez d'informations pour pouvoir les présenter en thèmes logiques sur d'autres pages de niveau inférieur. Hiérarchisez vos informations à l'intérieur de vos rubriques principales Chaque groupe d'informations représentera une sous-rubrique. Pour chaque rubrique, vous pouvez proposer jusqu'à 7 sous- rubriques. La règle des trois clics Ca suggère que l’utilisateur d’un site web doit pouvoir trouver l’information avec pas plus de 3 clicks de souris. C’est basé sur le fait qu’un utilisateur d’un site deviens frustré et quitte souvent le site s’il ne trouve pas l’information en 3 clicks Web Design
II.3) L’arborescence d’un site Niveaux Descriptions Niveau 1 Le sommet de votre hiérarchie commence par la page d'accueil. Niveau 2 Présentation vos rubriques principales d'une manière générale et un sommaire interne à la rubrique. Ce sont des pages d'orientation. Niveau 3 Présentation détaillée de vos rubriques principales. Ces sous-rubriques sont exclusivement des pages d'informations Niveau 4 Présentation des sous-sous-rubriques. A prévoir si les pages de niveau 3 sont trop denses en informations. Web Design
II.3) L’arborescence d’un site Cas des sites simples Web Design
II.3) L’arborescence d’un site Cas des sites élaborés Web Design
II.3) L’arborescence d’un site Cas des sites complexes Web Design
II.3) L’arborescence d’un site Conseil : dés que le site devient compliqué il est recommandé de mettre sur chaque page un lien vers la page d’accueil. Par exemple utiliser le logo du site comme étant un lien vers la page d’accueil. « Un visiteur perdu est un visiteur déçu. Un visiteur déçu est un visiteur qui est PERDU à jamais. » Web Design
III.1) La navigation Objectifs: L'utilisateur doit savoir : Où il est Par où il est passé Savoir où il peut aller Avoir une vue globale du contenu du site Faciliter au maximum la navigation du site pour l’internaute (pas de prise de tête) La navigation doit intégrer: Logotype zone de navigation primaire (1er niveau du site) zone de navigation secondaire (déplacement à l’intérieur de la même rubrique) Web Design
III.1) La barre de navigation La barre de navigation est en général placée horizontalement ou verticalement dans le haut de la page et de préférence à gauche. Cette position lui permet d'être toujours visible et accessible quelque soit la taille de la fenêtre dans le navigateur. Sa position, au dessus de la page, lui donne de l'importance, et c'est un repère toujours présent. Les utilisateurs d'Internet ont cette habitude. Vouloir changer ce principe reviendrait à perturber les visiteurs. Web Design
Web Design
III.1) La barre de navigation Les menus déroulant: Le principe est de faire apparaître au survol de la souris sur une rubrique, une zone contenant des liens hypertextes vers les sous-rubriques. L’avantage est le gain d’espace L’inconvénient est la maitrise de la souris, si la souris sort de la zone le menu disparait Web Design
Web Design
III.1) La barre de navigation Les onglets: Les onglets de la barre de navigation font partie de l'environnement que connaît bien l'internaute. Ils les identifient dès l'ouverture en haut de la page. C'est devenu un vrai standard de l'ergonomie web et il est rare de trouver un site web qui ne les utilise pas. Ils ont une seule limite. Lorsque le site contient plus de deux niveaux de profondeur, il y a besoin d'utiliser une navigation secondaire. Web Design
Pas de visuel sur la sélection Web Design
III.1) La barre de navigation Les rollovers: Le rollover est une fonction qui modifie l'aspect d'un élément graphique dans sa forme, sa couleur ou son animation lorsqu'il est survolé par le pointeur de la souris. L'élément revient dans son état initial lorsque le pointeur quitte l'image. employé pour donner de l'interractivité à un élément de la barre de navigation, dans le but de le mettre en évidence source de difficulté pour les internautes (ex: Banque Postale) Web Design
Web Design
III.1) La barre de navigation Les boutons de navigations: Les boutons de navigation sont des élément utilisés comme liens pour naviguer. Ils se présentent sous plusieurs formes : icône, texte ou parfois les deux associés. Pour gagner de la place à l'écran, certains concepteurs web préfèrent utiliser des icônes de navigation en guise de menu. Web Design
Web Design
III.2) La fil d’Ariane Le fil d’Ariane c’est le chemin qu’un internaute à emprunté depuis l’accueil de la page jusqu’à la page où il se situe. Aussi appelé « chemin de progression » Conseil : à placer en haut de la place, à gauche au dessus de la page courante mettre le symbole ‘>’ entre chaque rubrique utiliser dans le fil d'Ariane les mêmes dénominations que les pages parcourues utiliser un petit corps de police pour ne pas gêner la lecture de la page le titre de la page doit être présent dans le fil d'Ariane et sur la page. Cette redondance permet à l'internaute de bien se repérer. Web Design
Web Design
III.3) Les liens Les liens sont la colonne vertébrale d’un site, sans ça le site est inutile car possédant peu d’information Reconnaissance des liens: Un lien peut être un pictogramme, un logo, un texte d’une couleur différente de celle utilisée pour du texte normal (et généralement souligné). Lorsque l’utilisateur passe sur un lien avec le pointeur de la souris, le pointeur doit prendre la forme d’une petite main. Si le lien est une image alors il faut qu’il y est une info bulle. Web Design
III.3) Les liens Couleur par défaut des liens : Lien avant activation : bleu. Lien consulté : violet. Lien après activation : rouge. Les liens bien positionnés sont plus efficaces Les liens explicites sont mieux compris Les liens doivent se comporter différemment en fonction de l’action de l’utilisateur Web Design
III.4) Exemple Web Design
IV.1) La charte graphique « La charte graphique ou normes graphiques est un document de travail qui contient l'ensemble des règles fondamentales d'utilisation des signes graphiques qui constituent l'identité graphique d'une organisation, d'un projet, d'une entreprise. » La charte graphique s'applique à définir : Le logo (couleurs, position dans la page, supports, déclinaisons et interdits) Les polices de caractères utilisées Les jeux de couleurs déclinables sur les différents supports de communication L'utilisation des éléments graphiques (filigranes, détail du logo agrandi, courbes et traits spécifique à l'entreprise) Les principes du choix des images et des illustrations Web Design
IV.2) Les couleurs Le choix des couleurs est subjectif, une personne peut aimer une couleur et une autre peut ne pas l’aimer Il faut que l’usage des couleurs suit la charte graphique Utiliser un nombre limité de couleur Bien choisir les couleurs de fond (background) et les couleurs de « surface » (foreground) Web Design
IV.2) Les couleurs couleurs primaires : Il s’agit des couleurs de base, on ne peut pas les obtenir en mélangeant d’autres couleurs. Ce sont les couleurs que nos yeux perçoivent le mieux : le rouge, le jaune et le bleu. couleurs secondaires : il sont obtenues à partir du mélange des couleurs primaires deux par deux. bleu + jaune = vert jaune + rouge = orange bleu + rouge = violet couleurs tertiaires: ils sont obtenues en mélangeant deux couleurs secondaires à part égales Web Design
IV.2) Les couleurs Rouge : Couleur chaude symbole de l'amour, il ne faut pas en abuser en webdesign car le rouge ressort beaucoup, la dominance du rouge dans une charte graphique n’est pas conseillée. Orange : Couleur chaude source de tonicité, on l’utilise fréquemment en webdesign, mais avec une teinte plutôt claire. Jaune : Couleur chaude symbole de la richesse elle représente également l'univers intellectuel. Vert : Couleur chaude couleur du végétal, elle est synonyme d'espérance et de fertilité mais elle n'est pas source de gaieté ni de stimulation. On s'en lasse vite. Web Design
IV.2) Les couleurs Bleu : Couleur froide, elle crée un climat frais, doux, calme, de grande sérénité. Elle agit sur nous en stimulant notre intuition. Une couleur très utilisée en webdesign. Violet : Couleur froide favorise la méditation et le sommeil, calme les excités, nous apporte un équilibre intérieur. Blanc : Source de pureté et de transparence, recommandable pour les fonds de page. Gris : symbolise l'infini , la quiétude, utilisable en fond de page également. Noir : couleur de l'austérité, en webdesign il faut s’en servir presque uniquement pour les textes. Web Design
Web Design
IV.3) La police de caractère Lorsque le navigateur de votre visiteur accède à vos pages Web, il ne peut afficher que les polices qui se trouvent sur son propre système, donc les polices installées par défaut avec Windows. Si le visiteur ne possède pas la police que vous avez choisie, la police par défaut se chargera. Times New Roman sous Windows et Times pour les MacOS. Web Design
IV.3) La police de caractère Il faut utiliser des polices courantes que tout le monde possède comme Times New Roman, Arial, Courrier New ou encore Verdana par exemple Trois type de police : Courrier et le Courrier New sont des polices à chasse fixe, tous les caractères ont la même largeur, comme sur une machine à écrire. Times & Times New Roman : Polices avec shérif (empattement). Elles sont agréables à lire pour un document imprimé mais plus difficiles à comprendre sur un écran d’ordinateur L'Arial et l'Helvetica sont des polices sans shérif, donc plus faciles à lire sur un moniteur. Web Design
IV.3) La police de caractère Possibilité de spécifier une liste de police classée par préférences en HTML avec la balise <FONT> </FONT> Exemple: <FONT face = "Verdana, Arial, Helvetica, sans serif">Fin du cours de Webdesign </FONT> Web Design
IV.4) Les images Il faut utiliser les images de bonne qualité car les internautes préfèrent ce type d’image. Qui dit bonne qualité dit image de poids important ce qui implique un chargement de la page lente Pour avoir la qualité et un poids léger il faut compresser l’image Compression : suppression des pixels jugés inutiles ou mettre moins de couleurs dans l'image. Web Design
IV.4) Les images Il existe trois formats de compression: format JPEG : la compression (type destructif) entraine la disparition de pixels. Plus l'image est compressée plus les pixels seront gros et plus l'image sera dégradée. Il faut donc trouver le bon compromis entre qualité désirée et taille finale de l'image. C’est destiné à la photographie format GIF: le moins utilisé, l’image convertie (type non destructif) n’est pas dégradé mais limité en terme de couleur(256). format PNG: la compression (type non destructif) n’est pas limitée à 256 couleur et gère la transparence. Il ne dégrade pas l'image, contrairement au JPEG, au détriment du poids du fichier. Ce format est particulièrement recommandé pour des graphiques, des logos, des icônes, des images représentant du texte. Web Design
Web Design
V.1) La norme WCAG 2.0 WCAG 2.0 (Web Content Accessibility Guideline for web 2.0) : c’est une norme W3C qui a pour but de rendre les contenus web plus accessibles aux personnes en situation d’handicap. Pour les personnes qui ont un handicaps : Visuel Auditif Physique Cognitif Neurologique Lié à la parole Web Design
V.1) La norme WCAG 2.0 Afin qu'une page Web soit conforme aux WCAG 2.0 il y a certaines exigences à satisfaire. Niveau de conformité: Niveau A: site qui répond aux exigences d’un point particulier (niveau de contrôle minimal) Niveau AA: site répond à deux exigences (A et AA) Niveau AAA: site répondant à tous les exigences Web Design
V.1) La norme WCAG 2.0 Il existe 4 principes dans le WCAG perceptible ex : Règle 1.4 Distinguable : faciliter la perception visuelle et auditive du contenu par l'utilisateur, notamment en séparant le premier plan de l'arrière-plan. utilisable ex : Règle 2.3 Crises : ne pas concevoir de contenu susceptible de provoquer des crises. compréhensible ex : Règle 3.3 Assistance à la saisie : aider l'utilisateur à éviter et à corriger les erreurs de saisie. robuste ex : Règle 4.1 Compatible : optimiser la compatibilité avec les agents utilisateurs actuels et futurs, y compris les technologies d'assistance Web Design
V.2) L’exemple du daltonisme Déficience : Il existe différentes formes de cécité des couleurs : rouge-vert, vert-brun, et ainsi de suite... Dans le monde : 10% de la population masculine est daltonienne En France, 8 % homme 0.45 % femme La première méthode et la plus simple à mettre en œuvre est l'emploi d'un contraste élevé entre l'arrière plan et les couleurs utilisées pour le contenu de la page. Web Design
C et E sont plus facilement lisibles parce que le contraste est assez fort. L'affichage de la page en niveaux de gris peut montrer si oui ou non il y a suffisamment de contraste. Il existe des outils pour tester le constraste. Web Design
VI.1) Photoshop Photoshop est un logiciel de retouche, de traitement et de dessin assisté par ordinateur édité par ADOBE. Il est principalement utilisé pour le traitement des images photographique, de création d’image. Web Design
Web Design
VI.2) Dreamweaver Dreamweaver est un éditeur de site web de type WYSIWYG (« What you see is what you. get ») Web Design
VI.3) CMS Content Manager System est une famille de logiciels destinés à la conception et à la mise à jour dynamique de site web ou d'application multimédia. Ex: Joomla Web Design
Web Design
Web Design
Conclusion Le web design est indispensable pour la création de site web bien formé. Il permet d’accéder facilement au contenu d’un site web. Le web design fait en sorte que chaque personne puisse suivre les règles afin que tous le monde puissent bénéficier sans contraintes du web. Web Design
Bibliographie http://webdesign.2803.com http://fr.wikipedia.org/wiki/Conception_de_sites_web http://www.comment-gagner-sur-internet.com http://ergonomie-web.studiovitamine.com/ http://www.catapulpe.fr/lafabrik/pourquoi-creer-un-site- internet http://www.alsacreations.com http://www.css-design.fr http://www.commentcamarche.net/contents/html/htmlintro.php 3 http://www.my.epokhe.com/2008/11/04/bonnes-pratiques- liens-hypertextes/ http://www.ergolab.net/articles/ergonomie-page-accueil.php http://www.w3.org/Translations/WCAG20-fr/ Google video Web Design