Kto sme
Všetky články
Programovanie

Práca s priestorom a dizajn webstránky

WebdizajnWebdizajn3/30/20253/30/2025

Keď sú prvky na webe usporiadané esteticky, inteligentné využitie priestorov priťahuje naše oko do toho najpozoruhodnejšieho priestoru - či už pozitívneho alebo negatívneho. Nakoľko sa zdá, že pozitívny priestor dominuje negatívnemu, obidva sa používajú na vytvorenie rovnováhy na webe.

Ľudský mozog je nastavený tak, že dáva zmysel všetkému, čo oči vidia. Dizajn je kreatívna oblasť, kde sa prelínajú formy a priestor, ktoré nám poskytujú rôzne zážitky. Nech už narazíme na akýkoľvek dizajn, či už bežný grafický dizajn alebo dizajn webstránky, naše mozgy sú nastavené tak, aby premenili tento kúsok priestoru na jednoduchšie komponenty zložené zo základných tvarov a foriem. Naša myseľ zbiera spomienky na základe skúsenosti, a vďaka tomu dokážeme ľahko rozpoznávať vzorce.

Pri zjednocovaní dizajnových prvkov hrá rozhodujúcu úlohu pozitívny aj negatívny priestor. Vo výsledku vidíme jednotný vzor (alebo nie).

Pozitívny priestor predstavuje tzv. "the flesh or the meat of the design"; je to časť, kde vidíte tvary, farby, vzory atď. Negatívnym priestorom je na druhej strane pozadie alebo biely priestor (väčšinou).

The popular artwork by Vincent Van Gogh features an interesting case of negative versus positive space

„Hviezdna noc“ od Vincenta van Gogha


Nakoľko sa zdá, že pozitívny priestor dominuje negatívnym náprotivkom, obidva sa musia používať v tej správnej rovnováhe tak, aby hladko vyrozprával váš príbeh.

Vo vyvážených kompozíciách pozitívny a negatívny priestor spolupracujú, navzájom sa dopĺňajú a vytvárajú súvislý, esteticky príjemný celok. Nevyvážené kompozície môžu naopak spôsobiť návštevníkom nepríjemnosti a sprostredkovať neúplný, skôr skreslený príbeh.

Aký príbeh však hovorí dizajn webu?

Pokiaľ ide o využívanie priestorov, úspech alebo neúspech webdizajnu sa hodnotí z hľadiska užitočnosti a použiteľnosti. Zamyslite sa, že ak máte slabé dizajnérske schopnosti, bude to mať negatívny vplyv na celkovú účinnosť a prezentácia webového dizajnu bude narušená. Obsah je kľúčový, ale ak nebudú priestory správne použité, zabije to aj váš obsah.

Ak si myslíte, že vaše programátorské schopnosti sú na vysokej úrovni, ale vaše dizajnérske schopnosti môžu vyžadovať ďalšie zlepšenie, práve ste vyhrali jackpot. V tomto článku sa budeme totiž venovať:

  • Vzťahu medzi pozitívnym a negatívnym priestorom, dôležitosť a implementácia;
  • Súvislosti medzi priestormi a kognitívnym vnímaním;
  • Gestaltovým princípom a ich implikácie do webdizajnu.

S každým z Gestaltových princípov budeme tiež diskutovať o príkladoch webdizajnu z reálneho sveta a o ich kreatívnom využití.

Bez ďalších okolkov začnime.


Pozitívny verzus negatívny priestor: vzťah, dôležitosť a implementácia

Priestory sú definované dvomi hlavnými súčasťami: pozitívnou a negatívnou. Pozitívna znamená prvok a negatívna znamená žiaden prvok. Ako už bolo spomenuté, pozitívom je objekt, negatívom je priestor za ním. Tam, kde je zameranie na jedno, druhé slúži ako pozadie. Tam, kde sa prvý pohybuje a motivuje, druhý zostáva nehybný a nejasný. Ak je objektom Mesiac, priestorom je tmavá obloha, ktorá ho obklopuje.

