Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

Neviditelné síly: Zarovnání, směr a těžiště

by
Length:ShortLanguages:
This post is part of a series called Invisible Forces in Design.
Invisible Forces: Size, Contrast, and Balance

Czech (Čeština) translation by Jan Heřman (you can also view the original English article)

Design je plný “neviditelných sil”, které přispívají k čistotě a jasnosti sdělení. Jakkoli můžete být v pokušení zabývat se pouze výběrem správného fontu nebo té pravé kombinace barev, neberete-li v potaz tyto neviditelné síly, váš design selže.

Toto je první z třídílné série článků o neviditelných silách. Začneme se zarovnáním, směrem a těžištěm.

Představujeme “prvky”

Abyste se mohli opravdu zamyslet nad neviditelnými silami designu, musíte nejprve upustit od představy, že váš design jsou fonty, barvy, obrázky a text. O těchto věcech musíte začít přemýšlet jako o prvcích designu.

Každý jednotlivý nadpis je prvek, každý odstavec textu je jeden velký prvek, každý obrázek je prvek.

Prvky se skládají z dalších - dílčích prvků. Například vaše logo může obsahovat dva prvky - symbol a text. Každé z písmen v textu by pak mohlo být považováno za další dílčí prvek.

Když hovoříme o prvcích, napadají mě hodiny chemie (na které jsem nikdy nechodil), které nabízejí vhodné přirovnání. Dáte-li správně dohromady prvky, dostanete něco výbušného co přímo vyskakuje ze stránky. Pokud je zkombinujete náhodně, vznikne nefunkční zmetek.

Zarovnání

Design je výzva, neboť musíte v nudném dvojrozměrném prostoru vytvořit něco zajímavého, co bude zároveň jasné a srozumitelné. Obzvláště dnes, v době mobilních telefonů a nositelné elektroniky je důležité na tomto úkolu pracovat tak efektivně, jak jen lze. Každý jednotlivý pixel musí plnit svou roli.

Proto je důležité zarovnání. Zarovnáním prvků můžete hodně sdělit.

Například tyto čtverce jsou všechny zarovnané.

Pokud bychom změnili způsob, jakým jsou zarovnané, promění se celá kompozice.

A pokud bychom zarovnání rozbili, dostaneme chaos.

Na příkladu ikonek sociálních sítí můžete přímo vidět užitečnost zarovnání. Co kdyby ikonky:

vypadaly takto:

Směr

Zarovnáním prvků vytváříme na stránce dojem směru. Můžeme hovořit o ose. Představte si ji jako osu kola - celé se otáčí kolem ní. Kolo a osa musí být v rovnováze. Podobné je to v designu, kde osa pomáhá kontrolovat vyváženost celé kompozice.

Vidíte prvky srovnané na obrázku dole? Lze říci, že tvoří osu tohoto rozvržení.

Když k ose zarovnáte další prvky, stále bude kompozici kontrolovat a vévodit jí.

Při práci s osami se však musíte mít na pozoru. Měli byste se například vyvarovat kombinace zarovnání na střed s nesymetrickým rozložením.

Nicméně jste to vy, kdo text umisťuje - na střed, doleva, doprava (na webu se vyhněte zarovnání do bloku), kdo vytváří podél zarovnání osu.

Zarovnáte-li text na střed, vytvoříte osu, podle níž se celá masa textu otáčí. Zbytek kompozice si pak přímo žádá být umístěn vzhledem k této ose.

Jakmile vložíte odstavec zarovnaný vlevo vedle odstavce, který je zarovnaný na střed, stává se kompozice matoucí. Vytvořili jste dvě vzájemně soupeřící osy, není to děsivá představa?

Výjimkou je situace, kdy na střed zarovnaný prvek zabírá celou šíři stránky. Stránka může obsahovat dva vlevo či vpravo zarovnané sloupce textu. Osy spolu však soupeřit nebudou.

Všimněte si, že oba sloupce jsou zarovnané doleva.

S tímto modelem se často setkáte v mobilních zařízeních. Na obrázku z aplikace Yelp vidíte, že horní a spodní lišta jsou orientované na střed, zatímco zbytek obsahu je zarovnaný doleva.

Další možností je vytvořit osu podél mezery mezi sloupci, kdy jeden sloupec je zarovnaný vpravo a druhý vlevo.

Těžiště

Do této chvíle jsem se soustředil na vertikální osu. Můžete však pracovat také s osou horizontální (případně diagonální, která ale není v oblasti webdesignu a mobilního designu obvyklá).

V místě, kde se kříží dvě výrazné osy, vzniká ústřední bod (či oblast). Naše oko přirozeně sleduje hlavní osy a v místě, kde se protnou, stráví mnohem delší čas.

V designu pro web nebo mobilní zařízení je pravděpodobně něco, nač chcete zaměřit pozornost uživatele. Protnutí os může posloužit právě tomu účelu. Vezměme například tuto landing page:

Jednu osu tvoří text umístěný vlevo, druhou zarovnání nápisu “buy now” vzhledem k obrázku. Kýžená ústřední oblast vzniká v místě křížení.

Závěr

Používáním zarovnání k tvorbě os, kontrolou směru a vytvořením ústředních bodů můžete lépe naplnit cíle vašeho designu: ať už se snažíte zlepšit čitelnost, nebo přeměnit uživatele na zákazníky.

V dalším článku se podíváme na úpravu velikosti prvků tak, abychom dosáhli harmonického, pěkného a jasného designu.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.