Bases du Web Design

BTS SIO
SLAM5
Bases du design (web / application)
1 GÉNÉRALITÉS
Créer un site web ou une application nécessite généralement de proposer des interactions avec
des utilisateurs.
Les informaticiens et développeurs ont tendance à croire que les choses sont évidentes : habitués
aux boutons radio, checkbox, champs de saisie, ainsi qu’aux différentes manipulations (clic gauche,
clic droit, double-clic, sélection, glisser-déposer… et là je n’ai parlé que de la souris), ils oublient
que d’autres utilisateurs sont novices :
•
personnes âgées (habituées à d’autres mécanismes)
•
personnes étrangères (les arabes lisent de droite à gauche, les japonais peuvent écrire/lire
verticalement… )
•
autres (professionnels, enfants, étudiants en SISR, … )
Voici donc quelques éléments pour vous aider à concevoir une bonne interface graphique.
2 PLACEMENTS
Il est important de placer correctement (et par zone) les entrées et les résultats.
2.1 FORMAT
Selon l’écran et selon la taille, vous devrez
choisir le format de votre application.
Dans une page web, le choix est encore plus
compliqué, car le terminal (PC, smartphone,
etc.) ne sont jamais les mêmes. On utilise le
terme "web responsive" pour décrire une
application
capable
de
s’adapter
dynamiquement à la taille de l’écran.
https://openclassrooms.com/courses/qu-estce-que-le-responsive-web-design
David ROUMANET
07/12/2016 (v.17)
1
BTS SIO
SLAM5
Bases du design (web / application)
2.2 MENUS
Plutôt que de tout avoir sur une seule interface, il devient souvent nécessaire de découper les
fonctionnalités d’une application en plusieurs groupes. L’accès nécessite alors un menu.
Généralement, les menus sont rapidement accessibles : on les trouve en haut ou à gauche,
rarement à droite ou en bas.
Vous devez en tout cas créer une interface ou tout "tombe sous la main".
2.3 INTERFACE
Dessiner une interface ne demande pas beaucoup de temps à la main mais prendrait énormément
de temps pour un résultat moyen sous un logiciel de retouche photo (ou de dessin) comme Paint.
Il existe un outil gratuit, spécialisé dans le design d’interface, appelé Pencil :
http://pencil.evolus.vn/
David ROUMANET
07/12/2016 (v.17)
2
BTS SIO
SLAM5
Bases du design (web / application)
3 COULEURS
Le choix des couleurs est un élément essentiel… mais encore faut-il en faire un bon usage !
3.1 PALETTON
http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF
Ce site permet de choisir sur le cercle externe, les couleurs dominantes du site ou de l’interface.
Ensuite, il suffit de déplacer les cercles internes pour obtenir les tonalités de même ton ou
inversement visible pour obtenir un thème lisible et contrasté.
En passant la souris sur les cases à droite, vous obtenez le code couleur en hexadécimal.
3.2 STAINLESS VISION
http://www.stainlessvision.com/blog/files/ColourContrastVisualiser.swf
David ROUMANET
07/12/2016 (v.17)
3
BTS SIO
SLAM5
Bases du design (web / application)
Ce site permet de choisir la meilleure combinaison entre un fond et une écriture.
Il suffit de choisir la plage de couleur sur le bandeau vertical puis déplacer le cercle et la zone
hachurée se modifie pour indiquer les couleurs à éviter.
Un exemple est affiché au-dessus pour montrer le résultat.
Le code couleur est indiqué en bas de chaque cadre.
4 IMAGES
Votre site ou bien votre application sera plus intuitive si elle utilise des icônes ou images : l’aspect
mnémotechnique (associer un dessin à une fonction) permet d’alléger la lecture d’une interface.
Cependant, à moins d’être graphiste, vous ne pouvez pas utiliser n’importe quelles images
trouvées sur le web. En effet, le droit et la licence de chaque image n’est pas toujours défini mais
un jour vous pouvez être assigné en justice par un auteur qui reconnaîtrait son œuvre.
4.1 PNG FACTORY
http://www.pngfactory.net/
David ROUMANET
07/12/2016 (v.17)
4
BTS SIO
SLAM5
Bases du design (web / application)
Le site propose de nombreuses images libres de droits et de bonne qualité. Le format PNG
autorisant la transparence, il devient possible de placer une image sur un fond coloré sans que
l’image paraisse "rectangulaire".
David ROUMANET
07/12/2016 (v.17)
5
BTS SIO
SLAM5
Bases du design (web / application)
4.2 INTERFACE FLAT VECTOR
http://plainicon.com/browse-best-icons/interface-category/1
Plutôt orienté symboles, ce site permet de trouver de nombreuses images évocatrices dans les
interfaces techniques (téléphones, télévisions, ordinateurs, etc.)
David ROUMANET
07/12/2016 (v.17)
6