Examen WebDesign :

Partie 1 :

1. Laquelle de ces étapes ne fait pas partie du déroulement d’une campagne semi-dirigés :

-Définir les modalités de passation

-Tester le guide d’entretien et le dispositif technique lors d’un entretien à distance

- Identifier des sujets à traiter/formuler des hypothèses

-Réaliser un audit de l’existant pour identifier les pain points (points faible)

2. Parmi les éléments suivant lequel n’est pas une bonne raison de réaliser un entretient
semi-dirigé en phase de recherche utilisateur ?

-Connaitre et comprendre les habitudes des utilisateurs

-Valider un besoin ou sa compréhension

-Identifier le pouvoir d’achat du futur client

-Relever des points d’amélioration

3. Un contraste peut s’obtenir par des mouvements, lesquels ?

-Négatif ou positif, linéaire ou circulaire selon sa courbe de Gauss

-Horizontale ou verticale, linéaire ou circulaire. Il est positif lorsque son mouvement descend de
bas en haut et de droite à gauche.

-Rapide ou lent, lourd ou léger selon sa vitesse de croisière

-Horizontale ou vertical, linéaire ou circulaire. Il est négatif lorsque son mouvement descend de
haut en bas, de gauche à droite.

4. Qu’est ce qu’un bon taux d’ouverture pour des photos de produits bien nettes ?

-f2.8 ou f4.5

-peu importe, du moment que vous utilisez un objectif macro

-peu importe, du moment que vous utilisez un objectif grand angle

-peu importe, aujourd’hui les téléphones s’adaptent à toutes les situations

- f8 ou f11
 5. Lors d’un audit, quelle est la manière appropriée de décrire une observation ?

-Description factuelle, conséquence pour l’utilisateur, recommandation, alternative (s’il y en a)

-Critère d’ergonomie non-respectées, recommandation, alternative (s’il y en a)

-Nom de l’outil utilisé, listes des règles non respectées, explication.

-Référentiel, critère d’ergonomie en infraction, solution

6. Pour quel type d’entreprise la police de caractère Didot est-elle idéale ?

-Le secteur des services aux entreprises et de l’écologie

-Le secteur du luxe et de la presse féminine

-Le secteur de l’IT et des nouvelles technologies telle Block Chain, NFT

-Le secteur de la presse internationale et de la finance

-Le secteur de la construction de l’automobile

7. Selon l’étude de Nielsen et le cours, quel pourcentage de problème d’ergonomie peuvent

être identifié avec un panel de 5 participants :

-85% -75% -90% -50%

8. C’est quoi un pixel ?

-Un pixel est une forme ronde, la plus petite mesure d’une image numérique. On peut y associer une
couleur ou un niveau de gris et une intensité de couleur.

-Un pixel est une brique carrée d’une image numérique. On peut y associer une couleur ou un niveau
de gris et une intensité de couleur.

-Un pixel est une brique carrée d’une image imprimée. On peut y associer une couleur ou un niveau
de gris et une intensité de couleur.

-Un pixel est une brique carrée d’une image numérique. On peut y associer plusieurs couleurs ou
niveaux de gris et plusieurs intensités de couleur.

-L’unité de base qui permet la construction de tout un Univers. Soit l’ADN de ton voisin ou de ton
chat ( et probablement à toi aussi, sauf si tu viens de la planète Krypton) ou tel Iron Man dans le
MCU
 9. Qu’est ce qu’un point de rupture ( break point) en responsive Webdesign ?

-Un excellent film de 1991 avec Keanu Reeves et Patrick Swayze. Ah non ça c’est Point Break !

-C’est pour définir la taille d’un design sur iPhone, sur iPad et sur desktop

-C’est pour savoir quand votre écran va se rompre

-C’est lorsque l’on redimensionne son site web et que l’on se rend compte qu’à cette dimension il
faut adapter le design pour améliorer l’expérience utilisateur.

10. Parmi les questions suivantes, lesquelles relèvent de la technique des incidents critiques ?
2 réponses possible

