Tartalomjegyzék
Teljes körű útmutató a vizuális tervezés alapjainak elsajátításához.
Az egymillió dolláros kérdés: mi a jó design titka?
Filozofálhatunk erről, de általánosságban elmondható, hogy a jó design közmondásos "titka" abban rejlik, ahogyan a vizuális elemeket a vászonhoz és egymáshoz viszonyítva szervezed. Alapvetően az imént írtuk le az elrendezés tervezését. Ami, ha belegondolsz, mindenhol ott van, ahová csak nézel.
Vegyük például egy magazin elrendezését. Tervezésük klasszikus rácsrendszert követ (a rácsokról mindjárt mindent megtudunk). Általában minden balra, jobbra és alulra van igazítva. Az oszlopok különösen jól kivehető igazítással rendelkeznek, ami nemcsak vizuálisan vonzóvá, hanem könnyen olvashatóvá és tekintélyt parancsolóvá is teszi az oldalt. A nagyméretű címsorok vonzzák a nézőa figyelmet, míg az alcím kontrasztos méretben jelenik meg, hogy vizuális hierarchiát hozzon létre az információk között.
Linda Gaom, Behance
Mindezek a tulajdonságok tisztává, strukturálttá és könnyen olvashatóvá teszik az oldal kialakítását, és összhangban vannak azokkal a tippekkel, amelyekről a következőkben beszélni fogunk. De először is, értsünk meg többet magáról az elrendezés tervezéséről.
Mi az a Layout Design?
A layouttervezés a grafikai elemek elrendezésével foglalkozik annak érdekében, hogy az olvasó figyelmét felkeltse, és egy adott üzenetet vizuálisan vonzó módon közvetítsen.Tehát itt most nem logótervezésről beszélünk. Hanem a nyomtatott anyagok, például újságok, magazinok, plakátok és digitális megfelelőik, valamint a web, alkalmazás vagy UX/UI tervezéséről.
Az "elrendezés" szó sok mindent elárul: az előre meghatározott elemek elrendezését jelenti egy oldalon.
Ha egy elrendezés hatékony, akkor jól néz ki, és a nézőt a design által közvetíteni kívánt üzenet megértéséhez vezeti. Az elrendezés megértése ezért kulcsfontosságú a megnyerő, hatékony, felhasználóbarát és tetszetős kompozíciók létrehozásában.
Ha egy layout nem közvetíti jól a közönség felé az üzenetet, vagy más szóval nem "olvasható jól", a design hatástalan lesz, függetlenül attól, hogy mennyire divatosnak tűnik. Az layouttervezés területén a tartalom felülírja a trendeket és a trükköket.
Az elrendezés tervezésének célja
Gyorsan közvetíteni egy üzenetet
Ez kulcsfontosságú. Az elrendezés kialakítása a grafikai eszközök közötti kapcsolatot hozza létre a szemmozgás zökkenőmentes áramlása érdekében a maximális hatékonyság és hatás érdekében.
Az egyensúly megteremtése
Az elrendezés tervezésének elveinek használata a legegyszerűbb módja annak, hogy a tervezési projektjeiben egyensúlyt és szimmetriát teremtsen anélkül, hogy unalmassá válna.
Az összetartás megteremtése
Az elrendezés segít a tervezés számos elemét könnyen emészthető, koherens és logikus módon elrendezni.
Szépséget teremteni
Az egyensúly és a struktúra természetes módon teremt szépséget. Ha az elrendezés tervezése helyesen történik, automatikusan vizuálisan vonzóvá válik a néző számára. Minél kevesebb erőfeszítést kell tennie a nézőnek ahhoz, hogy megértse az üzenetet, annál vonzóbbnak tűnik a tervezése.
Frank Philippin tervező "I Used to Be a Design Student: Then - Now" című könyvéhez. Forrás: DesignBoom
Az elrendezés tervezésének elemei
Szöveg
Ez nemcsak a szövegtestet vagy a bekezdéseket foglalja magában, hanem a címsorokat, alcímeket, fejléceket és lábléceket is. A tipográfia, a szín és a méret megválasztása különböző hatást gyakorol arra, hogy az elrendezés hogyan fog hatni a közönségre.
Kép
A leggyakoribb képtípusok a fényképek, illusztrációk vagy infografikák.
Formák
A formák lehetnek geometrikusak, amelyek nagyon szögletesek, vagy lehetnek organikusak, amelyek a természetet utánozzák, de lehetnek absztraktak is. Az absztrakt formák nagyon divatosak voltak az elmúlt évben, mivel láttuk, hogy a webdesignerek komplex és burjánzó kompozíciókba építik be őket.
Az alakzatok helyettesíthetnek egy képet, de használhatók arra is, hogy grafikai elemeket adjanak az oldalhoz, kiemeljék a szöveget, vagy kijelöljék a teret más vizuális elemek között.
Fehér tér
Minden elrendezés tervezése tartalmaz bizonyos mennyiségű fehér teret, amely lehetővé teszi, hogy az elemek lélegezzenek és önmagukban is kiemelkedjenek.
Az elrendezés tervezésének arany alapelvei
Észre fogja venni, hogy az elrendezés tervezésének alapelvei sokban követik a tervezés alapelveit. Mint például a színek bizonyos módon történő használata, a tipográfia, az ismétlés, a kontraszt, a hierarchia és az egyensúly.
1. alapelv. Használjon rácsokat
A rácsok segítenek a tervezőknek a különböző tervezési elemek, például a szöveg és a képek olyan módon történő elhelyezésében, hogy az koherensnek és könnyen követhetőnek tűnjön.
Rendet biztosítanak, megakadályozzák, hogy az elemek elnyomják egymást, és ami a legfontosabb, a rácsok korrigálják az igazítást is. Így a munkád tisztábbnak és professzionálisabbnak tűnik.
Forrás: hgmlegal.com
A rácsok anatómiája
Azt gondolhatod, hogy csak függőleges és vízszintes vonalakból áll, de a rács több részből áll. Valójában sokból. Íme a legfontosabb fogalmak, amelyeket egy alaprácsnál ismerned kell:
- Formátum a végleges terv teljes területe. Ha tehát valamit nyomtatásra tervezel, a formátum az oldal, ha pedig webdesigner vagy, a formátum a weboldal vagy a böngészőablak.
- Margins a formátum és a dizájn közötti szándékos üres terek.
- Folyóvezetékek a vízszintes vonalak, amelyek párhuzamos szakaszokra osztják az elrendezést. A folyásvonalak segítik a design olvashatóságát, és irányítják az olvasót a tartalom helyes követésében.
- Modulok azok a blokkok, amelyeket bármely rács vízszintes és függőleges folyásvonalai alkotnak. Ha belegondolsz, ezek minden rács építőkövei. Az összes függőleges modulod az oszlopokat, míg az összes vízszintes rácsod a sorokat hozza létre.
- Régiók összekapcsolt modulok csoportjai, akár függőlegesen, akár vízszintesen. Nincsenek szabályok arra vonatkozóan, hogy hogyan szervezzük ezeket.
Forrás: Radversity
A rácsok típusai
Az elrendezési rácsokat először a papírra írt kézírás elrendezésére használták.
Már a 13. századra nyúlnak vissza, amikor Villard De francia művész a rácsrendszert az aranymetszéssel egyesítette, hogy nyomtatott, margókkal ellátott oldalelrendezéseket készítsen. Ez a rácsrendszer a mai napig látható, amit a nyomtatott könyvek és magazinok elrendezésének többsége bizonyít. A kiadók, szerkesztők és tervezők nemcsak azért szeretik a szabványos rácsokat használni, mert jól néznek ki, hanem mert az olvasók hozzászoktak ahhoz.elvárja, hogy bizonyos tervezési elemek egy adott helyen legyenek.
A rácsok kétféleképpen tervezhetők: szimmetrikusan vagy aszimmetrikusan. Szimmetrikus rácsok egy középvonalat követnek, ahol a függőleges és vízszintes területek egyenlőek egymással; és az oszlopok szélessége azonos.
Egy aszimmetrikus rács , ahogy a neve is mutatja, a margók és az oszlopok nem mind egyformák.
Ezen osztályozás alapján öt fő típusát különböztetjük meg a világszerte használt elrendezési rácsoknak, amelyekre támaszkodhat:
Kézirati rácsok a dokumentumok legelterjedtebb rácsfajtája. Elválasztják a fejlécet, a láblécet és a margókat, és alapvetően egy téglalapot hoznak létre a formátumon (vagy az oldalon) belül, amely a szöveged határait adja. Ezek a magazinok, újságok és könyvek alapját képezik. Tehát valószínűleg ez az az elrendezés, amelyet a leginkább ismersz.
Forrás: UXplanet
Forrás: Radversity
Oszloprácsok A tipikus magazinok elrendezése oszloprácsokat használ, hogy a szöveget könnyen olvasható részekre osszák. De nagyon népszerűek a weboldalakon is. Kettőtől akár hat rácsot is használhatsz. Több is lehetséges, de nem gyakori. Az oszloprácsok nagyon fontos tulajdonsága, hogy az oszlopok közötti távolságok, vagyis az ereszek, egyenlő távolságra vannak egymástól.más.
A szimmetrikus oszloprácsokat például az újságok használják, míg a webdesignban az aszimmetrikus oszloprácsokat részesítik előnyben.
Forrás: UX Planet
Forrás: Radversity
Moduláris rácsok hasonlóak az oszloprácshoz, de figyelembe veszik a vízszintes folyásvonalakat is. Erre a rács típusra akkor van szükség, ha az elrendezésben különböző elemeket kell rendeznie, és az oszloprácsok egyszerűen nem elegendőek.
A moduláris rácsok azonos méretű modulokkal rendelkeznek, ami nagyon megkönnyíti a térbeli zónák különböző módon történő megjelenítését.
Forrás: UX Planet
Forrás: Radversity
Alapvonal-hálózatok Az alapvonal az a vonal, ahol a szöveg áll, amikor gépel, az élvonal pedig a két alapvonal közötti távolság. Kíváncsi, hogy mekkora legyen a fejléc vagy az alcím?
Lásd még: 22 éleslátó kreativitás idézetek Az alapvonalrácsok segítenek a szöveg áramló ritmusát megadni.
Forrás: UX Planet
Forrás: Fragaria
Hierarchikus rácsok kevésbé hasonlítanak rácsra, mint minden társaik. Ennek ellenére nagyon hasznosak, amikor a tervezési elemeket fontossági sorrendbe rendezzük. A hierarchikus rácsok alapulhatnak moduláris rácsokon, vagy akár sajátot is készíthetünk. A weboldalak sokat használják ezt a rácsot, különösen a digitális magazinok és újságok hajlamosak inkább a hierarchikus rácsokra támaszkodni, mint az oszloprácsokra, amikor átállnak adigitális.
Forrás: UX Plane
2. alapelv: Használj negatív teret
Gyakran azt gondoljuk, hogy az üresség, a csend vagy a színek hiánya rossz dolog. De nem vesszük figyelembe, hogy ezek a kontraszt szilárd alapját képezik.
A fehér térnek is nevezett negatív tér az a terület a dizájnodban, amelyen nincsenek tényleges elemek. Ez az üresen hagyott terület. Nemcsak körülveszi az eszközeidet, hanem megteremti a szükséges kötéseket is közöttük. Emiatt a negatív tér egy jogos dizájnelem, és hatalmas hatással van arra, hogy mennyire hatékony az elrendezésed kialakítása.
Jó vs. rossz negatív tér
A negatív tér segít elválasztani a különböző területeket a designban, miközben lehetővé teszi, hogy az elrendezés lélegezzen. Segít a vizuális hierarchiában és a vizuális egyensúlyban; a felhasználó figyelmét a központi elemekre irányítja; csökkenti a figyelemelterelés szintjét; és végül stílust és eleganciát kölcsönöz a designnak.
A tapasztalatlan tervezők hajlamosak lehetnek arra, hogy a vászon minél nagyobb részét kitöltsék, felnagyítva a szöveget, vagy felnagyítva egy logót, vagy egy képet. De ha teret adsz az elemeidnek, a néző gyorsabban és kényelmesebben fel tud venni bizonyos információs jeleket.
Ha minden a néző figyelméért kiabál, semmi sem hallatszik.- Aaron Walter, 'Design for emotion'
A negatív tér meghatározásának egyszerű módja a moduláris rács használata. Ha ezt a rácsot a terved tetejére helyezed, akkor könnyen láthatóvá teheted, hogy mely modulok maradhatnak üresen, és melyeket kell kitölteni.
Tervező: Brunswicker, Forrás: Codesignmag.com
3. alapelv: Válasszon egyetlen fókuszpontot!
Előfordult már, hogy egy ügyfél arra kérte, hogy a logót tegye nagyobbra? És aztán a főcímet még nagyobbra?
Nem lehet mindent kiemelni. Ez meghiúsítja a jó design lényegét. Ahogy az idő, úgy a fókusz is relatív. Ahhoz, hogy egy elem kiemelkedjen, egy másiknak háttérként kell szolgálnia. Egyes elemeknek dominálniuk kell mások felett, hogy a design vizuális hierarchiát mutasson.
A design fókuszpontja az az elem, amelynek a legnagyobb vizuális súlya van. Ez az az elem, amely először vonzza a tekintetet, jobban, mint bármi más az elrendezésben.A fókuszpont bejelenti a közönségednek, hogy hol kezdődik a nézői utazás a designodon. Tehát ez a kezdete annak a történetnek, amit elmesélsz.
Ez általában egy nagyméretű kép vagy egy nagyméretű tipográfiai forrás használatával érhető el. Figyelje meg, milyen hatékony az alábbi fókuszpont.
Braulio Amado tervezte a Bloomberg Businessweek számára, Forrás: Szép, hogy
De míg a fókuszpont vonzza a közönség figyelmét, a következő szabály segít irányítani azt.
4. alapelv: Gondolj a közelségre és az áramlásra!
A közelség elve egyszerű. Biztosítsa, hogy az egymáshoz kapcsolódó elemek egymás mellé kerüljenek.
A szoros közelség azt jelzi, hogy a vizuális eszközök összekapcsolódnak, és egyetlen vizuális egységgé válnak, amely segít megszervezni az elrendezést.Tehát csak olyan tervezési eszközöket csoportosítson, amelyek kapcsolatban állnak egymással, és a designban található információs zsebek segítségével vezesse el közönségét a releváns tartalomhoz, amelyet el kell fogyasztania. Ezt az áramlás elvének is nevezik.
Forrás: Satori Graphics
Lásd még: A világ legjobb design fővárosaiA jó áramlású design könnyedén vezeti a nézők szemét az elrendezésen keresztül, elemről elemre. A fókuszpontok vonzzák a tekintetet, és pihenőhelyként szolgálnak, míg más elemek irányt adnak.
Egyszerűen megérthetjük ezt például a weboldalunk példáján. A grafikák világosan elkülönülnek a szövegtől, ahogyan a cselekvésre való felhívások is, így a néző figyelme az egyik információcsoporttól a másikig navigál.
5. alapelv. Használj kontrasztot
Győződjön meg róla, hogy a designban elegendő kontraszt van.
A kontraszt segít rendszerezni a designt, és létrehozza a szükséges hierarchiát, valamint kiemeli a fontos dolgokat.Ennél is több, a kontrasztok jó használata vizuálisan is érdekesebbé teszi a designt. Lássuk be, egy olyan elrendezés, ahol minden ugyanolyan méretű, formájú vagy színű, unalmasan fog kinézni. A kontrasztok feldobják a dolgokat.
Az első gondolatod lehet, hogy a színkontraszt, például a meleg kontra hideg, sötét kontra világos, kék kontra narancssárga. De míg a szín a kontraszt rendkívül lényeges elve, a kontrasztok között vannak a típus, az elrendezés és a méret kontrasztjai is. És ne feledd, a kontraszt is relatív. Csak más elemekkel együttesen van jelentősége.
Íme néhány példa olyan elrendezésekre, amelyek okosan és szépen alkalmazzák ezt a szabályt. Figyelje meg a kontrasztot a tipográfiában, a színekben és még az elemek közötti méretbeli kontrasztot is.
Forrás: IAG egyeztetési cselekvési terv
6. alapelv: Ismétlés, minta, ritmus
Amikor az ismétlődésre gondolunk, ugyanaz az elem jut eszünkbe újra és újra.
De a tervezésben ez másképp van. Ez határozottan nem olyan unalmas. Ha helyesen használjuk, az ismétlődés valóban erősítheti a designt.
Próbálj meg egy motívumot azonosítani és újra felhasználni az egész elrendezésedben, hogy a különböző területek összekapcsolódjanak és ugyanannak a kompozíciónak a részének érezzék magukat. Ez segít abban, hogy a designodnak legyen egy témája. Az elemek ismétlésével nem csak a közönséged elvárásainak megfelelően teljesítesz, hanem a felhasználói élményt is javítod. A következetességtől a felhasználók jobban érzik magukat.
Ezt megteheted alakzatok vagy szimbólumok ismétlésével. Vagy akár egy színsémával, egy betűtípussal és általában ugyanazzal a stílussal.
Jó szokás, hogy egy nagy családdal rendelkező betűtípust használjon. Korlátozza a különböző minták, vonalsúlyok/stílusok és színek számát, és ismételje végig. A képek és grafikák stílusát is próbálja meg megtartani. Használjon például ugyanazon művész illusztrációit.
Forrás: Thepentool.co
Ennyi. Ez az a hat alapelv, amely segít megszervezni a designt, és egy letisztultabb, professzionálisabb és kiegyensúlyozottabb elrendezést elérni.
De az utazásod itt még nem ér véget. A grafikai tervezés nem egzakt tudomány, és nem szabad, hogy csak tippekre és elvekre korlátozódjon. Mint az alkotás minden területén, itt sincs kemény szabály. A tippekből való finom kitörés mélységet és változatosságot ad a terveidnek.
Mindazonáltal ezek remek kiindulópontot jelentenek, és arra bátorítjuk, hogy próbálja ki őket, és ossza meg velünk, hogyan váltak be!
Vectornator letöltése a kezdéshez
Emelje terveit a következő szintre.
Letöltés
