Moduláris tervezés: A teljes alapkönyv kezdőknek

Jelenleg rengeteg blokk és kártya stílusú design létezik. A tervezők számára ezek egyszerre divatosak és funkcionálisak. A megjelenés áramvonalas és egyszerű, és a weboldalak tervezését tekintve remekül működik reszponzív keretrendszerekben.

Ennek a designtrendnek a gyökere a moduláris tervezés. És bármit is gondolsz, ez nem újdonság. A moduláris tervezés mélyen a designelméletben gyökerezik, és számos tervező már régóta alkalmazza. Ma a moduláris tervezés hátterébe, és gyakorlati alkalmazásaiba merülünk bele!

Digitális eszközök felfedezése

Mi a moduláris tervezés?

A moduláris tervezés egy olyan technika, ahol minden egy blokkrácsos mintázat alapján épül fel. A tervezés minden egyes eleme téglalap alakú mintázatban illeszkedik a modulokba.

A moduláris tervezés már régóta létezik. Különböző szakaszaiban az újságtervezők népszerűsítették, amikor modulokat hoztak létre az újság adott napi kiadásának egyes történeteinek összetevői számára. De a modulok más tervezési stílusok esetében is népszerűek, mivel a határozott rács használata jó módszer a tartalom rendszerezésére és kezelésére.

A moduláris rács különösen hasznos az olyan projekteknél, ahol rengeteg tartalom vagy sok olyan tartalomrészlet van, amelyek az arculaton nem kapcsolódnak egymáshoz, de a designban együtt jelennek meg (ezért volt ez a stílus olyan népszerű az újságoknál, ahol sok egymástól független rész van egy nagy vásznon).

A weboldalak tervezésében a moduláris tervezés népszerű lehetőség a moduláris rács rugalmas jellege miatt. A moduláris koncepciókkal könnyű lehet dolgozni, ha reszponzív keretrendszerekhez tervezünk, és a rácsszerű formátum különösen jól működik néhány más trenddel, például a kártyákkal és a minimalizmussal.

A moduláris tervezés némi gondolkodást igényel a projektek elején, de valójában csak egy rácsalapú tervezési rendszer, amely ugyanúgy működik, mint bármely más rács. Bármilyen típusú projekthez vagy stílushoz használható. És segít a szervezettség és a harmónia tervezésében.

Gyökerek más területeken

A moduláris tervezés nem csak a grafikusok fogalma. Az építészettől kezdve a belsőépítészeten át a számítógépek vagy akár az autók felépítéséig minden lehet moduláris jellegű. (És ezek közül bármelyik jó hely lehet arra, hogy moduláris grafikai inspirációt keressünk.)

Más területeken a moduláris tervezés definíciója kicsit tágabb, de a grafikai tervezés elméletében még mindig alkalmazható. A moduláris tervezés olyan elemeket foglal magában, amelyek vizuálisan blokkokként illeszkednek egymáshoz, mint például a fülkék egy irodában vagy egy téglafal egy épület külső oldalán. A modulárisan tervezett elemek szintén úgy készülnek, hogy cserélhetőek legyenek, mint például az alkatrészek, amelyeket az egyik vagy másik számítógépben használhatunk, vagy aEgy bizonyos típusú autóakkumulátor, amely több autóban is működik. A fizikai gyakorlatban a moduláris tervezésről az embereknek gyakran a Lego-kocka stílusú kialakítás jut eszébe, ahol a darabok össze- vagy szétpattinthatók.

Moduláris a nyomtatott tervezésben

A nyomtatási projektek moduláris tervezése a ráccsal kezdődik. A rács és a rácsba zárt modulok minden tervezési döntést meghatároznak. A rács segít meghatározni az elemek elhelyezését, a távolságot és a szöveg igazítását.

Szerencsére a rács használata közel sem olyan korlátozó, mint ahogyan azt gondolnád. Mivel a rácsvonalakon belül tetszőleges számú mintát vagy kombinációt rajzolhatsz, a tényleges lehetőségek szinte korlátlanok.

Ez a fajta rács szinte bármilyen grafikai tervezőszoftverben beállítható, és vízszintes és függőleges rácsvonalakból, valamint ereszcsatornákból (távolságtartó vezetők) áll. Miután a rácsot a vászonra helyeztük, úgy kell kinéznie, mint egy sor "blokknak" - bár ezeknek nem kell négyzet alakúnak lenniük - és vékony blokkoknak (amelyek az ereszcsatornák, vagy szabad térvezetők).

