Det finns många block- och kortstilstilar där ute just nu. För designers är de både trendiga och funktionella. Utseendet är strömlinjeformat och enkelt och i form av webbdesign, fungerar bra i responsiva ramar.
Roten till denna design trend är modulär design. Och oavsett vad du tycker är det inte nytt. Modulär design är rotad djupt i designteori och har länge använts av ett antal designers. Idag deltar vi i bakgrunden och praktiska tillämpningar av modulär design!
Vad är modulär design?
Modulär design är en teknik där allt är byggt med ett blockmönster. Var och en av elementen i designen passar in i modulerna i rektangulära mönster.
Modulär design har funnits länge. Det blev populariserat på olika stadier av tidningsdesigners eftersom de skapade moduler för komponenterna i varje berättelse i dagens utgåva av papperet. Men moduler är också populära för andra designstilar, eftersom användningen av ett distinkt rutnät är ett bra sätt att organisera och hantera innehåll.
Det modulära rutnätet är särskilt användbart för projekt där det finns ett överflöd av innehåll eller massor av bitar av innehåll som inte kan relateras till ansiktet men visas i en design tillsammans (det var därför stilen var så populär för tidningar med så många orelaterade delar på en stor duk).
I webbdesignslandskapet är modulär design ett populärt alternativ på grund av det modulära nätets flexibla natur. Modulära koncept kan vara lätta att arbeta med när man utformar för lyhörda ramar och gallerformatet fungerar särskilt bra med andra trender som kort och minimalism.
Modulär design tar lite tanke på projektets främre ände, men är bara ett nätbaserat designsystem som fungerar som alla andra nät. Det fungerar för alla typer av projekt eller stil. Och det hjälper dig att designa med organisation och harmoni.
Rötter i andra områden
Modulär design är inte ett koncept som endast är för grafiska designers. Allt från arkitektur till inredning till hur datorer eller bilar byggs kan vara modulära i naturen. (Och någon av dessa platser kan vara ett bra ställe att leta efter modulär grafisk designinspiration.)
I andra fält är definitionen av modulär design lite bredare men kan fortfarande användas i grafisk designteori. Modulär design innefattar element som passar ihop som block visuellt, t.ex. skåp i ett kontor eller en tegelvägg på utsidan av en byggnad. Modulärt utformade element görs också för att vara utbytbara, till exempel delar som du kan använda på en dator eller en annan eller en specifik typ av bilbatteri som fungerar i flera bilar. I fysisk träning gör modulär design ofta att folk tänker på en Lego-Block-stildesign där bitar kan knäppas ihop eller bortsett från varandra.
Modular i Print Design
Modulär design för utskriftsprojekt börjar med gallret. Nätet och de bifogade modulerna i gallret dikterar varje designval du gör. Rutnätet hjälper dig att bestämma var du ska placera element, avstånd och hur du anpassar text.
Tack och lov är det inte nära så restriktivt att använda det här nätet som du kan tänka dig. Eftersom du kan rita inom raderna i ett antal mönster eller kombinationer, är de faktiska möjligheterna ganska obegränsade.
Denna typ av nät kan konfigureras i nästan vilken typ av grafisk design programvara som du vill använda och består av horisontella och vertikala gridlinjer och takrännor (distansguider). När gallret sätts på duken, ska det se ut som en serie "block"? - även om de inte behöver vara fyrkantiga och tunna block (vilket är rännan eller öppet utrymme, guider).
Hur det fungerar är enkelt. Varje bit av innehåll lever inom blocken och det måste finnas en rännängdsbredd mellan utrymmen mellan element. Du kan blanda och matcha block av olika former och storlekar men allt är kvar i ett harmoniskt designmönster med horisontellt och vertikalt flöde.
Här är en titt på några av bild-bildkombinationerna för att ge dig en uppfattning om hur rutnätet fungerar tillsammans:
Modular i webbdesign
Det första du kommer att köra in när du pratar om modulär design för webbplatser är det motstånd som det är tråkigt. Du kan komma över det just nu. Vilken design som helst kan vara tråkig eller intressant, men ett nät bara kommer inte att bestämma det.
Modular är ett populärt webbdesign alternativ just nu eftersom det faller i linje med några andra ganska trendiga element. Designers drev det tillbaka i samtalet igen med platt design och staplade massor av färgade block som ett designmönster, Windows använde ett modulärt gränssnitt för? Metro? design av Windows.
Men det är också ett bra verktyg för att skapa många andra typer av webbplatser. Precis som med modulmodell design, är konceptet rotat i ett vertikalt och horisontellt galler på duken. Där det är annorlunda finns i rullningen och för brytpunkter för olika skärmupplösningar. (Du kan arbeta med CSS magiken här och vi fokuserar enbart på den visuella aspekten.)
När det gäller modulär design för webbplatser är det som vi tänker på först en nästan WYSIWYG-stil för design, som liknar vad du ofta hittar med premiumwebbplats teman. Premade block kommer redan passa ihop - ungefär som tanken att bygga bilar och datorer - så att varje block passar in i en övergripande ram och du behöver inte ens verkligen tänka på designens modularitet.
Det är den enkla vägen till modulär.
Det finns också gör det själv alternativet. Modulära webbsidor tenderar att ha större block än trycknät och bryta skärmen till smältbara bitar. Det enklaste sättet att tänka på det är i ett två kolumnformat som delar skärmen halvt vertikalt (med en rännan).Horisontella uppdelningar är ofta djupet på en rullning, vilket är ett särskilt populärt alternativ när man arbetar med parallaxrullningsanimationer.
En av de bästa enkla (och visuella) definitionerna för hur modulär design för webbplatser fungerar kommer från Christopher Butler från Newfangled:
10 Modular Design Resources
Nu när du är redo att starta ditt första modulära designprojekt, här är några ytterligare resurser som hjälper dig på vägen.
- Modular Grid Pattern: Modular Grids som du kan anpassa och ladda ner.
- Modulär vs icke-modulär design: Samtalet fortsätter? av Mario Garcia
- Architizer's All Mod Everything: Exempel på inspiration
- ? Göra modulära layoutsystem? av Jason Santa Maria
- Boka på nät och layouter:? Layout Essentials: 100 Design Principer för att använda Grids?
- Galler och experimentell typografi (nedladdningsbar PDF)
- Komplext modulärt galler av Karl Gerstner: Om du verkligen vill ha ditt sinne blås om sätt att tänka och utveckla ett modulärt rutnät
- Griddle: CSS för ett flytande och modulärt rutsystem för moderna webbläsare
- Så här skapar du ett modulärt rutnät i Adobe Illustrator
- Modulära teman från ThemeForest
Slutsats
Låt inte de stora idéerna bakom en modulär designplan skrämma dig. Att komma igång med modulär design är precis som att använda något annat rutnät eller ramverk. Skissa ut, utveckla en plan och börja designa.
Fördelarna med modulär design är tydligt utrymme och organisation, ett rutnät som fungerar i nästan vilken stil som helst och användarvänlighet för digitala projekt. Det blir stadigt ett mer populärt alternativ hela tiden för en anledning. Det fungerar. Gå nu ut och försök din hand i ett projekt med en modulär stil.
Bildkällor: Louise Cohen och Nils Mengedoht.