Keď ide o dizajn webstránky, musí byť udržaná myšlienka celostnej kompozície. Vizuálna hierarchia sa vytvorí iba vtedy, keď sú obidva priestory diferencované kontrastne a napriek tomu majú tendenciu spoločne harmonizovať (predstavte si jin a jang).

The popular Chinese symbol Yin and Yang

„Jin a jang“, koncept dualizmu v starovekej čínskej filozofii.


Rozlišujeme medzi pozitívnym a negatívnym priestorom. Negatív sa vyskytuje hlavne ako biely priestor, ktorý dopĺňa pozitívum tak, aby vyniklo.

Mohlo by sa zdať, že pozitívny priestor je dôležitejší, avšak negatívny priestor je tiež dôležitý pre množstvo výhod. Niektoré z týchto výhod sú:

  • Vytvára plynulú vizuálnu hierarchiu;
  • Koncentruje pozornosť a znižuje rozptýlenie;
  • Zlepšuje schopnosť prezerania stránky;
  • Podporuje prirodzený tok na stránke;
  • Objasňuje vzťah medzi vizuálnymi prvkami bez potreby ďalších pomôcok;
  • Pomáha odstraňovať neporiadok na stránke;
  • Vylepšuje štýl a vzhľad webovej stránky.


Negatívny priestor v dizajne webstránky nie je až taký negatívny. Oba typy priestoru však fungujú skvelo, ak sú použité v správnom merítku. Chaos, bohužiaľ, osloví iba vtedy, keď jeden z nich dominuje druhému a celé to pôsobí dojmom „preplneného“ alebo „chýbajúceho“. V obidvoch prípadoch publikum nie je schopné spracovať také zložité informácie, a preto snaha kreatívne využívať priestor pre webový dizajn neprinesie svoje ovocie.

Tu je webová šablóna s nesprávne umiestnenými priestormi alebo chaosom:

Here is what happens when space is not considered

Neuvážený „chaotický“ priestor

We translated the above website template into black and white to show space discrepancies

Nezrovnalosti v priestore zobrazené čierno-bielo

Here we have fixed space to show how space can spark clarity and uniformity when used in proportion

Opravený priestor, ktorý ukazuje, ako môže proporčne použitý priestor podnecovať sústredenie

The effective use of space in web design

Efektívne využitie priestoru vo webovom dizajne


Aj keď je koncepcia a usporiadanie vesmíru fascinujúce, otázky nám odhaľujú množstvo nejasností:

  • Je pozitívny priestor obklopený negatívnym alebo je negatívny priestor pohltený pozitívnym?
  • Ako sa určuje podiel každého typu priestoru?
  • Ktorý z nich by sa mal overiť ako ústredný objekt?
  • Je povinné zvýrazniť jedno a zatmaviť druhé, aby ste publiku lepšie odhalili svoju myšlienku?
  • Ako by som dosiahol „návrh nirvány“ s harmonicky vyladeným súborom pozitívnych a negatívnych priestorov?


Na podobné otázky je možné odpovedať iba pri jasnom pochopení základov. A podľa zlatého pravidla: jednoduchosť je najlepšou politikou (vymysleli sme to, pretože sa to hodí!).

Na začiatku sme spomenuli, že dizajn webstránky je predovšetkým o vytvorení jednoduchého používateľského rozhrania (UI), ktoré pomôže vám a vášmu publiku zabiť viac ako dve muchy jednou ranou, alebo v doslovnom vyjadrení pomôže skvalitniť vizuálnu stránku návrhu, ale tiež spraviť webstránku efektívnejšiu a jednoduchšiu na používanie. Áno, využívanie priestorov má v tomto neuveriteľnú moc.


Spojenie medzi priestorom a kognitívnym vnímaním

Pretože sa naša myseľ vždy hrá na detektíva a hľadá skryté indície a chýbajúce prepojenia medzi priestormi, porovnáva súčasný vizuál s tými, ktoré ma uložené v pamäti ako súčasť kognitívneho procesu. Ak sa chcete stať efektívnym webovým dizajnérom, musíte najskôr pochopiť, ako mozog vyhodnocuje svoje okolie. Môže vám pomôcť využiť niektoré konkrétne vizuálne prvky a ovplyvniť pomocou nich vnímanie diváka.