-Selon vous, quel est le meilleur aspect de l’application mobile de notre établissement ?

-Racontez-moi le pire défaut des applications mobile à l’heure actuelle.

-Vous rappelez-vous vous être senti particulièrement démuni face à une application mobile,
pourriez-vous me raconter cet incident ?

11. Un guide d’entretien contient :

-Un questionnaire utilisé pendant des entretiens avec des utilisateurs.

-La trame d’un entretien, des phrases de relance et l’espace nécessaire pour noter les paroles de
l’utilisateur.

-Les tâches aussi appelées scénarios utilisées pour tester un site Web, un produit ou un service.

12. Un test utilisateur consiste à :

-Réaliser une série d’entretien avec des utilisateurs pour identifier leurs objectifs, leur difficulté et
tout autre élément utile à l’amélioration du site web, du produit ou du service.

-Faire tester un site web par des utilisateurs réel pour identifier les bugs

-Demander l’avis des utilisateurs à propos d’un site web, d’un produit ou d’un service.

-Demander à des utilisateurs de réaliser des tâches en les observant afin d’identifier des problèmes
d’ergonomie.

13. Parmi les questions suivantes, laquelle présente le moins de biais ?

-Quels sont les points faibles du produit ?

-Diriez-vous que ce produit est le plus ou moins intéressant ?

-Lorsque vous utilisez le produit, vous vous sentez…

-Ce produit est-il plaisant selon vous ?

 14. Combien de couleurs primaires allez-vous utilisez sur votre site ?

-2 minimum

-Autant qu’on veut tant que c’est beau

-Au moins 3

-Aucune des réponses présentes

15. C’est quoi une valeur hexadécimale ?

-Une valeur composée de chiffre de 0 à 9 et de lettre de A à F calculée sur une base de 10

-Une valeur composée de chiffre de 0 à 9 et de lettre de A à F calculée sur une base de 16

- Une valeur composée de chiffre de 1 à 10 et de lettre de A à F calculée sur une base du nombre d’or

- Une valeur composée de chiffre de 0 à 9 et de lettre de A à F calculée sur une base de 16

- Une valeur composée de chiffre de 0 à 9 et de lettre de A à F calculée sur une base de 32

16. Comment calculer l’interlignage d’un texte ?

-En multipliant la taille de la police par 1,5

-En multipliant la taille de la police par le nombre d’or pour les titres par le nombre Pi pour les
paragraphes

-En divisant la taille de la police par 1,5

En additionnant la taille de la police avec sa hauteur de x

17. Parmi les méthodes suivantes, laquelle est une méthode de synthèse :

-Test utilisateur

-User Journey

-Atelier de cocréation

-semi-dirigé

18. Les 5 étapes de la démarche centrée utilisateur sont : Attention à l'ordre des étapes

-Étude qualitative, étude quantitative, analyse de l'environnement, stratégie, développement.

-Entretiens, synthèse, idéation, prototypage, tests utilisateur.
-Exploration, synthèse, idéation, implémentation, évaluation.
-Exploration, idéation, synthèse, implémentation, évaluation.
 19. L’affordance c’est :

-Un style graphique permettant une meilleure compréhension de l'interface utilisateur.

-Le fait qu'un élément comme un call-to-action soit immédiatement visible.

-La caractéristique d'un composant d'interface à suggérer son propre usage.

-L'un des huit critères ergonomiques fondamentaux.

20. Lors d’un entretien semi-dirigé, quel est le rôle habituel d’un designer UX expérimenté

- mener l’entretien

- donner les consignes au designer UX junior

- gérer le timing et les sujets abordés

- Modifier le guide d'entretien pour les prochains interviews.

21. Parmi les méthodes suivantes, laquelle est une méthode d'évaluation

- Atelier de Co-création.

- Persona.

- test utilisateur

- questionnaire exploratoire

22. Pour quel type d'entreprise la police de caractère Sofia Pro est-elle idéale ?

