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.
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ř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.
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 opakujete a už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.
.png){kind=icon}