Jak na „pixel perfect“ kódování?
Kódujete weby nebo aplikace? Projděte si tento text a nechte lidi, aby o vás říkali, že jste fakt skvělý kodér.
🤗 Proč by vás text měl zajímat?
Jsem UI designér. Navrhuji weby a aplikace. Pokaždé, když předám své návrhy kodérům či programátorům, téměř vždy je zrealizují s odchylkami. Někdy je realizace lepší, někdy horší. Odchylky v realizaci najdu ale téměř vždy.
Proč? Lajdáctví? Nepozornost? Spěch? Neznalost? Nepečlivost? Nezájem? Nad tím se musí zamyslet každý sám…
Faktorů, které o kodérovi vypovídají, že je dobrý, je rozhodně víc. Samozřejmě jde o technologický přehled, neustálé vzdělávání, kvalitní výstupní kód, schopnost komunikace a spousta dalších faktorů.
Já bych vám rád ukázal pohled UI designéra a jak by měl vypadat vysněný kodér, který designérskou práci nepotopí po vizuální stránce.
Prosím, vezměte si tento článek k srdci a zničte svoje konkurenty. Buďte jedničkou v kódování a staňte se uznávanými profesionály, na které se lze spolehnout.
Jak se pozná skvělý kodér?
Dobrý kodér by měl umět kódovat tak, aby realizace pro dané zařízení byla totožná se samotným grafickým návrhem. Dobrý kodér by měl umět převést předlohu 1:1.
Často se stává, že designér navrhne web nebo aplikaci, ale kodér tuto detailní práci „potopí“. Třeba ne schválně. Nemusí znát grafické spojitosti a to, co je za oponou. Neví, co všechno designér řeší a třeba ani nemá cit pro detail. Je to logické. Kodér řeší úplně jiné problémy.
Proč byste se měli zajímat o to, jestli jste web či aplikaci nakódovali přesně tak, jak ho designér navrhnul?
- Pokud kódujete na volné noze, znamená to pro vás více zakázek, protože se jednoduše stanete spolehlivým dodavatelem.
- Pokud pracujete ve firmě, vyhnete se zbytečným reklamacím , opravám a frustracím a váš zaměstnavatel s vámi bude o to víc spokojený.
Pokusím se vám vysvětlit, co byste si měli jako kodér po převzetí návrhu k realizaci pohlídat, aby na vás byl designér ale i zadavatel pyšný a aby vás mohli dále doporučovat.
Věci, které byste si jako kodér měli pohlídat
📐 1. Grid (mřížka)
Použití gridu je velké téma. Co byste měli vědět je, že grid navrhuje designér. Měli byste ho dodržovat a respektovat.
Grid (mřížka) ≠ (se nerovná) Bootstrap grid
Mezi kodéry se vyskytuje nepěkná praktika. Často jejich kódovací workflow obsahuje použití nějakého frameworku, jako je např. Bootstrap. To není úplně tak špatně. Je to dobrý framework, ale…
Je potřeba si uvědomit, že Bootstrap vznikl pro ulehčení technických realizací. Vznikl třeba pro programátory, kteří nemají grafický cit a tvoří rozhraní bez designérských znalostí a bez dodaných návrhů.
Tento framework pracuje s přednastaveným gridem, který je nachystaný tak, aby v něm obsah seděl v co nejvíce případech. Je to jakýsi kompromis.
Pozor, grid od Bootstrapu není standard. Grid navrhuje a nastavuje designér a vy jako kodéři byste měli tento návrh převzít a dodržovat.
První, co musíte při předávání návrhu ke kódování udělat, je prozkoumat návrh dodaný designérem a zjistit, zda soubor s návrhem nastavení gridu vůbec obsahuje a jestli jste schopni si ho zobrazit. Pokud ne, vyžádejte si ho od designéra.
Jestliže vám designér řekne, že grid nepoužil tak:
- buď není dostatečně zkušený a práce s gridem mu zatím nic neříká. To nevadí. Časem se to naučí;
- byl to záměr;
- nebo se na to prostě vykašlal.
Pokud návrh grid neobsahuje, musíte se spolehnout sami na sebe a buď ho vůbec nepoužít nebo se pokusit navrhnout jej sami.
V případě, že grid k dispozici máte. Prozkoumejte ho. Zkontrolujte tyto parametry a nastavte podle nich projekt:
- počet sloupců;
- šířku sloupců (columns);
- šířku mezer (gutters);
- maximální šířku kontejneru a případně i definice vnějších okrajů.
Před započetím kódování projektu si podle zjištěných parametrů nastavte grid. Pokud chcete použít Bootstrap nebo jiný framework, přepište výchozí nastavení nebo si napište vlastní styly. Pamatujte, že framework je pouze pomůcka a ne standard.
Grid vychází z typografie, kterou připravuje designér. Souvisí s textovými styly a dalšími faktory, podle kterých se pak tvoří. Podle toho, jakou flexibilitu designér potřebuje, určí počet sloupců, jejich šířku a mezery mezi nimi.
Dobrý grid se navrhuje a vy byste ho měli respektovat. Návrh rozhraní nemůžete jen tak ohýbat do zcela jiného gridu.
🎼 2. Vertikální rytmus
Určitě jste někdy slyšeli o tzv. baseline gridu. Jde o řádky, které určují vertikální rytmus na stránce webu nebo aplikace. Pomocí nich snadněji odsazujete prvky po svislé ose.
Vertikální rytmus by měl udat opět designér. Měl by nastavit výšku řádku tedy jednotku, o kterou odsazujete prvky svislým směrem. Taková jednotka má často spojitost s řádkováním (line-height) základního textu. Většinou jde o dělitele hodnoty řádkování nebo násobek tohoto dělitele.
Dobrou praktikou je nastavovat výšku řádku po násobcích 4 px (4 px, 8 px, 12 px, 16 px, 20 px, atd.). Pokud designér takový rytmus neudal, nebojte si takový rytmus a pravidlo definovat sami. Všechny prvky odsazujte minimálně po 4 px (ne po 1 px). Jestli vás zajímá víc, proč se to dělá, přečíst si můžete lekci o nastavování mantinelů při návrhu UI.
Pokud potom víte, že designér pracuje s vertikálním rytmem a vy v návrhu zahlédnete zcela jinou „zvláštní a nesmyslnou“ hodnotu, zřejmě půjde o odchylku v návrhu. Když uvidíte odchylku, dejme tomu jednoho pixelu, opravte ji (zaokrouhlete) podle sebe tak, aby odpovídala jednotce vertikálního rytmu.
📝 3. Písmo (font)
Pokud se v návrhu vyskytuje více písem, je potřeba, abyste zkontrolovali, kde a jaké je použito. Někdy mohou být písma na první pohled podobná a snadno přehlédnete, že je na daném místě použit jiný font. Každé písmo může mít totiž jiné vlastnosti a pokud nenastavíte to správné, mohou vznikat vizuální odchylky.
🔍 4. Velikost textu (font-size)
Designér by měl pracovat s typografickou stupnicí a mít konečný počet textových stylů. Stejně jako on i vy byste měli styly dodržovat.
Každý text byste si měli pro jistotu kurzorem vybrat a ověřit, zda odečítáte opravdu správnou velikost textu.
V rozhraní mohou nastat případy, kdy designér záměrně zvolí jinou velikost textu, než se kterými se pracuje v 99 % návrhu. Jde o specifické prvky, které se něčím liší (např. odkazy v hlavní navigaci). Takové případy vám nesmí uniknout. Buďte pozorní a důslední.
Spousta kodérů si velikosti textů dopočítává automaticky a používá i jiné jednotky než px. Různí kodéři, různá workflow. Je to na vás, jaké jednotky pro nastavení velikostí použijete (px, rem, em). Důležité je, aby konečné přepočítané velikosti textu odpovídaly těm v designu.
🖌 5. Řez písma (font-weight)
Při návrhu typografie designér řeší vizuální balanc, kontrast a hierarchii mezi prvky. Pomáhá si tím, že kombinuje různé řezy písma. Proto je důležité, abyste byli pozorní a každý text prozkoumali a ujistili se, zda opravdu nastavujete správný řez písma. Není jedno, jestli použijete řez „regular“ nebo „medium“. Přestože řezy pro vás vypadají podobně, není tomu tak a ve výsledku je vizuální výsledek zcela jiný. Pečlivě texty zkoumejte.
📄 6. Řádkování textu (line-height)
Jde o velmi problematickou část, kde si hodně kodérů hraje vlastní písničku. Často si totiž řádkování (line-height) textů nastavují automaticky nějakou konstantou (např. velikost textu krát 1,5). Snaží si práci ulehčit a pracovat stylem „Don’t repeat yourself“. Pokud kodéři nepromyslí a nedodrží to, co designér připravil, objeví se v návrhu mnoho designových odchylek. Proto vždy hlídejte, dodržujte a nastavujte hodnotu řádkování. U každého textu řešte vždy pár „velikost písma + řádkování“.
Hodnota řádkování ovlivňuje odsazení
Velmi často vznikají odchylky právě kvůli špatně nastavenému řádkování. Kodér se sice snaží být „pixel perfect“ a odečítá si z návrhu poctivě správné velikosti a odsazení prvků, ale stejně vzdálenosti nakonec tak nějak vizuálně neodpovídají. Proč?
Například pokud má text nastavené větší řádkování než by mělo, okraj textového bloku se zvětší a o to dál od sebe odsune další prvky. Kodér pak žije v domnění, že vše nastavil správně, ale výsledná odsazení prvků kolem textů jsou jiná.
Jedna velikost textu může mít různé hodnoty řádkování
To, že text o dané velikosti na jednom místě má nějaké řádkování, neznamená automaticky, že text o stejné velikosti bude mít řádkování stejné i na jiném místě.
Dva bloky textů se stejnou velikostí písma mohou mít totiž rozdílné hodnoty řádkování. Například úzký blok textu o velikosti 24 px může mít řádkování 32 px, ale široký blok toho samého textu může mít řádkování nastavené větší např. 38 px. Je to kvůli čitelnosti textu. Každý výskyt textu a jeho vlastnosti si proto pečlivě prozkoumejte.
🔠 7. Prostrkání písmen (letter-spacing)
Prostrkání písmen slouží k zajištění čitelnosti textu a někdy k dosažení vizuálních cílů, proto na něm také záleží. Nastavuje se klidně i v desetinách pixelů na základě velikosti písma, řezu nebo barvy.
Proč je potřeba vždy prostrkání písmen zkontrolovat? Například protože pokud u textu změníte prostrkání písmen pouze o desetiny pixelů, celková šířka textového bloku se natáhne. Rozdíl mezer mezi písmeny je na první pohled nepatrný, ale zato na celkovou šíři textového bloku má vliv.
Prostrkání písmen se také mění v situacích, kdy jsou zhoršené podmínky čitelnosti textů. Na první pohled text vypadá, že se mu změnila pouze barva, ale není tomu tak.
📇 8. Šířky textových bloků (max-width)
Dalším častým problémem je nenastavení šířky textového bloku. Text je grafický prvek a musí nějak vypadat. Designér se proto snaží kombinací velikostí písma a délky řádku dosáhnout toho, aby vypadal co nejlépe a jako blok a ne jako rozlitá slova. Proto omezuje textový blok maximální šířkou.
Často se dosahuje nastavení šířky textového bloku pouze zasazením do gridu. Pak jen stačí kodérovi, aby text rozprostřel na správný počet sloupců.
Doporučuji používat pro textové bloky vždy vlastnost max-width
Ať už pracujete se sloupci gridu nebo text umisťujete do prostoru jen tak (např. na střed), vždy je dobré textovému bloku nastavit maximální šířku, do které se může text natáhnout. Proč? Protože textové bloky jsou čitelné jen pouze do určitého počtu znaků na řádek. Zaručíte tím, že při responzivním zmenšování zařízení se řádky textů budou moci krátit, ale neprodlouží se a nezkazíte tím tak čitelnost textového bloku.
Centrovaným textům nastavujte max-width
Často se v návrzích webů vyskytují textové bloky zarovnané na střed. Pozor, když textovému bloku nenastavíte maximální šířku (max-width) nebo ho nezasadíte do mřížky, textový blok se roztáhne dál, než byste chtěli. Vždy zkontrolujte, jakou šířku v návrhu má textový blok a podle toho mu nastavte maximální možnou šířku.
Maximální šířka textů ve sloupcích gridu
Někdy se může zdát, že je obsah rozdělen do sloupců v rámci gridu. Na první pohled ano, ale neznamená to, že se vždy obsah musí dotýkat okrajů sloupců. Sloupce gridu slouží pouze jako příležitost pro umisťování obsahu. Stejně i v nich může mít text kvůli počtu slov a délce řádků nastavenou maximální šířku. Okrajů sloupců se texty vůbec dotýkat nemusí. Dotknout se mohou třeba až na opravdu malém zařízení.
📏 9. Velikosti prvků, mezery mezi nimi a jejich odsazení
V prostředí, ve kterém návrh budete prohlížet, si kurzorem proklikejte úplně každý objekt. Souhlasí váš výsledek s dodaným návrhem?
Velmi pozorně odečítejte z návrhu všechny vzdálenosti a odsazení (margins, paddings). Každý objekt prozkoumejte a podívejte se na kóty, kde a jaký prvek přesně začíná.
🖍 10. Podtržení textu
Zkontrolujte, jestli styl podtržení textu je opravdu definován v rámci písma vlastností text-decoration: underline. Někdy to tak může vypadat, ale podtrhávací linka může být tvořena i jiným prvkem. V tom případě je vhodné podtržení vytvořit pomocí pseudo prvku (:before, :after) nebo dalším blokovým prvkem.
🎨 11. Barvy prvků
Barvy jsou dost podceňovanou vlastností. Kodéři v nich hodně chybují. Je důležité, abyste si každý prvek prozkoumali a ověřili si, jakou má opravdu barvu.
V návrhu by měl designér použít omezenou paletu barev. Měl by existovat jejich konečný počet. Pokud najdete v návrhu desítky odstínů, je něco špatně a designér to zřejmě přehnal. Nicméně běžné je to, že se v návrhu uživatelského rozhraní vyskytuje více odstínů dané barvy. Tyto odstíny jedné barvy mohou být kolikrát dost podobné a nemusíte rozdíl vidět hned. I znatelně malý rozdíl v odstínu barvy může vizuálně ovlivnit výsledek.
Stalo se mi, že si kodéři chtěli opět ulehčit práci a některé odstíny barev sami sloučili. Řekli si, že tyto dva odstíny jsou na oko stejné a nahradili ho jedním. Vizuálně však tato změna způsobila velkou paseku.
Pokud vám ovšem přijde, že dvě barvy jsou naprosto totožné a liší se minimálně jedním znakem v HEX kódu, může jít o odchylku v návrhu. Je dobré to prověřit a případně barvy sloučit, pokud jste si jisti, že to není designérův záměr. Příležitostí, jak k tomu může během navrhování dojít, je hodně (např. používání kapátka během návrhu).
Bílá není vždy bílá
Na barevném pozadí se často setkáte s bílým textem. Pozor, často to není bílý text, ale jde o odstín barvy pozadí pouze blížící se k bílé barvě. Respektujte to. Pro kodéra to může být prkotina, ale pixely a lehké posuny barev udělají v designu opravdu hodně.
🚸 12. Ikony
Designér většinou sám připravuje ikony na export ve stejném čtvercovém formátu s připraveným ochranným prostorem. Pokud je takto vyexportujete, můžete ikony libovolně zaměňovat a vždy budou vypadat dobře a budou do návrhu pasovat, protože mají všechny stejný formát (jsou navrženy na stejném plátně).
Co se ale může stát? Uveďme si příklad:
Designér Petr tvoří návrh. Potřebuje použít ikony. Sáhne po již hotovém známém setu Font Awesome. Vybere si ikony, které k projektu potřebuje. Všechny ikony si v projektu nasází do 48px plátna s ochranným prostorem a s těmi pak pracuje v návrhu. Tyto plátna jsou přichystána k exportu.
Designér předá návrh kodérovi Karlovi. Karel je ale efektivní člověk a chce si práci ulehčit. Zjistí, že designér Petr použil ikonový set Font Awesome. Usoudí, že než exportovat 20 souborů jednotlivých ikon, bude lepší vzít ikony Font Awesome v podobě fontu.
A tady nastává problém. Ikony v podobě fontu se chovají úplně jinak. Chovají se jako písmo. Umístění a chování ikony ovlivní všechny zmíněné vlastnosti textu jako je velikost nebo řádkování. Kolem ikon navíc chybí i ochranný prostor.
Pokud se kodér Karel rozhodne použít ikony v podobě fontu, musí kontrolovat, jestli jsou ikony vůči okolním prvkům na pixel správně zarovnané. Nikdo neříká, že to je špatně. Ale otázka je, jestli to Karel zvládne?
✰ 13. Stíny
Často přehlédnutelným grafickým prvkem jsou stíny. Některé jsou zřetelnější a některé méně. A na ty se často zapomíná. Buďte všímaví. Pozorujte, kde se mohou stíny objevit. Stíny v návrhu tvoří hloubku. Když na některý zapomenete nebo ho nastavíte jinak, odchýlíte se. Kontrolujte posun stínu po osách, jeho rozmazání, barvu i průhlednost.
🏙 14. Kvalita fotografií
Dejte pozor na dostatečnou kvalitu fotografií. Designér by měl pracovat s dostatečně velkými fotografiemi, abyste byli schopni si je vyexportovat v dostatečné kvalitě. Myslete na retina zařízení. Pokud řešíte datovou velikost fotografie, udělejte kompromis mezi velikostí a komprimací fotky. Lepší je dostatečně velká a zkomprimovaná fotografie než malá fotografie v plné kvalitě, která se pak v případě potřeby jen roztáhne.
🔪 15. Vektorové formáty grafických prvků
Ať už exportujete ikony nebo jiné dekorativní grafické prvky, vždy raději, pokud možno, použijte vektorové formáty (.svg) pro zajištění maximální ostrosti prvku.
🖼 16. Kompozice fotografií
Objekty ve fotografiích jsou také grafickými prvky, které ovlivňují vizuální výsledek. Proto je při práci s fotografiemi kontrolujte. Pokud například umisťujete obrázek do pozadí, odpovídá váš výsledek návrhu? Je fotografie a objekty na ní umístěny vůči celému rozhraní tak, jako je to v návrhu? Pokud je obrázek umístěn v pozadí, nenastavili jste špatně pozici pozadí?
🧠 Mějte vlastní hlavu
V návrhu se snažte sami najít vzory a systém. Když designér navrhuje, dost s prvky v rozhraní hýbe. Přemisťuje je tam a zpět, mění barvy a velikosti neustále dokola. Může se stát, že v návrhu vzniknou také odchylky. Proto slepě nekopírujte hodnoty z návrhu, ale zamyslete se, zda šlo o záměr nebo jestli není náhodou lepší vaše řešení.
🙊 Komunikujte s designéry
Nemlčte a ptejte se designérů. Kopat byste měli za jeden tým. Designér by vás měl upozornit na kritická místa v návrhu a společně byste je měli probrat a vyjasnit si, co možné je a co není.
Důležitý je i dozor nad realizací responzivního návrhu. Pokud si netroufáte, měli byste ho s designérem odladit společně, protože mohou nastat situace, které v designu zachyceny nejsou.
🐝 Při kódování buďte precizní
Stejně jako designér, který se snaží dodat stoprocentní výsledek, tak i vy byste se měli snažit odvést perfektní práci, abyste výsledné UI v realizaci nezkazili.
Měli byste být schopni realizovat návrh 1:1. Všechny prvky v návrhu si proklikněte a odměřte. Nepředvídejte a neodhadujte. Designér navrhuje nespočet detailů, které dohromady tvoří celek. Pokud některé z nich zanedbáte, snadno se odchýlíte od návrhu a výsledek nebude takový, jaký by měl.
Jak si výsledek zkontrolovat?
Pokud použijete v technické realizaci stejný obsah, jaký je v návrhu, musí vše lícovat. Musíte například vidět, že slova v textových blocích se zalamují na stejných místech jako v návrhu. Pokud někde něco nesedí, zkontrolujte to. Pravděpodobně jste někde něco zapomněli nebo přehlédli.
Můžete si zkusit udělat screenshot vaší realizace a přiložit ho vedle návrhu od designéra. Hned uvidíte, jestli jsou některé sekce návrhu delší nebo kratší a jestli vše sedí tak, jak má. Nesedí? Hledejte chybu.
Tip: Patrik Palko mi zaslal odkaz na rozšíření PerfectPixel by WellDoneCode do Chrome. Můžete jej vyzkoušet.
Samozřejmě můžete namítat, že některé věci dodržet nejdou a budete mít v hlavě milion argumentů, proč něco nemůžete na projektech dělat. Je mi to jasný. Toto je pouze můj pohled a vím, že se občas musíte dělat kompromisy a kódovat tak, abyste uspokojili potřeby aktuálního projektu.
Nicméně pokud se budete snažit všechna tato doporučení respektovat a něco si z nich odnesete, rozhodně se posunete profesně dál. Budete nabízet skvělá „pixel perfect“ řešení. Bude to vaše vizitka práce, která bude vidět! 🤩
A teď směle zpět ke kódu. Ať se vám při realizacích UI daří. 🙌
⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇
Článek vychází ze zkušeností a popisuje nejčastější problémy, se kterými se v praxi setkávám. Článek aktualizuji na základě aktuálních postřehů, nových problémů nebo zpětné vazby.
Budu rád, když mi napíšete klidně e-mail s vaším názorem nebo doplněním k článku.
Pokud se vám článek líbí a zajímá vás téma o návrhu webů a aplikací, sledujte více:
- Lekce pro UI designery — Designui.
- Moje Facebooková stránka, kde sdílím užitečné tipy pro návrh UI.
- Facebook skupina, která slouží pro diskuzi nad návrhem uživatelských rozhraní.
Pokud byste chtěli pomoct s návrhem webu, e-shopu nebo aplikace, mrkněte na můj web a třeba mě kontaktujte. 🙌
