Synthèse – Webdesign

© Sophie Mouton
 Table des matières
COURS 1 : INTRODUCTION .............................................................................................................................. 1
LES ACTEURS DU MONDE INTERNET .............................................................................................................................. 1
DIMENSIONS TECHNIQUES DU WEB .............................................................................................................................. 1
ACCESSIBILITÉS : PORTABILITÉS ................................................................................................................................... 3
RESPONSIVE WEB DESIGN .......................................................................................................................................... 4
COURS 2 : ERGONOMIE, UX, UI ....................................................................................................................... 5
L’ERGONOMIE ......................................................................................................................................................... 5
UX ET UI................................................................................................................................................................ 5
RÈGLES DE L’UX ET L’ERGONOMIE ............................................................................................................................... 8
COURS 3 : PUBLIC CIBLE, NAVIGATION, ARCHITECTURE DE L’INFO .................................................................. 9
DÉFINIR SON PUBLIC CIBLE ......................................................................................................................................... 9
PERSONA ............................................................................................................................................................... 9
COMPORTEMENT DE NAVIGATION ............................................................................................................................... 9
ÉLABORATION DE L’ARBORESCENCE ........................................................................................................................... 10
COURS 4 : UI – WEB DESIGN LOOK AND FEEL ................................................................................................ 12
UI : GRID SYSTEM .................................................................................................................................................. 12
NOMENCLATURE D’UNE PAGE WEB ............................................................................................................................ 12
WIREFRAMES ........................................................................................................................................................ 13
COURS 5 : UI ................................................................................................................................................. 14
ATOMIC DESIGN & DESIGN SYSTEM ........................................................................................................................... 14
UI – LA TYPO ........................................................................................................................................................ 15
UI – LA COULEUR ................................................................................................................................................... 18
UI – LES IMAGES.................................................................................................................................................... 20
MISE EN FORME .................................................................................................................................................... 20
UI IS FASHION ....................................................................................................................................................... 20
MOODBOARD ....................................................................................................................................................... 20
COURS 6 : MOBILE FIRST ............................................................................................................................... 21
MOBILE EVOLUTION ............................................................................................................................................... 21
PROTOCOLE INTERNET............................................................................................................................................. 21
MOBILE INTERNET IN BELGIUM ................................................................................................................................. 21
APP, WEB APP & RESPONSIVE ................................................................................................................................. 22
USABILITY SMARTPHONE ......................................................................................................................................... 23
CONTRAINTES ET OPPORTUNITÉS TECHNIQUES ............................................................................................................. 24
LEXIQUE ........................................................................................................................................................ 24

© Sophie Mouton
 Cours 1 : INTRODUCTION
LES ACTEURS DU MONDE INTERNET
Agence web : les acteurs

DIMENSIONS TECHNIQUES DU WEB

Contraintes spécifiques du web ?
Un site web a pour particularité d’être utilisé par le biais d’équipements hétérogènes, aussi bien
logiciels, que matériels, et via des moyens de connexions différents.

ð Conception orientée utilisateur UX

ð Oublier l’idée que l’on contrôle entièrement le site

Attention aux :
- Limites matérielles (PC vs. Mac / Smartphones / Tablettes)
- La disparité logicielle (browsers)
- Difficulté de prévoir le comportement de l’internaute

Dimension technique du web

HTML : HyperText Markup Language
ð Langage de balise pour présenter les pages web
ð <p> mon texte </p>

CSS : Cascading Style Sheet

ð Mise en forme du contenu (textes, images liens) et du design (positionnement des blocs de
contenu dans la page, box model)
ð Font-family : Verdana, Geneva, sans-serif ; font-size : 0.9em ; color : #000 ;

W3C : World Wide Web Corporation

ð Académie française du langage HTML
ð Détermine les standards de l’HTML et CSS
ð But : promouvoir la compatibilité des technologies (HTML-CSS-XHTML-XML…)

© Sophie Mouton 1
Site statique vs. dynamique

CMS : Content Management System

ð Conception et mise à jour de sites web ou application multimédia sans utilisation de langage
de programmation
ð Séparation design / contenu :
o Contenu à base de données
o Présentation côté client à UI
§ Double fonction : mise en page CSS + mise en forme (qui va où)
ð Open-source (ex : WordPress, Drupal, Magento…)
ð Homemade CMS (mais attention au lien avec agence web)

HTML5 + CSS3 : Avantages

ð Nouvelles balises plus simples
ð Optimisation du temps de chargement des pages
ð Smartphone
ð Open-source
ð Géolocalisation
ð Responsive webdesign

HTML5 + CSS3 : Inconvénients

ð Plus beaucoup ! Un vrai standard sur l’ensemble des navigateurs contemporains

Framework
Un framework est un espace de travail modulaire, constitué d’un ensemble de bibliothèques, d’outils
et de conventions permettant le développement rapide d’application. Il fournit aussi une structure
pour l’application. Par extension, un framework web est un ensemble d’outils spécialisés pour le
développement d’applications web.

Le jQuery
ð 2005 : inventé par John Resig
ð Volonté de simplifier le code et la syntaxe
ð 2010 : jquery pour smartphones
ð 2012 : devient un standard sur le web
ð 2014 : 1 site sur 2 sur le web > 80%

© Sophie Mouton 2
Librairie jQuery
jQuery est un framework JavaScript très célèbre, permettant en quelques lignes de code de dynamiser
un site web, de créer de petites animations, des interactions avec l’internaute (UX).

Framework HTML
Bootstrap, framework HTML, CSS et JS le plus célèbre.

