
Dashboardy a různé statistiky v adminu, byl ještě donedávna většinou postavené ze základních prvků jako je bootstrap, což nevypadlo nikdy moc dobře.. V posledních letech se situace naštěstí změnila...
, a Dashboardy, Statistiky se začali kompletně designovat, včetně grafů a dalších prvků. Obecně Dashboardy a Statistiky jsou dost náročná práce, ale výsledek je znát a určitě potěší. Dnes si zkusíme jeden takový (konkrétně line graf) nedesignovat.
Jako první si neklikáme nahrubo tvar grafu. Prepneme tedy na vector tool ( "V" ve Sketchi), a opravdu nahrubo načrtneme jednotlivé body.
Nasledne vybereme jednotlivé body a prepneme Point Type ze Straight na Mirrored. Sice již graf vypadá lépe, ale je nutné ještě linku poladit
S vybranými body dostaneme všechny vodítka do horizontální polohy. Tim se nám linka stane krasne souměrna a čistá
Linku zduplikujeme, a linku pod uzavreme do tvaru.
Tip. Pro lepší orientaci si jednu z linek posuneme o trochu výše, aby se nám nemíchali do sebe. Není nutné ji pak zamknout nebo skryt.
Nastavime barevnost. Pro hlavni linku zvolíme barvu (u mě #0091FF) a nastavíme Opacity na 80%. Uzavřenou linku vyplníme gradientem, který nastavíme na 90 stupnu. Horní bod Opacity - 60% a dolní 0%.
Následně linku posadíme na vrchol gradientu. Tim docílíme toho, že linka bude krásně viditelná.
Závěrem. Můžeme stejným způsobem vytvořit další grafy, a díky opacitě se nám krásně zprůhlední, takže data ze všech grafů budou krásně viditelná.
Tip. Určitě si opět pohrajte jak s opacitou, tak s gradienty dle svých designů. U různých barev se to určitě bude chovat jinak 🙂
Published by: Maneken in All, UI_UX
Tags: charts, curvy, dashboard, dashboarddesign, design, flow, graphs, maneken, shadows, sketch, sketchapp, tips, tipy, ui, userexperience, userinterface, ux