Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

Les principes du web design

Par Vincent GERVAIS Publié le 10/01/2017 à 13:20:01 Noter cet article:
(0 votes)
Avis favorable du comité de lecture

Introduction

Dans cet article nous allons vous expliquer quelques bases de la conception graphique. Après cet article vous saurez un designer avec un minimum de notions et donc vous pourrez designer en toute sécurité sans de fausse note.

Tout d'abord nous expliquerons les principes du web design en 7 étapes bien précises qui seront les suivantes:

Etape 1: La hiérarchie du design.

Etape 2: Le nombre d'or et ses vertus.

Etape 3: La Loi de Hick.

Etape 4: La Loi de Fitts.

Etape 5: La règle des tiers.

Etape 6: La théorie de Gestalt et les formes.

Etape 7: Espace de repos et épuration du design.

La hiérarchie du design.

Cette hiérarchie est faites pour attirer l'oeil humain et donc c'est un des principes du design graphique voyons avec un exemple par vous même.

Ce porincipe est applicable sur un site internet biensûr. Certains éléments sont plus importants que d’autres (formulaires, boutons, proposition de valeur, etc.)

Ce principe de hiérarchie n'est pas une question de taille mais aussi de couleur et de mise en valeur par exemple de le style d'Amazon qui est très travaillé et qui en fait son succès,

Vous pouvez ainsi voir par vous même que le bouton 'Ajouter au panier' ressort grandement et donc il attire l'oeil du client ce qui le pousse en soit a consommer chez eux.

Demandez vous toujours par le besoin de votre entreprise. Quel est son objectif principal quand un client arrive sur le site web de l'entreprise. Il vous faut alors hiérarchiser les éléments du site web pour arriver à l'objectif donné.

Le nombre d'or et ses vertus.

Voici un exemple utilisé du nombre d'or, vous pouvez ainsi voir que twitter l'utilise pour son propre site.

Voici quelque informations à propos du nombre d'or.

Le ratio d'or est l'une de ces choses qui «fonctionne juste». Il est trouvé dans la nature partout et si vous l'utilisez dans vos créations il a une tendance à faire des choses équilibrée et agréable. Nous ne savons pas vraiment pourquoi mais acceptons le et tirons profit. Le ratio d'or est de 1: 1,61. Le ratio d'or peut être appliquée dans de nombreux domaines de votre conception, y compris:

  • Les images - font la hauteur et la largeur suivent le rapport (soit portrate ou paysage).

  • Typographie - faire rubriques plus grand selon le rapport.

  • Disposition - par exemple la colonne de menu par rapport à la colonne de contenu.

Donc, si la largeur de votre page est de 960 pixels, divisez-la par 1,618 (=593 pixels).

  • La zone de contenu doit mesurer 593px

  • et la barre latérale 367px.

Si la hauteur de votre site est de 760px,

  • vous pouvez le scinder en deux parties de 470px pour la zone de contenu.

  • et 290px pour le pied de page (760/1.618 = ~470).

La Loi de Hick.

Pensez à toutes ces fois où vous vous êtes retrouvé au restaurant à devoir choisir parmi un menu sans fin… C’est tout le temps un casse-tête. En revanche, si le menu vous permettait de choisir uniquement entre deux plats, ce serait beaucoup plus rapide. Ce principe s’apparente au « Paradoxe du Choix » : plus vous donnez de choix aux gens, moins ils choisissent.

Cette loi s’applique également au web : plus il y a de catégories sur votre site, plus ce sera difficile pour vos clients de choisir sur quel lien cliquer

Vous pouvez améliorer l’expérience de vos clients en réduisant le nombre de choix disponibles. Ces décisions doivent être prises dès le début du processus de création de votre site. Ne cédez pas à la tentation de rajouter des options en cours de réalisation du design et vous devriez vous en sortir.

Lorsqu’on vend une grande quantité de produits, on a besoin de filtres ! Si vous gérez une boutique en ligne avec un important catalogue, affichez progressivement les choix qui s’offrent à vos clients en utilisant une navigation par filtres.

La Loi de Fitts

La loi de Fitts stipule que le temps requis pour se déplacer vers une zone cible (par exemple : cliquer sur un bouton) est une fonction de la distance de la cible sur la taille de la cible.

Autrement dit, plus un objet est gros et proche, plus il est facile à atteindre.

Voici un exemple de la Loi de Fitts :

Il ne faut pas pour autant faire des boutons géants. Un bouton minuscule deviendra beaucoup plus facile à cliquer lorsque vous augmentez sa taille de 20 % tandis qu’augmenter dans les mêmes proportions la taille d’un bouton déjà très gros représente un avantage négligeable.

Concrètement, la taille d’un bouton doit être proportionnelle à sa fréquence d’utilisation. Vous devriez jeter un oeil à vos statistiques pour savoir quels boutons sont les plus utilisés afin d’augmenter leur taille (et faciliter leur sélection).

La règle des tiers.

La règle des tiers est simple mais pas pour autant simple à être utilisé, vos images sont divisibles en neuf parties égales et les 4 points formés par les intersections du quadrillage servent ainsi à aligner les éléments les plus importants de votre image.

Voici un exemple de la règle des tiers.

