Nedávno som pracovala na projekte, kde som sa stretla so známym problémom, ktorý vzniká medzi kódermi a webdizajnérmi. Aj napriek veľkému počtu článkov, ktoré sa už tejto problematike venovali, rozhodla som sa, že ju spracujem podrobnejšie, aby čo najmenej dochádzalo k nedorozumeniam a zlepšila sa vzájomná spolupráca.
Častokrát počúvam z oboch strán sťažnosti. Kóderi sa sťažujú na jednej strane na webdizajnérov a ich neprehľadné grafické návrhy a na strane druhej, webdizajnéri sa sťažujú na kóderov, že ich požiadavky sú graficky nerealizovateľné. Nezáleží či pracujete sám, v malej alebo vo veľkej firme. Rozhodujúce slovo v celej tejto bitke má klient, ktorý určuje všetky zmeny webstránky.
Tvorba webových stránok prebieha na základe vzájomných stretnutí webdizajnéra s klientom, ktorý mu poskytne základnú predstavu o budúcej stránke z hľadiska dizajnu, ale aj z hľadiska funkčnosti a účelu. Na základe týchto informácií vytvorí dizajnér v grafickom programe (najčastejšie vo Photoshope alebo GIMPE) niekoľko návrhov, ktoré následne dodá kóderovi.
A tu nastáva problém. Kóderi iba krútia hlavou nad tým, čo im webdizajnéri dodajú. Tam kde dizajnér vidí obrázok zložený z pixelov určitej šírky a výšky, kóder vidí objekt, ktorý má určité vlastnosti a funkcionalitu tvorenú pospájaním programovacích príkazov. Tieto dva tak odlišné pohľady na rovnakú vec nie je možné oddeliť ako stavbu od architektúry. Jediné, čo im ostáva je DOHODNÚŤ SA.
Ako začať s grafickým návrhom
Nech hľadám ako hľadám, neexistujú žiadne štandardy určujúce, ako ma grafický návrh vyzerať. Môže ho vytvárať jeden človek alebo skupina ľudí v závislosti od veľkosti a zložitosti projektu.
Ja využívam ako štandard na vytváranie webových stránok Adobe ® Photoshop ®. Hoci patrí k plateným nástrojom, podľa mňa je tým najvhodnejším, pretože má nízke rozlíšenie (72 dpi) a podporuje formáty zachovávajúce vrstvy s bezstratovou kompresiou (najčastejšie PNG).
Grafický návrh webstránky začína v hlave a následne na papieri, skôr než vytvoríme prázdny PSD súbor. Začíname vždy na prázdnom plátne. Dôležité je projektovanie pre všetky rozlíšenia obrazovky tzv. rozšíriteľný web dizajn. Stránky sa vytvárajú v rozlíšení 800 x 600, 1024 x 768, 1280 x 1024 v pomere 1:1. Najčastejšie sa používa rozlíšenie 800×600 alebo 1024×768.
Využívajte mriežku
Mriežka (grid system) patrí k základným princípom dizajnu, ktorý vytvára rovnováhu a súdržnosť vášho webu a zabezpečuje konzistentné zarovnávanie objektov. Na tvorbu webov sa využíva najmä 960gs, ktorý je založený na 12 stĺpcoch s celkovou šírkou 960 px. Užitočným nástrojom je Grid System Generator.
Ďalej si pomáhajte pravítkom a vodiacimi čiarami, ktoré určujú, kde presne sa bude daný element nachádzať. Na jej podklade si navrhnete základný layout, ktorý tvorí background webstránky a ten dodáte kóderovi v osobitnom formáte PNG. Odporúčam ho navrhnúť ako prvý a naň následne nadväzovať ako farbami tak aj prvkami stránky.
Ďalšou metódou rýchleho zarovnávania je Smart Guides (inteligentné vodítka). Pri práci sa zobrazujú neustále a tak máte kontrolu nad zarovnaním všetkých prvkov webstránky.
Základné rozvrhnutie webstránky
Pri návrhu počítajte s tým, že webstránka neobsahuje iba úvodnú stránku (index.html), ale sa skladá z viacerých podstránok s rôznymi vlastnosťami a prvkami. Vy rozhoduje o tom, ako bude vyzerať stránka s úvodným formulárom, fotogaléria, rôzne typy odkazov a efektov. Stránka sa rozdeľuje najčastejšie do týchto logických celkov:
Pozadie (background)
Záhlavie (header)
Menu, textová časť (main)
Päta (footer)
Logické rozvrhnutie však závisí od požiadaviek klienta. Môže napríklad požadovať menu vpravo a podobne.
Matrix alebo realita?
Väčšina ľudí sa snaží vytvárať čo najviac vrstiev s mylnou predstavou zabezpečenia väčšej flexibility. Opak je však pravdou. Čím viac vrstiev, tým je práca s návrhovom zložitejšia a to nevravím o chaose, ktorý má z toho kóder. Väčšina kóderov sa cíti ako vo svete matrixu pri pohľade na sto neusporiadaných vrstiev, ktoré majú nasekať do CSS.
Je vhodné logicky si vrstvy rozčleniť do skupín, ktoré spolu súvisia, tak aby sa s nimi dalo manipulovať. Každú vrstvu pomenujte výstižne. V rámci jednej vrstvy a skupiny môžete vytvárať ďalšie podskupiny, napríklad header obsahuje ďalej logo stránky, obrázky, slogan a podobne. Môžete sa medzi jednotlivými skupinami rýchlo prepínať a takto zabezpečíte konzistentnosť vytváranej stránky.
Používajte „web-safe fonts“
Kvalitná prezentácia textu na webovej stránke je rovnako dôležitá ako grafika. Web Safe Fonts sú bezpečné písma, ktoré budú na obrazovke jasne čitateľné na všetkých operačných systémoch. Aplikujte ich na všetky texty okrem loga. Zoznam bezpečných fontov sa nachádza tu.
Kontrastné farby
To ako stránka vyzerá, pôsobí buď pozitívne alebo negatívne na návštevníkov stránky. Každý grafik pozná základné pravidlá farieb, preto pri návrhu využívajte jeden z dostupných nástrojov, ktorý pomáha zladiť rôzne farebné kombinácie. Ja osobne používam Color Scheme Designer.
Výsledný náhľad stránky
Vždy aj počas práce vytvárajte náhľady stránky, ktoré postupne posielajte kóderovi v pôvodnej veľkosti stránky bez straty kompresie. Pošlite mu stránku s vypnutým pozadím, so zapnutým pozadím, podstránky a tlačítka. On vás bude môcť aj počas práce usmerniť a dané chyby opraviť už pred začatím kódovania, čím sa čas tvorby výrazne optimalizuje.
Záver
Samozrejme, tento postup je značne zovšeobecnený a zjednodušený, mnohé webstránky vyžadujú zložitejší systém skupín a hlavne podskupín. Základom je organizovať si prácu tak, aby ste sa mohli vrátiť k predošlej verzii a ľahko meniť jednotlivé časti stránky. Nezabúdajte, stránka musí byť navrhnutá tak, aby bola čo najlepšie modifikovateľná. Klienti často žiadajú zmenu stránky z rôznych dôvodov, preto musí byť každá jej časť editovateľná a znovu použiteľná.