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 🙂