La théorie de Gestalt et les formes.

Nous voyons toujours une image dans son ensemble avant de nous concentrer sur les éléments individuels qui la constituent.

Il existe 8 lois de Gestalt pour nous aider à anticiper la manière dont les gens vont percevoir notre site. Les voici :

La loi de la proximité

Les gens regroupent d’abord les objets les plus proches dans l’espace. Si des éléments sont trop proches les uns des autres, ils seront perçus comme un seul et même objet. En matière de web design, assurez-vous que les éléments d’une page n’appartenant PAS au même groupe ne soient pas perçus comme un objet unique.

La loi de similitude

Lorsque la distance entre les différents objets ne nous permet pas de les distinguer, on a alors tendance à regrouper les plus similaires entre eux. Il peut s’agir d’une forme ou d’une couleur similaire ou d’autres caractéristique

Sur l’image ci-dessous, l’oeil humain va rassembler les points noirs dans un groupe et les points blancs dans un autre.

La loi de clôture

Nous cherchons naturellement la perfection. C’est pour cette raison que notre perception remplit les vides lorsqu’on observe des formes qui ne sont pas fermées.

Sans cette illusion de la perception, nous verrions juste différentes lignes aux longueurs variables. Mais la loi de clôture nous permet de combiner les lignes en une forme pleine.

La loi de symétrie

Notre esprit perçoit les objets comme étant symétriques et se construisant autour d’un point central. C’est à la fois plus facile et plus rassurant de pouvoir séparer visuellement plusieurs objets en un nombre égal d’éléments symétriques.

Lorsque nous voyons deux éléments symétriques qui n’ont pas de lien entre eux, nous allons naturellement les associer pour composer une forme cohérente.

Si votre site e-commerce est construit autour de trois colonnes, assurez-vous que les colonnes de gauche et de droite ont la même largeur. L’espacement entre les blocs doit également être identique au risque de donner aux visiteurs un sentiment de déséquilibre

La loi de destin commun

Nous avons tendance à percevoir des objets comme des lignes ayant une trajectoire. Concrètement, nous regroupons ensemble les objets ayant la même trajectoire, qui vont dans la même direction.

Vous pouvez utiliser ce principe pour guider l’attention de vos visiteurs vers un élément important d’une page de votre site (un formulaire d’inscription, votre proposition de valeur, un bouton etc.).

La loi de continuité

Lorsqu’on voit une ligne, on attribue à cette ligne une trajectoire. Dans le cas d’une intersection entre plusieurs objets (par exemple des lignes), nous allons percevoir deux lignes comme deux entités ininterrompues

Espace de repos et épuration du design.

L’espace de « repos » est la partie d’une page laissée « vide ».

C’est l’espace qui sépare les visuels, les textes, les bordures, l’espace entre les colonnes ou différentes images.

Ne considérez pas cet espace comme simplement du « vide » et résistez à la tentation de le combler. Il permet aux différents objets d’une page d’exister. L’espace repos est la base d’une bonne hiérarchie de l’information, qu’il s’agisse de textes, de couleurs ou d’images.

Une page sans espace de repos aura l’air lourde et surchargée. Cela compliquera la lecture et la navigation de vos visiteurs et beaucoup d’entre eux ne feront même pas l’effort de lire ce que vous avez à dire.

Si vous utilisez correctement les espaces de repos, votre site web aura l’air « propre » et facile à parcourir. Un design épuré est crucial pour communiquer clairement votre message mais ça ne se résume pas à retirer du contenu. Pour obtenir un design propre et épuré, utilisez l’espace dont vous disposez, pas davantage.

Conclusion

Lorsque vous travaillerez sur le design de votre prochain site ou l’amélioration d’un site existant, votre créativité et votre « sens artistique » passent après.

Si vous voulez améliorer vos ventes, prenez l’habitude de vous concentrer sur l’utilisateur et l’objectif de votre entreprise en vous aidant des principes présentés dans cet article.

Keep it Simple - En cas de doute, trouver les points principaux et se concentrer sur ceux-ci. Les artifices semblent de bon goût au début, mais vous devez vous demander si ils ajoutent vraiment de la valeur et si ils n'encombrent pas les choses.

Trouvez une bonne conception et demandez-vous pourquoi cela fonctionne. Gardez également un œil sur une mauvaise conception et se demander pourquoi elle ne fonctionne pas.

Adaptez vos outils à ce que vous voulez faire.

A propos de SUPINFO | Contacts & adresses | Enseigner à SUPINFO | Presse | Conditions d'utilisation & Copyright | Respect de la vie privée | Investir
Logo de la société Cisco, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société IBM, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sun-Oracle, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Apple, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sybase, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Novell, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Intel, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Accenture, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société SAP, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Prometric, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Toeic, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo du IT Academy Program par Microsoft, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management

SUPINFO International University
Ecole d'Informatique - IT School
École Supérieure d'Informatique de Paris, leader en France
La Grande Ecole de l'informatique, du numérique et du management
Fondée en 1965, reconnue par l'État. Titre Bac+5 certifié au niveau I.
SUPINFO International University is globally operated by EDUCINVEST Belgium - Avenue Louise, 534 - 1050 Brussels