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