Linie nebo obdélník? Vnímejte tvary textů a přichystejte oslňující design

Co dozvíte?

• Co jsou to v grafickém designu linie a obdélníky a jak je využít pro tvary textových bloků.
• Proč a kdy byste měli textové bloky stylizovat do linie nebo obdélníku.
• Tipy, jak zařídit, aby textové bloky vypadaly více jako linie nebo obdélník a tím přispěly k perfektnímu designu.

Proč si lekci přečíst?

Když se pohybujete na plátně grafického editoru a rozmisťujete texty, máte šanci udělat z průměrného webu perfektní. Tedy když víte, jak na to. Určitě se vám stalo, že jste si řekli, proč můj návrh nevypadá tak dobře? Fíglů, jak dosáhnout bezvadného výsledku, je víc. Jedním z nich je přemýšlení nad textovými bloky jako nad liniemi a obdélníky.

Designéři řeší tvary grafických prvků, jako jsou fotografie, ilustrace, dekorace, karty, nebo boxy… Na texty, jako na grafický prvek, zapomínají. A to je přitom to nejdůležitější, protože text je základ většiny webů, e-shopů nebo aplikací. Za skrytou ingredienci dobrých designů považuji právě tvary textových bloků.

Když budete vnímat, jaký tvar texty mají, můžete je záměrně navrhovat tak, aby plnily funkci nebo vyzdvihly celý návrh na vyšší úroveň. Když nebudete vědomě vnímat tvary textových bloků, můžete celému vizuálu pěkně uškodit. Jeden špatně navržený textový blok tady… A druhý tam. Více takových nepovedených textů zaručí průměrný vizuální výsledek celého uživatelského rozhraní.

Chápu, že texty můžete brát jako něco, co se průběžně mění a že s nimi nechcete ztrácet čas. Ale když je vědomě začnete vnímat jako určité tvary, pomůže vám to připravit mnohem lepší návrhy. Správně navržený textový blok je takový, který má jasně definovaný svůj tvar.

A teď si představte, že se vaše myšlení změní a nad texty začnete přemýšlet úplně jinak. Začnete texty brát jako něco, co může pomoct vylepšit grafický návrh uživatelského rozhraní. Začnete tvořit sebevědomější návrhy a přestanete umisťovat texty do návrhu bezmyšlenkovitě. Naučíte se, jak by měly tvary textových bloků vypadat, aby působily ladně, plnily funkci a přispěly k perfektnímu vizuálu. Všechny projekty, které budete navrhovat, zvládnete s větší jistotou.

Určitě jste si o návrhu uživatelských rozhraní přečetli několik článků a většina z nich působila příliš marketingově. Ano, obsah vytvořený za účelem reklamy. Ale cílem článků, které pro vás píšu já, je tvorba hodnotného a hlavně nadčasového obsahu. Nebudu vám ukazovat, jaké barvy jsou zrovna v trendu. Ukážu vám úhly pohledu a principy, které budete moct uplatnit kdykoliv.

Netvrdím, že si z této lekce odnesete komplexní znalosti, jak navrhnout lepší web. Odnést si můžete myšlenku a změnit způsob uvažování, který povede k tomu „být lepší designér“. Je to jeden dílek z puzzlů, které musíte postupně skládat a budovat.

Hrozně mě štvalo, když jsem nedokázal navrhnout web s absolutní jistotou a střílel jsem od pasu. Začal jsem se probírat knihami designérů z let minulých. Objevil jsem v nich zajímavé myšlenky, které jsem skloubil s vlastními úhly pohledu a zkušenostmi z praxe. Vytvořil jsem si v hlavě systém, o který se chci podělit. Teď už navrhuji weby a aplikace sebevědomě aniž bych bojoval s rozmisťováním pixelů po plátně.

I vám se lekce líbí. A za to jsem nesmírně rád.

‍

Napsal o lekci:

„Zase jsem o něco chytřejší. Má to něco do sebe. Aktuálně řeším grafiku pro jeden projekt a tyhle rady určitě využiji. Jen tak dále a těším se na další lekce.“

‍

V lekci se vám snažit předat jednu myšlenku a to je, proč navrhovat textové bloky ve tvaru linií a obdélníků. Řekneme si, proč by některé texty mohly vizuálně představovat linie a některé obdélníky. Vše si ukážeme rozkreslené na příkladech. Jako vždy se vám polopaticky pokusím vysvětlit, o co mi jde.

Řekneme si, kdy je lepší používat texty v podobě linií a kdy ve tvaru obdélníků. Ukážeme si, jak zaručit, aby linie vypadala opravdu jako linie a k čemu to může být dobré. Vysvětlíme si, proč a jak stylizovat dlouhé textové bloky do tvarů obdélníků. Předvedu konkrétní rady, jak upravit textový blok tak, aby vytvořil požadovaný tvar.

Také se zmíním o tom, co dělat, když nemáte před započetím návrhu připravené texty a jak si poradit s návrhem při zmenšování obrazovky.