„Veľkí dizajnéri chápu, akú veľkú rolu hrá psychológia vo vizuálnom vnímaní. Čo sa stane, keď sa niekoho oko stretne s vašimi dizajnovými výtvormi? Ako ich myseľ reaguje na správu, ktorú zdieľate? “

- Laura Busche, stratégka pre obsah značky v spoločnosti Autodesk

Musíte mať jasnú predstavu o tom, ako sú vizuálny dizajn a psychológia prepojené, a majú schopnosť sa vzájomne ovplyvňovať. Inými slovami, hlavnou myšlienkou vývoja jednoduchého rozhrania zameraného na používateľa, ktorý správne využíva priestor, je zváženie princípov Gestalt. Môžu vám pomôcť porozumieť a ovládať vizuálno-psychologické súvislosti.


Princípy Gestalt a dizajn webstránok

Gestalt znamená v preklade z nemčiny forma“. Je to skôr pojem ako slovo, ktoré hovorí, že:

"Celok je niečo iné ako súčet častí."

— Kurt Koffka

Zbierka jednotlivých jednotiek sa nám javí ako skupina, keď sú nejakým spôsobom zjednotené. Vidíme prvky ako skupinu napriek ich individualite. Táto koncepcia alebo teória sa zásadne uplatňuje na všetky dizajnérske médiá: Nevidíme text, farby a tvary ako samostatné prvky, ale celú webovú stránku ako kolektívnu entitu. To isté platí pre les: nevidíme len kopu stromov, rovnako ako kvapky vody, keď vidíme oceán.

Gestalt princípy popisujú, ako ľudská myseľ vníma vizuálne komponenty, keď sú splnené určité podmienky. Pomáha mozgu vytvárať obrazové záznamy. Princípy Gestalt sú preto založené na šiestich hlavných kategóriách:


Objekt a plocha

Objekt má byť viditeľne oddelený od plochy.

Negative space vs. positive space depiction through grail cup

Kalich vs. tváre


Najklasickejším príkladom je kalich medzi dvoma zrkadlovými siluetami tváre. Keď prvýkrát narazíte na tento obrázok, vaše oči sú priťahované do ohniska tohto objedku, kde si môžete všimnúť tváre umiestnené oproti sebe alebo kalich. Zatiaľ čo vaša myseľ upriamuje pozornosť, intuitívne vystriháva negatív z obrazu - buď kalich alebo jeho pozadie.

Ak ste vystrihli kalich, tak si ho po chvíli všimnete a uvedomíte si, že tam bol na prvom mieste. Aj keď sa princíp objektu a plochy zdá byť nejednoznačný, dizajnéri zvyčajne vytvárajú vizuálne príťažlivé surrealistické a iluzórne umelecké a webové vzory.

Image depicting the figure-ground relationship

Vzťah medzi objektom a plochou


Niekedy je vzťah medzi objektom a plochou stabilný, vďaka čomu sú od seba zreteľne odlíšiteľné. Tento vzťah je niekedy nestabilný, to znamená, že objekt a plocha sú od seba nerozoznateľné. Kvôli nejednoznačnosti tohto vzťahu sú diváci konfrontovaní s percepčným zmätkom.

Ak si chcete urobiť jasnú predstavu o tom, ako vzťah medzi objektom a plochou ovplyvňuje web dizajn, poďme si podrobne predstaviť niekoľko príkladov. Každý z týchto príkladov sa zameriava na tri hlavné oblasti vzťahu objekt-plocha: Môžete pridať explicitné vizuálne podnety pomocou kontrastu, polí a tieňov pre svoj webový dizajn. Tieto techniky sa používajú na rozlíšenie farby, veľkosti a úrovne podrobností, na oddelenie obsahu a na prehĺbenie príslušného objektu.

V prvom príklade uvedenom nižšie používa Trellis „obraz hrdinu“ (obrázky s jasnými CTA) vo vzťahu objekt-plocha, ktorý jasne naznačuje úroveň detailov, farieb a veľkostí.

Trellis website features a good example of figure-ground relationship

Trellis


