Tervezési Elvek: Helyet, Valamint A Ábra-Föld Kapcsolat

A Szerzőről

Steven Bradley a szerző a Tervezés Alapjai: Elemek, Attribútumok, & Elvek CSS Animációk, Átmenetek a Modern Web., Ha nem …Több aboutSteven Bradley↬

  • 10 perc olvassa el a
  • az Ihlet,a Design,a Kreativitás,a Tervezési Elvek
  • Mentett offline olvasás
  • Share on Twitter, A LinkedIn
Ha látod, grafikai tervezés, mint egy folyamat megszervezése alakzatok vászon, akkor csak azt látod fél, hogy mi a munka. A vászon negatív tere ugyanolyan fontos, mint a vászonra helyezett pozitív elemek.,

a tervezés mind a formák, mind a tér elrendezése. Ahhoz, hogy hatékonyabban működjön a térrel, először tisztában kell lennie vele, és meg kell tanulnia látni — meg kell tanulnia látni a tér formáinak formáit és a tér kommunikációjának módját. Ez a második része a kezdőknek szóló tervezési elvekről szóló sorozatnak. Az első rész hatálya alá tartozó bevezetés a gestalt; a többi sorozat (beleértve ezt a hozzászólást) épít, azokat a gestalt alapelvek, mutasd meg, hogy sokan az alapvető elvek dolgozunk, mint a tervezők eredete van.,

az ábra-Föld kapcsolat

a térre leginkább érvényes gestalt elv az ábra-föld. Minden a design a tiéd lesz tekinteni, mint az egyik vagy a másik, és a kapcsolat közöttük kölcsönösen kizárják. Egyik sem érzékelhető, kivéve a másikhoz képest, az egyik megváltoztatása lehetetlen a másik megváltoztatása nélkül is.

az alak-föld kapcsolat is kiegészítő. Az ábra és a talaj fokozhatja vagy csökkentheti egymást, a kettő egymáshoz viszonyított rendezése pedig a tervezés egyik legfontosabb szempontja., Ez meghatározza a kontextust, hogy hogyan kommunikál a design, és hogyan fogják értelmezni.

” A fehér tér aktív elemnek, nem passzív háttérnek tekinthető.”
— Jan Tschichold

ábra-talaj kapcsolat (kép jóváírás: “grafikai elemek”, Alex White)

a harmadik panelen két fekete vonal eltávolításra került. Ez aktiválja a helyet, így úgy tűnik, hogy a szürke mező tetején ül., A talaj lett a szám, és növeli a mélységet, hogy a design.

stabil, reverzibilis és kétértelmű alak-földi kapcsolatok.

háromféle alak-földi kapcsolat létezik:

  • stabil (balra fent)
    egyértelmű, hogy mi az ábra és mi a talaj. Az egyik vagy a másik általában uralja a kompozíciót.
  • reverzibilis (fent középen)
    mind a szám, mind a talaj egyformán vonzza a néző figyelmét., Ez feszültséget hoz létre, amellyel vagy meghaladhatja a másikat, ami dinamikus kialakításhoz vezet.
  • kétértelmű (jobbra fent)
    Az elemek egyszerre mind alaknak, mind talajnak tűnhetnek. Ugyanolyan érdekes alakzatokat alkotnak, a nézőnek pedig meg kell találnia saját belépési pontját a kompozícióba.

attól függően, hogy melyik kapcsolatot állítja be, és hogyan egyensúlyozza mind a figurát, mind a talajt, arra irányítja a közönséget, hogy nézze meg a tervezés különböző részeit, és értelmezze azt, amit különböző kontextusokban látnak.,

