Webdesign - Freejlguillaume.free.fr/www/documents/teaching/ntw1011/LI385_C8_Web… · Webdesign ?...

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 !


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...


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;


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


10lundi 2 mai 2011

http://www.1and1.fr

http://www.1and1.fr

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, ...)


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


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.


15lundi 2 mai 2011


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


A voir : Virgin : www.virginmega.frRéservoir-Jeux : www.reservoir-jeux.comAnpe : www.pole-emploi.fr/accueil

17lundi 2 mai 2011

http://www.virginmega.fr


http://www.reservoir-jeux.com

http://www.reservoir-jeux.com

http://www.pole-emploi.fr/accueil


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.


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 ?


19lundi 2 mai 2011

Édition/Presse

Portfolio

Communication visuel

Print

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


20lundi 2 mai 2011


21lundi 2 mai 2011

La navigation en 3 clics


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


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.


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.


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é !


Pourquoi faut-il se méfier de cette règle

A voir : http://arngren.net/

26lundi 2 mai 2011

http://www.dontclick.it


• 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.


Le bon côté de la règle

A voir : http://www.dontclick.it

27lundi 2 mai 2011



Quelle taille choisirpour mon site web ?


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


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.


Attention à votre espace

A voir : http://www.ffddansesportive.com/

30lundi 2 mai 2011




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.


L’espace horizontal : une limite maximale

A voir : http://deanoakley.com/http://www.allocine.fr/

32lundi 2 mai 2011



http://www.allocine.fr

http://www.allocine.fr

• 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


L’espace vertical et la notion de fold

A voir : http://www.sephora.frhttp://www.interflora.frhttp://www.habitat.fr

33lundi 2 mai 2011








34lundi 2 mai 2011


35lundi 2 mai 2011


36lundi 2 mai 2011

Zoning


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, ...


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 ?)


Les types de zones

39lundi 2 mai 2011

40lundi 2 mai 2011


E Exercice : Créez le zoning du site 3pommes

41lundi 2 mai 2011


LOGO

NAVIGATION PRINCIPALE

DESCRIPTIF

PIED DE PAGE

42lundi 2 mai 2011

La page d’accueil


,

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


44lundi 2 mai 2011

Quelles sont les rôles principaux de la page d’accueil ?


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.


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.


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.


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


Les emplacements standards

49lundi 2 mai 2011


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.


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

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


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


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 !


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


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

Webdesign - Freejlguillaume.free.fr/www/documents/teaching/ntw1011/LI385_C8_Web… · Webdesign ?...

Documents

Transcript of Webdesign - Freejlguillaume.free.fr/www/documents/teaching/ntw1011/LI385_C8_Web… · Webdesign ?...