Blocs Webdesign

Le webdesign en blocs – Exemples et ressources

Suivant l’avènement des grilles dans le webdesign, la mise en page basée sur des blocs de contenu peut s’avérer une bonne stratégie pour certains design. Petit tour d’horizon des sites du genre, puis des ressources nécessaires pour créer votre site sur une grille modulable.

Webdesign en blocs ?

La mise en page basée sur des blocs de contenu modulable est devenue incontournable pour les portfolios, les sites d’inspiration, bref ils s’agit souvent de sites présentant un lot important d’images. Rendu populaire par des sites comme Pinterest par exemple ou encore inspiré par des applications comme Flipboard ou le design Metro, la navigation se veux simple et rapide, proposant beaucoup de contenu scanable rapidement.

Le responsive webdesign y joue également un rôle crucial : par définition un bloc modulable va s’adapter à la taille du viewport de l’utilisateur. Ce type de mise en page est donc bien adapté aux différents supports mobiles actuels.

Aujourd’hui massivement utilisée, je vous propose une petite sélection de sites bien réalisés avec cette mise en page, pour ensuite vous inviter à tester différents outils et plug-ins pour créer votre propre site à blocs modulables !

Quelques exemples :

Pinterest

Mise en page avec blocs

Pepsized

Mise en page avec blocs

Usain Bolt

Mise en page avec blocs

Red Interactive

Mise en page avec blocs

Agerman

Mise en page avec blocs

Etchapps

Mise en page avec blocs

Everlovinpress

Mise en page avec blocs

Depthcore

Mise en page avec blocs

Bernd Kammerer

Mise en page avec blocs

Neightborhood Studio

Mise en page avec blocs

United Pixel Workers

Mise en page avec blocs

Make Better Shirts

Mise en page avec blocs

Daily Joy

Mise en page avec blocs

Hakim

Mise en page avec blocs

Chromeography

Mise en page avec blocs

Avec ces 15 exemples nous voilà à présent sur la même longueur d’onde je pense ;). Vous voulez en savoir plus sur la technologie utilisée ? Découvrez quelques ressources pour faire à la fois des mises en page sur des grilles fixes et modulables.

Les ressources :

Pour la plupart basés sur JQuery, les plug-ins de blocs et de grilles modulables sont nombreux. Gardons uniquement le meilleur, tout en n’oubliant pas qu’ils servent uniquement de base à développer pour l’adapter à votre projet.

Gridalicious

Une référence depuis 2008 et maintenant en full responsive ! Le tout animé et avec de nombreux exemples :

Grid Webdesign

Wookmark Jquery Plug-in

Un plug-in simple, dynamique et plutôt bien conçu !

Grid webdesign

Freetile

Toujours responsive, Freetile offre lui aussi de nombreuses options de personnalisation :

Grid webdesign

Jquery Masonry

Une référence ! Reste lourd à utiliser mais offre d’énorme possibilités de personnalisation.

Masonry

Shapeshift

Le plus : le drag n drop. Super pour une web app par exemple.

Grid Webdesign

Socialist Jquery

Pensé pour les réseaux sociaux, idéal pour un flux d’infos sociales :

Grid webdesign

Gridster

Lui aussi drag n drop, Gridster est facilement intégrable dans une projet web.

Grid Webdesign

Blocksit JS

Clairement affiché comme un Pinterest like avec des transitions CSS3 au redimensionnement.

Grid webdesign

Bonus : Equal Heights Jquery

Un petit script pour créer des colonnes de même hauteur. Très léger.

Grid

Vous connaissez sûrement d’autres ressources. Partagez-les !

Pour conclure :

La mise en page sur une grille flexible offre de nombreuses possibilités de personnalisation. Paradoxalement la multiplication de ce type de site peux également casser l’originalité d’un site. Qu’en pensez vous ?

14 commentaires

Laisser un commentaire :

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*