Blog Ako navrhnúť web pre programátora

Ako navrhnúť web pre programátora

Ako navrhnúť web pre programátora 1Nedá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.

Ako navrhnúť web pre programátora 2

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á.


Dobrý článok? Chceš dostávať ďalšie?

Už viac ako 6 200 ITečkárov dostáva správy e-mailom. Nemusíš sa báť, nie každé ráno. Len občasne.



Súhlasím so spracovaním mojich osobných údajov. ( Viac informácií. )

Tvoj email neposkytneme 3tím stranám. Posielame naňho len informácie z robime.it. Kedykoľvek sa môžeš odhlásiť.

Svetlana Margetová
Svetlana Margetová
Študentka 4. ročníka na Ekonomickej univerzite, odbor Manažérske rozhodovanie a informačné technológie. Popri štúdiu pripravujem automatizované testy a programujem v Zend a Django frameworku, venujem sa vývoju mobilných aplikácií pre všetky platformy (natívne, HTLM5 a hybridné aplikácie). Zaujímam sa o responsive web dizajn pre mobily, tablety a PC zariadenia.

Python Developer s možnosťou naučiť sa Julia

Chceš pracovať na dlhodobom, technologicky inovatívnom projekte v oblasti prediktívneho modelovania? Pre spoločnosť, ktorá používa matematické metódy a metódy AI...

Junior Scala Developer

Nechceš denne dochádzať do práce? Chcel by si byť súčasťou dlhoročného startupu, len senior ľudia (žiadni študenti) a pracovať...

Scala Medior/Senior Developer

Nechceš denne dochádzať do práce? Chcel by si byť súčasťou dlhoročného startupu, len senior ľudia (žiadni študenti) a pracovať...

Data Enginner / REMOTE

Pre mladý startup vyvíjajúci softvér, ktorý prispieva hráčom k lepšiemu zážitku z hrania, hľadáme Data Engineera. Založili ho dvaja...

React Developer

Projekt je veľmi inovatívny a bude určovať trendy v oblasti bankovníctva pre enterprise klientov v Európe. Budú ťa viesť...

Backend/Node.js Developer / REMOTE

Pre mladý startup vyvíjajúci softvér, ktorý prispieva hráčom k lepšiemu zážitku z hrania, hľadáme Backend/Node.js Developera. Založili ho dvaja...

DevOps Engineer / REMOTE

Si DevOps Enginner, zvládneš programovanie v Pythone alebo Golang? Pre spoločnosť, ktorá sa zaoberá pokročilou analýzou dát a automatizáciou...

Qubit Konferencia na kybernetickú bezpečnosť po prvýkrát na Slovensku

Po Prahe, Sofii a Belehrade sa Qubit presunie do krásnych Tatier! 1. ročník konferencie na kybernetickú bezpečnosť v Qubit štýle...

Soňa Pochybová: Ak ťa niečo trápi, alebo niečomu nerozumieš, ozvi sa!

Soňa má 36 rokov a pracuje ako Lead Software Developerka pre Národnú Banku Slovenska. Hoci pôvodne vyštudovala fyziku, ako...

GIRL´S DAY už po ôsmy raz priblíži stredoškoláčkam svet technológií

Už po ôsmy raz sa uskutoční celoslovenské podujatie GIRL´S DAY, ktoré prepája IT firmy a organizácie so stredoškoláčkami po...

Čítaj ďalej:

Dobrý článok? Chceš dostávať ďalšie?

Už viac ako 6 200 ITečkárov dostáva správy e-mailom. Nemusíš sa báť, nie každé ráno. Len občasne.

Súhlasím so spracovaním mojich osobných údajov. ( Viac informácií. )

Tvoj email neposkytneme 3tím stranám. Posielame naňho len informácie z robime.it. Kedykoľvek sa môžeš odhlásiť.