Le webdesign en blocs – Exemples et ressources

Blocs Webdesign

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 ?

Vous aimerez aussi :

Cette entrée a été publiée dans Ressources, avec comme mot(s)-clef(s) , , , , , . Vous pouvez la mettre en favoris avec ce permalien.

10 commentaires sur Le webdesign en blocs – Exemples et ressources

  1. Matthieu dit :

    Ah ! Merci bien :)
    Je suis plutôt un débutant en webdesign, et même en création de site en fait, et mon dernier projet était inspiré d’une interface « en bloc ». Voilà quelques sites qui vont me donner des idées pour améliorer tout ça et surtout le rendre plus « responsive » (vu que c’est le mot d’ordre à la mode ;) )

  2. WDTrends dit :

    Mais de rien ! J’espère que les infos te seront utiles

  3. Merci pour ces ressources, sa tombe très bien on m’a demandé aujourd’hui de produire un site avec une partie en « blocs » ;).

  4. Nous ne sommes habituellement pas très fans des webdesign en bloc mais je dois dire que ceux-ci sont vraiment réussis et notamment Etchapps (et responsive qui plus est) ! Merci pour ces ressources.

  5. Ping : 5 sites e-commerce pour votre inspiration – #13 | WebdesignerTrends - Ressources utiles pour le webdesign, actus du web, sélection de sites et de tutoriels

  6. Ping : 5 sites e-commerce pour votre inspiration – #14 | WebdesignerTrends - Ressources utiles pour le webdesign, actus du web, sélection de sites et de tutoriels

  7. Ping : webdesign | Pearltrees

  8. Ping : JQUERY | Pearltrees

  9. Ping : Maddy974 | Pearltrees

  10. Ping : Glmtsr | Pearltrees

Laissez votre impression, réagissez à l'article !

L'adresse de contact ne sera pas publiée.

*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>