Text je tu objektom s veľkým kurzívovym fontom v strede stránky, vďaka čomu vyniká v porovnaní s obrázkom na pozadí. Biely text nad kontrastným obrázkom v odtieňoch sivej priťahuje pozornosť, vďaka čomu je text nad ním viditeľný. Z iného pohľadu je pozadie rozmazané, takže text vynikne viac, ako obrázok. Všetky tieto aspekty ukazujú, že text je tu uprednostňovaný ako objekt alebo pozitívny priestor, zatiaľ čo rozmazaný obraz sa používa ako plocha alebo negatívny priestor, a teda výrazne naznačuje koncept objekt a plocha.

Ďalej nasleduje obsah v boxoch. Ocean Health Index inteligentne využíva obsah v boxe na oddelenie objektu od pozadia. Toto vidíte, keď narazíte na ich web:

The Ocean Health Index website shows how both figure and ground can be used in web design

Ocean Health Index


Ktorá jeho časť si prioritne získa vašu pozornosť pri prvom zobrazení tejto webovej stránky? Pravdepodobne to bude hlavný text v bielej farbe a dva boxy s kontrastnou farbou a textom. Tučný biely text v hornej časti je zjavne objekt. Políčka dole sú tiež súčasťou obrázka kvôli kontrastu, ktorý vytvárajú s hlavným obrázkom. Ďalším aspektom tohto obrázku je druhý kontrast, ktorý je umiestnený vo vnútri políčok vo forme kontrastne sfarbeného textu.

Pozadie využíva jemné odtiene, ktoré napomáhajú ostrému zobrazeniu objektov a zobrazujú tu detailný vzor. Polia tiež prekrývajú obrázok, čím sa dostávajú do popredia pozornosti.

Niektoré webové stránky tiež vykazujú vzťah objektu-plochy pridaním vrhaných tieňov smerom k objektu, aby vzbudili pocit, že postava je umiestnená nad pozadím. Tu je snímka obrazovky zo Seriously Unsweetened:

The Seriously Unsweetened’s website uses figure-ground balanced on their website

Seriously Unsweetened


Cieľová stránka Seriously Unsweetened používa viac ako jednu techniku ​​na vyvážené udržiavanie tohto vzťahu medzi objektom a plochou. Existujú jasné farby a tiene. Plocha zostáva biela, čo uľahčuje jasné vykreslenie objektu nad plochou. V pozitívnom priestore sú objekty na obrázku zobrazené v ilúzii, akoby boli „na vrchu“ pozadia. Všimnite si, aká tieňová hra sa hrá vo vnútri hlavných objektov, kde existuje ďalší vzťah objekt-plocha. Šikovné!


Blízkosť

Poďme sa pozrieť na vzdialenosti rôznych prvkov na stránke. Prvky na webových stránkach možno zoskupiť tak, aby bola medzi nimi väčšia harmónia. Okrem toho, že sú prvky podobné, blízkosť týchto prvkov jeden druhému, na rozdiel od iných elementov, sa automaticky zafixuje v mysli pozorovateľa.

The image depicts proximity in graphic design

Vzdialenosť v dizajne


Od obrázkov cez texty a navigačné lišty až po webové formuláre platí pre webový dizajn princíp blízkosti. Keď podobný obsah zoskupíte, vytvorí sa bližší vzťah medzi prvkami a divákovi sa poskytne lepší vizuálny zážitok.

Tu je príklad blízkosti zobrazený v navigácii na webe Mashable:

Mashable website features proximity principle

Mashable


Na snímke vyššie si môžete jasne všimnúť, ako sú prvky rovnakej kategórie umiestnené spolu, aby sa medzi nimi vykreslil určitý vzťah. Oči používateľov sú automaticky priťahované k podkategóriam pod hlavičkou - aj vďaka použitiu farieb a veľkosti textu. Vidíte, že položky, ktoré nesúvisia, sú oddelené pomocou riadku, ktorý slúži ako oddeľovač položiek. Ukážka skvelo použitého princípu blízkosti.

Zoznam produktov spoločnosti Amazon je ďalším skvelým príkladom. Okrem vymedzenia navigačného panela je obsah zobrazovaný v mriežke tiež v súlade so zlatým pravidlom blízkosti: 

