Jak zakulacení rohů prvků ovlivňuje výsledný design

Zaměřte se na míru zakulacení rohů prvků v designu, abyste dosáhli vizuální rovnováhy a navodili uživateli správnou atmosféru.

Jak zakulacení rohů prvků ovlivňuje výsledný design
Lukáš Augusta
UI/UX designér

Zakulacení rohů jednotlivých prvků ovlivňuje výslednou kulatost celého designu. Ukažme si, jak k nastavování kulatosti prvků přistupovat a proč byste ji neměli podceňovat.

Dozvíte se

  • Jak moc by měl být design vizuálně kulatý.
  • Co všechno kulatost designu ovlivňuje.
  • Proč je důležitý výběr písma.
  • Proč byste měli být při zakulacování rohů pečliví.
  • Jak si práci při úpravě kulatosti ulehčit.

Se zakulacováním rohů designových prvků jste se jistě setkali. Například když jste nastavovali poloměr zakulacení rohů u tlačítek nebo obrázků. Míst, kde se míra zakulacení rohů řeší, je v designu mnoho. Jsou to malé detaily, které hrají velkou roli ve výsledném designu.

Jak moc kulatý design?

To, jak by měl být ve výsledku design „kulatý“, ovlivňuje vaše rozhodnutí, pro jaký projekt a cílovou skupinu navrhujete. Každý projekt vyžaduje jiný přístup. Obecně platí, že pokud jsou tvary ostré, působí konzervativněji a techničtěji. Kdežto zakulacené tvary působí přírodněji a navozují spíše přátelštější atmosféru. Pokud budete navrhovat web pro architektonické studio, zvolíte pravděpodobně hranaté tvary. Pokud budete naopak navrhovat e-shop s přírodními produkty, tvary by mohly být kulatější. Vaším úkolem je rozhodnout, jak má výsledný design na uživatele působit a jak moc celkově design zakulatit.

Jaké prvky vstupují do celkové kulatosti designu

U všech prvků, které mají nějaký tvar a barvu musíte míru zakulacení zohlednit. Jde naprosto o všechny prvky, jejichž tvary končí v otevřeném prostoru. Může jít o tlačítka, rámované obrázky, karty nebo bloky pozadí. Na co se často při zohlednění zapomíná, je písmo.

Určitě víte, že textový obsah v designu je to nejdůležitější. Řešíte, jak jsou bloky textu velké, jakou mají délku řádku nebo řádkování. Mnohdy se však zapomíná, že samotný výběr písma ovlivňuje výslednou kulatost designu, a to díky tvarům svých písmen. Proto je dobré se na výběr  písma zaměřit.

Písmo a jeho kulatost je podceňována

Písmena jsou grafické tvary. Jedno písmo může mít ostré tvary písmen a druhé pro změnu kulatější. Na tohle byste měli myslet a zohlednit už při výběru písma.

Písmo Roboto má spíš ostré tvary písmen oproti písmu Nunito, jehož písmena jsou kulatější.

Představte si, že jste dokončili design uživatelského rozhraní. Nastavili jste typografii, zvolili typografickou stupnici, určili velikosti textů a řádkování. Zvolili jste si paletu barev, kterou používáte napříč rozhraním. Každému prvku jste vybrali správnou velikost. Nastavili jste vhodná zakulacení rohů všech prvků. Jednoduše řečeno spoustu práce je za vámi. Celý design ladí a je vizuálně vyvážený.

A teď si představte, že nastane situace, která vás donutí změnit písmo za jiné. Můžete například zjistit, že písmo nepodporuje vhodné znaky. Může jít o licenční problémy. Může, nedej bože, přijít zadavatel a z jakéhokoliv důvodu se rozhodnout pro změnu písma. Volba písma je vždy první krok v designovém procesu a těmto situacím byste se měli vyvarovat.

Nicméně přistupme na fakt, že na změnu písma kývnete. Původní písmo mělo naprosto ostré rohy všech písmen (např. Roboto). Ostatní prvky jste zakulatili, abyste vyvážili a vykompenzovali ostré hrany písma.

Co se však stane, pokud se z jakéhokoliv důvodu rozhodnete změnit ostré písmo za písmo se zakulacenými rohy? Stane se to, že míra zakulacení všech prvků v designu a míra zakulacení tvarů písmen nového písma (např. Nunito) se vizuálně sečtou. Najednou je celý design příliš kulatý a nesplňuje cíl, který jste si na začátku určili. Design působí až příliš kulatě a hravě. Potřebujete ho nějak vyvážit, aby působil více ostře a seriózněji. Toho dosáhnete tím, že míru zakulacení rohů všech dalších prvků v designu zmenšíte do takové míry, než design bude působit tak, jak si přejete.

Původní design, kde vystupuje ostré písmo Roboto, je vyváženo vcelku zakulacenými tvary dalších prvků tj. tlačítka a obrázku (1). Pokud písmo vyměníte za takové, které má kulaté tvary, jako je třeba Nunito, celková kulatost designu se sečte (2). Vy však chcete kulatost potlačit a design vyvážit, a proto řešením je zmenšení míry kulatosti ostatních prvků (3).