A Figure-ground nem az egyetlen gestalt elv, amelyben a tér kiemelkedő szerepet játszik. Két másik ezek:

  • Proximity
    Proximity használ tér csatlakozni, illetve külön elemek csatolásával néhány elem a térben. Egy példa, amit magától értetődőnek tekinthetünk, az oldal szövegének bekezdései. A bekezdések közötti tér nagyobb, mint a bekezdésen belüli szövegsorok közötti tér.
  • Bezárás
    ez kihasználja a helyet az elemek közötti résként. A nézők kitöltik a hiányosságokat saját információikkal, hogy egy egészet kitöltsenek az alkatrészekből. Túl sok hely, és nincs lezárás., Túl kevés hely és nincs szükség lezárásra. Csak a helyes egyensúly a tér és a kitöltött tér között aktiválja a teret, és bezáráshoz vezet.
Bezárás

tér mint tervezési elem

Gondolj a zenére egy pillanatra. Ha minden hangot vagy akkordot egyszerre játszanának, akkor nem lenne zene. Zajt csapnál. A zene akkor fordul elő, amikor a hangok ellentétesek a csenddel. A hang és a csend mintájának változtatása ritmust és dallamot teremt., A csend nélkül nincs zene.

a tér ugyanazt a funkciót vizuálisan hajtja végre. Ez ad pozitív elemek levegőt. Ez ad a szem mozgás szabadsága révén, a design, hogy felfedezzék az elemeket keres. A pozitív csak a negatívral ellentétben látható. Hely nélkül nincs design. Látászavarod van.

hacsak a zaj nem az, amit kommunikálni próbál, hajoljon a tér felé. Az emberek kevésbé valószínű, hogy panaszkodnak a túl sok hely, mint a túl kevés.,

a tér a következőket teheti:

  • kontrasztot, hangsúlyt és hierarchiát hoz létre;
  • drámát és feszültséget generál;
  • vizuális pihenést biztosít az elemek csoportjai között.

ahogy az ábra-föld kapcsolat azt sugallja,csak akkor van hely, ha valami benne van. A pozitív elemek hozzáadása előtt a tér nem definiált. Az alak-föld kapcsolatot még a tér létezése és a kommunikáció megkezdése előtt meg kell teremteni.

a tér egyik fontosabb funkciója az olvashatóság és olvashatóság javítása., Makró-tér teszi a szöveget több hívogató. Mikrotér teszi olvashatóbb.

  • Micro-space
    Ez egy csoport elemein belüli tér. A betűk,szavak és bekezdések közötti tér.
  • Macro-space
    Ez a fő elemek közötti tér. Elkülöníti az elemeket vagy az elemcsoportokat, és utat biztosít a szemnek, hogy kövesse, és hogy hol pihenhessen az elemek között.

a tér korrelál a minőséggel. Több hely kevesebb elemet vagy elemek ritkaságát vonja maga után. Hasonlítsa össze a high-end és a kedvezményes kiskereskedelmi üzletek., Melyikben általában több hely van, és melyik csomagolja be a termékeket a rendelkezésre álló hely minden részébe? Mit jelent a tér kommunikálni veled?

a tér a minőségen kívül más attribútumokat is közvetít, mint például:

  • kifinomultság,
  • egyszerűség,
  • luxus,
  • tisztaság,
  • magány,
  • nyitottság.

akkor pazarolja a helyet, ha nem veszi figyelembe. A helyet túltöltéssel pazarolhatja. A helyet úgy pazarolhatja el, hogy csapdába ejti a formatervezés belső elemeit, és nem teszi lehetővé, hogy csatlakozzon a tervezés más helyéhez.,

A tervezés végső soron az alakzatok elrendezése, amely magában foglalja a tér által alkotott alakzatokat. Ne félj használni a helyet. Tekintse meg, mint egy fontos tervezési elem az Ön irányítása alatt.

néhány példa a hely a weboldalakon

a hely jobb használatához először tudatosan tisztában kell lennie vele. Tanulja meg felismerni a helyet különböző mintákban. Figyeld meg a formáit, és gondold át, hogy mit kommunikál a tér. Ebből a célból nézzük meg egyes webhelyek kialakítását, figyelembe véve a hely használatát.,

Old Guard

Tom Johnson régi gárdájának kialakítása rengeteg fehér teret használ, szövegeket és egyéb elemeket ad a lélegzéshez. Nem tévesztendő össze, hogy mi az ábra és mi a föld.