Működése egyszerű. Minden tartalmi elem a blokkokon belül helyezkedik el, és az elemek között egy ereszszélességű helynek kell lennie. Különböző formájú és méretű blokkokat keverhetsz és illeszthetsz össze, de minden harmonikus tervezési mintázatban marad, vízszintes és függőleges áramlással.

Íme, néhány fotó-kép kombináció, hogy képet kapjon arról, hogyan működnek együtt a rácsblokkok:

Moduláris a webdesignban

Az első dolog, amibe bele fogsz futni, amikor a moduláris tervezésről beszélsz a weboldalakon, az az ellenállás, hogy ez unalmas. Ezen most túlléphetsz. Bármilyen design lehet unalmas vagy érdekes, de a rács önmagában nem fogja ezt meghatározni.

A moduláris mostanában népszerű weboldal tervezési lehetőség, mert egybeesik néhány más, meglehetősen divatos elemmel. A tervezők a flat designnal és a sok színes blokk egymásra halmozásával mint tervezési mintával ismét a beszélgetés tárgyává tették, a Windows a Windows "Metro" dizájnjához moduláris felületet használt.

De rengeteg más típusú weboldal létrehozásához is nagyszerű eszköz. A nyomtatott moduláris tervezéshez hasonlóan a koncepció a vásznon lévő függőleges és vízszintes rácsban gyökerezik. Ahol különbözik, az a görgetés és a különböző képernyőfelbontásokhoz tartozó töréspontok. (Itt lehet CSS-t varázsolni, mi pedig kizárólag a vizuális aspektusra koncentrálunk).

Amikor a weboldalak moduláris tervezéséről van szó, először egy szinte WYSIWYG stílusú tervezésre gondolunk, hasonlóan ahhoz, amit gyakran a prémium weboldal témáknál találunk. Előre elkészített blokkok jönnek, amelyek már összeillenek - hasonlóan az autók és számítógépek építéséből származó ötlethez -, így minden blokk illeszkedik egy átfogó keretbe, és nem is kell igazán gondolkodni a tervezés modularitásán.

Ez a könnyű út a modulárishoz.

Ott van még a csináld magad opció. A moduláris weboldal rácsok általában nagyobb blokkokat tartalmaznak, mint a nyomtatott rácsok, és emészthető részekre bontják a képernyőt. A legegyszerűbb, ha két oszlopos formátumban gondolkodunk, amely függőlegesen kettéosztja a képernyőt (egy ereszcsatornával). A vízszintes felosztás gyakran a görgetés mélységét jelenti, ami különösen népszerű lehetőség, ha parallax görgetéssel dolgozunk.animációk.

Az egyik legjobb egyszerű (és vizuális) definíció arra, hogyan működik a moduláris weboldaltervezés, a Newfangled munkatársától, Christopher Butlertől származik:

10 moduláris tervezési források

Most, hogy készen áll arra, hogy elkezdje első moduláris tervezési projektjét, itt van még néhány forrás, amely segíthet Önnek az út során.

1. Moduláris rácsminta: Moduláris rácsok, amelyeket testreszabhat és letölthet.
2. "Moduláris vs. nem moduláris tervezés: A beszélgetés folytatódik" - Mario Garcia
3. Architizer's All Mod Everything: Példák az inspirációhoz
4. "Moduláris elrendezési rendszerek készítése" Jason Santa Maria által
5. Könyv a rácsokról és elrendezésekről: "Layout Essentials: 100 tervezési alapelv a rácsok használatához".
6. Rácsok és kísérleti tipográfia (letölthető PDF)
7. Komplex moduláris rács Karl Gerstner-től: Ha tényleg el akarod képzelni, hogyan lehet egy moduláris rácsot gondolkodni és fejleszteni.
8. Griddle: CSS egy folyékony és moduláris rácsrendszerhez a modern böngészőkhöz
9. Hogyan hozzunk létre moduláris rácsot Adobe Illustratorban?
10. Moduláris témák a ThemeForest-től

Következtetés

Ne hagyja, hogy a moduláris tervezési vázlat mögött rejlő nagy ötletek megijesszék. A moduláris tervezéssel való kezdés ugyanolyan, mint bármely más rács vagy keretrendszer használata. Vázolja fel, dolgozzon ki egy tervet, és kezdje el a tervezést.

A moduláris tervezés előnyei a tiszta tér és a szervezettség, a szinte bármilyen stílusban működő rács és a digitális projektek egyszerűsége. Okkal válik folyamatosan egyre népszerűbbé. Működik. Most menj, és próbáld ki magad egy moduláris stílusú projektben.

Képforrások: Louise Cohen és Nils Mengedoht .