Konstrukční Principy: Prostor A Postava-Pozemní Vztah

O Autorovi

Steven Bradley, je autorem knihy Základy Designu: Prvky, Atributy, & Zásady a CSS Animace a Přechody pro Moderní Web., Když není …Více aboutSteven Bradley↬

• 10 min číst
• Inspirace,Design,Kreativitu,Konstrukční Principy
• uložit pro offline čtení
• Sdílejte na Twitteru, LinkedIn

Pokud vidíte grafický design jako proces zprostředkování tvary na plátně, tak jsi viděl jen polovinu toho, co pracujete. Negativní prostor plátna je stejně důležitý jako pozitivní prvky, které umístíme na plátno.,

Design je uspořádání tvarů i prostoru. Efektivněji pracovat s prostorem, musíte nejprve uvědomit si to a naučit se vidět to — naučit se vidět tvary, které prostor tvoří a jak místo komunikuje. Jedná se o druhou část série o konstrukčních principech pro začátečníky. První část zahrnuje úvod do gestalt; zbytek série (včetně tohoto příspěvku) bude stavět na těchto gestalt principy a ukázat, jak mnoho ze základních principů spolupracujeme s návrháři mají svůj původ tam.,

vztah mezi postavou a zemí

princip gestalt, který se nejvíce vztahuje na prostor, je princip figure-ground. Vše, co je v návrhu vašeho, bude považováno za jedno nebo druhé a vztah mezi nimi se vzájemně vylučuje. Ani jeden nemůže být vnímán s výjimkou vztahu k druhému a změna jednoho je nemožná, aniž by se změnila i druhá.

vztah mezi postavou a zemí je také komplementární. Obrázek a země mohou navzájem vylepšit nebo odvrátit a uspořádání dvou ve vztahu k sobě je jedním z důležitějších aspektů designu., Nastavuje kontext, jak váš návrh komunikuje a jak bude interpretován.

„bílý prostor je třeba považovat za aktivní prvek, nikoli za pasivní pozadí.“
— Jan Tschichold

Ve třetím panelu, dva černé řádky byly odstraněny. Tím se aktivuje prostor, takže se zdá, že sedí na vrcholu šedého pole., Země se stala postavou a přidává do designu větší hloubku.

k Dispozici jsou tři typy postavy-zem vztahy:

• Stabilní (vlevo nahoře)
  je jasné, co je obrázek a co je na zemi. Jedna nebo druhá obvykle dominuje kompozici.
• reverzibilní (nad středem)
  postava i země přitahují pozornost diváka stejně., To vytváří napětí, přičemž buď může předjet druhý, což vede k dynamickému designu.
• nejednoznačné (vpravo nahoře)
  prvky se mohou jevit jako obrázek i země současně. Tvoří stejně zajímavé tvary a divák je ponechán, aby našel svůj vlastní vstupní bod do kompozice.

v Závislosti na tom, který vztah si nastavit a jak vyvážit obě postavy a zem, přímé publikum se podívat na různé části konstrukce, a interpretovat to, co vidí v různých kontextech.,

obrázek-ground není jediným gestalt principem, ve kterém prostor hraje významnou roli. Další dva jsou tyto:

• blízkost
  blízkost používá prostor pro připojení a oddělování prvků uzavřením některých prvků do prostoru. Příkladem, který můžeme považovat za samozřejmost, jsou odstavce textu na stránce. Prostor mezi odstavci je větší než prostor mezi řádky textu v odstavci.
• Closure
  to využívá prostor jako mezery mezi prvky. Diváci vyplňují mezery svými vlastními informacemi, aby dokončili celek z částí. Příliš mnoho místa a nedochází k uzavření., Příliš málo místa a není třeba uzavírat. Pouze správná rovnováha mezi prostorem a vyplněným prostorem aktivuje prostor a povede k uzavření.

Prostor Jako designový Prvek

Přemýšlet o hudbě na chvíli. Pokud by se hrála každá nota nebo akord současně, neměli byste hudbu. Měl bys hluk. Hudba nastává, když jsou zvuky kontrastovány proti tichu. Změna vzoru zvuku a ticha vytváří rytmus a melodii., Bez ticha není Hudba.

prostor provádí stejnou funkci vizuálně. Dává pozitivní prvky prostor k dýchání. Dává oku svobodu pohybovat se designem a objevovat prvky, které hledá. Pozitivní je vidět pouze na rozdíl od negativního. Bez prostoru nemáte design. Máte vizuální šum.

Pokud hluk není to, co se snažíte komunikovat, naklonit se k prostoru. Lidé si méně stěžují na příliš mnoho prostoru než na příliš málo.,

