Il existe de nombreux modèles de blocs et de styles de cartes en ce moment. Pour les designers, ils sont à la fois branchés et fonctionnels. Le look est simple et rationalisé et, en termes de conception de site Web, fonctionne très bien dans les cadres réactifs.
La tendance de cette tendance est la conception modulaire. Et peu importe ce que vous pensez, ce n'est pas nouveau. La conception modulaire est profondément enracinée dans la théorie de la conception et est utilisée depuis longtemps par un certain nombre de concepteurs. Aujourd'hui, nous explorons l'arrière-plan et les applications pratiques de la conception modulaire!
Qu'est-ce que la conception modulaire?
La conception modulaire est une technique où tout est construit en utilisant un motif de grille de bloc. Chacun des éléments de la conception s'inscrit dans les modules dans des motifs rectangulaires.
La conception modulaire existe depuis longtemps. Il a été popularisé à différentes étapes par les concepteurs de journaux qui ont créé des modules pour les composants de chaque histoire dans l'édition de cette journée. Mais les modules sont également populaires dans d'autres styles de conception, car l'utilisation d'une grille distincte est un bon moyen d'organiser et de gérer le contenu.
La grille modulaire est particulièrement utile pour les projets où il y a une abondance de contenu ou de nombreux éléments de contenu qui peuvent ne pas être apparentés au visage, mais qui apparaissent simultanément dans un dessin (c'est pourquoi le style était si populaire pour les journaux avec autant de parties non liées sur une grande toile).
Dans le paysage de la conception de sites Web, la conception modulaire est une option populaire en raison de la nature flexible de la grille modulaire. Les concepts modulaires peuvent être faciles à utiliser lors de la conception de frameworks réactifs et le format de style grille convient particulièrement à d'autres tendances telles que les cartes et le minimalisme.
La conception modulaire prend un peu de réflexion au début des projets, mais il s’agit en réalité d’un système de conception basé sur une grille qui fonctionne comme toute autre grille. Cela fonctionne pour tout type de projet ou de style. Et cela vous aidera à concevoir avec organisation et harmonie.
Racines dans d'autres champs
Le design modulaire n'est pas un concept réservé aux graphistes. Tout, de l’architecture à la décoration intérieure en passant par la construction d’ordinateurs ou même de voitures, peut être modulaire. (Et chacun de ces endroits peut être un bon endroit pour chercher une inspiration de conception graphique modulaire.)
Dans d'autres domaines, la définition de la conception modulaire est un peu plus large mais peut toujours être appliquée à la théorie de la conception graphique. La conception modulaire comprend des éléments qui s'emboîtent visuellement, tels que des cubicules dans un bureau ou un mur de briques à l'extérieur d'un bâtiment. Les éléments conçus de manière modulaire sont également conçus pour être interchangeables, tels que des pièces que vous pouvez utiliser dans un ordinateur ou un autre ou un type spécifique de batterie de voiture qui fonctionne dans plusieurs automobiles. Dans la pratique physique, la conception modulaire amène souvent les gens à penser à une conception de type Lego-block dans laquelle les pièces peuvent être assemblées ou séparées les unes des autres.
Modulaire dans la conception d'impression
La conception modulaire des projets d'impression commence par la grille. La grille et les modules inclus dans la grille dictent chaque choix de conception que vous faites. La grille vous aide à déterminer où placer les éléments, les espaces et comment aligner le texte.
Heureusement, l'utilisation de cette grille n'est pas aussi restrictive que vous pourriez l'imaginer. Étant donné que vous pouvez dessiner dans la grille des motifs ou des combinaisons, les possibilités sont pratiquement illimitées.
Ce type de grille peut être configuré dans pratiquement tous les types de logiciels de conception graphique que vous souhaitez utiliser. Il se compose de lignes de grille et de gouttières horizontales et verticales (guides d'espacement). Une fois que la grille est placée sur la toile, elle devrait ressembler à une série de? Blocs? - bien qu'ils ne doivent pas nécessairement être carrés - et des blocs minces (qui sont la gouttière ou l'espace ouvert, les guides).
Comment cela fonctionne est simple. Chaque bit de contenu vit dans les blocs et il doit y avoir une largeur de gouttière d'espace entre les éléments. Vous pouvez mélanger et faire correspondre des blocs de différentes formes et tailles, mais tout reste dans un modèle de conception harmonieux avec un flux horizontal et vertical.
Voici un aperçu des combinaisons de photo-images pour vous donner une idée de la manière dont les blocs de la grille fonctionnent ensemble:
Modulaire dans la conception Web
La première chose que vous rencontrerez en matière de conception modulaire de sites Web, c’est la résistance à l’ennui. Vous pouvez surmonter cela maintenant. Toute conception peut être ennuyeuse ou intéressante, mais une grille à elle seule ne le déterminera pas.
Modulaire est une option de conception de site Web populaire en ce moment, car elle correspond à d'autres éléments assez tendances. Les concepteurs ont de nouveau poussé la conversation dans la conversation avec un design plat et empilant un grand nombre de blocs colorés comme motif de conception. Windows utilisait une interface modulaire pour le «métro». conception de Windows.
Mais c'est aussi un excellent outil pour créer beaucoup d'autres types de sites Web. Tout comme avec la conception modulaire d'impression, le concept est basé sur une grille verticale et horizontale sur la toile. La différence est dans le défilement et pour les points d'arrêt pour différentes résolutions d'écran. (Vous pouvez utiliser votre magie CSS ici et nous nous concentrerons uniquement sur l'aspect visuel.)
En ce qui concerne la conception modulaire pour les sites Web, nous pensons tout d’abord à un style presque WYSIWYG, similaire à celui que vous retrouvez souvent avec les thèmes de sites Web premium. Les blocs préfabriqués vont bien ensemble - un peu comme l’idée de construire des voitures et des ordinateurs - de sorte que chaque bloc s’intègre dans un cadre global et que vous n’ayez même pas à penser à la modularité du design.
C'est la voie facile au modulaire.
Il y a aussi l'option faites-le vous-même. Les grilles de site Web modulaires ont tendance à avoir des blocs plus grands que les grilles d'impression et à diviser l'écran en bits digestibles. La façon la plus simple d’y réfléchir consiste à utiliser un format à deux colonnes qui divise l’écran en deux verticalement (avec une gouttière).Les divisions horizontales sont souvent la profondeur d'un parchemin, ce qui est une option particulièrement populaire lorsque vous travaillez avec des animations avec défilement de parallaxe.
L'une des meilleures définitions simples (et visuelles) du fonctionnement de la conception modulaire pour les sites Web provient de Christopher Butler de Newfangled:
10 ressources de conception modulaire
Maintenant que vous êtes prêt à démarrer votre premier projet de conception modulaire, voici quelques ressources supplémentaires pour vous aider tout au long du processus.
- Modèle de grille modulaire: Grilles modulaires que vous pouvez personnaliser et télécharger.
- Conception modulaire ou non modulaire: la conversation se poursuit? par Mario Garcia
- Tout ce qu'il faut d'architecte: exemples d'inspiration
- ? Fabriquer des systèmes de disposition modulaires? par Jason Santa Maria
- Livre sur les grilles et les mises en page:? Principes de mise en page: 100 principes de conception pour l'utilisation de grilles?
- Grilles et typographie expérimentale (PDF téléchargeable)
- Karl Gerstner: une grille modulaire complexe: si vous voulez vraiment réfléchir aux moyens de penser et de développer une grille modulaire
- Griddle: CSS pour un système de grille fluide et modulaire pour les navigateurs modernes
- Comment créer une grille modulaire dans Adobe Illustrator
- Thèmes modulaires de ThemeForest
Conclusion
Ne laissez pas les grandes idées derrière un schéma de conception modulaire vous effrayer. Débuter avec une conception modulaire revient à utiliser toute autre grille ou structure. Sketch it out, élaborer un plan et commencer à concevoir.
Les avantages de la conception modulaire sont un espace et une organisation clairs, une grille qui fonctionne dans presque tous les styles et une facilité d'utilisation pour les projets numériques. Il devient progressivement une option de plus en plus populaire pour une raison quelconque. Ça marche. Maintenant, sortez et essayez-vous à un projet avec un style modulaire.
Sources d'images: Louise Cohen et Nils Mengedoht.