Amazon product pages also make use of proximity principle

Produkty na Amazone


Blízkosť je v súlade s podobnosťou, o ktorej ešte budeme diskutovať. Ako vidíte, podobné produkty v pozitívnom priestore sú zoskupené a oddelené pomocou úzkeho bieleho priestoru.

Teraz sa bližšie pozrieme na webový formulár Basecamp, ktorý zobrazuje ďalší ideálny prípad blízkosti vo webovom dizajne:

Interestingly, Basecamp web form also uses proximity to segment form details

Webový formulár Basecamp


Môžete si všimnúť ako je formulár rozdelený do dvoch hlavných segmentov: osobné údaje a generovanie ID. Prvá časť je považovaná za najdôležitejšiu oblasť, po ktorej nasleduje menej dôležitá požiadavka. Nadpisy oboch sekcií sa líšia, čo ukazuje rozdiel vo farbe a veľkosti písma. V tomto webovom formulári je blízkosť indikátorom, ktorý umiestňuje a uprednostňuje zoskupenie informácií od najvyššej po najnižšiu dôležitosť.


Symetria a poriadok

Symetria sa vzťahuje na presný odraz alebo zrkadlový obraz dvoch protiľahlých rovín. Možno to považovať za princíp, ktorý rozdeľuje predmet na dve rovnaké polovice. Medzi príklady symetrie v reálnom svete patria geometrické obrázky, ako sú rovnostranné trojuholníky, kružnice, štvorce atď.

Here is a clear distinction between symmetric and asymmetric design

Symetria verzus asymetria


Ľudská myseľ túži nájsť „rovnováhu“ v ľudských tvárach, čo považuje za esteticky príjemné. Myseľ má tendenciu nachádzať symetriu aj v iných objektoch, napríklad v obrazoch, pretože symetria vytvára harmóniu a vytvára u divákoch pri sledovaní obrazu pocit spokojnosti.

Nižšie je uvedený vynikajúci príklad symetrie v dizajne webu, ktorý prezentuje font HvD:

A good example of symmetry in Web design is HvD Fonts website

HvD Fonty


Táto webová stránka nielenže zobrazuje typický vzťah medzi objektom a plochou, ale tiež skvele zvláda symetriu. Stránka je rozdelená na štyri rovnaké polovice s písmami podobnej veľkosti a farby. Pozadie v každej zo štyroch sekcií prebieha pozdĺž rovnakej témy s efektom šedej. Môžete si tiež všimnúť, že negatívny priestor nemusí byť nevyhnutne biely; je to obrázok v pozadí.

Myšlienka symetrie vedie k ďalšiemu poňatiu: asymetria môže byť mätúca a pri použití vo webovom dizajne musí byť používaná veľmi opatrne. Mnoho webových stránok používa asymetriu ako hlavný vyrovnávací prvok pre medzery, kde je nekonvenčný pozitívny priestor vyvážený neutrálnym pozadím a naopak. Pokiaľ ide o koncept asymetrie, spoločnosť Xplode Marketing využíva asymetriu jedinečným spôsobom, ktorý lahodí očiam.

Xplode Marketing website prompts asymmetry with creative placement

Xplode Marketing


Táto webová stránka okamžite upúta pozornosť pomocou optických ilúzií a asymetrie. Pozitívne objekty sú umiestnené v neobvyklom vzore nad negatívnym priestorom a spoločne tak vytvárajú príťažlivosť. Farba je hlavným indikátorom harmónie medzi oboma priestormi a vytvára prirodzené spojenie, ktoré si môžu diváci všimnúť. K dispozícii je tiež silné vyváženie grafiky na ľavej strane so silnými a dominantnými krídlami na pravej strane. Čo myslíte?


Podobnosť

Dôvod, že blízkosť úzko spolupracuje s princípom podobnosti, je kvalita zdieľaných atribútov medzi podobne zoskupenými objektmi. Či už je to farba, tvar, držanie tela, veľkosť, tvar, orientácia alebo akákoľvek iná vlastnosť, prepojenosť sa prejaví v prípade, keď je jeden alebo viac z týchto znakov zdieľaný vo všetkých objektoch, ktoré majú vykresľovať blízkosť.