Prostor, můžete udělat následující:

• vytvořit kontrast, důraz a hierarchie;
• vytvořit drama a napětí;
• poskytnout vizuální zbytek mezi skupinami prvků.

Jak vyplývá z obrázku-pozemního vztahu, máte prostor pouze tehdy, když je v něm něco přítomno. Před přidáním pozitivních prvků je prostor nedefinován. Vztah mezi postavou a zemí musí být vytvořen dříve, než může existovat prostor a začne jeho komunikace.

jednou z důležitějších funkcí prostoru je zlepšení čitelnosti a čitelnosti., Makro-prostor dělá text lákavější. Mikro-prostor je čitelnější.

• Micro-space
  Toto je prostor uvnitř prvků ve skupině. Je to prostor mezi písmeny, slovy a odstavci.
• makro-space
  jedná se o prostor mezi hlavními prvky. To samostatné prvky, nebo skupiny prvků a poskytuje možnosti pro oko sledovat a míst k odpočinku mezi prvky.

prostor koreluje s kvalitou. Více prostoru znamená méně prvků nebo vzácnost prvků. Porovnejte špičkové a slevové maloobchodní prodejny., Který z nich má obvykle více prostoru uvnitř, a který z nich balí produkty do každého kousku dostupného prostoru? Co vám prostor sděluje?

Prostor může také zprostředkovat i jiné atributy, než kvalitu, jako:

• propracovanosti,
• jednoduchost
• luxusní,
• čistota,
• samotě,
• otevřenost.

ztrácíte prostor, když o tom neuvažujete. Můžete ztrácet prostor přeplněním. Můžete ztrácet prostor tím, že ho chytíte uvnitř prvků designu a neumožníte mu připojit se k jinému prostoru v designu.,

Design je v konečném důsledku uspořádání tvarů a zahrnuje tvary tvořené prostorem. Nebojte se používat prostor. Zobrazit ji jako důležitý konstrukční prvek pod vaší kontrolou.

několik příkladů prostoru na webových stránkách

Chcete-li lépe využít prostor, musíte si ho nejprve vědomě uvědomit. Naučte se rozpoznávat prostor v různých provedeních. Všimněte si tvaru, který tvoří, a přemýšlejte o tom, co prostor komunikuje. Za tímto účelem se podívejme na design některých webových stránek a všimneme si, jak se používá prostor.,

Old Guard

design staré gardy Toma Johnsona používá dostatek bílého prostoru, což dává textu a dalším prvkům prostor k dýchání. Není pochyb o tom, co je postava a co je země.

informace jsou obsaženy a odděleny mezerou (připomínají princip blízkosti), rozlišovací skupiny prvků., Můžete snadno zjistit, kde jeden příspěvek končí a další začíná, pouze prostorem mezi nimi.

hlavní obsah je na stránce mírně mimo střed, s velkorysým prostorem na obou stranách. Tento prostor je občas přerušován prvky, které aktivují jak prostor, tak přerušovací prvky. To pomáhá upozornit na oblast a zejména na prvky uvnitř.

Heroku Staus Page

obrázek níže ukazuje část stavové stránky Heroku jako většinou prostor., Náhodou jsem chytil web v obzvláště dobrý den, protože další pozitivní prvky by znamenaly více hlášených incidentů na platformě. Zde více bílého prostoru znamená lepší služby.

Všimněte si, jak bílý prostor nemusí být bílý. Zatímco stránka je příliš velkorysá s prostorem, je nepravděpodobné, že byste si stěžovali, že je toho příliš mnoho., Pouze důležité informace — v tomto případě aktualizace stavu a zprávy o incidentech — přerušují prostor.

Představujeme román

prostor v horní části představení románu je asymetrický a aktivní. Všimněte si, jak velký blok prostoru vlevo vede vaše oko přímo k obsahu. Pokud kliknete na web a posunete se shora dolů, uvidíte, že prostor se také používá k oddělení a seskupování bloků informací.

Tenké světelné čáry se také používá k skupiny a tyto samostatné bloky. Při prohlížení webových stránek si všimněte, jak se řádky ne vždy dotýkají, což umožňuje, aby kolem nich proudil prostor a připojil se k jinému prostoru. Tím se zabrání uvěznění prostoru.

Elliot Jay Stocks

webové stránky Elliot Jay Stocks by měly být známé všem z vás, protože stojí za designem tohoto. Asymetrický prostor na elliotově webu opět vede k aktivnímu prostoru.,

