Grafický návrh webovej stránky

Webdizajn je pomerne zložitý proces, i keď sa to tak na prvý pohľad nemusí zdať. Webstránka totiž musí plniť niekoľko funkcií naraz: byť informatívna, praktická na používanie, rovnakou mierou by však mala byť príjemná na pohľad, estetická a zároveň efektívne komunikovať danú značku, jej produkty a služby.

Ako začať s grafickým návrhom?

  • neexistujú žiadne štandardy určujúce, ako ma grafický návrh vyzerať
  • grafický návrh webstránky začína v hlave a následne na papieri
  • vytváranie webových stránok – photoshop ( CorelDraw ,Adobe ® Photoshop ®

Základné rozvrhnutie webstránky

  • webstránka neobsahuje iba úvodnú stránku ale skladá sa z viacerých podstránok
  • stránka sa rozdeľuje najčastejšie do týchto logických celkov:
  1. Pozadie (background)
  2. Záhlavie (header)
  3. Menu, textová časť (main)
  4. Päta (footer)

Zákony pre tvorbu webu

Vizuálna hierarchia

  • podmanivý webdizajn skrýva jednu základnú hodnotu – vizuálnu hierarchiu
  • proces činností, ktorými ľudské oko a mozog vníma, cíti a vidí
  • niektoré časti webu sú dôležitejšie než iné, a úlohou webdizajnérov je na ne vhodným spôsobom upozorniť
  • vizuálna hierarchia súvisí s veľkosťou, farbou, kontrastom alebo formou
Na tejto web stránke môžeme vidieť vizuálnu hierarchiu, najdôležitejšie informácie sú najväčšie. V tomto prípade nás ma zaujať denná zľava, ktorá zaberá najväčšiu plochu na web stránke.

Biele pozadie a minimalistický dizajn

  • biele pozadie webovej stránky tvorí dôležitú súčasť celkového vzhľadu
  • vyniknú ostatné grafické prvky, textácia a fotografie
  • nie je to len „prázdne miesto“
  • minimalistický, jednoduchý webdizajn znamená premyslené využitie priestoru, jeho najlepšie zhodnotenie a využitie
  • zrozumiteľná a jasná internetová stránka urobí vždy viac práce
Stránka má jednoduché biele pozadie a minimalistický webdizajn. Môžeme vidieť, že stránka je veľmi prehľadná.

Najčastejšie chyby

Výber nesprávneho typu písma

  • kvalitná typografia je tajomstvom perfektne navrhnutého loga/značky alebo webstránky

Ako sa vyhnúť chybám:

  • vyhnite sa rôznym pochybným typom písma
  • držte sa jedného alebo dvoch typov písma pre jeden grafický návrh
  • uistite sa, že je všetko čitateľné!
  • vizuál musí byť pochopiteľný a jasný hneď na prvý pohľad
  • vybratý typ písma musí byť v súlade s celkovou náladou vizuálu

Príliš veľa grafických prvkov, príliš veľa farieb, príliš veľa všetkého…

  • čistý a atraktívny vizuál spočíva najmä v harmonickej striedmosti grafických prvkov a farieb
  • jednoduchosť je najlepšia cesta
  • nezabudnite, že málo je vždy viac

Ako sa vyhnúť chybám:

  • vyberte si dve, maximálne tri farby – jeden neutrálny odtieň
  • pozrite sa na najslávnejšie logá na svete – majú jediného spoločného menovateľa – jednoduchosť

Ako by web stránka nemala vyzerať

Táto stránka je vytvorená na ukážku ako by web stránka nemala vyzerať. Na stránke je príliš veľa všetkého, veľa typov textov, množstvo grafických prvkov, farieb a obrázkov.

Trendy v grafickom dizajne

Kreatívna typografia a hrátky s písmenami

  • dobrí grafici sa neboja pracovať s písmom – trhajú ho, rozsekávajú, rozmiestňujú v priestore bez akýchkoľvek pravidiel a klasického usporiadania
  • prepožičiava grafike nádych kreativity
  • handlettering – písmo tvorené poctivo, pomocou ceruzky
  • bold fonty (hrubé, tučné písmo)

Farebné prechody a gradient

  • farebné prechody sa začali dostávať do centra pozornosti vďaka Instagramu
  • môžeme si vytvárať svoje vlastné farebné spektrum
  • vizuály s použitím farebného prechodu pôsobia sviežejšie, než nudné jednofarebné plochy bez nápadu

Ručne kreslené ilustrácie

  • autenticite a kreatívne nápady
Reklamy

3 Replies to “Grafický návrh webovej stránky”

  1. Téma je zaujímavá, taktiež aj zaujímavo bola odprednášaná na hodine. Oceňujem, že ku každej podtéme si uviedla aj ukážku, ktorá nám pomohla k bližšej predstave web. stránky.

    Like

Pridaj komentár

Please log in using one of these methods to post your comment:

WordPress.com Logo

Na komentovanie používate váš WordPress.com účet. Odhlásiť sa /  Zmeniť )

Google photo

Na komentovanie používate váš Google účet. Odhlásiť sa /  Zmeniť )

Twitter picture

Na komentovanie používate váš Twitter účet. Odhlásiť sa /  Zmeniť )

Facebook photo

Na komentovanie používate váš Facebook účet. Odhlásiť sa /  Zmeniť )

Connecting to %s