- Le secteur des services aux entreprises et de l'écologie

- Le secteur de la presse internationale et de la finance

- Le secteur du luxe et de la presse féminine

- Le secteur de la construction et de l'automobile

- Le secteur de l'IT et des nouvelles technologies telle blockchain, NFT

 23. Quels sont les ingrédients "techniques" qui définissent le responsive design selon Ethan
Marcotte ?

- sreset, sresize, @media.

- le contexte, le device et le scoubidoubidou aaah.

- le support, la largeur minimum et la largeur maximum

- des colonnes, des lignes, des gouttières.

- Une grille fluide, des images adaptatives et des requêtes médias.

24. Quel est le risque si vous utilisez des questions lors d’un entretien semi dirigé ?

-Ne pas obtenir les informations que vous cherchez

-Influencer l’utilisateur et biaiser les résultats
-Être hors sujet en abordant des points non prévus
-Occulter les découvertes fortuites

25. Cadre de recherche utilisateur, combien d’utilisateur sont nécessaires pour organiser une
campagne d’entretien semi dirigés
-1 à 5
-5 à 8
-300
-100 ou plus

26. Lors d’un entretien semi-dirigé, quel est le rôle habituel d’un designer UX junior ?
-Mener l’entretien
-Briser la glace, mettre l’utilisateur en condition
-Prendre note des propos de l’utilisateur
-Apporter le café

Partie 2

1. Vous devez réaliser une mission en respectant les différentes phases de design thinking.
Comment faites-vous ?

-Vous réalisez un audit du site web de votre client, vous définissez une stratégie pour corriger les
lacunes identifiées. Vous définissez et appliquez une stratégie AdWords et des campagne e-
mailing/ social media afin d’augmenter le trafic vers le site du client.

-Vous réalisez une analyse de l’environnement (PESTEL, SCAMPER, etc.) vous réalisez une étude
quanti/quali et un benchmark de la concurrence. Fort de ces informations recueillies vous pouvez
alors définir une digital strategy pour ensuite l’appliquer.

-Vous envoyez une invitation avec le déroulé précis du texte, un plan d’accès et toutes les
informations pratiques
Placer les bons mots :

2. Couleur Bpost

Couleurs primaires : bleu

Couleurs secondaires : rouge et vert
Couleurs neutres : gris

Couleur Spotify

Couleur primaire : noir

Couleurs secondaire: vert
Couleur neutre : blanc

3. Vous venez de réaliser une série d'entretiens semi-dirigés. Pour réaliser des persona, que
faites-vous ? 2 réponses possibles.

-Vous identifiez des groupes de comportements ou de données similaires

-Vous définissez les consommateurs les plus intéressants pour le business
-Vous répartissez et découpez les transcriptions des entretiens afin de créer des regroupements.
-Vous créez un guide d'entretien, planifier des rendez-vous et réaliser des entretiens.

4. Vous devez réaliser une charte graphique pour votre équipe. Quelles informations y
ajoutez-vous ? Une seule réponse possible.

-Toutes les réponses présentes.

-Les polices utilisées avec leur taille en points.

-Des informations sur l'entreprise.

-Les différentes utilisations du logo.

-Les polices utilisées avec leur taille en pixels, points ou em.

-Les différentes couleurs utilisées et l'explication.

5. Un client vous confie une mission, il exprime le besoin d'un intranet, Que faites-vous ? Une
seule réponse.

- Vous discutez avec le client afin de comprendre le contexte et la motivation de la demande puis
vóus vous entretenez avec les employés de l'entreprise afin de déterminer la solution adéquate, au-
delà de la solution imaginée par le client.

-Vous identifiez les différentes solutions logicielles dénommé intranet présentes sur le marché et
vous sélectionnez celle qui offre le plus de fonctionnalités pour le budget le plus faible.

-Vous demandez des devis pour le développement et le déploiement d'un intranet à différentes
sociétés proposant des développements informatiques et vous sélectionnez celle offrant le meilleur
compromis en matière de budget, de délais et de fonctionnalités.

