Webdesign ?
1lundi 2 mai 2011
Webdesign ?
Le webdesigner est chargé de réaliser la conception d’une interface web : son architecture, l’organisation des pages, l’arborescence et la navigation.
Il s’agit d’une phase essentielle dans la conception d’un site.
La conception d'un design web tient compte des contraintes spécifiquesdu support Internet :
• Ergonomie• Utilisabilité• Accessibilité
2lundi 2 mai 2011
Webdesign ?
Les priorités du webdesigner sont :
• Le respect du cahier des charges du client• La séduction des futurs utilisateurs des pages web.
3lundi 2 mai 2011
Chic !J’ai un contrat
4lundi 2 mai 2011
Chic ! J ai un contrat
Qu’est-ce qu’un brief ?
,
5lundi 2 mai 2011
Le brief est une note dans laquelle un annonceur expose les modalités d’une campagne. Il décrit son activité, explique le déroulement de la campagne, précise certains éléments comme les éléments graphiques à disposition, les liens à ajouter dans l’article, les règles du concours si il y en a un etc…
Chic ! J ai un contrat,
6lundi 2 mai 2011
Il s’agit de la phase la plus importante avant la réalisation du site.
Si vous comprenez mal votre brief = client insatisfait par votre créa = devoir en faire une nouvelle = temps non payé pour vous ou l’agence = argent perdu.
E Exercice : Vous venez d’être recruté comme free-lance par une toute nouvelle agence de communication, 3Pommes, qui souhaite réaliser son site internet.
Posez-lui des questions pour votre brief !
Chic ! J ai un contrat,
7lundi 2 mai 2011
Récolter des informations sur l'entreprise : historique, activités principales, produits et services, budget, ...
Savoir à qui s'adresse le site : entreprises, particuliers, hommes/femmes, étudiants, retraités...
Quel type de site est recherché : site vitrine (pour faire connaitre l'entreprise, générer de nouveaux contacts), site de vente en ligne, site d'aide en ligne pour les clients...
Chic ! J ai un contrat,
8lundi 2 mai 2011
Quel contenu et arborescence veut-il ? : Demandez lui de : • décrire les images, textes, vidéos et/ou éléments audio qu’il désire
ajouter au site et toutes les informations qui peuvent s'avérer utiles (quantité, formats respectifs, traitements à réaliser comme la numérisation de photos ou de tous supports papiers...);
• estimer le nombre de pages composant le site; • proposer une architecture des rubriques et sous rubriques, des schémas
de navigation possible dans le site;
Chic ! J ai un contrat,
9lundi 2 mai 2011
Il y a t-il des services offerts sur le site : Il peut s'agir de formulaires de contact (ou pour la collecte d'informations), de moteur de recherche, de forums, de gestion de clients/produits (boutique en ligne)...
Le client a t-il un nom de domaine ? : avoir un site nécessite obligatoirement l'achat d'au moins un nom de domaine pour y accéder. Si le client n’a pas de nom de domaine, demandez lui de vous spécifiez donc le ou les noms de domaine souhaités et leur extension (.fr, .com, .eu...).Pour savoir si un nom de domaine est libre, vous pouvez utiliserwww.amen.fr ou www.1and1.fr
Chic ! J ai un contrat,
10lundi 2 mai 2011
Charte graphique : Demandez à votre client d’indiquez ses souhaits concernant la mise en page: logos, couleurs spécifiques... Votre client peux ne pas avoir d'exigences particulières mais il faut qu’il vous donne un maximum d'informations.
Mises à jour (texte, images...) : Demandez si elle doit être réalisée par vos soins ou si le client envisage de faire lui même la maintenance. Faites vous préciser la périodicité et/ou la façon dont les mises à jour doivent être réalisées (en ligne directement par une interface de gestion, transfert par client FTP, ...)
Chic ! J ai un contrat,
11lundi 2 mai 2011
C’est parti !Je cogite
12lundi 2 mai 2011
Hierarchisation de l’information
,
,
C’est parti ! Je cogite
13lundi 2 mai 2011
La catégorisation, regrouper pour simplifier
Structurer de l’information
C’est parti ! Je cogite
14lundi 2 mai 2011
La catégorisation : regrouper pour simplifier
• Ranger les choses dans des groupes, ou catégoriesOn met ensemble ce qui se ressemble et on sépare ce qui nous semble différent.
C’est cette catégorisation qui nous évite de répéter les caractéristiques d’un objet.
C’est parti ! Je cogite
15lundi 2 mai 2011
C’est parti ! Je cogite
E Exercice : Quelles différentes catégorisations pouvez-vous faire ?
16lundi 2 mai 2011
La catégorisation peux se faire par :
• Alphabet : Groupe constitué des lettres de l’alphabet.
• Chronologie : Programmes TV, calendrier d’une saison de théâtre
• Thèmes : Les groupes sur des thématiques ou des sujets.
• Cible utilisateur : Les groupes qui ont des groupes utilisateurs
C’est parti ! Je cogite
A voir : Virgin : www.virginmega.frRéservoir-Jeux : www.reservoir-jeux.comAnpe : www.pole-emploi.fr/accueil
17lundi 2 mai 2011
Structurer de l’information
Une fois vos groupes d’informations établis, il faut dégager une vue d’ensemble plus hiérarchisée.
On va donc : • Mettre en valeur certains contenus• Faciliter l'accès aux ressources disponibles• Effectuer des connexions pertinentes entre ces ressources.
C’est parti ! Je cogite
Attention : Pensez aux pages «génériques» qui s’ajoutent à vos contenus et doivent faire partie des barres de navigation comme : l’accueil, le plan du site, les contacts, l’aide etc.
A voir : Nespresso : www.nespresso.com/L’équipe : www.lequipe.fr/
18lundi 2 mai 2011
E Exercice : Énumérez ce qui va apparaître sur le site internet 3Pommes ?
C’est parti ! Je cogite
19lundi 2 mai 2011
Édition/Presse
Portfolio
Communication visuel
WebJamais vu
PersoLogos
Web
Qui sommes nous ?
Nos services
Contact
Image édition/presse 1
Image edition/presse 3
Image edition/presse 2
Image web 2
Image web 1
Image web 3
Image web 4
Image web 5
Image logo 1
Image logo 2
Image logo 4Image jamais vu 1
Image jamais vu 2
Image jamais vu 3
Image perso 1
Image perso 2
E Exercice : Créer l’architecture du site
C’est parti ! Je cogite
20lundi 2 mai 2011
C’est parti ! Je cogite
21lundi 2 mai 2011
La navigation en 3 clics
C’est parti ! Je cogite
22lundi 2 mai 2011
L’idée reçue
Pourquoi faut-il se méfier de cette règle
Le bon côté de la règle
C’est parti ! Je cogite
23lundi 2 mai 2011
« Dans notre site internet toute information doit être accessible en moinsde 3 clics »
• La règle des 3 clics a pour ambition de rapprocher l’internaute de l’information qu’il souhaite atteindre.
• Dans le monde du web, le nombre de clics est un indicateur de distance.Plus il y a de clics et plus mon information ce trouve loin dans le site.
• Pour certains, le nombre des 3 clics est considéré comme le nombred’actions maximal au-delà duquel la navigation ne serait pas optimiséeet pire avec le risque de perdre l’internaute à chaque nouveau clic.
C’est parti ! Je cogite
L’idée reçue
24lundi 2 mai 2011
Exemple : Google
Les internautes avaient tendance à se focaliser sur les 3 premiers liens de résultats sur Google, tandis que maintenant ils se contentent plutôt des2 premiers liens.
On justifie cela par :• une amélioration de la pertinence des résultats,• ou de la paresse de la part des utilisateurs de Google.
Dans le cas où les internautes deviendraient de plus en plus paresseux(ce n'est qu'une hypothèse) il serait peut-être judicieux de leurdonner les informations en un minimum de clics.
C’est parti ! Je cogite
25lundi 2 mai 2011
• La règle des 3 clics n’est pas toujours possible
Exemple : Si un site de plusieurs milliers de pages souhaite utiliser cette règle, il faudrait des menus énormes (plus d'une centaine de choix). Cela ferait des pages horriblement surchargées.
En s’astreignant à respecter cette règle, vous risquezparadoxalement de compliquer la navigation sur votre site.
A économiser un clic vous risquez d’augmenter le nombre d’erreurs : Donc 2 clics simples valent mieux qu’un seul compliqué !
C’est parti ! Je cogite
Pourquoi faut-il se méfier de cette règle
A voir : http://arngren.net/
26lundi 2 mai 2011
• La règle des 3 clics peut-être appliquée par n’importe qui de manière immédiate.
• Elle aide à prendre conscience de l’importance du nombre de clics pour jugerde la qualité ergonomique d’un site.
• L’essentiel de cette règle est donc de permettre à l’internauted’atteindre facilement et rapidement son but.
Appliquez donc cet effet plutôt que d’appliquer la règle les yeux fermés.
C’est parti ! Je cogite
Le bon côté de la règle
A voir : http://www.dontclick.it
27lundi 2 mai 2011
Quelle taille choisirpour mon site web ?
C’est parti ! Je cogite
28lundi 2 mai 2011
Attention à votre espace
Espace disponible en fonction des résolutions d’écran
L’espace horizontal, une limite maximale
L’espace vertical et la notion de fold
C’est parti ! Je cogite
29lundi 2 mai 2011
• Ce n’est pas parce que vous visez une résolution de 1024 x 768 px que vous disposez de la totalité de cette espace pour votre site !(Barre de titre, barre de menus, barre d’outils, barre de chargement...)
• Donc prendre en référence le navigateur qui vous laissera le moins d’espace pour placer vos éléments sur le site.
• Utilisez un design semi-élastique pour absorber différentesrésolutions d’écran.
C’est parti ! Je cogite
Attention à votre espace
A voir : http://www.ffddansesportive.com/
30lundi 2 mai 2011
C’est parti ! Je cogite
Espace disponible en fonction des résolutions d’écran
Résolution cible Largeur maximale Hauteur visible à l’écran
800 x 600 px 780 px 400 px
1024 x 768 px 1000 px 570 px
1280 x 1024 px 1260 px 820 px
a x b px (a - 20) px (b - 200) px
A voir : http://www.w3counter.com/globalstats.php
31lundi 2 mai 2011
• Considérez la limite horizontale comme une limite finie. Sans quoi vous obtenez un ascenseur horizontale !
• Les internautes n’ont pas l’habitudes de voir des ascenseurs verticauxet ils ne les aimes pas du tout !
• Adapter ce maximum en fonction des exigences graphiqueset/ou marketing.
C’est parti ! Je cogite
L’espace horizontal : une limite maximale
A voir : http://deanoakley.com/http://www.allocine.fr/
32lundi 2 mai 2011
• Fold : ligne virtuelle représentant le bas de l’écran au-delà de laquelle il faut descendre pour voir la suite de la page.
• L’espace au dessus du fold doit contenir à minima : l’identité de votre site, la navigation principale, les outils fonctionnels, les informations capitales pour vos visiteurs.
• Faite apparaître l’existence de contenu sous le fold
C’est parti ! Je cogite
L’espace vertical et la notion de fold
A voir : http://www.sephora.frhttp://www.interflora.frhttp://www.habitat.fr
33lundi 2 mai 2011
C’est parti ! Je cogite
34lundi 2 mai 2011
C’est parti ! Je cogite
35lundi 2 mai 2011
C’est parti ! Je cogite
36lundi 2 mai 2011
Zoning
C’est parti ! Je cogite
37lundi 2 mai 2011
• Le zoning est un schéma rudimentaire des pages clés d'un site internet et de leurs zones principales : menus, logo, textes, moteur de recherche, ...
C’est parti ! Je cogite
Définition
38lundi 2 mai 2011
• Il n’est pas obligatoire de réaliser un zoning pour toutes les pages du site web mais au moins pour les plus importantes : pages d’accueil, page de rubrique, pages produits, pages articles
• À l'intérieur de ces pages il faut définir : > espaces de navigation ; > espaces de mise en avant de contenus ; > outils (recherche, panier...) ; > pied de page ; > espaces publicitaires ; > auto-promotions ; >...• Fournir des indications de hiérarchie visuelle. (Une zone doit-elle être plus forte visuellement qu’une autre ?)
C’est parti ! Je cogite
Les types de zones
39lundi 2 mai 2011
40lundi 2 mai 2011
C’est parti ! Je cogite
E Exercice : Créez le zoning du site 3pommes
41lundi 2 mai 2011
C’est parti ! Je cogite
LOGO
NAVIGATION PRINCIPALE
DESCRIPTIF
PIED DE PAGE
42lundi 2 mai 2011
La page d’accueil
C’est parti ! Je cogite
,
43lundi 2 mai 2011
Que mettre sur la page d’accueil
Recherche d’un compromis
Sa navigation
Les emplacements standards
Les types de zones
La notion de bruit visuel
C’est parti ! Je cogite
44lundi 2 mai 2011
Quelles sont les rôles principaux de la page d’accueil ?
C’est parti ! Je cogite
45lundi 2 mai 2011
• C’est la page ou les internautes se réfugient quand ils sont perdus
• Un des rôles principaux est de donner accès aux fonctionsprincipales du site, sans toutefois surcharger la page.
• La page d'accueil doit être utile au-delà de sa fonction de navigation.Elle doit permettre d'accéder aux informations les plus récentes.Le concepteur doit donc prévoir des raccourcis pour remonter ducontenu pertinent des pages internes vers la page d'accueil.
C’est parti ! Je cogite
Que mettre sur la page d’accueil ?
46lundi 2 mai 2011
• Entre trop et pas assez d'informations
• Entre densité informationnelle et facilité de la lecture :
• Plus le nombre de liens est important, plus il est probable que l'utilisateur y trouve quelque chose qui soit susceptible de l'intéresser.
• Plus le nombre de liens est important, plus il est difficilepour l'utilisateur de repérer celui qui l'intéresse.
C’est parti ! Je cogite
Recherche d’un compromis
47lundi 2 mai 2011
• Une page d'accueil sert d'abord à accéder aux contenus internes du site. Elle a donc une fonction de navigation, qui permet de mener aux contenus internes au site.
• Même navigation qu'à l'intérieur du site
• Une des règles à adopter sur la page d'accueil est de mettre en avant certaines rubriques du site.
L'ordre dans lequel on les présente dans la barre de navigation estdéjà un parti-pris, mais qui ne suffit pas toujours pour donnerenvie d'aller plus loin.
C’est parti ! Je cogite
Sa navigation
A voir : http://www.rowenta.frhttp://www.charlottegainsbourg.com/
48lundi 2 mai 2011
1. Un logo Emplacement recommandé : coin supérieur gauche
2. Une baselineEmplacement recommandé : sous / à droite du logo
3. Un champ de recherche lorsque le site fournit un moteur de recherche Emplacement recommandé : coin supérieur droit
4. La navigation principale.On recommande aussi que le bouton accueil ne soit pas cliquable, renforçant cette idée que l'on est déjà sur la page d'accueil. Emplacement recommandé : navigation horizontale : haut du site / navigation verticale : à gauche du site, sous le logo
5. Une présentation textuelle du siteElle doit mettre en avant l'intérêt du site pour les utilisateurs.
Emplacement recommandé : corps de la page, premier contenu à présenter
6. Les liens dits "utilitaires" (plan du site, contact, à propos de, presse, changement de langue, etc.) Emplacement recommandé : coin supérieur droit
7. Des remontées de contenu : soit en utilisant un facteur chronologique (on présente des raccourcis vers les dernières infos parues, les derniers produits sortis, etc.), soit en utilisant un facteur mise en avant (on présente des raccourcis vers les contenus que l'on veut pousser) Emplacement recommandé : corps de la page
8. Un pied de page (ensemble de liens reprenant la navigation principale ainsi que des liens utilitaires : plan de site, contact, mentions légales, etc.). Emplacement recommandé : bas de la page
C’est parti ! Je cogite
Les emplacements standards
49lundi 2 mai 2011
C’est parti ! Je cogite
Les types de zones
50lundi 2 mai 2011
• Les éléments inutiles sur une page web agissent comme autantde bruit visuel, qui vient perturber la simplicité de la page.L’internaute a donc plus de mal à se concentrer sur ce qui l'intéresse.
C’est parti ! Je cogite
La notion de bruit visuel
51lundi 2 mai 2011
En modeconception !
52lundi 2 mai 2011
Qu’est-ce qu’un Rough ?
Le choix des couleurs
La typographie
En mode conception
53lundi 2 mai 2011
Qu’est-ce qu’un rough
En mode conception
54lundi 2 mai 2011
• Cette technique permet d’évoquer de manière plus ou moins finalisée la mise en page du document : le visuel mis en scène, les accroches, les titres calligraphiés...
• Faire un rough n’est pas une perte de temps. >>>> Au contraire elle vous en fait gagner !
• Vous voyez tout de suite si quelque chose ne va pas.
• Le client peut vous dire si la futur créa lui convient ou non !
En mode conception
Qu’est-ce qu’un rough?
55lundi 2 mai 2011
En mode conception
Exemple rough
56lundi 2 mai 2011
E Exercice : Réaliser un rough du site internet 3Pommes
En mode conception
57lundi 2 mai 2011
En mode conception
58lundi 2 mai 2011
En mode conception
58lundi 2 mai 2011
En mode conception
58lundi 2 mai 2011
En mode conception
58lundi 2 mai 2011
En mode conception
58lundi 2 mai 2011
En mode conception
58lundi 2 mai 2011
En mode conception
58lundi 2 mai 2011
En mode conception
58lundi 2 mai 2011
En mode conception
58lundi 2 mai 2011
Le choix des couleurs
En mode conception
59lundi 2 mai 2011
Comment choisir les couleurs ?
En mode conception
60lundi 2 mai 2011
• Les couleurs primaires sont les couleurs principales, toutes les autres couleurs découlent de celles-ci. Elles sont le rouge (Magenta), le bleu (cyan) et le jaune.
Les couleurs primaires
En mode conception
61lundi 2 mai 2011
• Les couleurs secondaires, appelées également couleurs binaires sont un mélange direct des couleurs primaires. Magenta et Cyan donnent du Violet, Cyan et Jaune donnent le Vert, Jaune et Magenta donnent le Orange.
Les secondaires
En mode conception
62lundi 2 mai 2011
• Les couleurs tertiaires également appelés couleurs intermédiaires sont réalisées grâce au mélange d’une couleur primaire et d’une couleur secondaire.
Les tertiaires
En mode conception
63lundi 2 mai 2011
• Les couleurs complémentaires sont la base de la création d’une charte graphique, on ne peut pas, ou alors avec beaucoup de mal créer une charte avec des couleurs qui ne s’accordent pas. On peut voir sur le cercle que les couleurs complémentaires sont diamétralement opposées l’une de l’autre, et c’est le cas pour chaque couleur, sa complémentaire est opposée.On utilise souvent les couleurs complémentaires afin de créer un choc visuel.
Les complémentaires
En mode conception
64lundi 2 mai 2011
• Les couleurs analogues sont des couleurs qui sont proches les unes des autres sur le cercle chromatique. On utilise ces ensembles de couleurs afin de créer des site harmonieux. Ces couleurs mises ensemble apportent une composante de couleur principale (Cf vert).Dans ce cas, si on prend le vert et ses proches couleurs de droite et de gauche, on appel cela « Analogue Triple ».
Les accords analogues
En mode conception
65lundi 2 mai 2011
• Les accords isocèles sont obtenus en choisissant trois couleurs qui forment un triangle isocèle sur le cercle chromatique. Les accords isocèles représente le choix ultime pour commencer une création sans trop de complications. La couleur dite « tonique » sera celle du sommet du triangle, et la « dominante » sera l’une des deux de la base.
Les accords isocèles
En mode conception
66lundi 2 mai 2011
• Les accords tetradics également appelés accords 4 tons en rectangle nous donnent une paire de couleurs complémentaires. Ce type d’accord laisse beaucoup de choix en terme de créativité, mais il faut faire un choix pour la « dominante ». La couleur « tonique » sera alors la complémentaire de la « dominante » choisie.
Les accords Tétradics
En mode conception
67lundi 2 mai 2011
• On obtient celui-ci en prenant 3 couleurs les unes à côtés des autres sur le cercle chromatique, plus la complémentaire de celle qui se trouve au centre. La couleur « tonique » sera la complémentaire, et la « dominante » sera sa couleur opposée.
Les accords en T
En mode conception
68lundi 2 mai 2011
Ce qu’elles évoquent
En mode conception
69lundi 2 mai 2011
• Amour, ardeur, colère, enthousiasme, passion
• Le rouge est souvent la première couleur que nous remarquons, il attire l’attention
En mode conception
Le rouge
70lundi 2 mai 2011
En mode conception
71lundi 2 mai 2011
• Dynamisme, exubérance, sociabilité, sympathie
• La couleur orange est un mélange de rouge et de jaune, empruntant ses caractéristiques aux deux couleurs.Elle possède l’énergie et la vitalité du rouge et la joie et l’enthousiasme du jaune.
• Ce qui en fait une couleur énergique, suggérant l’entrain, la spontanéité et la créativité
En mode conception
L’orange
72lundi 2 mai 2011
En mode conception
73lundi 2 mai 2011
• Bonheur, curiosité, optimisme, spontanéité
• Couleur du soleil, le jaune illumine littéralement nos vies.Symboliquement, c’est la couleur la plus joyeuse du spectre.Elle véhicule des sentiments d’optimisme, de joie et de spontanéité.
• C’est une couleur qui s’impose. il est impossible de ne pas la voir.(exemple taxi de NY)
• Placer des caractères noirs sur fond jaune constitue la combinaison chromatique la plus lisible et stimule la mémorisation(exemple panneau de signalisation)
En mode conception
Le jaune
74lundi 2 mai 2011
En mode conception
75lundi 2 mai 2011
• Écologie, espoir, générosité, harmonie
• Le vert pâle est la couleur la plus relaxante du spectre. C’est aussi la couleur la plus agréable à l’oeil et peut même faciliter la lisibilité.
• Les verts vifs évoquent le printemps, la nature, la vie et l’énergie.
• Les vert plus sombre sont associés à la stabilité et à la croissance, suggérant la réussite et un statut social élevé.
• Le vert est la couleur internationale de la sécurité
En mode conception
Le vert
76lundi 2 mai 2011
En mode conception
77lundi 2 mai 2011
• Calme, confiance, fiabilité, ordre
• Le bleu est la couleur la plus appréciée au monde, particulièrement des hommes
• Toutes les associations avec la couleur bleu sont positives, ce qui en fait une couleur engageante et pacifique
• le bleu marine induit le respect, la fiabilité, la confiance, la fidélitéet l’intégrité
En mode conception
Le bleu
78lundi 2 mai 2011
En mode conception
79lundi 2 mai 2011
• Mort, mysticisme, secret, spiritualité
• Le mauve royal exalte le pouvoir, la passion, la sensualité et le luxe
• Le mauve prune foncé est spirituel et mystérieux, avec un côté digne et strict
• Les couleurs lavande et violette ont un aspect doux romantique et nostalgique
• Les femmes citent souvent le mauve comme leur couleur préférée;
En mode conception
Le violet
80lundi 2 mai 2011
En mode conception
81lundi 2 mai 2011
• Contemplation, ennuie, sobriété
• Le gris représente le détachement, ce qui lui confère une autorité stricte, digne et conventionnelle.
• Il est dépourvu de chaleur, ce qui peut le rendre distant, solennel et un peu sinistre s’il est utilisé tout seul
• Le gris est associé à la sagesse et à la maturité.
• Les gris métalliques apportent une idée de vitesse et de compétence
En mode conception
Le gris
82lundi 2 mai 2011
En mode conception
83lundi 2 mai 2011
• Pureté, innocence, bonté et vérité
• Même si le blanc est neutre ont le considère comme une couleur froide, du fait de son association avec la neige et la glace
• Le blanc est souvent utilisé pour suggérer la simplicité, la propretéet la sûreté
En mode conception
Le blanc
84lundi 2 mai 2011
En mode conception
85lundi 2 mai 2011
• Dureté, autorité, sobriété, élégance, raffinement, luxe
• Le noir, la couleur la plus stricte et la plus intimidante, peut paraître agressive lorsqu’on en abuse
• Le noir est perçu comme conventionnel, sévère et digne.On l’utilise pour exprimer le respect en des occasions solennelles
En mode conception
Le noir
86lundi 2 mai 2011
En mode conception
87lundi 2 mai 2011
Annonceurs et webdesign
En mode conception
88lundi 2 mai 2011
En mode conception
89lundi 2 mai 2011
En mode conception
90lundi 2 mai 2011
En mode conception
91lundi 2 mai 2011
En mode conception
92lundi 2 mai 2011
En mode conception
93lundi 2 mai 2011
La typographie
En mode conception
94lundi 2 mai 2011
• La typographie est un des éléments les plus importants dans la conception d’un site web, et le design de cette typographie est proportionnel à la qualité du site.
• Une bonne typographie contribue à établir de bonnes hiérarchies visuelles, ce qui entraine le lecteur sur la page, selon le niveau d’importance des différents textes et images.
• Une structure visuelle se compose essentiellement des éléments suivants : les images, les typographies et les couleurs.
En mode conception
Principes
A voir :
http://www.fly.fr/FR/accueil.htmlhttp://www.ikea.com/fr/
95lundi 2 mai 2011
Quelle police choisir ?
En mode conception
96lundi 2 mai 2011
• Le choix principal qui se pose quand il s'agit de choisir une police de caractère est "avec ou sans serif".
En mode conception
Quelle police choisir ?
E Exercice : Quelle est la différence entre une police avec serif et une sans serif ?
97lundi 2 mai 2011
• Une police avec serif a des empattements au bout des caractères
• Une police sans serif n'en a pas.
En mode conception
Quel typo choisir ?
98lundi 2 mai 2011
• Certaines études avançaient que les polices sans-serif étaient plus adaptées à la lecture à l'écran.
Au-delà de cette consigne, il est encore plus préférable de choisir une police de caractère qui a été conçue pour la lecture à l'écran. Ce genre de police existe aussi bien avec serif que sans serif.
En mode conception
Quel typo choisir ?
99lundi 2 mai 2011
• Georgia est une police serif conçue pour l'écran, alors que Times est une police serif conçue pour l'impression.Verdana est une police sans serif conçue pour la lecture à l'écran.
En mode conception
Quel typo choisir ?
A voir :
http://www.thetimes.co.uk/tto/news/http://www.lemonde.fr/
100lundi 2 mai 2011
Les familles de typo
En mode conception
101lundi 2 mai 2011
• Polices a empattements (serif)
font-family: "Times New Roman", Times, "Liberation Serif", FreeSeriffont-family: Georgia, "DejaVu Serif"
En mode conception
Les familles de polices
102lundi 2 mai 2011
• Polices sans empattements (sans-serif)
font-family: Arial, Helvetica, "Liberation Sans", FreeSans ; font-family: "Trebuchet MS", Arial, Helvetica ; font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Luxi Sans"; font-family: Tahoma, Geneva, Kalimati ; font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva ; font-family: Impact, "Arial Black";
En mode conception
Les familles de polices
103lundi 2 mai 2011
• Polices à chasse fixe (monospace)
font-family: "Courier New", Courier, "Liberation Mono"; font-family: Monaco, "DejaVu Sans Mono", "Lucida Console", "Andale Mono";
En mode conception
Les familles de polices
104lundi 2 mai 2011
Jouer avec les espaces et les objets
En mode conception
105lundi 2 mai 2011
• Gérer l’espace sur une page web avec l’utilisation de la typographie et des images peut produire d’étonnants effets.
• Il ne faut pas mettre trop de texte et éviter de surcharger les espaces vides pour ne pas distraire le lecteur… ces espaces peuvent être à votre avantage.
L’objet doit attirer au maximum l’œil du lecteur, cela accentuera son attention et donc l’intégration du message.
En mode conception
Jouer avec les espaces et les objets
106lundi 2 mai 2011
En mode conception
107lundi 2 mai 2011
C’est le moment de deviser
108lundi 2 mai 2011
• Consulter les sites et forums de graphistes, renseignez-vous auprès de vos anciens professeurs et de graphistes installés dans la profession depuis longtemps.
• Au fil des expériences, déterminez les travaux sur lesquels vous êtes à l’aise et plus rapide. C’est sur postes là que vous pourrez augmenter les tarifs.
• Sachez tenir compte du client que vous avez en face de vous.Vous ne pouvez pas proposer les mêmes tarifs à la sympathiqueassociation de votre quartier qu’à la grande entreprise de votre département !
C’est le moment de deviser
Quels tarifs pratiquer ?
109lundi 2 mai 2011
• Charte graphique d’un site + 3 à 4 écrans fixes : de 1200 à 1600 euros• Création d’un site web simple : de 2000 à 3500 euros• Création d’un site web complet : de 3000 à plus de 20 000 euros selon la taille de l’entreprise
C’est le moment de deviser
Quelques tarifs
110lundi 2 mai 2011
Bibliographie
111lundi 2 mai 2011
Ergonomie Web - 2e éditionPar Amélie BoucherEdition : Eyrolles
L’harmonie des couleurs - Le guidePar Tina Sutton & Bride M. WhelanEdition : Pyramid
Lexique des règles typographiquesEdition : L’imprimerie nationale
Guide du graphiste indépendantPar Christelle Capo-ChichiEdition : Pyramid
112lundi 2 mai 2011