Základy designu pro programátory (a nedesignéry)

Říká manželka programátorovi. A tady by mohl ten fór skončit.

Manželka: „Kup 10 rohlíků a když budou mít vejce, kup jich 30.“
Programátor v obchodě: „Máte vejce?“
Prodavačka: „Máme.“
Programátor: „V tom případě prosím 30 rohlíků.“

Mám vás programátory ve veliké úctě. Máte náročnou práci, bez vás by svět nefungoval a málokdy vám za to někdo poděkuje. Takže aspoň za mě: DĚKUJU.

O to víc, že já – jako UXák – vám vlastně přidělávám práci. A občas vás nechám ve štychu a nutím vás i designovat.

Sheldon Cooper

Je jen otázkou času, než se dostanete do situace, kdy potřebujete sami něco navrhnout – nadesignovat. Třeba proto, že se včera grafik hrozně ožral. Ano, můžete hodit ruce nad sebe a říct: „Madonna Mia! Já nejsem grafik, nevím, jak to udělat hezké.“ A budete mít pravdu. Sice se vám uleví, ale práci neulehčí.

Takže tady je 12 pochopitelných tipů, jak to navrhnout jako ostřílený designér. Takový designový tahák.

1. Zarovnejte prvky na mřížku

Tohle je jedna z nejjednodušších věcí, co můžete udělat.

Takže pokud máte nějakou standardní šířku designu (1920 px, 1440 px, 320 px), tak si vytvořte sudý počet sloupců, mezi nimi odsazení a dostanete tohle:

grid

Nevymýšlejte kolo, stáhněte si nějakou předpřipravenou mřížku:

Jen drobná připomínka – ty prahy (šedé sloupečky) – měly by být stejně široké i po okrajích. Občas se setkávám s tím, že na krajích jsou poloviční a nevypadá to hezky.

Zarovnání na mřížku

… a příklad z Apple Design Tips (omlouvám se za to prohození dobře-špatně, tady Apple dělá chybu, protože před a po by mělo jít nejdříve špatný příklad, potom dobrý):

zarovnání od Apple

2. Zvětšete výšku řádku

Další relativní no-brainer. Mně se osvědčilo mít výšku řádku 1,5 násobek velikosti písma. A existuje na to takové hezké pravidlo:

  • Čím menší písmo, tím větší výška řádku a naopak. Takže u nadpisů velikosti 40 px klidně dejte řádkování 1,1×. A u velikosti písma 11 px klidně řádkování 2×.
  • Čím delší řádek, tím větší výška řádku. Ale počet znaků na řádku by neměl překročit 100-120 znaků, protože se to pak špatně čte.

Viz můj článek o webové typografii.

optimální výška řádku

3. Místo velikosti použijte barevnost a řez písma

Hodně i designérů řeší důležitost jednotlivých textových prvků hlavně velikostí písma. Ale vypadá to potom trochu rozhádaně. Lepší je ale pro důležité prvky použít spíš tlustší řez písma (font-weight: 700) a pro méně důležité textové prvky světlejší barvu (color: hsl 0, 0%, 45%).

tučnější řez a světlejší barva

4. Použijte 1 rodinu písma

Vyberte si jednu rodinu písma a používejte různé řezy (font-weight). Pokud chcete být hodně odvážní, tak si vyberte písmo, které má jak patkovou, tak bezpatkovou verzi. Protože kombinovat různá písma je složitější, než vybrat k sýru to správné víno.

A samozřejmě by vaše kroky měly nejprve směřovat na Google Fonts.

Google Fonts

5. Nepoužívejte černou

Ano, existuje Venta Black. Ta je opravdu černá. Ale já se snažím respektovat přírodní zákonitosti. A jedna z nich je ta, že čistě černá je v přírodě hodně ojedinělá. Takže se snažím s černou maximálně šetřit.

Použijte hodně tmavou barvu, kterou už v návrhu máte.

barva textu

Je to podobné, jako v akvarelu. Černá je hrozně slepá barva. Teda pokud nejste Endre Penovác.

kočka od Endre Penovace

6. Nepoužívejte světle šedou na tmavém podkladu

Šedá je fajn, pokud ji máte na bílém pokladu. Protože tím zmenšujete kontrast.

Ale na tmavém podkladu šedý text vypadá opravu nepěkně a kontrast tím často spíš zvětšujete.

šedá na tmavém podkladu

Výrazně lepší je si vzít stejnou podkladní barvu a jen ji zesvětlit.

7. Barevnost ukradněte

Když už jsme u těch barev. Tak vybrat barvy je taky docela umění. Takže doporučuji se inspirovat a zkopírovat si barvy z webu, který se vám líbí. Nebo zamířit na Adobe Color a vybrat si tam barevné schéma.

Adobe color

Je tu pár jednoduchých pravidel, které byste měli dodržovat:

  1. Čím výraznější barva, tím víc byste s ní měli šetřit.
  2. Používejte barvy, které jsou na opačné straně spektra – takže například modrá-oranžová, žlutá-šedá atd. Ale pozor, jedna barva bude sytá a druhá by měla být spíš světlá. V HSL modelu (barva, sytost, světlost).

8. Vržené stíny použijte z přírody

Teď je hrozně v módě mít u dlaždic vržený stín okolo celé dlaždice. Ale z principu je to nesmysl, protože zdroj světla byste museli mít přesně uprostřed každé dlaždice.

Daleko lepší je počítat s tím, že stejně jako sluníčko svítí seshora, tak stíny tím pádem jsou větší dole. Asi to popisuji trochu kostrbatě, takže obrázek:

vržené stíny

Funguje to samozřejmě i u formulářů, kdy formulářové políčko je vlastně takové vyříznuté okno.

