8 astuces pour gagner de la place

Avec les années la taille des écrans augmente, mais pas nécessairement celle de la surface d’affichage utile. Comprenez par là que si les résolutions d’écrans supérieures à 1024 px sont majoritaires (plus de 55% d’après le W3 Counter), les utilisateurs n’exploitent pas forcément la totalité de l’espace disponible. Résultat : la norme est indiscutablement de faire des mises en page de 1024 px de large (en fait 1005 px quand on tient compte de la barre de défilement vertica  le).

Problème : Comment faire pour afficher un maximum de choses dans la limite de visibilité (sans scroll de la page) ?

Solutions : 8 Layout Solutions To Improve Your Designs.

Dans ce très bon article, l’auteur nous livre ainsi différentes techniques pour virtuellement gagner de la place en jouant notamment sur les couches (layers en anglais) et sur une interface plus dynamique (entre autre) :

  • Les carrousels et bandeaux défilants (ex. : Coda)coda
  • Les onglets intérieurs (ex. : Fontecase)

fontcase

kissmetrics

  • Le roll-over qui affiche un panneau de contenu (ex. : Miro)miro
  • La mise en page progressive qui fait apparaître le contenu au fur et à mesure des clics (ex. : Sursly)sursly
  • Les grilles de lecture marquée qui autorisent une très grande densité d’information sur une seule page tout en assurant une bonne lisibilité (ex. : Neutron Creations)neutroncreations
  • Les accordéons (ex. : Alex Cohaniuc)

alexcohaniuc

  • Les menus sur-dimensionnés (ex. Porsche)porsche

Voici donc une très belle collection d’exemples de ces différentes techniques permettant d’augmenter virtuellement le nombre de pixels.

4 réflexions sur “8 astuces pour gagner de la place

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s