Checklist Web Designer | w3q
 Share
The version of the browser you are using is no longer supported. Please upgrade to a supported browser.Dismiss

 
View only
 
 
Still loading...
ABCDEFGHIJKLMNOPQRSTU
1
2
Checklist qualité du Web designerCritères de validation
3
Pour w3qualitéhttp://w3qualite.net/OKLe critère est validé
4
Sous license CC-BY-SA 4.0http://creativecommons.org/licenses/by-sa/4.0/deed.frKOLe critère est invalidé
5
Dernière mise à jour07/05/2014NALe critère n'est pas applicable
6
7
Attention : cette checklist est un exemple réalisé dans le cadre de l'article "Ma checklist qualité du web designer" ( http://w3qualite.net/demarche/ma-checklist-qualite-du-web-designer ). Il ne s’agit pas d’une checklist aboutie mais bien d'un exemple. Aussi pour cette raison, elle est volontairement incomplète et je vous conseille de lire l'article précédent avant toute utilisation de cette checklist.
8
9
Valid.CritèreDescription
10
Organisation des fichiers
11
Conserver l'ensemble des sources dans un répertoire dédié.Créer un répertoire pour stocker l'ensemble des ressources utilisées (photos, textes,…) dans le PSD. Ce dernier pourra être nommé "Assets" ou "Ressources" par exemple, selon les préférences et l'organisation de chacun.
12
Nommer les fichiers de manière à ce qu'ils soient compréhensibles.Le nom du fichier doit correspondre à son contenu. Pour créer différentes versions d'un document, privilégier un horodatage (par exemple 2014_04_01_nom-du-fichier) plutôt que "final", "last" ou tout autre dénomination qui est toujours contredite par la suite.
13
Donner un nom pertinent aux calques et dossiers.Les calques doivent être nommés de manière à ce qu'on comprenne facilement à quoi il correspond dans le document. Il est important de ne pas avoir des calques nommés "Calque 1", "Copie de calque 1" ou d'autres appelations sans aucun sens.
14
Organiser et hiérarchiser le document avec des dossiers.Pour se retrouver simplement dans le document, il est nécessaire de hiérarchiser au maximum les informations. On peut par exemple regrouper les calques par zones de la page : entête, pied de page, menu…
15
Regrouper les éléments récurrents dans des objets dynamiquesLes éléments communs à plusieurs pages peuvent être externalisés dans des fichiers indépendants, insérés en tant qu'objet dynamique dans chaque page.
16
Paramétrage de l'outil
17
Utiliser un profil de couleur RVB ou sRVB.Le profil colorimétrique d'un écran est le RVB, il convient donc d'utiliser ce profil dès le départ. Autrement, utiliser un autre profil (comme, au hasard, CMJN) provoquera une dénaturation des couleurs lors de leur affichage sur écran.
18
Utiliser l'unité pixels.Le pixel étant l'unité de mesure sur écrans, il convient de l'utiliser lors de la conception d'un design.
19
Utiliser le magnétisme des pixels pour les formes vectorielles.Lors de l'utilisation de l'outil forme, vérifier que la case à cocher "Magnétisme des pixels" est cochée. Cette mesure permet d'éviter les bordures floues des formes vectorielles (occasionnées par un décalage entre la position de la forme et la grille de pixels).
20
21
Fichiers externes (images, vecteurs…)
22
Insérer les éléments externes sous forme d'objets dynamique.Insérer les éléments externes comme les vecteurs et images en tant qu'objet dynamique permet d'appliquer des effets et modifiers l'élément sans altérer le fichier source.
23
Joindre les fichiers externes avec le PSD.
24
Typographie
25
Ne pas aplatir les textes.Les textes doivent rester sélectionnables : pour être copiés/collés aisément d'une part et pour retrouver les réglages typographiques si nécessaire.
26
Utiliser des tailles de texte sans décimales.Il n'est pas possible d'avoir des tailles de texte avec décimales en HTML (16,5 pixels n'existe pas !), il faut donc veiller à définir des tailles entières.
27
Utiliser les fonts exotiques avec attention.Vérifier que la font est conçue pour être utilisée sur le web (licence, rendu sur écran).
Vérifier que la font contient les caractères accentués et caractères spéciaux utilisés dans les langues prévues sur le site.
28
Joindre les fonts exotiques avec le PSD.
29
Ne pas justifier le texte.
30
Éléments d'interface
31
Intégrer des liens d'évitement.
32
Intégrer un fil d'ariane.
33
Intégrer les différents états des éléments interactifs (liens, boutons…).
34
Ne pas personnaliser les éléments de formulaire.
35
36
Contenus
37
Intégrer un intitulé explicite pour chaque lien (pas de "en savoir plus").
38
Donner un titre à chaque tableau de données.
39
Indiquer le format et le poids des documents (Word, PDF…).
40
Indiquer lorsqu'un lien s'ouvre dans une nouvelle fenêtre.
41
Indiquer lorsqu'un lien ou un document est dans une langue étrangère.
42
Accompagner chaque champ de formulaire d'un intitulé textuel.
43
Mise en forme
44
Ne pas transmettre d'information uniquement par la couleur.
45
Ne pas transmettre d'information uniquement par la forme.
46
Pour chaque texte, assurer un contraste suffisant avec son arrière-plan.
47
48
49
50
51
52
53
54
55
Sources
56
Guidelines pour produire des PSD adaptés au web – STPohttp://www.stpo.fr/blog/guidelines-pour-produire-des-psd-adaptes-au-web/
57
Photoshop Etiquette (en anglais) – Dan Rosehttp://photoshopetiquette.com/
58
Liste des bonnes pratiques "Design" – Opquasthttp://checklists.opquast.com/fr/oqs-v2?q=design
59
Notice d'accessibilité pour la conception graphique – Atalanhttp://wiki.accede-web.com/notices/graphique-ergonomique
60
Optimisez vos fichiers Photoshop – Vectorskinhttp://www.vectorskin.com/controle-qualite-web/optimiser-psd-decoupage/
61
Créer plusieurs pages avec Photoshop – Luc Poupardhttp://www.kloh.ch/creer-plusieurs-pages-avec-photoshop-253
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
Loading...
 
 
 
Feuille 1