Návrh webovej stránky

Tvorba webových stránok je tvorená niekoľkými na seba nadväzujúcimi krokmi.

Definovanie obsahu webovej stránky

Na začiatok si definujeme, čo vlastne na webstránku chceme umiestniť, o čom chceme užívateľov informovať a čo je hlavným cieľom webovej stránky.

Taktiež je potrebné pri návrhu myslieť na funkcie, ktoré rozdelíme na funkcie dostupné pre webového používateľa a funkcie dostupné pre používateľa na mobilnom, či tabletovom zariadení.

Úloha

Pokiaľ si si nepripravil/a doma obsah webovej stránky, pripravíme si ho spoločne :). Počas workshopu vytvoríme vo vzorovom príklade webstránku prezentujúcu teba, tvoju prácu a záujmy.

Taktiež si farebne označ funkcie, ktoré požaduješ zdeliť užívateľom na počítači, a ktoré užívateľom na mobilnom zariadení.

Napíš si na papier alebo do editoru v počítači odpovede na nasledujúce otázky:

  1. Kto som?
  2. Čomu sa venujem?
  3. Čo zaujímavé môžem o sebe povedať?
  4. Na akých projektoch pracujem?
  5. Chcem povedať niečo o projektoch bližšie?
  6. Chcem upútať na seba, svoju prácu, projekt alebo ponúknúť nejakú službu?
  7. Chcem aby ma vedeli návštevníci webstránky kontaktovať?
  8. Ak áno, akou formou by som chcel/a byť kontaktovaná?
  9. Chcem sa podeliť o svoje zážitky formou článkov alebo blogu?
  10. Chcem poskytnúť možnosť ďalej moju prácu/články/iné zdieľať?
  11. Chcem ponúknuť používateľom možnosť priamej komunikácie so mnou alebo na dané témy na webstránke?
  12. Je obsah webstránky dostupný všetkým používateľom?
  13. Chcem používateľa upriamiť na akciu (akciou môže byť objednávka, kontaktovanie, zdieľanie, prihlásenie, registrácia a podobne).
  14. Ak áno, akú má vybraná akcia pre mňa prioritu?

Tip: Používatelia na mobilných zariadeniach častokrát navštevujú web za špecifickým účelom, preto by nemal obsahovať všetky informácie 1:1 k desktopovej verzii. Na mobile by mali byť zobrazené najdôležitejšie informácie, tak aby sa k nim užívateľ ľahko dostal. Pri návrhu platí pravidlo - "do 3 krokov".

Rozmiestnenie obsahu na webstránke

Keď máš spísané všetky funkcie, informácie a položky, ktoré chceš na webstránku dať, je potrebné si ich logicky rozdeliť. Návrhu webového rozloženia sa venujú väčšinou UI/UX dizajnéri (častokrát označovaní ako hipsteri :)), ktorí sa starajú o to, že všetko bude na správnom mieste, plniť svoju marketingovú a funkčnú úlohu, ľahko a jednoducho prístupné pre používateľa.

"UI" je odvodené z anglického výrazu User Interface. "UX" je odvodené z anglického výrazu User Experience.

Je však dôležité aby UI/UX dizajnéri dodržiavali určité štandardy a pravidlá platné pre desktopové a mobilné zariadenia.

Je dobré začať návrhom wireframu (najlepšie ceruzkou na papier). Existujú však okrem papiera aj mnohé nástroje na vytváranie webových wireframov. Ja najčastejšie využívam NinjaMock, Balsamiq alebo pre väčšie webstránky Axure.

Tip: V praxi väčšinou po vydefinovaní všetkých funkcií, ktoré chceme na webstránke zobraziť dochádza k ich minimalizácii alebo čiastočnému uberaniu funkcií. Mnohokrát zistíme, že nie sú všetky údaje potrebné alebo narazíme na problém, že bude web natoľko prehltený informáciami, že užívateľ sa k nim nedostane alebo ho preinformovanosť odradí. Taktiež je veľmi dôležité myslieť na rýchlosť a načítanie webovej stránky (pravidlom je maximálne do 2 sekúnd), preto nie je vhodné na web umiestniť za každú cenu všetky obrázky, fotky a informácie, ktoré nie sú vždy tak podstatné.

Úloha

  1. Podľa návrhu wireframu vyššie si priprav svoje vlastné informácie, ktoré na stránku napíšeš (stačí hlavné nadpisy, ak nemáš premyslený celý obsah).
  2. Ak chceš na webstránku dať iné informácie napíš mi na email: svetlana@margetova.eu

Grafický návrh webstránky

Až v tomto kroku sa začne kresliť reálny dizajn webstránky. Je veľmi dôležité si vo fáze tvorby wireframu a prototypu premyslieť všetky potrebné detaily, rozmiestnenie, menu a úrovne zanorania pred nakreslením do grafickej podoby a najmä finálnym programovaním.

Každá ďalšia zmena je pre programátorov pomerne časovo náročná a taktiež neustálymi zmenami dochádza k čoraz väčšej nekonzistentnosti webstránky, miešanie rozdielnych ikoniek, zarovnania, veľkosti písem a zároveň nejednotnosti obsahu.

Tip: Návrh a analýza webstránky, webovej alebo inej aplikácie, patrí k najdôležitejším fázam vývoja. Pri dobrom návrhu sa ušetrí pomerne veľa času a môžeš sa namiesto zmeny pôvodného návrhu, radšej venovať neustálemu zlepšovaniu už toho existujúceho, podľa štatistík správania používateľa, marketingových kampaní, či iných požiadaviek.