Malá změna zakulacení hodně ovlivní design

Když upravujete poloměry zakulacení rohů, tak pouze malá změna dokáže způsobit obrovskou změnu v celkovém designu. Pokud zvětšíte poloměr zakulacení rohů o 1 px v kontextu jednoho prvku, pravděpodobně nebude pro oko změna moc viditelná. Věřte ale, že v kontextu celého designu jde o velkou změnu. Proč? Většinou prvky v designu opakujeteuživatel je nevnímá jednotlivě, ale jako celek. Kulatost všech prvků se sčítá.

Představte si, že navrhujete tlačítko. Pěkně si ho na plátně zvětšíte, nastavíte mu barevnost a další parametry a zvolíte případnou míru zakulacení rohů. Řeknete si, že 1 px je málo, a tak přidáte další tři pixely. Tlačítko bude samo o sobě vypadat dobře. Nic proti tomu. Vy si však musíte tlačítko zasadit do kontextu celého designu.

Prvky jako tlačítka se v rámci všech stran webu objevují vícekrát. Nevidíte tlačítko jednou. Prvky se opakují. Ty pak společně ovlivňují výslednou kulatost celého designu. A když pak změníte u daného prvku kulatost příliš, může to sice vypadat dobře u jednotlivých prvků, ale v rámci celého designu to může působit přehnaně. Proto doporučuji dělat změny v poloměrech zakulacení rohů klidně i po 1px skocích.

Vyplatí se používat opakující se komponenty

Abyste viděli, jak se návrh mění po malých skocích, je potřeba si návrh oddálit a podívat se na zakulacení všech prvků v designu z dálky. Jsou rohy málo kulaté? Udělejte další iteraci a přidejte na kulatosti. Změny však musíte provést na všech prvcích.

Měnit zakulacení o 1 px u sta prvků na deseti stránkách, otestovat výsledek a to celé opakovat zas zas dokud nebudete spokojeni? To určitě ne. Takové změny by zabraly spoustu času.

Naštěstí dnešní nástroje určené pro návrh uživatelských rozhraní přinášejí skvělou funkcionalitu využívání znovu použitelných komponent. Velmi doporučuji si hned při prvním výskytu opakujícího se prvku (např. tlačítka) vytvořit komponentu. Na jednom místě si definujete, jak má tlačítko vypadat a pak tuto jednu komponentu tlačítka budete opakovat napříč celým designem. Výhoda je zcela jasná. Komponentu upravíte jednou a změní se na všech místech, kde jste ji v designu použili. A to je skvělé. Teď už jen stačí si design oddálit a měnit v komponentě tlačítka poloměr zakulacení rohů po 1 px. V reálném čase pak vidíte, jak se všechny opakující se prvky mění na všech místech současně. Snadno tak dokážete míru zakulacení nastavit přesně tak, jak potřebujete.

Míře zakulacení věnujte pozornost

Míru zakulacení nepodceňujte u všech okem viditelných prvků a každý pečlivě upravte tak, aby když si design oddálíte, návrh působil harmonicky a navozoval přesně takovou atmosféru, jakou potřebujete. Je to detailní práce, na kterou se často zapomíná. Malá změna dokáže design posunout o hodně dál. Často je to ingredience, která odlišuje dobrý design od skvělého designu, takže se na ni určitě zaměřte.

south

Cvičení

  1. Až budete příště navrhovat uživatelské rozhraní, nebojte si více na kulatost zaměřit. Zamyslete se nad tím, jaké písmo jste vybrali. Zvětšete si texty. Jsou písmena zakulacená? Jsou hranatá? Vezměte je v potaz při návrhu. Zaměřte se na malé detaily a zakulacení rohů řešte pečlivě i u malých prvků.
  2. Otevřete si grafický program a zkuste si vytvořit krátký velký nadpis v ostrém písmu. Vedle něj nakreslete jednoduchý vyplněný kruh stejné barvy jako písmo. Zaměřte se, jak vypadají tyto dva prvky společně jako celek. A teď se pokuste zaměnit písmo nadpisu za nějaké, jehož tvary jsou extrémně zakulacené. Opět se zaměřte, jak na vás celkový výsledek působí.

Autor lekce

Lukáš Augusta
UI/UX designér

Jsem web designér, UI/UX designér, copywriter a tvůrce na volné noze působící v Česku. Navrhuji weby, e‑shopy, webové a mobilní aplikace.

✍️ Napište článek. A zlepšete povědomí o vašem jméně a značce

Chcete se stát autorem Designui? Nově můžete napsat článek i vy! Zjistěte, co můžete získat…

Mentoring pro UI designéry

Rozbory UI designů

Vytvořte si web bez nutnosti kódovat

Vytvořte si web
bez nutnosti kódovat