-Vous discutez avec le client de la raison de sa demande et vous tentez de requalifiez son besoin
afin de répondre à son besoin et non à une simple envie.

6. Votre site web a de mauvaises performances en termes de temps de chargement des

pages. Que faites-vous ? 2 réponses possibles.

-Vous utilisez un des outils de Google, style PageSpeed Insight, pour noter ce qui est
problématique.

- Vous sauvez toutes vos images via Photoshop en 'sauver pour le web' pour économiser en taille.

-Vous pleurez c'est trop bête

-Vous sauvez toutes vos images en format Webp, qui vous permet d'avoir des images de bonne
qualité mais plus légères.

7. Dans le cadre d’une mission vous venez de réaliser une phase de recherche utilisateur,
quels sont les avantages d’utiliser la technique du persona lors de cette phase ? 2 réponses
possibles

-Ils permettent de rester focaliser sur l’utilisateur

-Créer de l’empathie au sein de l’équipe

-Identifier les moyens financiers que les utilisateurs sont prêts à investir dans le produit

-Le persona en particulier permet d’apprendre plus sur les utilisateurs.

8. Associez chaque format d’image à sa caractéristique

- WEBP : Format bitmap permettant une compression plus grande que ses prédécesseurs pour
une qualité optimale avec ou sans fond transparent.
 - GIF : Format permettant d’assembler de petits clips ou vidéos et d’y ajouter des éléments
graphiques, des filtres, du texte, etc.

- PNG : Format bitmap pour illustration avec peu de couleurs et un fond transparent.

- SVG : Format vectoriel base sur du XML. Il permet de définir des éléments graphiques vectoriel
pour le web en pure code.

- JPEG : Format bitmap offrant un maximum de flexibilité en terme de retouche et de

compression, le rendant idéal pour un chargement rapide sur internet.

9. Associez au format le plus adéquat

Situation d’utilisation : blog web fond transparent

Choix : GIF, PNG, VECTORIEL, TIFF, SVG

10. Associez au format le plus adéquat

-Situation d’utilisation : photo imprimée

Choix : GIF, PNG, VECTORIEL, TIFF, SVG ,JPEG

11. Associez au format le plus adéquat

-Situation d’utilisation : blog web

Choix : GIF, PNG, VECTORIEL, TIFF, JPEG

12. Associez au format le plus adéquat

-Situation d’utilisation : Logo

Choix : GIF, PNG, VECTORIEL, TIFF, SVG

13. Associez au format le plus adéquat

-Situation d’utilisation : Stickers imprimée fond transparent

Choix : GIF, PNG, VECTORIEL, TIFF, SVG

14. Trouvez la bonne définition d’une image vectorielle ?

-Une image vectorielle est un « objet » numérique constitué de formules mathématiques définit par
un ensemble de points reliés entre eux et formant une grille statique. Le nombre de pixels qui
composent les images matricielles est fixe.

-Une image vectorielle est un « objet» numérique constitué de formules mathématiques définit
par un ensemble de points reliés entre eux. Elle ne perd pas en définition si on l'agrandit ou la
rétrécit.

-Une image vectorielle est un « objet» numérique constitué de pixels c'est à dire des carrés de
couleurs formant une grille statique. Le nombre de pixels qui composent les images matricielles est
variable c'est à dire il augmente si on agrandit l'image.
-Une image vectorielle est un « objet» numérique constitué de pixels c'est à dire des carrés de
couleurs formant une grille statique. Le nombre de pixels qui composent les images matricielles est
fixe.

-Une image vectorielle est un «objet» numérique constitué de pixels c'est à dire des ronds de
couleurs formant une grille statique. Le nombre de pixels qui composent les images matricielles est
fixe.

15. En HTML, pour attribuer une couleur à un texte, vous pouvez écrire

-Nom de la couleur en français

-Code RFB
-Code hexadécimal
-Code CMNJ

