Ideš robiť web a nevieš čo a ako?

1. Pracuj vo farebnom režime RGB, s rozlíšením 72 dpi

Webstránka nikdy neopustí počítač. Vždy bude zobrazovaná iba na monitore a preto nie je dôvod používať iný farebný profil a vyššie rozlíšenie.

2.  Ako mierkovú jednotku používaj “obrázkové body” – pixely

1366×768 px je aktuálne najpoužívanejšie rozlíšenie. Stránku teda pripravuj v základe na tento rozmer.

3.  Pracuj v PSD formáte so zachovanými vrstvami

PSD dokument pred odoslaním kóderovi „poupratuj“ a ulož ako nový súbor. To znamená:

4.  Buď na pixel presný

Kódera si my grafici môžeme predstaviť ako Nea z Matrixu. Tam, kde vidíme obrázok, on vidí šírku, výšku a pozíciu na osiach X a Y. Preto musí mať každý dôležitý objekt na našom návrhu svoju presne určenú veľkosť a presne určené miesto. Za dôležitý objekt môžeme považovať aj medzeru, biele miesto, nič. Pri umiestňovaní prvkov sleduj pravítka a pomáhaj si vodiacimi linkami alebo mriežkou. Používaj zoom, aby si dobre videl.

Ak nemáš chuť neustále škúliť na pravítko a v duchu prerátavať, môžeš si pomôcť jednoduchým trikom. Napríklad ak sa snažíš dodržať rovnakú vzdialenosť (napr. 20 px) medzi tlačítkami, pomôže ti pomocný štvorec v tomto rozmere, ktorý umiestniš za každé tlačítko. Takto bez prepočítavania rýchlo uložíš všetky tlačítka na 20 px od seba.

5. Používaj Google Fonts

Najbezpečnejšie je na webe používať tzv. „web safe fonts„. Na priloženom linku uvidíš, ktoré to sú. Je to dosť nuda, čo sa dizajnu týka. Preto je tu Google s jeho Google Fonts. Databázou free fontov, ktoré je možné s vynaložením minimálneho úsilia na strane kódera/programátora použiť na webe. Vyberaj písma zaradené v kategórii „Latin Extended“. Mali by obsahovať slovenskú aj českú diakritiku.

6. Pattern vyrába grafik, nie kóder

Pokiaľ používaš v návrhu pattern (opakujúci sa vzor), je tvojou vecou dodať ho kóderovi zvlášť vo formáte PNG, orezaný tak, aby na seba nadväzoval.

7. Rob aj náhľady vo formáte PNG

Pre klienta, on to bude schvaľovať a pravdepodobne nemá Photoshop.

8. Posielaj kóderovi stránku po častiach

Ak je výsledný PSD súbor veľmi veľký, posielaj stránku po častiach. Zvlášť header, zvlášť slider banner, zvlášť footer…

 9. Urob sadičku/kit prvkov

Napríklad buttony, ikonky, formuláre, tabuľky, štýl bannerov a tak. Rôzne veci, čo sa na webe budú nachádzať, ale nie je potrebné to nejako zvlášť ukladať do priestoru.

10. Sleduj trendy webdizajnu

Ta nech to nevyzerá ako fotograf.sk. 🙂

# #

06/05/2016