La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI.

Présentations similaires


Présentation au sujet: "By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI."— Transcription de la présentation:

1 By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI

2 I. Introduction 1.Le web avec HTML 2.Le design avec CSS 3.Le W3C II. Structuration dun site web 1.Différents types de sites 2.Larchitecture dun site 3.Larborescence dun site III. La navigation avec les élément GUI 1.La barre de navigation 2.La fils dAriane 3.Les liens 4.Exemple Web Design2

3 IV. Ergonomie pour le web design 1.La charte graphique 2.Les couleurs 3.La police de caractère 4.Les images V. Accessibilité/Utilisabilité 1.La norme WCAG Exemple : les daltoniens IV. Outils pour le web design 1.Photoshop 2.Dreamweaver 3.CMS Web Design3

4 - Le web est né dans les années 1990 au CERN (Organisation Européenne pour la Recherche Nucléaire) - Linventeur du World Wide Web est Tim Berner-Lee et Rober Cailliau. Web Design4

5 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): « Cest 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 Design5

6 6 « La Toile » Interaction entre un serveur web et un navigateur (browser)

7 Hypertexte (Définition) : cest 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 Design7

8 Le HTML (Hypertext Markup Language) est un format de données ou langage utilisé pour créer un site web Cest un langage qui utilise des balises WEB DESIGN Test pour la présentation orale dIHM indexihm.htmlindexihm.html index.html indexlee.htmlindex.htmlindexlee.html Web Design8

9 CSS (Cascading Style Sheets) : feuille de style en cascade. Cest 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 Design9

10 On a la norme NF pour les produits, pour le web il y a le W3C. Cest un organisme de standardisation Web Design10

11 Site vitrine : site pour promouvoir quelque chose Site dinformation : site avec un contenu utile pour linternaute Page de vente (landing page) : site pour vendre un produit comme le ferait un commercial Page de captation (squeeze page) : site pour attirer lattention Site marchand ou e-commerce : site de vente en ligne (Cdiscount, Fnac,…) Web Design11 Bien savoir pourquoi on veut créer un site et pour quel public

12 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 Design12

13 Les bénéfices dun site peuvent être multiples: accroître le chiffre daffaire 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 Design13

14 L'architecture d'information d'un site doit être conçue d'une façon très rigoureuse. Linternaute doit pouvoir trouver linformation facilement sinon il pensera que linformation nexiste pas. Après cette étude on passe à lorganisation visuelle Web Design14

15 Web Design15 Zoning web

16 Web Design16

17 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 Design17

18 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 lutilisateur dun site web doit pouvoir trouver linformation avec pas plus de 3 clicks de souris. Cest basé sur le fait quun utilisateur dun site deviens frustré et quitte souvent le site sil ne trouve pas linformation en 3 clicks Web Design18

19 NiveauxDescriptions 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 Design19

20 Cas des sites simples Web Design20

21 Cas des sites élaborés Web Design21

22 Cas des sites complexes Web Design22

23 Conseil : dés que le site devient compliqué il est recommandé de mettre sur chaque page un lien vers la page daccueil. Par exemple utiliser le logo du site comme étant un lien vers la page daccueil. « Un visiteur perdu est un visiteur déçu. Un visiteur déçu est un visiteur qui est PERDU à jamais. » Web Design23

24 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 linternaute (pas de prise de tête) La navigation doit intégrer: Logotype zone de navigation primaire (1 er niveau du site) zone de navigation secondaire (déplacement à lintérieur de la même rubrique) Web Design24

25 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 Design25

26 Web Design26

27 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. Lavantage est le gain despace Linconvénient est la maitrise de la souris, si la souris sort de la zone le menu disparait Web Design27

28 Web Design28

29 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 Design29

30 Web Design30 Pas de visuel sur la sélection

31 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 Design31

32 Web Design32

33 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 Design33

34 Web Design34

35 Le fil dAriane cest le chemin quun internaute à emprunté depuis laccueil 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 Design35

36 Web Design36

37 Les liens sont la colonne vertébrale dun site, sans ça le site est inutile car possédant peu dinformation Reconnaissance des liens: Un lien peut être un pictogramme, un logo, un texte dune couleur différente de celle utilisée pour du texte normal (et généralement souligné). Lorsque lutilisateur passe sur un lien avec le pointeur de la souris, le pointeur doit prendre la forme dune petite main. Si le lien est une image alors il faut quil y est une info bulle. Web Design37

38 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 laction de lutilisateur Web Design38

39 Web Design39

40 « 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 Design40

41 Le choix des couleurs est subjectif, une personne peut aimer une couleur et une autre peut ne pas laimer Il faut que lusage 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 Design41

42 couleurs primaires : Il sagit des couleurs de base, on ne peut pas les obtenir en mélangeant dautres 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 Design42

43 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 nest pas conseillée. Orange : Couleur chaude source de tonicité, on lutilise 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 Design43

44 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 sen servir presque uniquement pour les textes. Web Design44

45 Web Design45

46 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 Design46

47 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 dordinateur L'Arial et l'Helvetica sont des polices sans shérif, donc plus faciles à lire sur un moniteur. Web Design47

48 Possibilité de spécifier une liste de police classée par préférences en HTML avec la balise Exemple: Fin du cours de Webdesign Web Design48

49 Il faut utiliser les images de bonne qualité car les internautes préfèrent ce type dimage. 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 limage Compression : suppression des pixels jugés inutiles ou mettre moins de couleurs dans l'image. Web Design49

50 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. Cest destiné à la photographie format GIF: le moins utilisé, limage convertie (type non destructif) nest pas dégradé mais limité en terme de couleur(256). format PNG: la compression (type non destructif) nest 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 Design50

51 Web Design51

52 WCAG 2.0 (Web Content Accessibility Guideline for web 2.0) : cest une norme W3C qui a pour but de rendre les contenus web plus accessibles aux personnes en situation dhandicap. Pour les personnes qui ont un handicaps : Visuel Auditif Physique Cognitif Neurologique Lié à la parole Web Design52

53 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 dun 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 Design53

54 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 Design54

55 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 Design55

56 Web Design56 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.

57 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 dimage. Web Design57

58 Web Design58

59 Dreamweaver est un éditeur de site web de type WYSIWYG (« What you see is what you. get ») Web Design59

60 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 Design60

61 Web Design61

62 Web Design62

63 Le web design est indispensable pour la création de site web bien formé. Il permet daccéder facilement au contenu dun 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 Design63

64 internet internet liens-hypertextes/ liens-hypertextes/ Google video Web Design64


Télécharger ppt "By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI."

Présentations similaires


Annonces Google