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 verticale).

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)

    Un exemple de carrousel
    Un exemple de carrousel
  • Les onglets intérieurs (ex. : Fontecase)

    Un exemple d'onglets intérieurs
    Un exemple d'onglets intérieurs
  • Les fenêtres modales (ex. : KissMetrics)
    kissmetrics
  • Le roll-over qui affiche un panneau de contenu (ex. : Miro)

    Un exemple de panneau affiché en roll-over
    Un exemple de panneau affiché en roll-over
  • La mise en page progressive qui fait apparaître le contenu au fur et à mesure des clics (ex. : Sursly)

    Un exemple de mise en page progressive
    Un exemple de mise en page progressive
  • 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)

    Un exemple de grille de lecture très marquée
    Un exemple de grille de lecture très marquée
  • Les accordéons (ex. : Alex Cohaniuc)

    Un exemple d'accordéon
    Un exemple d'accordéon
  • Les menus sur-dimensionnés (ex. Porsche)

    Un exemple de menu sur-dimensioné
    Un exemple de menu sur-dimensioné

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

4 commentaires pour “8 astuces pour gagner de la place”

  1. Posté par Olivier a dit : le

    Il y a encore une autre possibilité :
    le défilement horizontal par simple déplacement de la souris : http://www.cubedesigners.com

  2. Posté par Camille Roux a dit : le

    On ne dit pas fenêtre “nodale”, mais “modale”.
    http://fr.wikipedia.org/wiki/Fenêtre_modale


    Camille Roux
    http://www.camilleroux.com

  3. Posté par Frédéric CAVAZZA a dit : le

    @ Olivier > Bien vu.

    @ Camille > Bien vu aussi.

    /Fred

  4. Posté par panix a dit : le

    Et quid du référencement de certains éléments “cachés” dans ces pages (dans les carrousels et onglets intérieurs, par exemple) ?

Laisser un commentaire