vnitřní stín

Když něco navrhujete, tak si představte, že z toho uděláte fyzický papírový model. To vám hodně pomůže se stíny.

9. Zbavte se oddělujících čar a okrajů

Hodně mě rozčilují dělící linky. Ano, jsem asi mišuge, ale podle mého je použití dělících čar známka lenivého designéra.

zbytečné linky

Pokud chcete od sebe oddělit dva prvky, tak je víc způsobů, jak to udělat:

Vržený stín

Vržený stín  má výhodu v tom, že není tak prvoplánový, jako linka.

vražený oddělující stín

Různá barva pozadí

Podobně funguje i to, když mírně změníte barvu pozadí jednoho z prvků. Docílíte vizuálního oddělení a možná přijdete na to, že tu dělící čáru už vlastně nepotřebujete.

barva pozadí

A nebo přidání víc prázdného místa

Chcete věci víc oddělit. Zvětšete prostor mezi nimi. Funguje to prý dobře i v manželství. Dokonce i zvířata potřebují prostor.

whitespace

Viz samostatný článek o důležitosti prázdného prostoru pro design.

10. Dbejte na dostatečný kontrast

Dejte si pozor na to, aby šly věci přečíst i za špatných podmínek. Ono totiž vyjde nastejno, jestli je uživatel pidlo-oký nebo mu zrovna na mobil praží sluníčko. Minimální kontrastní poměr je 1 ku 3-4,5. Pokud nevíte, o čem mluvím, tak si to zkuste zkontrolovat.

Třeba i proto, že pokud budete dělat cokoliv pro státní správu, tak tam tohle je ze zákona povinnost.

Určitě nechcete, aby kvůli vašemu webu stávkovali slepci!

Viz též můj článek o tom, že někdy jsme všichni hendikepovaní.

11. Důležité věci dejte nahoru a doprostřed

Většina lidí se naučila, že po stranách obrazovky jsou reklamy nebo nedůležité informace. Takže pokud je něco hodně důležitého, tak to dejte na první obrazovku nahoru a doprostřed. Lidi to lépe poznají jako užitečný obsah.

Dokonce se ukazuje, že je výrazně lepší dávat například výsledky vyhledávání pod sebe než do dlaždic.

heatmapa výsledků

12. Klikací věci udělejte velké, podtržené, nebo jako tlačítka

Musíte mít různě důležitá tlačítka. Alespoň byste měli mít primární a sekundární. Jinak budete mít ten váš design hrozně nepřehledný.

tlačtka

To, že máte na stránce více výzev k akci neznamená, že pro každé musíte mít řvavé tlačítko (viz bootstrap).

bootstrap tlačítka

Takže doporučuji si udělat různě důležitá tlačítka. Třeba takto:

primární, sekundární a terciální tlačítko

Závěr

Všemi tipy se jako červená nitka táhne princip – udělejte to jako jste na to zvyklí v reálném světě. Od stínů, přes barevnost až po vycentrování důležitého obsahu. Proto pokud budete na vážkách, tak se jděte projít ven.

Jen nezapomeňte, že k červené nitce patří i Minotaurus – napůl býk, napůl člověk. Což je něco, co by mohl vymyslet neznalý programátor :).

 

Zdroje:
Knížka RefactoringUI
https://uxdesign.cc/a-short-guide-for-non-designers-to-not-suck-at-design-3b13d42cfd4a
https://medium.com/hello-web-design/design-for-non-designers-part-1-6559ed93ff91
https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886
https://medium.com/startup-grind/how-to-not-suck-at-design-a-5-minute-guide-for-the-non-designer-291efac43037
https://developer.apple.com/design/tips/
https://material.io/

9 Responses to Základy designu pro programátory (a nedesignéry)

  1. Profilový obrázek
    Tomáš K. 13. červen 2019 at 11:04:27 #

    Skvělý článek pro lidi, jako jsem já 🙂 …obzvlášť přínosné je pro mě informace o tlačítkách a rozdělování obsahu. Díky!

  2. Profilový obrázek
    phenix 13. červen 2019 at 17:36:00 #

    opet super,jeden z mala ceskych blogu, kde clanek, to uzitecna informace!

  3. Profilový obrázek
    Alex F 13. červen 2019 at 21:44:58 #

    Dobry clanek. A dalsi by mohl byt nejlepe: “ Jam pripravit sablonu a nedelat peklo programatorum“.

  4. Profilový obrázek
    Marek F 20. červen 2019 at 08:30:15 #

    Ano jsi misuge, delici cara je alfou a omegou pro lidi se snizenou schopnosti soustredeni, vnimani, dyslektiky atd. Zbytek dobry, ale na delici cary a ruzne oddelovace kontextu proste nesahaj. Jo a flat uz neni v mode, v prirode se stejne nevyskytuje, hloubka a gradienty musi byt.

    • Ondřej Ilinčev
      Ondřej Ilinčev 20. červen 2019 at 11:15:36 #

      Já neříkám:“Dělící čáry nikdy!“ Ale:“Existují i jiné způsoby, jak oddělit jednotlivé prvky od sebe.“ Ale beru tvůj komentář o přístupnosti – což je ale spíš otázka kontrastu.

      • Profilový obrázek
        Štěpán K 9. červenec 2019 at 10:21:41 #

        Super článek. Konečně člověk, který ví o čem mluví. Poslal jsem kamarádovi grafikovi. Taky si ho moc pochvaloval. Palec hore a pokračuj v takto kvalitní tvorbě

    • Profilový obrázek
      Tomáš Halász 22. červen 2019 at 08:26:40 #

      Díky za super tipy pro nás programátory intranetů 🙂

Napsat komentář

Powered by WordPress. Designed by WooThemes