Dizajnový systém pre malú firmu: kedy ho potrebujete a ako začať

Čo je dizajnový systém, čím sa líši od manuálu značky, kedy ho malá firma nepotrebuje a kedy áno, z čoho sa skladá, minimálna verzia na jednu stranu a príklad z našej appky Renna.

Ця стаття поки доступна лише словацькою мовою.

Dizajnový systém je jedna spoločná zbierka pravidiel a hotových kúskov rozhrania (farby, písmo, rozostupy, tlačidlá, formuláre), z ktorej sa skladá celý web alebo appka, aby všetko vyzeralo a fungovalo rovnako. Malá firma s jedným webom ho v plnej podobe nepotrebuje, stačí jej jedna strana pravidiel. Oplatí sa až pri viacerých weboch a appke, pri viacerých ľuďoch na výstupoch a pri raste. Článok vysvetľuje, čo dizajnový systém je, čím sa líši od manuálu značky, kedy ho potrebujete a ako vyzerá minimálna verzia na jednu stranu.

Čo je dizajnový systém, jednoducho

Predstavte si reťazec kaviarní. Každá pobočka má rovnaké poháre, rovnaké farby na stenách, rovnaké menu a rovnaký postup prípravy kávy. Nový barista sa nemusí pýtať, ako to má vyzerať, pozrie do príručky. Dizajnový systém je takáto príručka pre digitálne rozhranie spolu so zásobou hotových dielov, ktoré sa dajú použiť znova. Dizajnér (v oblasti UI dizajnu, teda vzhľadu obrazoviek) tak nemusí pri každej novej stránke vymýšľať, akú farbu má mať tlačidlo a aké veľké majú byť nadpisy. Vezme hotový diel a poskladá z neho obrazovku.

Výsledok vidí návštevník: tlačidlá sa správajú rovnako na úvodnej stránke aj v objednávke, formuláre vyzerajú rovnako a nič ho nezaskočí. Výhodu vidí aj firma: nové stránky vznikajú rýchlejšie a web pôsobí ako jedna značka, nie ako zbierka rôznych období.

Dizajnový systém a manuál značky: v čom je rozdiel

Obe veci sa prekrývajú, ale odpovedajú na inú otázku. Manuál značky hovorí, ako vyzerá značka a ako sa používa: logo, farby, písmo, tón komunikácie, príklady na vizitke, plagáte a sociálnych sieťach. Dizajnový systém ide ďalej, až do rozhrania: ako vyzerá tlačidlo v bežnom stave, po prejdení myšou a vypnuté, ako sa zobrazí chyba vo formulári, aké sú rozostupy medzi sekciami a ako sa web správa v tmavom režime.

Poradie dáva zmysel: najprv vizuálna identita (jednotný vzhľad značky: logo, farby, písmo) a manuál, až potom dizajnový systém. Čo všetko identita obsahuje, opisuje článok Vizuálna identita firmy. Farby a písmo sa vyberú raz a používajú všade, kým farby tlačidiel a pravidlá formulárov sa dopĺňajú podľa potrieb webu.

Chcete to mať hotové bez starostí? Pošlite nám pár viet o zadaní a cenovú ponuku dostanete do 48 hodín, zadarmo a bez záväzkov.

Spustiť projektZavolať +421 948 125 966

Kedy malá firma dizajnový systém nepotrebuje

Väčšina malých firiem ho v plnej podobe nepotrebuje. Ak máte jeden web s niekoľkými podstránkami, upravuje ho jeden človek a nové stránky pribúdajú zriedka, plnohodnotný systém by bola práca navyše. Typický príklad: kaderníctvo, účtovníčka alebo remeselník s webom na päť až osem stránok. Tu stačí manuál značky a jedna strana pravidiel pre web (nájdete ju nižšie). Dôležité je len to, aby sa farby a písmo nemenili od stránky k stránke.

Kedy sa dizajnový systém oplatí

Sú tri situácie, v ktorých sa začne vracať:

