Ci sono un sacco di disegni di stili di blocchi e carte là fuori in questo momento. Per i designer sono entrambi alla moda e funzionali. Il look è snello e semplice e in termini di design del sito web, funziona alla grande in quadri reattivi.
La radice di questa tendenza di design è il design modulare. E indipendentemente da ciò che pensi, non è nuovo. Il design modulare è profondamente radicato nella teoria del design ed è stato utilizzato da molti designer per un lungo periodo. Oggi esaminiamo il background e le applicazioni pratiche del design modulare!
Cos'è il design modulare?
Il design modulare è una tecnica in cui tutto è costruito utilizzando un modello a griglia a blocchi. Ciascuno degli elementi del design si adatta ai moduli in motivi rettangolari.
Il design modulare è in circolazione da molto tempo. È stato reso popolare in varie fasi dai giornalisti mentre creavano moduli per i componenti di ciascuna storia nell'edizione del giorno di quel giornale. Ma i moduli sono popolari anche per altri stili di progettazione, perché l'uso di una griglia distinta è un buon modo per organizzare e gestire i contenuti.
La griglia modulare è particolarmente utile per progetti in cui vi è un'abbondanza di contenuti o un sacco di bit che potrebbero non essere collegati al volto ma che appaiono in un design insieme (questo è il motivo per cui lo stile era così popolare per i giornali con così tante parti non correlate su una grande tela).
Nel panorama del design del sito web, il design modulare è un'opzione popolare a causa della natura flessibile della griglia modulare. I concetti modulari possono essere facili da utilizzare quando si progetta per framework responsive e il formato in stile griglia funziona particolarmente bene con alcune altre tendenze come le carte e il minimalismo.
Il design modulare prende in considerazione il front-end dei progetti, ma in realtà è solo un sistema di progettazione basato sulla griglia che funziona come qualsiasi altra griglia. Funziona per qualsiasi tipo di progetto o stile. E ti aiuterà a progettare con l'organizzazione e l'armonia.
Radici in altri campi
Il design modulare non è un concetto solo per i grafici. Tutto, dall'architettura all'interior design, al modo in cui sono costruiti i computer o persino le automobili, può essere di natura modulare. (E uno di questi posti può essere un buon posto dove cercare l'ispirazione per la progettazione grafica modulare.)
In altri campi, la definizione di design modulare è un po 'più ampia, ma può ancora essere applicata nella teoria del design grafico. Il design modulare include elementi che si uniscono visivamente come blocchi, come cubicoli in un ufficio o un muro di mattoni all'esterno di un edificio. Gli elementi progettati in modo modulare sono anche realizzati per essere intercambiabili, come parti che è possibile utilizzare in un computer o in un altro o in un tipo specifico di batteria per auto che funziona su più automobili. Nella pratica fisica, il design modulare spesso fa pensare a un design in stile Lego in cui i pezzi possono essere spezzati o separati l'uno dall'altro.
Modulare in Print Design
La progettazione modulare per i progetti di stampa inizia con la griglia. La griglia e i moduli inclusi nella griglia dettano ogni scelta progettuale che fai. La griglia ti aiuta a determinare dove posizionare gli elementi, la spaziatura e come allineare il testo.
Per fortuna, l'uso di questa griglia non è così restrittivo come si potrebbe immaginare. Poiché puoi disegnare all'interno delle linee della griglia in qualsiasi numero di schemi o combinazioni, le possibilità reali sono praticamente illimitate.
Questo tipo di griglia può essere impostato in quasi tutti i tipi di software di progettazione grafica che si desidera utilizzare e consiste di linee e gronde orizzontali e verticali (guide di spaziatura). Una volta posizionata la griglia sulla tela, dovrebbe apparire come una serie di? Blocchi? - anche se non devono essere quadrati - e blocchi magri (che sono la grondaia, o lo spazio aperto, le guide).
Come funziona è semplice. Ogni bit di contenuto vive all'interno dei blocchi e deve esserci una larghezza di spazio tra gli elementi. È possibile combinare blocchi di forme e dimensioni diverse, ma tutto rimane in un modello di progettazione armonioso con flusso orizzontale e verticale.
Ecco alcune delle combinazioni di foto-foto per darti un'idea di come i blocchi della griglia funzionano insieme:
Modulare in Web Design
La prima cosa che incontrerai quando parli di design modulare per i siti web è la resistenza che è noiosa. Puoi superarlo subito. Qualsiasi progetto può essere noioso o interessante, ma una griglia da sola non lo determinerà.
Modular è un'opzione di progettazione di siti Web molto popolare in questo momento perché rientra in linea con altri elementi piuttosto di tendenza. I progettisti l'hanno reinserito nella conversazione con un design piatto e impilato un sacco di blocchi colorati come schema di progettazione, Windows ha utilizzato un'interfaccia modulare per il? Metro? progettazione di Windows.
Ma è anche un ottimo strumento per creare molti altri tipi di siti web. Proprio come con il design modulare della stampa, il concetto è radicato in una griglia verticale e orizzontale sulla tela. Dove è diverso è nello scroll e per i punti di interruzione per diverse risoluzioni dello schermo. (Puoi lavorare qui la tua magia CSS e ci concentreremo esclusivamente sull'aspetto visivo.)
Quando si tratta di design modulare per siti Web, ciò che pensiamo in primo luogo è uno stile quasi WYSIWYG per la progettazione, simile a quello che si trova spesso con i temi premium del sito web. I blocchi premade si combinano già - come l'idea di costruire auto e computer - in modo che ogni blocco si inserisca in un quadro generale e non si debba nemmeno pensare alla modularità del progetto.
Questa è la via facile per modulare.
C'è anche l'opzione fai da te. Le griglie di siti web modulari tendono ad avere blocchi più grandi rispetto alle griglie di stampa e rompere lo schermo in bit digeribili. Il modo più semplice per pensarci è in un formato a due colonne che divide lo schermo a metà verticalmente (con una grondaia).Le divisioni orizzontali sono spesso la profondità di una pergamena, che è un'opzione particolarmente popolare quando si lavora con le animazioni a scorrimento di parallasse.
Una delle migliori definizioni semplici (e visive) di come il design modulare per i siti web lavori proviene da Christopher Butler di Newfangled:
10 risorse di progettazione modulare
Ora che sei pronto per iniziare il tuo primo progetto di progettazione modulare, ecco alcune risorse in più per aiutarti lungo la strada.
- Modello di griglia modulare: griglie modulari che è possibile personalizzare e scaricare.
- Modular vs. Non Modular Design: la conversazione continua? di Mario Garcia
- Tutti gli Mod di Architizer: esempi di ispirazione
- ? Realizzare sistemi di layout modulari? di Jason Santa Maria
- Prenota su griglie e layout:? Layout Essentials: 100 principi di progettazione per l'utilizzo delle griglie?
- Griglie e tipografia sperimentale (PDF scaricabile)
- Griglia modulare complessa di Karl Gerstner: Se vuoi davvero avere la mente soffiata su come pensare e sviluppare una griglia modulare
- Piastra: CSS per un sistema di griglia fluido e modulare per i browser moderni
- Come creare una griglia modulare in Adobe Illustrator
- Temi modulari da ThemeForest
Conclusione
Non lasciare che le grandi idee dietro un profilo di progettazione modulare ti spaventino. Iniziare con il design modulare è come utilizzare qualsiasi altra griglia o framework. Disegnalo, sviluppa un piano e inizia a progettare.
I vantaggi del design modulare sono lo spazio e l'organizzazione chiari, una griglia che funziona praticamente in qualsiasi stile e facilità d'uso per i progetti digitali. Sta diventando costantemente un'opzione più popolare per una ragione. Funziona. Ora esci e prova la tua mano a un progetto con uno stile modulare.
Fonti di immagini: Louise Cohen e Nils Mengedoht.