16. Parmi les méthodes suivantes, laquelle est une méthode de recherche utilisateur
-Audit
-Questionnaire exploratoire
-Observation in-situ
-campPersona

17. Vous participez à une campagne de tests utilisateurs, dans ce cadre quel est le rôle
acceptable de la part du client et comment pouvez-vous réagir à ses demandes ? 2
réponses possibles.

-Le client vous fournit le guide d'entretien et souhaite assister aux entretiens : vous acceptez car le
client connait mieux le contexte.
-Vous demandez au client de fournir les personas à interroger puis vous gérer la rédaction du guide
d'entretien, la passation et l'analyse.
-Le client souhaite absolument poser ses questions lors de l'entretien. Vous lui proposez un
débriefing avec le client après la passation de sorte à ne pas influencer l'entretien.
-Le client souhaite décider des questions qui figureront dans le guide d'entretien et participer aux
passations. Vous recadrez la mission car seule l'UX designer (vous) pouvez traduire les
interrogations du client en une grille d'interview non biaisée. Vous assurez que s'il souhaite
assister aux entretiens, il doit absolument rester en retrait, silencieux et neutre.

18. Au cours d’une mission, en vue de préparer un test utilisateur, votre équipe réalise un de
site web de votre client. Comment devez-vous procédez pour réaliser cet audit ? une
réponse

-Vous utilisez l’un des audits de diagnostic, vu en cours, puis pour chaque critère d’erreur, vous
expliquer l’origine de cette erreur et la solution pour y remédier
-Vous parcourez chaque écran du site et pour chaque point faible vous rédigez une observation
respectant la formule vu au cours
-Pour chaque point fort et point faible puis vous rédigez une conclusion et un exécutive summary
-Vous parcourez chaque critère du référentiel pour chaque page du site, vous formulez une
observation pour chaque point fort et pour chaque point faible puis vous confrontez vos résultats
avec celui des autres membres de l’équipe
 19. Lors d’un audit, quelle est la manière la plus appropriée de décrire une observation ?
-Critère d’ergonomie non respecté, recommandation, alternative (s’il y en a)
-Référentiel, critère d’ergonomie en infraction, solution
-Nom de l’outils utilisé, liste des règles non respectées, explication
-Description factuelle, conséquence pour l’utilisateur, recommandation, alternative s’il y en a

Partie 3 :

1. Expliquez le critère d’ergonomie « signifiance des codes et dénominations »

C’est parler le langage de l’utilisateur. Ce critère concerne la bonne adéquation entre l’objet et son
référent, et implique donc de choisir de manière appropriée les mots et les symboles utilisés sur un
site ou une application.

Autre def :

Le critère Signifiance des Codes et Dénominations concerne l’adéquation entre l’objet ou

l’information affichée ou entrée, et son référent. Des codes et dénominations “signifiants” disposent
d’une relation sémantique forte avec leur référent.

2. Expliquez le critère d’ergonomie « Gestion des erreurs »

La gestion ou traitement des erreurs regroupe les différents moyens visant à protéger l’utilisateur
des erreurs et à lui permettre de les corriger. L’objectif est de minimiser les interruptions dues aux
erreurs

Autre def :

C’est protéger l’utilisateur des erreurs potentielles et les gérer quand elles se produisent (corriger ou
aider à corriger). Prévention et correction vont donc de pair.

Ce critère concerne la capacité du système à proposer à l’utilisateur tous les éléments nécessaires et
suffisants pour lui permettre de ne pas commettre d’erreurs

3. Expliquez le critère d’ergonomie « Homogénéité/cohérence »

Le critère Homogénéité/Cohérence se réfère à la façon avec laquelle les choix de conception de

l’interface (codes, dénominations, formats, procédures, etc.) sont conservés pour des contextes
identiques, et sont différents pour des contextes différents.
4. Expliquez le critère d’ergonomie « Adaptabilité » :

Il s’agit de la capacité pour le système de réagir selon le contexte et selon les besoins et les
préférences des utilisateurs. Cela suppose une flexibilité du système, mais également une prise en
compte de l’expérience de l’utilisateur.

