1 / 64

IHM: LE WEB DESIGN

IHM: LE WEB DESIGN. By Loveprit SIDHU Le 28 janvier 2011. Encadré par Catherine RECANATI. Formation : M2EID². Sommaire. Introduction 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

lillian-kerr
Download Presentation

IHM: LE WEB DESIGN

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. IHM: LE WEB DESIGN By Loveprit SIDHU Le 28 janvier 2011 Encadré par Catherine RECANATI Formation : M2EID² Web Design

  2. Sommaire • Introduction • 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 • 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. « 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 (HypertextMarkupLanguage) 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" /> <linkrel="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.htmlindex.htmlindexlee.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 principalesChaque 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 principalesChaque 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 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 : • 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

More Related