The image depicts how similar elements group together

Podobnosť v dizajne


Aj keď prvky pozitívneho priestoru nevyzerajú viditeľne prepojené, budú na rozdiel od negatívnych vyčnievať vďaka princípu podobnosti.

Stačí sa na chvíľu pozrieť na tento zoznam paliet UrbanDecay:

The Urban Decay products are a classic example of similarity in design

Urban Decay


Pozitívne medzery (objekty) sa navzájom líšia, ale zdieľajú určitú podobnosť v rôznych aspektoch, ako sú napríklad ich poloha, farba, rozloženie produktu a spôsob prezentácie. Jediným nepodobným objektom je reklama na očný tieň, ktorý jedinečným spôsobom vyniká v kategórii podobných výrobkov. Je to zjavne marketingová taktika, ktorá má upriamiť pozornosť bez toho, aby bola narušená celková symetria a krása stránky. Ďalším bodom, ktorý je tu potrebné zohľadniť, je to, že podobnosť vo veľkosti odlišuje daný obrázok reklamy od kategórie podobných produktov.

Okrem zobrazenia produktu môže byť pozitívny priestor využitý s podobnosťou v spojení s negatívnym priestorom.

Pozrime sa na titulnú stránku influenster:

Influenster website applies the principle of similarity to achieve clarity in design.

Titulná stránka influenster


Podobnosť vo vyššie uvedenom príklade ukazuje jasne zarovnané polia. Aj keď sú produkty v každom pozitívnom priestore odlišné, konzistentné textové polia na stránke vytvárajú pocit podobnosti. Žáner, rozloženie a téma sú podobné, a teda naše oči a myseľ to vnímajú ako estetický objekt.


Uzatvorenie (Closure)

Stretli ste sa niekedy s obrázkom, ktorý sa zdá byť uzatvorený, ale bol otvorený? Je to z dôvodu zásady uzavretia. Náš mozog má tendenciu „uzatvárať“ medzery v neúplných objektoch a pomocou nášho vizuálneho vnímania dotvárať objekty, pretože ich vníma ako celok.

A perfect example of closure where four circles come together to form a square

Uzatvorenosť v dizajne


Pozitívne a negatívne priestory sa uzatvárajú do jedného celku. Najlepším príkladom sú skryté tvary a formy v negatívnom priestore v dizajne a mimo neho. Kreatívne využitie oboch priestorov v uzatvorení môže viesť k zaujímavému, ale zjednodušenému dizajnu.

Pozrite sa na snímku obrazovky z Magu Kambucha nižšie:

Figure-Ground relationship and closure principles work hand-in-hand in Magu Kambucha website

Magu Kombucha


V tomto príklade môžete vidieť, že uzavretie sa spája so zásadou vzťahu medzi objektom a plochou. Fľaše a výrazný text v pozadí sú zjavne objekty a plocha je vytvorená jemne ružovým pozadím. Kde je uzávierka? Vidíte text za fľašami? Nevidíte to úplne, ale stále viete, že je to „Kombucha“. Okrem prvého „K“ a posledného „A“ sú napoly skryté ďalšie písmená, ktoré si váš mozog vie intuitívne doplniť a doformuje si celý obraz a aj jeho význam. Toto je skvelý príklad uzatvorenia!

Pozrite sa na snímku obrazovky zo stránky Cult:

The title of the website follows the closure principle to add dramatic effect to the animation in the website header

CULT - webová stránka


Aj keď text nie je napísaný celkom jasne, naša myseľ môže ľahko prečítať slovo CULT. Usporiadanie a zarovnanie textu umožnilo ľahké dešifrovanie, aj keď sú písmená neúplné.


Kontinuita

Napokon podľa všeobecných Gestalt princípov kontinuita vytvára určitú cestu, po ktorej sú oči návštevníkov vedené lineárne od objektu k objektu. Takéto vedenie pozornosti je jedným z hlavných UX princípov. Najlepšie to možno pochopiť na príklade pozitívnej vesmírnej čiary so zakrivením nad negatívnym priestorom. Farby oboch čiar naznačujú, že sa čiary navzájom ohýbajú, ale vzor kontinuity naznačuje niečo iné.