5. Expliquez le critère d'ergonomie « Contrôle explicite » :

Le contrôle explicite c’est permettre à l’utilisateur de contrôler la plateforme. Par des actions
explicites et une liberté de l’utilisateur.

6. Expliquez le critère d’ergonomie « Compatilité »

Le critère Compatibilité fait référence à l'adéquation entre les caractéristiques des utilisateurs
(mémoire, perceptions, habitudes, compétences, âge, attentes, etc.) et les caractéristiques des
tâches, d'une part, et l'organisation de la sortie, de l'entrée et du dialogue pour une application
donnée, d'autre part.

Le critère Compatibilité concerne également la cohérence entre les environnements et entre les
applications.

7. Expliquez le critère d’ergonomie « charge de travail » :

Le critère Charge de Travail concerne l’ensemble des éléments de l’interface qui ont un rôle dans la
réduction de la charge perceptive ou mnésique des utilisateurs et dans l’augmentation de l’efficacité
du dialogue.
Deux sous-critères participent au critère Charge de Travail : Brièveté (qui inclut les critères Concision
et Actions Minimales), et Densité Informationnelle.

8. Expliquez le critère d’ergonomie « guidage »

Le Guidage est l’ensemble des moyens mis en oeuvre pour conseiller, orienter, informer, et conduire
l’utilisateur lors de ses interactions avec l’ordinateur (messages, alarmes, labels, etc.), y compris dans
ses aspects lexicaux.
Quatre sous-critères participent au Guidage : Incitation, Groupement/Distinction entre Items,
Feedback Immédiat et Lisibilité.

9. Expliquez la différence entre client et utilisateur, lequel des deux est l’interlocuteur principal
de l’UX designer :

Le client c’est celui qui paie et l’utilisateur c’est celui qui clique. L’interlocuteur principale de l’UX
design est l’utilisateur.
10. Hormis les réseaux sociaux, les agences de recrutement et les listes d’utilisateurs du client,
quels moyens connaissez-vous ou pouvez-vous imaginez pour recruter des participants à un
test utilisateur ou un entretien ?

Site web du client, clubs de sport, culturels, etc., crèches, écoles, associations, dans la rue.

11. Expliquez ce qu’est et ce que n’est pas un besoin. Donnez des exemples

Un besoin est ce qui est nécessaire (que cela soit conscient ou non). C’est un problème à résoudre,
un but poursuivi par un utilisateur.

C’est n’est ni une demande, ni une envie, ni une solution.

12. Quels sont les points forts et les points faible de la méthode des tests utilisateurs ? Expliquez

AVANTAGES

Le test permet d’observer l’utilisateur dans un contexte réel d’utilisation.

Les problèmes identifiés sont ceux que l’utilisateur rencontre lorsqu’il se sert du logiciel.

Les problèmes sont identifiés objectivement par des difficultés freinant l’utilisateur dans sa tâche.

Des mesures peuvent être effectuées pendant le test.

INCONVÉNIENTS

Le test peut difficilement couvrir l’ensemble des fonctionnalités du logiciel

13. Quel est la différence entre les méthodes expertes et les méthodes utilisateurs ? Expliquez

Les méthodes experts sont les audits d’ergonomies et le cheminement cognitif. L’avantage est que
ce sont des méthodes rapides et peu couteuses. Le risque est qu’on pourrait oublier des problèmes
non liés à une tâche prioritaire et on pourrait avoir des faux positifs/négatifs.

Les méthodes utilisateurs sont les tests utilisateurs et les questionnaires standardisés. Ce sont des
méthodes qui nécessitent la présence des utilisateurs. Le test utilisateur est la méthode la plus fiable,
mais elle nécessite une certaine expertise. Le questionnaire standardisé est une méthode très rapide
et peu couteuse. Mais c’est basé sur des ressenti difficilement exploitables hors appli/site.

14. Quels sont les points forts et les points faible d’un audit ? Expliquez