ACCESSIBILITÉS : PORTABILITÉS
Accessibilité
Caractérise ce qui peut être atteint mais aussi ce qui est compréhensible.
Ces deux aspects revêtent une importance capitale pour le web, où l’info transmise doit être accessible
au plus grand nombre possible de lecteurs.

Déficients visuels
AnySurfer est un label de qualité qui atteste de l’accessibilité des sites internet pour les malvoyants
Objectifs :
ð Trajet d’accompagnement lors du développement de nouveaux sites
ð Trajet de labellisation pour les sites existants
ð Services (formation - aides à la conception)

Portabilité sur les écrans

Assurer la portabilité sur les écrans :
ð En 4/3 : 1280px * 1024px (responsive webdesign)
ð En 16/9 : 1280px * 800px ou 1440px * 900px

© Sophie Mouton 3
RESPONSIVE WEB DESIGN
Le responsive web design englobe les techniques de conception de contenus Internet qui permettent
de proposer des contenus auto-adaptables en fonction des interfaces de consultation utilisées par le
visiteur. Un responsive design c’est la capacité d’un site web à s’adapter au terminal de lecture.

Les ingrédients :
ð Une grille de mise en page flexible
ð Des images et des médias flexibles
ð Les média queries - CSS3

Breakpoints ou points de rupture

C’est un jalon, une taille particulière à partir de laquelle on bascule sur un autre style d’affichage. Avec
les largeurs définis ci-dessus, on peut en déduire les limites de passage d’un affichage « smartphone »
à un affichage « tablette », etc. Il s’agit en fait de regrouper les formats équivalents afin de simplifier
la vie du webdesigner et de l’intégrateur, et regrouper vos affichages en 3 ou 4 catégories. Pour parler
« code », ce sont les valeurs que vous allez utiliser dans les @media query de vos feuilles de style.

