Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
1
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
2
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
3
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
4
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
5
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
6
Interaction entre un serveur web et un navigateur (browser)
« La Toile » Interaction entre un serveur web et un navigateur (browser) Web Design
7
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
8
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 " <html xmlns=" xml:lang="fr" > <head> <title>WEB DESIGN</title> <meta http-equiv="Content-Type" content="text/html; charset=iso " /> <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
9
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
10
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
11
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
12
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
13
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
14
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
15
Zoning web Web Design
16
Web Design
17
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
18
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
19
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
20
II.3) L’arborescence d’un site
Cas des sites simples Web Design
21
II.3) L’arborescence d’un site
Cas des sites élaborés Web Design
22
II.3) L’arborescence d’un site
Cas des sites complexes Web Design
23
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
24
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
25
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
26
Web Design
27
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
28
Web Design
29
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
30
Pas de visuel sur la sélection
Web Design
31
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
32
Web Design
33
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
34
Web Design
35
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
36
Web Design
37
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
38
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
39
III.4) Exemple Web Design
40
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
41
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
42
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
43
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
44
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
45
Web Design
46
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
47
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
48
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
49
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
50
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
51
Web Design
52
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
53
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
54
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
55
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
56
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
57
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
58
Web Design
59
VI.2) Dreamweaver Dreamweaver est un éditeur de site web de type WYSIWYG (« What you see is what you. get ») Web Design
60
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
61
Web Design
62
Web Design
63
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
64
Bibliographie http://webdesign.2803.com
internet 3 liens-hypertextes/ Google video Web Design
Présentations similaires
© 2024 SlidePlayer.fr Inc.
All rights reserved.