A depiction of continuous line

Kontinuita v dizajne


Obrázok vyššie inklinuje divákov pozerať viac na rovnú čiaru aj napriek zhoršeniu farieb. To nás vedie k presvedčeniu, že princíp kontinuity vedie vnímanie lepšie ako sila farieb. Tento koncept plynulo prechádza oboma druhmi priestorov. Keď vložíme predmet do negatívneho priestoru, naše oči majú tendenciu rozlišovať medzi pozitívnym a negatívnym priestorom.

Pomyselná čiara kontinuity je to, čo sme vám chceli v rámci dizajnu predstaviť na riadenie vnímania návštevníkov pri rozlišovaní medzi pozitívnym a negatívnym priestorom.

Zhrňme si to z webu Crypton Trading nižšie:

The pattern on Crypto Trading website exemplifies continuation in design

Crypton Trading


Vidíte dokonalé pokračovanie webdizajnu v pravej polovici stránky? Bez ohľadu na svetlý a tmavý odtieň v pozadí je vzor na stránke dosť zreteľný. A keď sa posuniete nadol, uvidíte, ako sa vzor aj farba menia v nepretržitom a plynulom pohybe. Posun tónov je tu zanedbateľný a vidíme iba pokračujúci vzorec čiar a bodiek.

Ďalším dobrým príkladom je webová stránka OscilloScope:

The OscilloScope website also features the law of continuity through 360-degree view of their studio

Webová stránka OscilloScope


Webové stránky využívajú zákon kontinuity, aby návštevníkov webu priviedli k 360-stupňovému pohľadu na štúdio, odkiaľ môžu sami prejsť do požadovanej sekcie.

The official website of the film ‘Cargo’ also uses the law of continuity to navigate users

Webstránka pre Film Cargo


Film Cargo má landing page, ktorá tiež využíva zákon kontinuity: scrollovanie stránkou spúšťa dynamický tok textu po obrazovke. Vytvára to plynulý a lineárny pohyb. Pretože zvislé lego je viditeľné iba napoly, vedie to návštevníka k scrollovaniu nadol, aby získal jeho plné zobrazenie. Pri posúvaní stránky nadol sa začne statické logo vznášať spolu s hromadami textu, ktoré bežia paralelne s ním. Navigácia prevedie používateľa rôznymi úrovňami zážitku.

Naše oči zvyčajne priťahuje najplynulejšia cesta. Preto to môžu weboví a grafickí dizajnéri využiť a prinútiť ľudský zrak lineárne následovať prvky, ktoré chcú zviditeľniť. 


Zhrnutie

V tomto článku sme sa venovali princípom Gestalt vo vzťahu k pozitívnym a negatívnym priestorom na webových stránkach. Zahrnuli sme sem tiež niekoľko príkladov zo skutočného života, ktoré vám poskytnú jasnú predstavu o tom, ako môžete pomocou jednoduchých, ale efektívnych techník ovplyvniť vnímanie publika. Kľúčom je použitie týchto princípov na vytvorenie webového dizajnu, ktorý je viac ako len súčtom jeho častí.

V zmysle nášho vnímania my ľudia myslíme hlavne na základe vizuálu. Podľa princípov Gestalt vo vzťahu k pozitívnym a negatívnym priestorom máme tendenciu vidieť na prvý pohľad skôr celkový obraz ako jednotlivé prvky.

Pozitívne a negatívne priestory nám pomáhajú rozlišovať, pripomínajú nám si rozpamätať určité zážitky a rozpoznávať vzorce. Pomocou princípov Gestalt dokážeme lepšie vizualizovať jednotlivé kúsky skladačky samotného webu a vytvoriť skutočne príťažlivý celok. Pretože priestor v dizajne je veľmi zložitá záležitosť pre každého webdizajnéra, najlepším spôsobom pre vytvorenie určitého rádu je zachovať nedotknuté princípy Gestalt. Iba tak si môžete skutočne uvedomiť dôležitosť správneho využívania medzier vo vašej práci.

Ďalšie články

Všetky naše referencie

Ďalšía kategória

Design