velký obrázek v horní části této stránky by mohl potenciálně stát jako dočasné zablokovat přístup k obsahu níže; nicméně, velkorysé množství místa vedle obrazu poskytuje dostatek a příjemné pokoje pro oko pohybovat., Pokud by postranní panel vlevo měl stejnou barvu pozadí jako hlavní obsah, pravděpodobně by bylo pro oko snazší pohybovat se kolem obrazu, ale změna barvy sotva ztěžuje.

stejně Jako u webových stránek výše, prostor je určen k rámu a samostatných skupin odlišné informace, což umožňuje každé skupině vyniknout a umožňuje sledovat, jak najít to, co chce a zbytek mezi tím.

Phil Coffman

obsah na webových stránkách Phila Coffmana tvoří jediný tvar, který sedí většinou v prázdném prostoru., Absence mnoha pozitivních prvků zvyšuje důležitost těch, které jsou přítomny.

i v barevném obdélníkovém pozadí má text dostatek místa kolem něj, aby byl snadno čitelný a neměl být zaměňován za jinou kategorii textu na stránce.,

kladný tvar (a tvar prostoru)se přizpůsobuje různým šířkám prohlížeče, ale vzor jednoho velkého tvaru obklopeného prostorem zůstává.

Nová dobrodružství ve webdesignu

stejně jako mnoho webových stránek zde zanechává web 2013 pro novou konferenci Adventures in Web Design velkorysý prostor kolem prvků. Různé skupiny informací jsou obsaženy v prostoru a prostor je aktivní v celém návrhu.

Něco zajímavé, je šedé kruhové šipky mezi obrazem v horní levé a hlavní obsah vpravo.

blokují tyto šipky tok prostoru? Protože se nedotýkají a protože každý je přerušovaný tam, kde přerušuje prostor, prostor může protékat, i když je v tomto toku zjevně omezenější.

světlejší šedá barva pomáhá. Zabraňuje tomu, aby šipky dominovaly, a není těžké si představit prostor protékající liniemi.,

spravedlivě, pokud byl můj prohlížeč širší, když jsem chytil Snímek obrazovky, šipky by se nepřekrývaly s hlavním obsahem. Nicméně, kolem 1280 pixelů dolů, kde se design stává jediným sloupcem, dělají. Celkově to funguje, i když jsem zvědavý, zda by prostor proudil lépe bez přítomných šipek.

několik příkladů Log

nechám vám některá loga, ve kterých je prostor začleněn jako nedílná součást designu. Místo toho, abych poukázal na využití prostoru v každém, udělám několik obecných komentářů a pak vám nechám prozkoumat prostory pro sebe.,

Všimněte si, jak Níže uvedená loga využívají vztah figure-ground. S některými, dokud neuvidíte postavu i zemi, nevidíte plné logo. Oba jsou nezbytnými přispěvateli k tomu, co se sděluje.

několik z těchto log se spoléhá na princip uzavření. To, co jste chtěl vidět, není ve skutečnosti tam, ale vidíte to přesto. Několik z těchto log si také pohrává s postavou a půdou. Co je to postava, když vezmete celé logo na jeho pozadí, stane se základem pro menší postavu uvnitř., Tento reverzibilní vztah mezi postavou a zemí je ústředním bodem toho, co se sděluje.

• Cloud Postele
• Černá Kočka Lounge
• Shift
• Dolphin & Seal Logo Designer
• Zubní Implantáty Průvodce
• Wineforest

Shrnutí

doufám, že vezmete dvě hlavní věci, které se z tohoto příspěvku., První je spojení mezi využitím prostoru v designu a gestaltovým principem figury-ground. Principy Gestalt jsou základem toho, co děláme jako návrháři.

za druhé, a možná ještě důležitější, snažte se trávit čas pozorováním toho, jak se prostor používá v designu. Nenechte prostor být vedlejším produktem vašich pozitivních prvků. Naučte se navrhovat prostor stejně jako, ne-li více než, pozitivní prvky. Rozložení libovolné stránky je nakonec organizací prostoru.

vědomě analyzujte tento prostor a záměrně jej použijte k vytvoření lepšího designu. Nedovolte, aby to bylo to, co zbylo., Zobrazit ji jako základní konstrukční prvek, a pak zobrazit vztah mezi prostorem a pozitivními prvky jako designový prvek, který tvarujete.

příště přidáme do mixu další principy gestalt a prozkoumáme, jak nás ohniska, pokračování a společný osud vedou k myšlenkám, jako je vizuální váha a kompoziční rovnováha.

• Vaše Mysl En A Em Pomlčky: Typografické Etikety
• Principy Designu: Vizuální Váhu A Směr.
• Jak Geometrie Ovlivňuje Logo Design
• O Umění

(al, ml, il)