Quels types de gabarits choisir lors de la conception d’un site ?

Quels types de gabarits choisir lors de la conception d’un site ?
  • Advertising
  • Branding
  • Culture Pix
  • Digital

Dans la phase de conception il est important de déterminer le nombre et le type de gabarits à concevoir, en général le nombre de gabarits peut s’élever entre 10 et 15.

1 – Page d’accueil (home page principale ou de rubrique)

Cette page est l’une des plus importantes car elle doit accueillir et accompagner l’utilisateur. Elle doit être efficace et présenter clairement les objectifs, la raison d’être du site et les principaux contenus à jour, blocs de rebonds, etc.

2 – Page structurée

Ce type de mise en page permet de hiérarchiser l’information en fonction des besoins des utilisateurs et des objectifs du site. Ce format est de nos jours le plus répandu pour les pages d’accueil et de rubrique.

3 – Page en mosaïque

Les pages en mosaïque présentent l’ensemble des sous-rubriques de façon exhaustive, avec ou sans mise en avant de rubriques principales. La page présente l’ensemble des contenus disponibles.

4 – Pages de listes

Les pages de listes orientent les utilisateurs parmi un choix de sous-rubriques mais aussi pour présenter le panorama des contenus présents au sein d’une même rubrique. Selon la nature du site et des contenus, les listes pourront se présenter de façon plus ou moins visuelle et informative.

5 – Liste en vignettes

Une liste sous forme de vignettes facilite la reconnaissance visuelle d’images, logos ou pictogrammes. Ce type de liste est adapté aux utilisateurs qui ne recherchent pas quelque chose par son nom (texte), mais plutôt par son apparence (visuelle). Ils cherchent de l’inspiration, des idées. On trouve ce type de liste sur les sites e-commerce.

6 – Liste fluide

Cette approche permet de facilement intégrer des listes en responsive web design, en ajustant le nombre de colonnes affichées côte à côte selon le support de consultation (exemple, sur ordinateur, la liste sera présentée en 4 colonnes, sur 2 colonnes sur tablette, et sur une seule colonne sur mobile). Les listes fluides sont fortement influencées par le réseau social Pinterest. Cela permet d’être plus flexible et de mélanger de façon homogène des entrées avec ou sans visuel, avec ou sans description, avec un titre plus ou moins long…

7 – Liste sous forme de tableau

Les tableaux sont souvent une contrainte en responsive design. En effet, si la quantité d’informations dans chaque entrée de liste est dense, si le nombre de colonnes et de longueur des contenus est trop important, le tableau ne sera pas lisible en responsive design.

Cette approche est jugée moins attractive que les listes classiques. Pour faciliter la lecture d’un tableau, le format des cellules dépend de leur contenu. Un texte, libellé doit être aligné à gauche pour faciliter la lecture à l’écran. Des informations normées, de longueur fixe, comme les dates, numéros clients, numéros de téléphones doivent être centrées.

8 – Page historique / timeline

La page Timeline (navigation horizontale et /ou verticale) peut être utilisée pour guider les utilisateurs parmi des contenus de type institutionnel de sous-rubrique niveau 1 puis de découvrir des contenus en profondeur de site (N-3). Selon la nature du site et des contenus, les dates pourront se présenter de façon plus ou moins visuelle et informative.

9 – Page formulaire

Il est important de définir si le formulaire est simple, complexe, long, court, en étapes.

Les 6 bonnes raisons pour investir dans sa stratégie de marque avant plutôt qu’après Zoom sur la 3D
Un projet ? Contactez-nous !
Contactez-nous ! Un projet ?

A propos de nous

Agence de conseil et création en communication et marketing basée à Nice et Paris, notre approche unique allie stratégie, design et technologie pour façonner des plateformes e-commerce, expériences de marque, applications mobiles et autres projet digital ou print sur-mesure.

Depuis 20 ans, nous mobilisons nos savoir-faire au service de nos clients pour concevoir des solutions esthétiques et performantes.

Contact

NICE

16, avenue Fragonard
06100 NICE
04 93 87 03 19

PARIS

6, rue des Quatre Vents
75006 PARIS
01 42 33 58 83

Layer 1 Voir Voir
Pix Associates - Logo blanc

Pour une expérience optimale, veuillez utiliser votre mobile ou tablette en mode portrait.