Old Guard használ sok fehér tér, így a szöveg és egyéb elemek szoba lélegezni. (Nagy változat)

az információkat Hely tartalmazza és elválasztja (emlékezzünk a közelség elvére), megkülönböztetve az elemek csoportjait., Könnyen meg tudja mondani, hol ér véget az egyik üzenet, a következő pedig kezdődik, kizárólag a köztük lévő tér.

a fő tartalom kissé off közepén az oldalon, Nagyvonalú helyet mindkét oldalon. Ezt a helyet időnként megszakítják az elemek, aktiválva mind a teret, mind a megszakító elemeket. Ez segít felhívni a figyelmet a területre, különösen a belső elemekre.

Heroku Staus Page

az alábbi kép a Heroku állapotoldalának egy részét mutatja, mint többnyire helyet., Történetesen elkaptam a weboldalt egy különösen jó napon, mert a további pozitív elemek több jelentett eseményt jelentenek a platformon. Itt több fehér hely jelenti a jobb szolgáltatást.

a Heroku állapotoldalának része. (Nagy változat)

figyeljük meg, hogy a fehér térnek nem kell fehérnek lennie. Bár az oldal túlságosan nagylelkű a térrel, nem valószínű, hogy panaszkodna, hogy túl sok van belőle., Csak Fontos információk — ebben az esetben az állapotfrissítések és az eseményekről szóló jelentések — szakítják meg a teret.

A regény bemutatása

a regény bevezetésének tetején lévő tér aszimmetrikus és aktív. Figyelje meg, hogy a bal oldali nagy térblokk közvetlenül a tartalomhoz vezet. Ha rákattint a weboldalra, majd lefelé görget a tetejéről, látni fogja, hogy a szóköz is használható az információblokkok elválasztására és csoportosítására.

a regény bevezetésének tetején lévő tér aszimmetrikus és aktív., (Nagy változat)

vékony fénysorokat is használnak a blokkok csoportosítására és elválasztására. A weboldal megtekintésekor vegye figyelembe, hogy a vonalak nem mindig érintkeznek, lehetővé téve a tér áramlását körülöttük, majd csatlakozhat más térhez. Ez megakadályozza, hogy a tér csapdába kerüljön.

Elliot Jay Stocks

az Elliot Jay Stocks weboldalának mindenki számára ismerősnek kell lennie, mivel ő áll a terv mögött. Az aszimmetrikus tér Elliot honlapján ismét aktív térhez vezet.,

aszimmetrikus tér Elliot Jay Stock honlapján vezet aktív tér. (Nagy változat)

az oldal tetején lévő nagy kép potenciálisan ideiglenes blokkként állhat az alábbi tartalom eléréséhez; azonban a kép melletti nagy mennyiségű hely bőséges és meghívó helyet biztosít a szem számára, hogy mozogjon körülötte., Ha a bal oldali oldalsáv ugyanolyan háttérszínnel rendelkezik, mint a fő tartalom, akkor valószínűleg könnyebb lenne a szem számára a kép körül mozogni, de a színváltozás aligha megnehezíti.

mint a fenti webhelyeknél, a teret arra használják, hogy elkülönítsék a különálló információk csoportjait, lehetővé téve minden csoport számára, hogy kiemelkedjen, és lehetővé tegye a szem számára, hogy megtalálja, amit akar, és pihenjen a kettő között.

Phil Coffman

A Phil Coffman weboldalán található tartalom egyetlen alakot alkot, amely többnyire üres térben helyezkedik el., Sok pozitív elem hiánya növeli a jelenlévők fontosságát.

A Phil Coffman weboldalán található tartalom egyetlen alakot alkot, amely többnyire üres térben helyezkedik el.

még a színes téglalap alakú háttéren belül is elegendő hely van a szöveg körül, hogy könnyen olvasható legyen, és ne tévesszen meg az oldal másik szövegkategóriájával.,

a pozitív alak (és a tér alakja) különböző böngészőszélességekhez alkalmazkodik, de a tér által körülvett egyetlen nagy alak mintája megmarad.