L’audit est une méthode professionnelle qui permet de vérifier le respect des critères d’ergonomie.
Les points forts sont que c’est une méthode rapide et peu couteuse, on peut la combiner avec
d’autres méthodes et c’est utilisable dès la phase de maquettage. Les points faibles de l’audit sont
que les résultats ne sont pas 100% fiables (Faux positifs/négatifs) et ça ne remplace pas les tests en
condition réel.
15. Expliquez avec vos mots en quoi un persona diffère d’un segment. Donnez un exemple pour
chacun

Un segment un groupe de personne qui ont quelque chose en commun (situation géographique,
sexe, revenue, etc…).

Le persona est un personnage qu’on crée qui représente la personnalité des personnes dans un
segment donné. Les personas sont créé sur base des données que nous recevons lors d’entretien, de
test et de l’analyse des utilisateurs types.

16. Quelle est la différence entre UX et UI. Donnez un exemple pour chacun.

L’UX c’est l’expérience utilisateur, c’est le ressenti de l’utilisateur lorsqu’il utilise notre plateforme.
C’est la façon dont un site web ou une application est perçue et ressentie par ses utilisateurs en
fonction de ses qualités ergonomiques, de navigation et de contenu. Il joue un rôle très important
dans l’efficacité d’un site web ou d’une application mobile et constitue également un facteur de
fidélisation : on ne parle pas ici de client mais d’UTILISATEURS.

L’UI c’est l’interface utilisateur, le dispositif qui permet à un utilisateur de manipuler un site web, un
smartphone, une tablette, etc. Idéalement, les interfaces utilisateurs doivent être conviviales et
faciles d’utilisation pour rendre l’interaction aussi instinctive et intuitive que possible. Pour les
logiciels, on parle d’une interface utilisateur graphique. Exemples : filtrer des données pour les
utilisées, casque VR (si environnement virtuel OK mais si juste spectateur NON), montre connectée et
portée qui reçoit un appel (appuyer pour répondre ou raccrocher = interaction),...

17. En quoi cette composition graphique utilise correctement une grille ? Expliquez pourquoi en 5
lignes maximum
Un système de grille est une structure comprenant une série de lignes horizontales et verticales,
utilisées pour organiser le contenu.

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

18. Expliquez en quoi cette image utilise correctement une grille

La grille est utilisée pour mieux organiser et harmoniser les éléments sur une page web.

Ce sont des colonnes et des lignes qui sont des regroupements d’unités qui créent la structure
visuelle d’une page (nombre magique 12 car 3X4).

Cette image utilise correctement la grille car les éléments sont alignés d’une manière harmonieuse
19. Sur le site web suivant, https://moonpie.com/about/contact
Décomposez la grille que le webdesigner a utilisé. Vous vous aiderez des notions de lignes,
colonnes, marges

En quoi cela améliore t’il le processus de composition graphique

Lignes :

Colonnes :

Marges :

La grille est un outil qui facilite la réactivité, qui permet de créer un espace propre et organisé car la
structure et la symétrie plaisent à l’œil, c’est facile à créer et à naviguer et font gagner du temps,
elles permettent de créer une hiérarchie si nécessaire, elles permettent une intégration aisée de
différents éléments tels que des images, textes, chiffres, etc, elle permet un équilibre et elles sont
très flexibles. Les articles s'aligneront facilement, le contenu ou le texte ne flottera pas ou ne sera pas
irritant et elles permettent d’être créatif.

20. Comment allez-vous choisir les couleurs de votre site web ? Donnez un exemple concret et
n’hésitez pas à nommer les outils

Pour choisir la couleur de mon site web, je vais utiliser des outils comme PaletteDeCouleur.net, qui
est outil qui propose plusieurs centaines de couleur moderne. Je vais faire attention à choisir une
palette avec des couleurs qui ne soient pas seulement esthétique, mais qui attirent aussi l’attention
de l’internaute et le pousse à interagir avec le site. Et il faut que les couleurs soient en concordance
avec le type de site que je crée.