• Viac webov a appka. Máte firemný web, e-shop a k nemu objednávkovú appku alebo klientsku zónu. Používateľ medzi nimi prechádza a čaká, že je to jedna firma. Bez spoločných pravidiel sa tlačidlá a formuláre začnú líšiť.
• Viac ľudí. Na výstupoch pracuje viac ako jeden dizajnér alebo programátor, prichádzajú externisti alebo nový kolega. Bez systému každý rozhoduje po svojom a vznikajú rozdiely.
• Rast. Stránok a funkcií pribúda. Každá nová obrazovka sa kreslí odznova, trvá dlhšie a stojí viac, lebo sa znova rozhoduje o veciach, ktoré boli dávno rozhodnuté.

Varovné signály, že sa blížite k hranici: na webe máte tri odtiene tej istej farby, tlačidlá s rôznym zaoblením, nadpisy v niekoľkých veľkostiach, o ktorých nikto nevie, ktorá je správna, a programátor sa pri každej stránke pýta, ako to má vyzerať.

Z čoho sa dizajnový systém skladá

Systém má tri vrstvy: základné hodnoty, hotové diely a pravidlá ich používania.

• Farby: hlavná farba, akcent (farba pre to, čo má vyniknúť, napríklad hlavné tlačidlo), neutrálne farby pre text a pozadia a stavové farby pre chybu a úspech. Každá má účel, nielen názov. Kontrast farieb sa overuje kalkulačkou kontrastu.
• Písmo: jedna alebo dve rodiny písma a pevná škála veľkostí pre nadpisy, text a drobný text vrátane riadkovania.
• Rozostupy: krátka škála vzdialeností (napríklad 8, 16, 24 a 32 pixelov), z ktorej sa berie každá medzera. Vďaka tomu je stránka usporiadaná, aj keď si to nikto vedome nevšimne.
• Tvary: zaoblenie rohov, hrúbka čiar, štýl ikon.
• Tlačidlá: hlavné a vedľajšie, každé v stavoch bežné, nad kurzorom, stlačené, vypnuté a so zvýrazneným zameraním pre ovládanie klávesnicou.
• Komponenty: hotové kúsky rozhrania, ktoré sa opakujú: karta, formulár, menu, hláška, vyskakovacie okno.
• Pravidlá: kedy ktorý diel použiť. Napríklad jedno hlavné tlačidlo na obrazovku alebo chybová hláška pod poľom s vetou o tom, čo opraviť.

Odborníci ukladajú hodnoty ako tokeny: pomenované hodnoty, napríklad „farba-akcent“ alebo „rozostup-stredný“ namiesto pevného kódu farby či čísla. Keď sa zmení token, zmení sa to všade, kde sa používa. Preto sa dá dizajnový systém dlhodobo udržiavať.

Minimálna verzia na jednu stranu

Pre malý web stačí jedna strana A4, ktorú udrží jeden človek. Obsah:

1. Farby (6 až 8): hlavná, akcent, text, pozadie, jemné pozadie kariet, chyba, úspech. Pri každej zapíšte kód farby a na čo sa používa.
2. Písmo: názov rodiny a štyri veľkosti: hlavný nadpis, podnadpis, text, drobný text. Pri každej riadkovanie.
3. Rozostupy: päť hodnôt, z ktorých sa berú všetky medzery.
4. Tvary: jedno zaoblenie rohov pre tlačidlá a jedno pre karty.
5. Tlačidlá: hlavné a vedľajšie s ukážkou stavov. Pravidlo: na obrazovke je jedno hlavné.
6. Formuláre: popisok nad poľom, chyba pod poľom (text, nielen červený okraj), potvrdenie po odoslaní.
7. Obrázky a ikony: jeden štýl fotiek (napríklad vlastné, nie z fotobanky) a jeden štýl ikon.
8. Správa: kto môže pravidlá zmeniť a kde je dokument uložený.

Prvú verziu zložíte z toho, čo už máte. Otvorte tri najdôležitejšie stránky webu a zapíšte, aké farby, písma a tlačidlá reálne používajú. Rozdiely, ktoré nájdete, zjednoťte. Vznikne systém, ktorý zodpovedá webu, nie vymyslený dokument.

