Tento částečně úvahový článek jsem plánoval napsat už dlouho. Vlastně ještě před svou blogovací pauzou, kdy mě pár grafických návrhů od jednoho méně schopného grafika přimělo sepsat soubor požadavků, které ze své pozice mám. Tyto body zůstaly na čas zapomenuty, abych si je po nějaké době zase připomněl. 

Nejdříve bych rád zdůraznil: Kolegové grafici, prosím neberte tento článek, jakože znevažuji vaši práci. Spíš ho berte jako na dobře míněné rady. Zkušenější z vás tyto body jistě ve většině dodržují, méně zkušení si naopak mohou některé tipy vzít k srdci. Stejně tak mi je jasné, že pokaždé nelze vše do detailu dodržet: občas jsou pádné důvody, proč něco udělat jinak. Ale pokud dostanu grafiku, které nesplňuje ani základní pravidla pro nakódování, je to k vzteku... Je to k vzteku natolik, že mám chuť návrh vrátit k přepracování. Nebo si ho udělat po svém. Ani jedno samozřejmě není dobře. 

1. Dodržujte formáty souborů a rozlišení

Budu mluvit primárně o formátu PSD. Ten je zažitý, často používaný a více než vhodný pro grafické návrhy stránek. Od grafika primárně očekávám PSD dokument: žádný AI a nedej bože PDF, které mi po otevření ve Photoshopu naskočí na 5000 pixelů šířky. Každý s tím nemusí umět správně pracovat. Navíc ke každému dokumentu je také vhodné dodat i PNG / JPG obrázek v životní velikosti: snadno se může stát, že kodér nemá nejnovější verzi Photoshopu a soubor se nemusí zobrazit korektně. Uložení do PNG je otázkou 3 kliků a v budoucnu to může usnadnit spoustu dohadů typu "máš to špatně" / "ale já to takto vidím" či jiné.

Že má návrh být v životní velikosti, raději také zdůrazním: kolikrát se mi stalo, že jsem dostal redesign webu o šířce 1100 pixelů jako JPG obrázek, který byl široký 1311 pixelů...

2. Dokument by také měl mít rozumnou velikost

Je sice těžké určit, jaká velikost je rozumná, ale je když dostanu 600 MB soubor, ve kterém je jediná, středně náročná stránka, je tam něco uložené špatně. Také nemám zájem o 10 podstran v jednom dokumentu. V prvé řadě se s tím nepracuje úplně pohodlně, v řadě druhé je zase nutné mít na paměti, že počítače mají různé výkony. Člověka můžou posadit ke stroji, který je sice dostačující, ale půlgigové grafiky nedá. A potom co s tím, že ano.

3. Používejte mřížky a centrujte vnitřní obsah

Používejte mřížky. Člověk se někdy až diví tomu, jak někdo může nakreslit komplexní stránku bez použití jediné mřížky. A nám to usnadní práci. S tím souvisí i centrování dokumentu. Pokud má být na pozadí <body> nějaký vzor či znak, který já nechci ukládat do PNG, abych neměl dvoumegový obrázek, pak očekávám, že tento vzor bude nacentrovaný. Ne, že z jedné strany obsahu bude mezera 200 pixelů a z druhé 169.

4. Logické členění vrstev a skupin

Tady už se dostáváme k vnitřnímu uskupení dokumentu. Není nic horšího, než dostat soubor, který nepoužívá skupiny a všechny vrstvy jsou tam naházené tak, jak se to zrovna hodilo. Programátoři také píšou kód způsobem, aby se v něm ostatní vyznali. Grafici by měli dělat to stejné. A mít hlavně na paměti fakt, že po nich s tím bude pracovat člověk, který má znalosti Photoshopu zpravidla horší.

5. Přemýšlejte jako kodér

Tento bod je velice důležitý ale také náročný na zažití. Zkuste přemýšlet jako člověk, který po vás grafiku převezme. Půjde tato vrstva snadno vyříznout? Půjde v této vrstvě snadno změnit background? Tento obrázek by měl být uložený jako průhledné PNG, půjde se k němu snadno dostat? Další obrázek překrývá stín, na pozadí budou rotovat témata. Půjde samotný stín uložit? Nebude se v tom kodér půl hodiny hrabat, než najde správnou vrstvu? A tak dále.

6. Používejte rozumná čísla

Tím myslím násobky deseti nebo pěti. Někdy je jasné, že rozměr loga 134x73 tam prostě být musí, jindy jsou ale použita naprosto nelogická čísla bez jakéhokoli vyššího smyslu. Je hlavička vysoká 101 pixelů, z toho je 1px spodní linka? V pořádku. Je hlavička vysoká 98 pixelů bez nějakého dalšího objektu, který by tuto výšku fixoval? Proč? Mám v hlavičce ikonu, která je 60 x 60px, shora odsazená 18 pixelů a ze spodu 20? Není to spíš chyba? Upravím odsazení a hlavička se mi krásně zaokrouhlí na 100 pixelů.

Další věc je sloupcová sazba. Máme 4 sloupce o šířce 270 pixelů a poslední z nich je bezdůvodně široký jenom 268. S tímto se setkávám častěji, než bych si přál... Je opravdu nutné, aby mezera mezi sloupci bylo 17 pixelů a nikoli 15 nebo například 20? Zvlášť, když mezery jsou tam 3 a ve výsledku je šířka webu liché číslo...

7. Vyvarujte se zbytečně složitých grafických formulářů

Kodéři tohle nesnáší :-) Je jasné, že když je web designový, musí být každá jeho část vymazlená. Ovšem v případě, kdy jsou všechny komponenty velice jednoduše a věcně navržené, grafický form se tam vlastně ani nehodí. Nemusím tam nutně cpát monstrózně složitý formulář, když to bude vlastně jediný formulář na celém webu. V jednoduchosti je síla.

8. Naznačte hovery

Nebo si je kodér vymyslí a bude to jinak, než jste si představovali. Nebo je tam nedá a dostane za to vynadáno. Hovery by měly být samozřejmostí, přesto se na ně často zapomíná. Menu by vždy mělo mít dostatek položek, aby tam šla naznačit aktivní položka i hover. Ve výpisu produktů může být vždy jeden zaměřený.

9. Dodržujte jednotné velikosti nadpisů (a typografii obecně)

Někteří grafici vám stranou vypíšou nadpis h1, h2, h3 a ukázkový odstavec, takže hned víte, co bude jak veliké. Jenže spoustě lidí je to fuk. Občas se musím prokousat určitým množstvím podstran, než si správně odvodím, který nadpis má být jak velký. Tak, abych mohl dodržet jejich hierarchii. A pak narazím na postranní sloupec, kde je nadpis h2 najednou o dva pixely menším písmem. Takže mám: centrální oblast h2 = 24 pixelů, centrální oblast h3 = 16px, pravý sloupec h2 = 22px a pravý sloupec h3 = 17px. Ne, toto málokdy dává smysl.

10. Konzultujte :-)

Vyhraďte si čas na to, abyste společně probrali postup práce, který vám oběma vyhovuje. Může to znít jako samozřejmost, ale lidská komunikace je důležitá. Snažte se, aby i kodér pochopil, jak vy přemýšlíte a jak pracujete. Rozumný člověk dokáže pochopit, že ve spoustě případů prostě dané body dodržet nelze. Vyjděte si navzájem vstříc a vaše spolupráce bude mnohem příjemnější.