Media Queries
Ce sont des spécifications de CSS3 qui permettent d'attribuer des propriétés CSS en fonction de
conditions particulières (exemple : largeur de l'écran). Ces spécifications sont particulièrement
connues pour leurs utilités dans la conception d'un responsive web design.

© Sophie Mouton 4
 Cours 2 : ERGONOMIE, UX, UI
L’ERGONOMIE
Ergonomie web
L’ergonomie web se définit comme la mise en œuvre d’un ensemble de règles pour concevoir un site
facile d’utilisation où l’information est aisément accessible. L’ergonomie implique d’adapter la
structure, l’aspect et le contenu du site en fonction du profil des utilisateurs.

Ergonomie informatique
L’ergonomie informatique a pour objectif d’améliorer le dialogue homme/ordinateur. C’est en mettant
en place de méthodes d’ergonomie générale, notamment vie l’analyse du travail, que l’on va atteindre
l’objectif final.

Généalogie de l’ergonomie web

UX ET UI
UX Users eXperience
Le design d’expérience utilisateur est une façon nouvelle et radicalement différentes de penser les
dispositifs numériques. Démarche pragmatique, pluridisciplinaire, orientée vers la résolution des
problèmes et résolument tournée vers l’innovation. Design de service !

UI Users Interface
Interface utilisateur est le dispositif qui permet à un usager de manipuler un site web, un smartphone,
une tablette,…

© Sophie Mouton 5
 « Pensez d’abord en termes d’expérience plutôt qu’en terme d’esthétique ».

à On schématise puis on design.

Objectifs de UX
Deux objectifs : utilité + usability

ð Notion d’utilité :
o Capter > répondre à un besoin, je viens sur un site POUR faire quelque chose
ð Usability Users friendly :
o Prolonger > utiliser avec efficacité et apportant la satisfaction, le plus
facilement possible

De façon générale, l’utilisabilité d’un site web comprend :

ð Sa simplicité d’utilisation
ð Sa facilité d’apprentissage
ð La satisfaction de ses utilisateurs

Efficacité : interface utilisable

Efficience : rapidement
Satisfaction : un client content va revenir chez nous

Quelques idées reçues

La règle des 3 clics
Une info serait plus difficile à atteindre si le nombre de clics augmentent.
FAUX : dépend du contexte. Quitte pas un site parce qu’on clique trop mais parce qu’on ne trouve pas.
> Website Flow

Profondeur du site = profondeur de l’information

cfr Arborescence du site sitemap

© Sophie Mouton 6
Surestimer l’internaute
Qui visite notre site ? Grand-mère ou ado ?

UX vs. UI
Objectifs différents mais pas opposés
Objectifs de communication : vitrine de produits / interface fonctionnelle
Wireframe (UX) > Webdesign (UI)

Les internautes lisent en F (aussi avec Z et E)

Le site et son environnement guide l’œil à Le design va influencer la lecture
F-Layouts ou Z-Layouts
« By understanding the reading patterns of the users who visit your website you are
able to place the most important content in the areas where they will be most effective. »

Les internautes ne scrollent pas

Si le site correspond aux besoins, on scrolle
Cut-off design ou ligne de flottaison (va évoluer en fonction de la résolution de l’écran)
Il faut mettre un maximum de choses au-dessus de cette ligne de flottaison
Cut-off web design = le “fold” du journal

Le nombre magique de Miller et la Loi de Hick

7 items = seuil maximal
Mémoire de travail ou à court terme
Empan (mesure, correspond à la taille d’un poing, =mémoire à ct)

Dans la peau de l’internaute

La théorie de la Gestalt (forme)
C’est la manière dont notre cerveau analyse le monde environnant comme un ensemble de forme.

Loi de proximité
Notre cerveau regroupe des choses. La proximité doit respecter la logique des contenus.
Proximité au niveau microscopique. Il faut penser Gestalt au niveau microscopique et macroscopique.

Loi similarité
La Loi de similarité prétend que les éléments qui apparaissent similaires sont perçus comme une seule
unité.

© Sophie Mouton 7
RÈGLES DE L’UX ET L’ERGONOMIE
Organisation visuelle
Trop d’infos tuent l’info. Trop de choix tuent le choix.
ð Éviter la surcharge visuelle
ð Les mots doivent lutter pour leur survies

Aide : le site aide et dirige l’internaute

ð Organisation visuelle :
o call to action & visibilité sans scroll cfr cut-off
ð Principe d’affordance :
o capacité d’un objet à savoir comment il fonctionne
o repérer ce qui est cliquable, design, images de produits, champ de saisie sur couleur
et non rempli + affordance temporaire highlight sur champs en cours de saisie

Convention de l’internaute
ð Attention aux habitudes : vous n’êtes pas le 1er sur internet. L’utilisateur arrive avec ses
habitudes, il préfère ce qu’il connait.
ð Ergonomie ≠ originalité > site simple et intuitif
ð Convention de localisation (logo, panier, recherche, navigation,…)
ð Convention de vocabulaire (page suivante, prochaine page)
ð Interaction > RollOver sur bouton
ð Convention lighbox sur les images

Convention de compréhension
ð Choix des mots et des symboles : 75% du travail d’ergonomie – attention au néologismes
ð Symboles + mots (icones déjà connues)
ð Choix des mots > télécharger ≠ récupérer les documents

L’internaute va se tromper – Formulaire

ð Champs obligatoires : légende visible
ð Libellé des champs : cette adresse sera utilisée
ð Confirmation action risquée : empêcher saisie de donnée erronée. Corriger en temps réel.
ð Doit comprendre rapidement erreur. Fournir explication précise

© Sophie Mouton 8
 Cours 3 : PUBLIC CIBLE, NAVIGATION, ARCHITECTURE DE L’INFO

DÉFINIR SON PUBLIC CIBLE

Le public cible est la population que l’on souhaite toucher lors d’une action commerciale ou marketing.
La cible peut être constituée de clients ou prospects.

Plus la vision de la cible est nette et précise, plus l’objectif est opérationnel.

Il est donc impératif d’identifier et de segmenter sa cible rigoureusement.

Comment qualifier sa cible ?

Sexe, localisation, tranche d’âge, situation familiale, situation professionnelle, statut social, revenus,…

Le cœur de cible
Partie restreinte de la cible sur laquelle un effort particulier peut être fait ou pour laquelle on attend
des résultats particuliers.

PERSONA
Un persona est, dans le domaine marketing, un personnage imaginaire représentant un groupe ou
segment cible dans le cadre du développement d’un nouveau produit ou service ou d’une activité́
marketing prise dans sa globalité́.

Définir un persona
Leurs problématiques, objectifs, façon de trouver l’info,…

Synthétiser les idées qui émergent des observations, des entretiens avec des utilisateurs,
Communiquer et partager une vision commune des utilisateurs au sein de l’équipe,
Générer de l’affect et de l’empathie pour des utilisateur parfois difficilement accessibles.

Le persona aide à la prise de décision dans le prise conception d’un site web.

COMPORTEMENT DE NAVIGATION
Comment visite-t-on un site Internet ? On distingue 3 grands types d’explorations :
- La recherche par mots-clés : droit au but !
- La navigation ciblée : étape par étape
- La navigation libre : on se promène sur le web

La recherche par mots-clés

Via moteur de recherche, permet de passer outre l’arborescence d’un site web.
Nouveau modèle de navigation.

La navigation ciblée
Scan de l’arborescence à la recherche d’un contenu précis. Le contenu est adapté à la représentation
que s’en fait l’utilisateur.

Navigation principale : une structure hiérarchique représentée par les menus

Sous-navigation : une structure secondaire représentée par les liens contextuels.

© Sophie Mouton 9
La navigation libre
Simple but de passer du temps et de consulter ce que le site pourrait proposer d’intéressant.
= Navigation découverte = Open Ended Browsing.

Rechercher ou naviguer ?
Nouveau modèle de navigation sur les sites :
- Raison pour laquelle on vient sur le site
- Les objectifs poursuivis
- Confiance envers le moteur de recherche

ÉLABORATION DE L’ARBORESCENCE
Étapes :
1. Lister tous les contenus d’un site web
2. Analyser l’arborescence de vos concurrents
3. Organiser les contenus par catégories
4. Structurer l’information
5. Réaliser un plan de site arborescence
6. Scénariser, penser SEO et recommencer

Identifier les contenus

Consiste à élaborer son contenu en s’appuyant sur les fonctions et les services que recherchent les
utilisateurs et pas l’inverse. Conception « centrée utilisateur ».

Cibler les attentes des utilisateurs : que vient chercher l’utilisateur ?

Transmettre l’information : objectif de communication ?
Architecture de communication : identifier les besoins et les questions que se pose l’utilisateur.

Pour être efficace, le site doit répondre aux questions de l’utilisateur tout en véhiculant les objectifs
de communication de ses concepteurs.

Définition des contenus

Le contenu répond aux besoins de l’internaute.
But d’un site = satisfaire les besoins de l’internaute.

Deux situations peuvent se produire de façon indépendante ou consécutive sur un site Internet :
- Internaute vient pour ce qu’on lui offre
- On réussit à créer un besoin chez lui

Quelle est votre utilité globale ?

Elle représente ce à quoi va servir notre site pour nos internautes : acheter, consulter, infos
pratiques,… Votre idée : l’utilité globale de votre site.

Plusieurs niveaux d’utilité :

- Utilité générale : achat en ligne, besoin d’infos
- Micro-utilités : fonctionnalités et informations complémentaires

© Sophie Mouton 10
Analyse concurrentielle
Que font les autres ?
Définir un panel concurrentiel : qui sont vos concurrents ? (minimum 4)

Analyse en profondeur de :
- Utilité générale : ce qui est proposé à l’internaute et la forme pour présenter cette offre
- Micro-utilités : quels sont les plus-values de vos concurrents, conseils, SAV, infos suppl,…

Concrétisation : conception de l’arborescence

Les différentes étapes :
1. Lister les contenus
2. Organiser les contenus par catégories
3. Structurer l’information
4. Construire l’arborescence

La catégorisation :
Stratégie pour construire l’architecture de l’information en s’appuyant sur le contenu des informations
présentées dans l’interface. Regrouper pour simplifier : opération mentale pour percevoir le monde
de manière plus simple, on met ensemble ce qui est ensemble, taxonomie. La structuration de
l’information : hiérarchiser les catégories pour mettre en valeur le contenu.

Méthode des Post-It : méthode qui implique une aide extérieur. Sur des Post-It, on indique l’intitulé
des contenus. Ensuite, on demande à une personne de les regrouper en catégories homogènes.
Pour réduire la marge d’erreur à 4-5 personnes.

Loi de Miller : il apparait que la mémoire à court terme de l’humain moyen ne peut mémoriser que 7
éléments, plus ou moins 2 à veiller à une cohérence globale de navigation et d’expérience utilisateur.
Psychologie cognitive. Empan de mémoire : mémoire de travail

Les différents types de catégorisation :

- Alphabétique : liste d’artistes sur des sites de musique.
- Chronologique : calendrier d’une saison sportive pour un club de rugby.
- Géographique : localisation d’une destination de vacances sur des sites de voyages.
- Thématique : thèmes de sorties.
- Tâches utilisateur : acheter, vendre pour un site immobilier.
- Cible utilisateur : étudiants, chercheurs, entreprises… pour une université

Création de l’arborescence :
Création du plan du site sous forme graphique. Organisation visuelle du plan du site.
Permet de comprendre les différents niveaux de navigation :
- Largeur et nombre de rubriques
- Profondeur et nombre de sous-catégories

© Sophie Mouton 11
 Cours 4 : UI – WEB DESIGN LOOK AND FEEL

UI : GRID SYSTEM
Grids create visual harmony.
Grids provide coherence to complexity.
Grids allow you to do more with less.

The user may be strongly affected by the aesthetic aspect of the interface even when they try to
evaluate the interface in its functional aspects.

La grille facilite la composition et harmonise la page web.

Le nombre magique est 12 (multiple de 3 et 4).
Un grille est composée de :
- Colonnes
- Gouttières (espace vide entre les contenus)

Double objectif :
ð Positionner tous les éléments graphiques sur des modules normés (facilite la découpe au
pixel près pour webmaster)
ð Permet d’organiser l’ensemble des pages sur un même canevas

NOMENCLATURE D’UNE PAGE WEB

Le Header
Ni trop grand ni trop petit (min 40px max 150px)
Tendances : plus de header, l’identité passe par banner/slide/billboard ou une image fullscreen
On y retrouve : le logo, baseline, visuel et zone utilitaires (choix de langues FR/NL/EN, moteur de
recherche, login – password, caddie, icones des réseaux sociaux,…)

La navigation principale
C’est le point d’accès au cœur de votre site. Positionnement horizontal et/ou vertical (gauche).
Navigation : liens hypertextes, boutons (CTA), player vidéo-audio,…

La zone de contenu
Dédiée à l’ensemble du contenu du site : textes, images, graphiques, vidéos,…

Les colonnes
Permettent d’y insérer d’autres types de contenu : sous-menu (gauche), actus, newsletter, CTA
(droite), réseaux sociaux, bloc attirant l’attention de l’internaute « nous contacter »/ « devis gratuit ».

Le footer
On y reetrouve : plan du site ou quick links, copyright/disclaimer, important pour le référencement du
site, mentions légales, réseaux sociaux, année,…

© Sophie Mouton 12
WIREFRAMES
Outil de communication entre tous les intervenants d’un projet informatique qui prend en
considération la structure, le contenu, la hiérarchie de l’information, les fonctionnalités et les
comportements d’une interface de site ou d’application sans artifice graphique.

Permet de :
- Rassembler et de synthétiser les demandes
- Impliquer le commanditaire et/ou de faire du User Testing en amont afin de corriger le tir au
plus tôt, avant la production.

Deux types de wireframes : from sketch to digital

Wireframe Sketch
Rapide. Outil du premier contact. Utilisé en interne.

Points positifs : schématisation des idées et des concepts dans les grandes lignes, aperçu rapide du
fonctionnement entre les pages, 1er draft

Points négatifs : limitation de la zone de travail et pas digital, pas d’interaction

Outils : papier et crayons, feutres, artline, UI Stencils, Sneakpeekit, etc.

Wireframe High-Fidelity
Complexe, qui ne peut être compris sans explication. Respecte les proportions et le contenu.

Points positifs : outil complet de référence tout au long du projet et utile lorsqu’il y a énormément
d’intervenants et des procédés de validation complexe.

Points négatifs : réalisation plus longue et laisse peu de place à la créativité (design)

Outils : Adobe XD, JustInMind, Jetstrap, Omnigraffle, UX Pin, WebFlow, Adobe Illustrator, Photoshop

Conclusion
Il n’existe pas de bonnes ou de mauvaises solutions en matière de choix de wireframe.

1. Le choix du type de wireframe est dépendant du contexte (Projet, intervenants, habitudes de travail)
2. En général, plus il y a d’intervenants et de flux, plus le wireframe devra être détaillé. (Tout en prenant
garde de ne pas franchir la limite du mockup).
3. Le wireframe est l’étape intermédiaire entre le concept et la création graphique/développement

Wireframe toujours indispensable ? Oui ! Même pour les petits projets personnels.

Attentes d’un wireframe

1. Qu’il soit clair, précis, simple et sans graphisme!
2. Qu’il se focalise sur les fonctionnalités, la structure de l’information et le contenu
3. Qu’il implique les grands acteurs du projet

Les points-clés d’un wireframe

1. Navigation soignée
2. Layout et structure de page travaillée
3. Intégration du contenu conceptualisée
4. Interaction et éléments dynamiques simulés

© Sophie Mouton 13
 Cours 5 : UI
ATOMIC DESIGN & DESIGN SYSTEM
Design system
Le design system est l’ensemble complet des normes de conception, de documentation et des
principes, ainsi que tous les outils pour respecter ces normes (= charte graphique ou guidelines).

Atomic design
• Évolution des écrans constantes
• Décompose des sites web en éléments indépendants
• La cohésion graphique pour mieux collaborer avec les développeurs
• Conception modulaire à responsive

Les atomes
Ils définissent la base de cette méthodologie. Seuls, ils sont abstraits mais assemblés, ils forment des
molécules et composent toutes les interfaces : bouton, blocs de texte,…
Ex : texte, bouton, icone

Les molécules
C’est un assemblage de plusieurs atomes. Elles ont leurs propres propriétés. Elles sont les premiers
éléments structurants de l’Atomic.
Ex : moteur de recherche (assemblage du texte, de l’input et du bouton)

Les organismes
C’est un assemblage de plusieurs molécules. C’est ici que la conception commence à prendre forme
avec des parties distinctes de l’interface. Une même molécule peut profiter à plusieurs organismes.
Ex : header du site, formulaires, slider

Les templates
Ils résultent de nombreux groupes d’organismes entre eux. La conception commence à prendre sens,
à raconter une expérience, le client peut commencer à se projeter sans difficultés.
Ex : structure de la page « wireframe »

Les pages
Les pages sont la dernière étape de cette méthode. C’est ici que l’interface globale prend forme et
permet de prendre du recul sur la conception globale.
Ex : page d’accueil du site

© Sophie Mouton 14
UI – LA TYPO
Les différentes typos
« Il n’y a pas de mauvaise typo, il n’y a que des mauvais usages… (sauf pour la Comic) »

L’identité passe par la typo. Exemples :

Times New Roman à empreint de traditions
Moderne Futura à plus moderne
Comic Sans Ms à ringard

Les familles
Serif
Polices à empattement
Ex : Times

Sans-serif ou linéaire
Polices sans empattement
Ex : Helvetica

Cursive
Polices simulant l’écriture à la main
Ex : Lucida

Fantasy
Polices plus exotiques, décoratives
Ex : Impact

Monospace
Policas à chasse fixe (largeur utilisée pour chaque caractère)
Ex : Courier New

Comment choisir une bonne typo ?

ð Pensez pratique
ð Famille de fonte
ð Caractères spéciaux (glyphes, graisse,…)

Les graisses
Explorer les graisses de la typo pour avoir plus de latitude dans la sémantique visuelle du site web.

© Sophie Mouton 15
Les rapprochements

Les chiffres dansants

Les dates

Les ligatures

Font web safe

ð Max 3 typo différentes sur le site
ð Les standards : Arial – Trebuchet MS – Tahoma – Verdana
ð À éviter : police avec sérif mais à la mode sur le web : The Times – Georgia
ð UTF-8

Web safe oui mais non… Les alternatives : @Font face CSS et providers de typos

© Sophie Mouton 16
@Font Face : CSS
La règle @font-face permet de définir les polices d'écriture à utiliser pour afficher le texte de pages
web.

Providers de typos
Pourquoi ?
ð Pas de gestion de droit (licence)
ð Les fichiers sont sécurisés
ð Facile à implémenter
ð Souvent accompagné d’outils d’aide et de suivi
ð Mais budget à prévoir

Exemples de providers :
GoogleFont FontDeck TypeKit MyFonts Fonts

848 familles 1700 familles 1200 familles 23000 familles 150000 familles

Gratuit Payant à la vue Payant au forfait Payant à la vue Payant

© Sophie Mouton 17
Comment identifier une font en ligne ?
Grâce à des outils de Font Finder
Exemple : FontFace Ninja (AddOn dans Chrome)

Derniers conseils typo

ð 3 typo max
ð Websafe et fontface pour le corps de texte : 12px et 14px
ð Headlines – Titres : 18px > 32px (24-26px)
ð Éviter les lignes trop longues : un affichage de 45 à 75 signes par ligne sur 4 à 5 lignes
ð Aérer au maximum le contenu en plaçant des espaces blancs de chaque côté du texte
ð Hiérarchiser vos titres (h1, h2, h3,…)

En résumé, le caractère doit être :

ð Disponible (websafe)
ð Lisible
ð Cohérent avec le sens du discours et donner une identité

Font Awesome: icon and font

UI – LA COULEUR
3 types de couleurs :
• Couleurs chaudes : chaleur, confort, sensation d’accueil
• Couleurs froides : fraicheur, sérénité, calme et discrétion
• Couleurs neutres : blanc, noir et gris

Certaines couleurs sont codifiées (ex : rouge = danger ou promo)

Elles permettent d’identifier les liens hypertextes (bleu souligné)

Principe d’affordance

Inutile de multiplier les couleurs à 3 à 6 couleurs maximum !

La couleur facilite la hiérarchisation

Les contrastes colorés sont à privilégier

Permet d’identifier les zones (titre, menu,…)

Pour nous aider, on se sert du cercle chromatique.

© Sophie Mouton 18
Construire sa palette de couleur
Générateur de palette oui mais attention !

Couleur neutre
Texte, arrière-plans, panneaux, contrôles de formulaire,…
Presque toutes les interfaces utilisent du gris et pas du noir !

Couleur primaire
Une ou deux couleurs
Détermine l’aspect général du site (ex : Facebook et le bleu)

Couleur secondaire
Accentuation, mettre en avant le contenu
Boutons, CTA,…

© Sophie Mouton 19
UI – LES IMAGES
Optimiser les images pour le web
Toujours optimiser pour le web !
Attention au poids !
72 dpi
RVB ≠ CMYK

Les formats
GIF : 256 couleurs (gif animé, à bannir)
JPG : photo
PNG : logo, icônes
PNG couche ALPHA
SVG : HTML5, animation en SVG via CSS, retina ready
Retina : 4k, 5K,…

MISE EN FORME
Les liens
Idéalement toujours les souligner et leurs attribuer une couleur identitaire (convention internaute +
principe d’affordance). Liens internes ou externes ?
Ne pas utiliser de terme générique, comme « cliquez ici », ou pire « cliquez ici ».

Les tableaux
Aérer au maximum
Jouer avec des contrastes, une ligne sur deux en couleurs (gris clair)
Ne pas aligner les données de manière centrée
Modifier la couleur de fond lors du rollover

UI IS FASHION
Flat Design
• Be responsive
• Hamburger menu
• Long scroll
• Grid system, card layout, masonry
• No Chrome
• Full width, hero image + video
• …

MOODBOARD
Un moodboard, ou planche de tendance, est un assemblage d’images, d’objets ou de mots qui est
utilisé pour exprimer le style choisi dans le cadre du développement d’une idée créative (concept
produit, publicité, design, agencement, etc). Le moodboard peut être utilisé par un créatif ou un
designer pour montrer l’orientation ou l’univers thématique de son travail de création. Le moodboard
peut prendre la forme d’un collage sur un mur, d’un regroupement d’objets ou d’un assemblage
numérique envoyé aux personnes concernées.

En résumé : inventaire de « l’existant », typographies (titres – Sous-titres – Corps de texte...), couleurs

identitaires, icons set, UI (mise en page, page HTML, minimum 6 pages, call to action, sémantique CSS),
5 références de site web

© Sophie Mouton 20
 Cours 6 : MOBILE FIRST
MOBILE EVOLUTION
Les GSM ont déjà 30 ans et sont devenus un canal incontournable ! Ce canal sera bientôt dominant,
ne nombre de connexion dans le monde !

“All people in the world are going to get a smartphone, and for most of them it will be their first
computer” – Larry Page, CEO Google 2012

Et en Belgique…
2,5 GSM sur 3 vendu est un smartphone
Une tablette dans 66% des foyers belges
Développement de l’offre conjointe
L’avènement des nouveaux devices et la consumérisation numérique.

PROTOCOLE INTERNET
Le WAP : Wireless Application Protocol
La 2G : MMS et SMS Max 50Kbps
La 3G ou UMTS : Universal Mobile Telecommunications System Max 360Kbps
La 3G+ : 3 à 5 Mbps
La 4G : 30Mbps
La 4G+ : 225Mbps
La 5G : 700 Mbps

Les 16-24 ans y passent près de 2h par jour pour moins d’une demi-heure chez les 55-64 ans.

MOBILE INTERNET IN BELGIUM

Les smartphones sont indispensables pour les belges.
72% ne quittent pas la maison sans leur téléphone.
Ils sont utilisés partout : à la maison, en chemin, au travail, dans les magasins, restaurants, cafés,…
Les smartphones sont des « multi-activity portal » : communiquer, rester informé, se divertir
Ils sont utilisés “while multi-tasking with other media”.

© Sophie Mouton 21
Un smartphone pour faire quoi ?
Pourquoi, quand, où et comment un utilisateur a-t-il besoin d’accéder à mon site/service ?

Typologie des usages selon :

Josh Clark – TapWorthy
- Microtasking : email
- I’m local : je recherche des infos sur l’environnement local
- I’m bored : je fais passer le temps

Google
- Urgent now
- Repetitive now
- Bored now

Luke Wroblewski
L’usage des mobiles combine 2 types d’interaction :
- Consultation / Recherches : infos urgents, local à resto, stib, railtime à recherche rapide
- Explorer / Jouer : passer le temps, local à angrybird, candycrush à être ludique
- Vérification / Statut : tâche répétitive, microtasking à Facebook, Instagram, match de foot
- Éditer / Créer : changement urgent, microtasking à achat place concert à online form

APP, WEB APP & RESPONSIVE

L’application native
Développé spécifiquement pour le système d’exploitation d’un mobile. Logique de téléchargement :
Appstore, GooglePlay,… Off-line et On-line. Éléments techniques et graphiques intégrés au
périphérique (appareil photo, GPS, notifications push,…)

WebApp
La WepApp est une site web développé et mis en forme spécifiquement pour les mobiles. Elle ne
permet pas de tirer partie des fonctionnalités offertes par le système d’exploitation du mobile. La
consultation se fait directement depuis le navigateur. Elle nécessite une connexion internet pour
pouvoir être chargée.

Responsive webdesign
La notion de Responsive Web Design regroupe différents principes et technologies permettant de
concevoir un site pour qu’il s’adapte aux différentes tailles d’écran et aux différents terminaux.

Il s’agit donc :
- 1 page unique pour l’ensemble des terminaux (une seule contribution, administration,
hébergement, URL,…)
- 2 à 3 ergonomies différentes par page (desktop-souris, tablette, smartphone)

© Sophie Mouton 22
USABILITY SMARTPHONE
Gestuelle sur smartphone
« L’utilisateur de smartphone c’est un pouce et un œil ».
Nos doigts sont des instruments de pointages approximatifs VS. Pointeur de votre souris !

Ergonomie sur smartphone

Votre main ou vos doigts ne sont pas transparents, ils peuvent cacher de l’info !

Il faut aussi choisir les bons gestes.

Didacticiel
Il faut expliquer et montrer aux utilisateurs comment naviguer, quels gestes faire,… sur un smartphone

© Sophie Mouton 23
CONTRAINTES ET OPPORTUNITÉS TECHNIQUES
Contraintes techniques
Performances du réseau mais pas uniquement !

N’importe où et n’importe quand… oui mais… nous sommes tous tributaires du réseaux GSM, de notre
support, abonnement…

Contraintes et opportunités techniques

Géolocalisation, NFC, accéléromètre, orientation de l’appareil, réalité augmentée + VR, code bar

Mobile trends
Paiement via smartphone : NFC (Near Field Communication), SMS, ID Touch, ApplePay,…
Le future et les smart watch
L’UI est souvent considérée comme uniquement visuelle mais devient de plus en plus vocale, tactile,
hpatique,…

Lexique

Angular : un cadriciel côté client open source basé sur TypeScript dirigée par l'équipe du projet Angular
à Google et par une communauté de particuliers et de sociétés.

ASP (Active Server Pages) : un standard mis au point par Microsoft en 1996 permettant de développer
des applications Web interactives, c'est-à-dire dont le contenu est dynamique.

Breadcrumbs : est le terme anglais (traduction : miette de pain) pour désigner le fil d'Ariane. Cela fait
référence à un élément de navigation sur les sites web. Cet élément indique à l'utilisateur où il se situe
dans la hiérarchie du site, par rapport à la page d'accueil. A titre d'exemple, le breadcrumb pourrait
indiquer à l'utilisateur dans quel catégorie il se situe, dans quelle sous-catégorie et sur quelle page de
cette sous-catégorie.

Breakpoints : ou points de rupture, condition, valeurs que l’on donne au moment où ça va changer. Ce
sont les différentes tailles qui sont indiquées dans votre feuille de style pour le responsive design.

Couche alpha : les images peuvent posséder une quatrième couche, la couche alpha, en plus des trois
couches rouge, verte et bleue. Cette couche ne modifie pas les couleurs de l'image et sert dans la
plupart des cas à gérer la transparence de l'image, par exemple pour permettre de voir ce qu'il y a
derrière l'image

CMYK : L'impression en quadrichromie, telle qu'elle est utilisée par les imprimeurs commerciaux et les
copieurs, est basée sur l'utilisation des couleurs suivantes : Cyan, Magenta, Yellow et Key (noir).

Dpi (Dots Per Inch) : ou point par pouce (PPP) est une unité de précision communément utilisée pour
définir la résolution d'un scanner, d'une imprimante ou d'une souris optique. Plus cette valeur est
élevée plus la distance maximum de déplacement du pointeur de la souris est élevée par rapport au
mouvement effectué dans la réalité.

© Sophie Mouton 24
Favicon : une icône informatique symbolisant un site web. Ces icônes sont créées et utilisées par les
concepteurs des sites internet. Les navigateurs web peuvent utiliser la favicon dans la barre d'adresse,
les signets, les onglets ou encore les autres raccourcis.

Flat design : ou le design plat est un style de design d'interface graphique caractérisé par son
minimalisme. Il se base sur l'emploi de formes simples, d'aplats de couleurs vives et de jeux de
typographie. Le flat design est devenu très présent dans les interfaces web et mobile ces dernières
années. Dans les diverses définitions du flat design, certains termes reviennent souvent : simple,
épuré, coloré et moderne.

Framework : ou cadre de travail, est un ensemble de librairies de librairies. L’objectif est généralement
de simplifier le travail des développeurs informatiques, en leur offrant une architecture “prête à
l’emploi” et qui leur permette de ne pas repartir de zéro à chaque nouveau projet.

GIF (Graphics Interchange Format) : un format d'image numérique permettant de créer des
images animées ou à fond transparent couramment utilisé sur le web.

JPG (Joint Photographic Experts Group): une norme qui définit le format d'enregistrement et
l'algorithme de décodage pour une représentation numérique compressée d'une image fixe.

JQuery : une bibliothèque JavaScript libre et multiplateforme créée pour faciliter l'écriture de scripts
côté client dans le code HTML des pages web.

Ligature : en typographie, une ligature est la fusion de deux ou trois graphèmes d'une écriture pour en
former un nouveau, considéré ou non comme un caractère à part entière. C'est un des procédés
possibles d'enrichissement du stock de graphèmes d'une langue.

Lighbox : technologie au service de l’expérience utilisateur, fenêtre qui vient par-dessus, grise le reste
du site, mieux pour l’utilisateur

Media queries : un module CSS3 permettant d'adapter le contenu d'une page web aux caractéristiques
de l'appareil de l'utilisateur. De telles adaptations sont devenues une norme W3C. Pour réaliser une
interface responsive, il faut utiliser les media queries. Ces media queries permettent d’indiquer une
taille minimale et/ou maximale pour appliquer ou non un style CSS.

NFC (Near Field Communication) : ou la communication en champ proche est une technologie de
communication sans fil à courte portée et à haute fréquence, permettant l'échange d'informations
entre des périphériques jusqu'à une distance d'environ 10 cm dans le cas général.

PNG (Portable Network Graphics) : un format ouvert d’images numériques, qui a été créé pour
remplacer le format GIF, à l’époque propriétaire et dont la compression était soumise à un brevet. Le
format PNG permet de stocker des images en noir et blanc, en couleurs réelles ainsi que des images
indexées, faisant usage d'une palette de 256 couleurs. De plus il supporte la transparence par couche
alpha, c'est-à-dire la possibilité de définir 256 niveaux de transparence, tandis que le format GIF ne
permet de définir qu'une seule couleur de la palette comme transparente. Il possède également une
fonction d'entrelacement permettant d'afficher l'image progressivement. La compression proposé par
ce format est une compression sans perte.

React : une bibliothèque JavaScript libre développée par Facebook depuis 2013. Le but principal de
cette bibliothèque est de faciliter la création d'application web monopage, via la création de
composants dépendant d'un état et générant une page HTML à chaque changement d'état.

© Sophie Mouton 25
Retina : un écran Retina est une ligne d'écrans LCD de haute résolution de la marque Apple. « Retina
» est une marque déposée par Apple en juin 2010 et enregistrée en novembre 2012 pour les écrans
de ses appareils électroniques.
RGB (Red Green Blue) : ou trichromie, est un format de codage des couleurs basé sur ces trois couleurs
qui sont les couleurs primaires en synthèse additive. Elles correspondent en fait à peu près aux trois
longueurs d'ondes auxquelles répondent les trois types de cônes de l'œil humain.

SVG (Scalable Vector Graphics) : un format de données utilisé pour définir des graphiques vectoriels.
Il est inspiré des formats VML (soutenu entre autre par Microsoft) et PGML (soutenu par Adobe et
Sun). Contrairement aux deux précédents, SVG est recommandé par la W3C. Ce format est basé sur
du XML et permet de définir des éléments graphiques pour le web. Il est surtout utilisé pour l’affichage
de graphiques mais également pour les applications mobiles. L’un des principaux avantages de ce
format et que l’on peut redimensionner une image sans aucune perte de qualité contrairement à une
image jpeg ou png par exemple. Ceci est dû au fait que ces images soient vectorielles.

UI (User Interface) : en technologie de l'information, l'interface utilisateur fait référence aux éléments
d'un appareil informatique avec lesquels un être humain peut interagir : écran, clavier, souris, crayon
optique, apparence du bureau, caractères lumineux, messages d'aide, ainsi qu'à la façon pour une
application ou un site Web de solliciter les interactions et d'y répondre. Dans les tout premiers
ordinateurs, l'interface utilisateur était extrêmement réduite. On peut considérer que l'interface
utilisateur représente « l'expérience utilisateur » dans son ensemble, à savoir l'apparence visuelle de
l'appareil, le temps de réponse et le contenu présenté à l'utilisateur.

UTF-8 (Universal Character Set Transformation Format1 - 8 bits) : un codage de caractères

informatiques conçu pour coder l’ensemble des caractères du « répertoire universel de caractères
codés », initialement développé par l’ISO dans la norme internationale ISO/CEI 10646, aujourd’hui
totalement compatible avec le standard Unicode, en restant compatible avec la norme ASCII limitée à
l’anglais de base, mais très largement répandue depuis des décennies.

UX (User eXperience) : désigne la qualité de l’expérience vécue par l’utilisateur dans toute situation
d’interaction. L’UX qualifie l’expérience globale ressentie par l’utilisateur lors de l’utilisation d’une
interface, d’un appareil digital ou plus largement en interaction avec tout dispositif ou service. L’UX
est donc à différencier de l’ergonomie et de l’utilisabilité.

W3C (World Wide Web Consortium) : définissent les standards du web.

un organisme international de standardisation à but non lucratif, fondé en octobre 1994 chargé de
promouvoir la compatibilité des technologies du World Wide Web telles que HTML5, HTML, XHTML,
XML, RDF, SPARQL, CSS, XSL, PNG, SVG et SOAP. Ils définissent les standards du Web afin que les gens
puissent communiquer efficacement à travers Internet, autour de formats ouverts garantissant une
meilleure interopérabilité.

WYSIWYG (What You See Is What You Get) : ou "ce que vous voyez est ce que vous obtenez", est un
terme largement utilisé dans le domaine informatique pour faire référence aux interfaces graphiques
qui affichent directement le rendu final du document. Ce type d'application est par exemple présent
dans la grande majorité des logiciels de traitement de texte qui affiche directement la page tel qu'elle
apparait. Cela n'a pas toujours été le cas, pendant une époque (sur les premiers moniteurs) les mots
en gras ou en italique était représenté en couleur sur l'écran d'ordinateur.

Technologie qui permet de zoomer sur les vêtements à Javascript, JQuery

© Sophie Mouton 26