Príklad z našej praxe: appka Renna

Appka Renna, naša klientska zóna, má dizajnový systém s jasnými rozhodnutiami: písmo DM Sans, limetkový akcent, zaoblené karty (polomer rohov 24 pixelov), tlačidlá v tvare pilulky a tmavý aj svetlý režim. Farby sa nezadávajú pevným kódom pri každom prvku, ale cez CSS tokeny. CSS je jazyk, ktorým sa na webe nastavuje vzhľad, a token je pomenovaná hodnota, napríklad farba pozadia karty.

Prečo to takto robiť: ak má karta farbu pozadia z tokenu, nová obrazovka dostane správny vzhľad automaticky a prepnutie medzi svetlým a tmavým režimom sa dá spraviť zmenou hodnôt tokenov, nie prepisovaním každej obrazovky. Písmo, akcent a tvary pôsobia ako jeden celok. Je to príklad toho, ako málo pravidiel stačí, aby appka pôsobila jednotne.

Ako dizajnový systém udržiavať

• Jeden vlastník. Jeden človek rozhoduje o zmenách, aj keď ich navrhuje viac ľudí. V malej firme to býva majiteľ webu alebo dizajnér, ktorý web spravuje.
• Najprv systém, potom web. Zmena farby alebo veľkosti sa najprv zapíše do dokumentu a až potom prenesie na stránky. Opačné poradie vedie k tomu, že dokument nezodpovedá realite.
• Nový diel len vtedy, keď treba. Nový komponent pridajte, keď ho potrebujete aspoň na druhom mieste. Jednorazové veci nechajte na konkrétnej stránke.
• Krátky zoznam zmien. Dátum, čo sa zmenilo a prečo. O rok viete, prečo je akcent iný.
• Kontrola raz za pol roka. Prejdite hlavné stránky a pozrite, či sa nevrátili vlastné odtiene a medzery.

Odborník sa oplatí, keď systém staviate pre appku alebo viac webov naraz, keď ho treba previesť do kódu (tokeny, komponenty) alebo keď sa za roky nahromadili rozdiely a web treba zjednotiť. Ak máte jeden web, zvládne to jeho správca s jednou stranou pravidiel.

Čo urobiť ako prvé

Neotvárajte nový dokument, otvorte web. Prejdite úvod, jednu podstránku služby a kontakt a zapíšte, koľko farieb, veľkostí písma a typov tlačidiel tam nájdete. Ak sú čísla vyššie, než ste čakali, máte prvú úlohu: zjednotiť. Až potom spíšte pravidlá na jednu stranu a určte, kto ich bude udržiavať.

Časté otázky

Je dizajnový systém to isté ako manuál značky?

Nie. Manuál značky určuje vzhľad značky (logo, farby, písmo, tón), dizajnový systém z neho vychádza a rozširuje ho o pravidlá a hotové diely pre web a appku. Malá firma zvyčajne začne manuálom a systém pridá, keď ho potrebuje.

Potrebujem dizajnový systém pre web na WordPresse?

Pre jeden menší web stačí jedna strana pravidiel: farby, písmo, rozostupy, tlačidlá. Plný systém dáva zmysel pri viacerých weboch, appke alebo tíme.

Kto dizajnový systém vytvára?

Dizajnér spolu s programátorom, ktorý ho prevedie do kódu. Jednostranovú verziu zvládne správca webu podľa existujúcich stránok.

Koľko stojí dizajnový systém?

Cena závisí od rozsahu: jedna strana pravidiel je iná práca než systém pre appku s desiatkami komponentov. Ponuku pošleme do 48 hodín po zadaní, prehľad našich služieb a cien nájdete v cenníku.

Chcete jednotný vzhľad webu aj appky?

Dizajn identity (logo, farby, písmo, manuál) riešime v službe Tvorba loga. Weby, e-shopy, webové a mobilné aplikácie s jednotným vzhľadom robíme v službe Web a aplikácie. Napíšte nám cez kontaktný formulár, čo máte dnes, a ponuku pošleme do 48 hodín.