új kalandok a Webdizájnban

mint sok weboldal itt, a 2013-as Webdizájn konferencia új kalandjai Nagyvonalú teret hagynak az elemek körül. Az információk különálló csoportjait a tér tartalmazza, a tér pedig a tervezés során aktív.

az új kalandok nagy teret hagynak az elemek körül., (Nagy változat)

valami érdekes megjegyezni a szürke kör alakú nyilak között a kép a bal felső és a fő tartalom jobbra.

ezek a nyilak blokkolják a tér áramlását? Mivel nem nyúlnak hozzá, és mivel mindegyik szaggatott, ahol megszakítja a teret, a tér átfolyhat, bár ebben az áramlásban egyértelműen korlátozottabb.

a világosabb-szürke szín segít. Megakadályozza, hogy a nyilak uralkodjanak, és nem nehéz elképzelni, hogy a tér átfolyik a vonalakon.,

a méltányosság, ha a böngészőm szélesebb volt, amikor megragadtam a képernyőképet, a nyilak nem fedik át a fő tartalmat. Azonban körülbelül 1280 pixel le, ahol a design lesz egy oszlop, ők. Összességében működik, bár kíváncsi vagyok, hogy a tér jobban áramlik-e a nyilak nélkül.

néhány példa a logókra

néhány logót hagyok neked, amelyekben a tér a tervezés szerves részeként van beépítve. Ahelyett, hogy rámutatna a tér használatára mindegyikben, néhány általános megjegyzést teszek, majd hagyom, hogy felfedezze a tereket magának.,

figyeljük meg, hogy az alábbi logók hogyan használják az ábra-föld kapcsolatot. Néhány, amíg nem látja mind a figurát, mind a talajt, nem látja a teljes logót. Mindkettő szükséges közreműködője annak, amit közölnek.

Ezen logók közül több a Bezárás elvére támaszkodik. Amit látni akarsz, az nem igazán létezik, de mégis látod. Néhány ilyen logók is játszani körül alak és a föld. Mi az ábra, amikor az egész logót a háttérben veszi, egy kisebb figura számára lesz., Ez a visszafordítható alak-földi kapcsolat központi szerepet játszik a kommunikációban.

különböző logók, amelyek jól használják a fehér teret.
  • Cloud Bed
  • Black Cat Lounge
  • Shift
  • Dolphin & Seal Logo Designer
  • fogászati implantátumok Guide
  • Wineforest

összefoglaló

remélem, hogy két fő dolgot vesz el ebből a posztból., Először is, a kapcsolat a tér használata a tervezés, valamint a gestalt elve ábra-föld. Gestalt elvek alatt sok, amit csinálunk, mint a tervezők.

másodszor, és talán még ennél is fontosabb, hogy időt tölteni megfigyelése, hogyan tér használják a tervezés. Ne hagyja, hogy a tér a pozitív elemek mellékterméke legyen. Tanuld meg, hogy tervezzen helyet, mint, ha nem több, mint, pozitív elemeket. Bármely oldal elrendezése végső soron a térszervezés.

tudatosan elemezzük ezt a helyet, és szándékosan használjuk arra, hogy jobb dizájnt hozzunk létre. Ne hagyd, hogy az legyen, ami megmaradt., Tekintse meg alapvető tervezési elemként, majd tekintse meg a tér és a pozitív elemek közötti kapcsolatot, mint az Ön által formált tervezési elemet.

legközelebb még több gestalt elvet adunk a keverékhez, és megvizsgáljuk, hogy a fókuszpontok, a folytatás és a közös sors hogyan vezet minket olyan ötletekbe, mint a vizuális súly és a kompozíciós egyensúly.

  • Bánja, A Hu Pedig Em Vonalak: Tipográfiai Etikett
  • Tervezési Elvek: a Vizuális Tömeg Irányba
  • Hogyan Geometria Befolyásolja Logo Design
  • a Művészetről
(al, ml, il)

Share

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük