Webdesign, Dobré rady

Čo je webdesign

Ako už z názvu vyplýva, ide o návrh konkrétneho webu. Mnohí ľudia si myslia, že webdesign rieši len „výzor“ stránky. Nie je to však pravda. Výraz webdesign vychádza z angličtiny, pričom design znamená doslova návrh. Ide teda o spracovanie webstránky ako celok. Webdesign môže urobiť samotný programátor, ktorý bude stránku tvoriť, ale existujú aj designéri, ktorý sa zaoberajú len navrhovaním webov. K tomu, aby ste boli dobrým webdesignérom sa musíte niečo o webdesigne naučiť. Pomôže vám pri tom aj naša „internetová príručka“.

Dobré rady

Tu je niekoľko základných pravidiel, ktorými sa riadia aj tí najlepší webdesignéri na svete:

  1. Nemyslite na svoj komfort, ale na komfort návštevníka. To, čo sa vám môže zdať zložité môže byť v konečnom dôsledku pre návštevníka dôležité. Stránka musí byť prehľadná a rýchlo sa musí naťahovať aj za cenu pre vás zložitého zdrojového kódu (HTML). Nebuďte lenivý a urobte maximum. Komu sa nechce pracovať, ten nemôže byť ani dobrý webdesignér, ani dobrý programátor.
  2. Nekradnite. Mnoho ľudí sa „inšpiruje“ designom iných stránok tak, že si stránku jednoducho stiahne, trochu ju pretvotí a vydáva ju za svoju vlastnú. Takáto stránka už len z princípu nie je jeho práca. Myslite aj na autorské práva (tzv. copyright), ktoré vám môžu spôsobiť nemalé problémy. Doplním vlastným zážitkom: môj spolužiak navštívil moju web stránku, stiahol si ju štandardným spôsobom (Súbor > Uložiť ako…), pretvoril ju podľa vlastných potrieb a dal na internet. Ale nedal si ani toľko námahy, aby z hlavičky webu odstránil moje meno z položky AUTHOR. 🙂
  3. Dobre kombinujte farby. Mnohokrát sa stretávm so stránkami, ktoré nie sú po stránke farebnosti celkom v poriadku. Treba myslieť opäť na návštevníka. Ako naňho zapôsobia farby vašej stránky? Je text čitateľný na farbe pozadia, ktoré ste si zvolili? Sú farby šetrné k očiam? Neunavujú ich? Stránka tiež nesmie byť príliš farebná. Obvykle sa používajú odtiene 1 až 2 farieb. Odtiene by, samozrejme, nemali byť príliš agresívne. Všimnite si, že množstvo profesionálnych stránok používa len málo odtieňov (väčšinou sa dajú spočítať na prstoch jednej ruky), na pozadie dávajú svetlé odtiene, dôležité veci naopak zvýraznia a ostatné sú priemer medzi týmito dvoma. Nepáčia sa mi stránky, ktoré spolu vôbec neladia, resp. každá podstránka je úplne iná. Zjednoťte svoju stránku !
  4. Stránka sa MUSÍ rýchlo načítať. To je najzákladnejšie pravidlo webdesignu 21. storočia. Poznám aj taký názor, že ak sa stránka dlho načíta, pôsobí dojmom rozsiahleho obsahu. To však nie je pravda, pretože sa tým porušuje 1. pravidlo. Dlhé nahrávanie stránky častokrát odradí návštevníkov a už na ňu viac krát neprídu (a to my predsa nechceme…). Týka sa to napr. obrázkov, ktoré by nemali presiahnuť veľkosť 150 kB (aj to je veľmi veľa – celá táto stránka toľko nemá!). Na www stránkach pokojne používajte menej kvalitné formáty (napr. JPG), návštevník si to mnoho krát ani nevšimne. V móde už nie sú ani obrázky na pozadí, ktoré často rušili čitateľa. Zabudnite aj na dobu, keď sa na stránkach v pozadí spúšťali zvuky/hudba. Ak je hudba na stránke nevyhnutná, použite len niekoľko sekundový úryvok, ktorý sa bude opakovať v slučke (rozumej: do nekonečna:-)). A tento súbor by mal byť vo formáte MP3 a ak to stačí, možné je aj použitie MIDI.
  5. Odkazy musia byť „živé“. Všetky hyperlinky umiestnené na vašom webe musia odkazovať na existujúce miesta. Dajte si pozor, aby cieľ existoval a aby na ňom skutočne bolo to, čo je avizované.
  6. Thumbnaily nech sú skutočnými thumbnailmi. Najskôr čo sú THUMBNAILY: ide o malé ukážky obrázkov, ktoré sú zoradené na jednej stránke ako v nejakom albume. Keď na niektorú ukážku užívateľ klikne, zobrazí sa celý obrázok v originálnej veľkosti – umožní to užívateľovi čakať na natiahnutie iba tých obrázkov, o ktoré má záujem. Ak chcete na stránku umiestniť napr. fotoalbum, obrázky musia byť na servery nahraté 2-krát: 1. v originálnej veľkosti, 2. vo fyzicky zmenšenej veľkosti. Na stránke sa najprv zobrazia zmenšené verzie a až potom sa budú po kliknutiach zobrazovať originálne verzie. Obrázky si môžete pozmenšovať v ľubovoľnom prehliadači /editori obrázkov. Stretávam sa často so stránkami, kde sú akože „thumbnaily“, ale zmenšené sú len v HTML kóde. Ale to nestačí, pretože obrázky sa aj tak musia natiahnuť celé. Na jednej stránke mi takto thumbnaily naťahovalo vyše 5 minút a to je veľmi veľa (navyše obrázkov tam bolo len zopár). Tu si vždy spomeňte na pravidlo 1. a 4.
  7. Poznajte hranice gýču. Ak ste začínajúci webdesignér, možno sa vám zapáčili rôzne pohyblivé GIF obrázky, JavaScripty, applety, videá… Niekedy to nie je škaredé ale musíte vedieť kedy prestať. Jednak to spomaľuje naťahovanie stránky (pravidlo č. 4) a jednak je porušené pravilo č. 1. Navyše na niektorých stránkach je toho tak veľa, že mi to pripadá až gýčové. Navyše to ruší čitateľa stránky. Nevravím, že nemáte používať spomínané efekty, ale myslite After your big best-data-recovery.com analysis is com- plete, you need an approach that will allow you to integrate or incorporate the results of your big best-data-recovery.com analysis into your business process and real-time business actions. aj na hranice. Uznajte sami, kedy je už na stránke dosť takýchto efektov. Ja osobne tak nemám rád tieto efekty, že ich na stránky ani nedávam….
  8. Používajte kaskádové štýly (CSS). Zjednoduší vám to prácu s designom. Do jediného súboru zapíšete vlastnosti jednotlivých tried a tie sa uplatnia všade, kde vložíte link na tento súbor. Ak neskôr budete chcieť niektorú vlastnosť zmeniť (napr. zmena farby niektorej časti stránky), môžete to urobiť jednoduchou zmenou kaskádového štýlu. Kaskádové štýly sú však ďalším scriptovacím „jazykom“ a treba ich študovať. Skúste napr. stránku konzorcia W3.


Skúste sa riadiť niektorými z týchto pravidiel. Pomôže to skvalitniť tvorbu slovenských designérov. Postupne si sami vytvoríte isté zásady, ktorých sa budete držať.

Majstri webdesignu

Tu vám predstavím niekoľko projektov z hľadiska webdesignu, ktoré si určite pozrite. Okrem toho vám predstavím ich autorov, ktorí sú podľa mňa majstri webdesignu, pretože im to ide skutočne od ruky. (POZOR: netvrdím, že sa mi páči obsah týchto stránok, ale určite sa mi páči design!)

EtNetera.cz – prezentácia softvérovej firmy
Hack the Matrix – online hra s perfektným designom
Rammstein – prezentácia hudobnej skupiny
A-in-line – všetko o in-line
Dollar web – takýto portál je od amatérskeho designéra dobrý

Samozrejme, existujú aj stránky, ktorých design sa nepáči mne ani iným profesionálnym designérom ale ani laickým návštevníkom. Ale o nich tu teraz nie je reč.

Kto / čo vám pomôže ?

Pomoc treba najskôr hľadať v zdrojoch, ktoré som pomínal v článku Úvod -> Ako začať. Ale o webdesigne je množstvo WWW stránok:

World Wide Web Consorcium (W3C) – štandardy v tvorbe www
web.mit.edu/nmc/software.guides.html – návody na skrášlenie web-stránky
JakNaWeb -AkoNaWeb 🙂
CSS Validator – skontroluje vaše kaskádové štýly (resp. ich správnosť)
Scripting – všetko o scriptovaní
HTML Validator – umožní skontrolovať syntaktickú správnosť vašich stránok.
JediSoft.CZ – html príručky & manuály
HaTMatiLka – rýchlokurz HTML

Ešte vám do pozornosti odporúčam knihu Dokonalý webdesign. Nemám o nej konkrétne info (autor, vydavateľstvo…), nakoľko ju neviem zohnať. Čítal som však úryvky a veľmi sa mi zapáčila. Viem len, že kniha nemá slovenský ani český pôvod. Dozviete sa užitočné informácie pre skutočne dokonalý webdesign.

CeskeForum – diskuze o webdesignu