Web Design – Layouts

homeless_web_designers

LEÇON

 

Layouts

  • Classique multipage
  • Classique multipage + Responsive Design
  • One-page layout
  • One-page layout + Responsive Design
  • Hybride

 

Responsive Design = adaptation de l'affichage à toute sorte d'écran (ordinateur, tablette, smartphone).

On peut considérer qu'à l'heure actuelle le Responsive Design est OBLIGATOIRE pour tout nouveau projet web.

Exemple d'un site en Responsive Design : Web Design Codex !

Pour tester le site sur plusieurs formats d'écran, ouvrir le lien avec Mozilla Firefox et faire Ctrl-Maj-M pour passer en mode adaptative. Encore mieux : ouvrez le site avec votre smartphone.

 

Classique multipage + Responsive Design

 

Remarque sur la navigation verticale : il y a une tendance actuelle est de ne plus utiliser les layouts avec navigation verticale (menu en colonne à gauche) - on opte plutôt pour des menus latérals, déroulants ou "hamburger" (même en dehors du smartphone) par souci de maximiser l'utilisation de l'espace disponible sur l'écran. Mais la navigation verticale n'est pas complètement morte car les écrans larges sont devenus omniprésents pour les PC/Mac de bureau. La navigation vertical redevient donc une option pour le webdesigner qui, pour les grands écrans, ne veut pas simplement abandonner cet espace supplémentaire aux éléments de fond (voir designcouncil.org.uk).

 

Layouts pour écran large (PC / Tablette en paysage) :

 

Bannière et menu en haut
Ex : 100vinyl.com, sabatier-k.com, postable.com
classic_multipage_pc_topbanner_topmenu
Bannière en haut, menu à gauche
Ex :
classic_multipage_pc_topbanner_sidemenu
Bannière en haut, grand menu à gauche
Ex : designcouncil.org.uk
classic_multipage_pc_tallsidemenu
Bannière, menu et footer (fixes) à gauche (left-aligned)
Ex : flipp.ca
classic_left_aligned
Bannière et menu à gauche
Ex : web-design-codex.fr, mammothmedia.tv
classic_multipage_pc_sidebanner_sidemenu
Bannière et menu à gauche (footer large)
Ex : foodsense.is
classic_multipage_pc_sidebanner_sidemenu_widefooter
Contenu maximisé
Ex : www.studiosouth.co.nz, brunofujii.com, studiorodrigo.com
classic_multipage_pc_minimalist
Contenu maximisé (pseudo-smartphone)
Ex : dawn.jpl.nasa.gov
classic_multipage_pc_minimalist_phonelike

 

 

Layouts pour écran étroit (Smartphone / Tablette en portrait) :

 

Bannière puis menu (déroulant ou latéral) en haut
Ex : web-design-codex.fr, postable.com
classic_multipage_smartphone_topbanner_topmenu
Menu (déroulant ou latéral) puis bannière en haut
Ex : foodsense.is
classic_multipage_smartphone_topmenu_topbanner
Sans bannière, menu (déroulant ou latéral) en haut
Ex : 100vinyl.com
classic_multipage_smartphone_topmenu_only_nobanner
Bannière et menu (hamburger) en haut
Ex : www.studiosouth.co.nz, brunofujii.com, studiorodrigo.com, flipp.ca
classic_multipage_smartphone_topbanner_hamburgermenu
Contenu maximisé
Ex : dawn.jpl.nasa.gov
classic_multipage_smartphone_minimalist

 

One-page layout + Responsive Design

 

Layouts pour écran large (PC / Tablette en paysage) et pour écran étroit (Smartphone / Tablette en portrait) :

 

Menu fixe à gauche (écran large uniquement)
Ex : minusfirm.com, peeltheorange.com
onepage_leftfixedmenu
Bannière et menu en haut (écran large ou smartphone)
Ex : minusfirm.com (mode smartphone)
onepage_topbanner_topmenulateral
Menu fixe en haut (écran large ou smartphone)
Ex : thinkpixellab.com, bistroagency.cz/work/skoda-4x4
onepage_topfixedmenu_lateral
Menu fixe type "hamburger" en haut (écran large ou smartphone)
Ex : www.golfmontpellierlacsimon.com, peeltheorange.com (mode smartphone)
onepage_topfixedmenu_hamburger
Menu dépliant fixe à gauche (ou parfois à droite) intégré dans le contenu (écran large ou smartphone)
Ex : Sleek Makeup, kitkat.com/android (écran large)
onepage_integrated_sidemenu

 

 

[ Pour le moteur de génération de wireframes, remerciements à sketchboard.io ]