Čo robiť a čo nerobiť skvelého webového dizajnu

Keď budete postupovať podľa tejto príručky, ukáže sa, že je celkom cenným zdrojom webdesignu, najmä ak ho plánujete použiť softvér na vývoj webových stránok v budúcnosti. Od neskúsených po skúsených, tento sprievodca má niečo pre každého.

Proces skvelého webového dizajnu Aby sme sa uistili, že sme všetci na rovnakej stránke, začnime základnou definíciou „webového dizajnu“. Podľa Wikipédie je webdizajn:

„proces konceptualizácie, plánovania, modelovania a realizácie doručovania elektronických médií cez internet vo forme značkovacieho jazyka vhodného na interpretáciu webovým prehliadačom a zobrazenie ako grafické používateľské rozhranie“ .

Proces tvorby webu možno prirovnať k procesu písania výskumnej práce. Vo fáze konceptualizácie/plánovania sa vytvoria vývojové diagramy (náčrt), ktoré ilustrujú navigačnú štruktúru vašej webovej stránky. Vo fáze modelovania sa vytvoria statické drôtové modely (hrubý návrh), ktoré ilustrujú skeletové rozloženie pre každú sekciu vašej webovej stránky. Po vytvorení drôtených rámov sa grafika, farby a text použijú na vytvorenie dizajnu vašich webových stránok na základe rozloženia drôtených rámov. Vo fáze realizácie sa váš návrh prevedie do formátu podporovaného webovými prehliadačmi, pridá sa text a obsah a nakoniec sa vaša webová stránka zverejní na internete, aby ju mohol vidieť celý svet (konečný návrh).

Všetky tri fázy procesu návrhu sú rovnako dôležité. Mnohí webdizajnéri preskočia etapu, aby ušetrili čas alebo preto, že si nemyslia, že je to potrebné. Všetky tri fázy sú však nevyhnutné, ak je vaším cieľom vytvoriť úspešný dizajn a slušnú webovú stránku. Aj keď sa použijú tri fázy, weboví dizajnéri môžu urobiť veľa chýb, ktoré povedú k nekvalitným webovým stránkam, ktoré nie sú užívateľsky prívetivé. Je čas vyčistiť skrinku od zlých praktík webdizajnu a doplniť ju tými dobrými.

Fáza 1: Konceptualizácia a plánovanie
Táto fáza sa vynecháva častejšie ako ostatné dve fázy. Väčšinu autorov nebaví vytvárať osnovy pre výskumné práce a väčšina webových dizajnérov tiež nemá rada vytváranie vývojových diagramov. Nebuď lenivý. Ak vynaložíte úsilie a naplánujete svoju webovú stránku, zistíte, že proces tvorby webu bude prebiehať hladko a s menším počtom chýb.

Existuje niekoľko vecí, ktoré budete potrebovať na efektívnu koncepciu a plánovanie vašej webovej stránky:

• mozog
• pero a papier
• (voliteľný) softvér vývojového diagramu
• všeobecnú predstavu o rôznych sekciách vašej webovej lokality

Ak chcete začať, vezmite si pero a papier alebo spustite svoj obľúbený softvér pre vývojový diagram. Používame OmniGraffle Professiona pre Mac OS X, ktorý stojí 150 USD za licenciu, ale stojí za to, ak vytvárate webové stránky pravidelne. Ak používate počítač, potom je SmartDraw skvelý bezplatný softvér na vývojový diagram, ktorý môžete použiť. Pero a papier však fungujú dobre.

Existuje mnoho metód na vytváranie vývojových diagramov. Pre čas a dĺžku tohto článku vám ukážeme najzákladnejší spôsob, ako to urobiť. Ak sa chcete dozvedieť viac o vývojových diagramoch, vyhľadajte vývojové diagramy na Google alebo Yahoo.

Pozrite si vývojový diagram, ktorý sme vytvorili pri konceptualizácii chromatických lokalít. (1) V hornej časti vývojového diagramu uvádzame názov našej webovej stránky. (2) Ďalej uvádzame každú primárnu sekciu našej webovej lokality: Domov, O aplikácii a Služby. Tieto sekcie sú hlavnou navigáciou vášho webu. To, aké budú názvy jednotlivých sekcií, úplne závisí od obsahu vašej webovej stránky. Snažte sa používať čo najmenej sekcií, aby vaši návštevníci neboli preťažení pri prechádzaní vašej webovej stránky.

(3) Ďalej pridajte všetky sekundárne stránky (podsekcie), ktoré budú uvedené na každej z primárnych stránok. Pre Home sme zahrnuli profesionálny webový dizajn, webový vývoj a optimalizáciu pre vyhľadávače. Sekundárna navigácia musí byť popisnejšia ako primárna navigácia. Čím hlbšia je navigačná hierarchia vašich webových stránok, tým popisnejší by mal byť každý štítok.

Dos

• Menej je viac; udržujte počet primárnych sekcií na minime. Na našej webovej stránke používame 6 sekcií, čo je viac než dosť
• Či už používate pero a papier alebo softvér pre vývojové diagramy, udržujte veci čo najčistejšie a usporiadané. Hoci ste vy (a ktokoľvek, kto s vami spolupracuje) jediní, ktorí budú používať vývojový diagram, stále to musí dávať zmysel – Vaše primárne sekcie by mali používať širšie výrazy, zatiaľ čo sekundárne a terciárne výrazy by mali byť popisnejšie.

Donts
Vytvorenie vývojového diagramu je celkom jednoduché; existuje však niekoľko chýb, ktoré sa dajú ľahko urobiť:

• Vo svojej primárnej navigácii nepoužívajte veľmi popisné výrazy, pokiaľ sa celá vaša webová lokalita nezameriava na jednu úzku tému – Nepokúšajte sa hádzať viacero tém na tú istú stránku. Vytvorte všeobecnú sekciu pre tieto témy az tejto sekcie vytvorte podsekcie. Tým sa zvýši pravdepodobnosť, že podsekcia (popisných) webových stránok bude mať lepšie hodnotenia vo vyhľadávačoch (Google, Yahoo, MSN, Ask) Po vytvorení stručného a popisného vývojového diagramu ste pripravení prejsť do druhej fázy procesu tvorby webu:

2. fáza: Modelovanie
Vo fáze modelovania sa vytvárajú statické „drôtové“ modely. Každá maketa zobrazuje kostru rozloženia každej webovej stránky, ktorá bude súčasťou vašej webovej lokality. Táto fáza je dôležitá, pretože nám dáva predstavu o tom, kde budú v našom dizajne umiestnené rôzne prvky. Niektoré z týchto prvkov sú:

• logo
• navigačné menu
• obsah
• obrázky, videá

Na vytvorenie týchto makiet môžete použiť pero a papier alebo preferovaný softvér na vytváranie makiet. V minulosti sme používali Photoshop, ale v poslednej dobe sme používali OmniGraffle Professional. OmniGraffle nie je taký náročný na zdroje ako Photoshop a umožňuje nám zostaviť naše drôtené modely oveľa rýchlejšie.

Okrem toho sa uistite, že máte nablízku vývojové diagramy, ktoré ste vytvorili, pretože sa na ne budete musieť z času na čas odvolať, aby ste sa uistili, že zosmiešňujete všetky stránky, ktoré sa objavia na vašom webe.

Tu je náš príklad toho, ako by mala vyzerať maketa drôtového modelu. Ako vidíte, nie sú zahrnuté žiadne farby ani grafika. Presne taká by mala byť maketa drôtového modelu – skeletové rozloženie vášho návrhu. Účelom je mať všeobecnú predstavu o tom, kde budú umiestnené jednotlivé prvky webovej stránky.

Zvyčajne začíname vľavo hore a postupujeme dole. Neexistuje žiadny konkrétny spôsob, ako by mal drôtený model vyzerať. Použi svoju predstavivosť. Dbajte však na to, aby ste pri vytváraní svojich drôtových modelov nezabudli zahrnúť najdôležitejšie prvky webovej stránky (logo, navigačné menu, umiestnenie obsahu, umiestnenie obrázkov/videa).

Ak niektoré z vašich stránok budú používať rovnaké rozloženie, potom nie je potrebné zosmiešňovať všetky tieto stránky (hoci určite môžete). Uistite sa, že ste vytvorili maketu akéhokoľvek jedinečného rozloženia, ktoré bude mať váš web. Neskôr sa poďakuješ.

The Do's

• maketa všetkých jedinečných stránok
• zahrňte dôležité prvky (logo, navigáciu, umiestnenie obsahu, umiestnenie obrázkov/videa) -začnite zhora a postupujte smerom nadol -odkaz na svoj vývojový diagram vytvorený v 1. fáze, aby ste nezabudli napodobniť žiadne stránky -uložiť, uložiť, uložiť – podobne ako čokoľvek iné na počítači, uložte si maketu približne každých 10 minút
• zamerajte sa na čisté, užívateľsky prívetivé rozloženia – označte svoje prvky, aby ste nezabudli, čo sú zač, keď na ne budete odkazovať v 3. fáze, realizácia – použite iné webové stránky ako inšpiráciu; nie je nič zlé na tom, že si prevezmete prvky z iných stránok a urobíte ich svojimi vlastnými (pozri „donts“)

The Dont's

• nezahŕňajte grafiku ani farby (to je pre ďalšiu fázu) - nezaťažujte svoje makety; zamerať sa na čisté, dobre organizované a užívateľsky prívetivé rozloženia – túto fázu nepreskakujte; je rovnako dôležitá ako prvá a posledná - ak preberáte prvky z iných webových stránok, uistite sa, že neplagiujete; je rozdiel inšpirovať sa inou webovou stránkou na vytvorenie určitých prvkov vášho dizajnu a nehanebne vytrhnúť ich rozloženie a farby

3. fáza: Poprava
V tretej a poslednej etape, realizácii, sa plánovanie z 1. a 2. etapy skombinuje, aby pomohla vytvoriť živú interaktívnu webovú stránku.
Tretia fáza je časovo najnáročnejšia, pretože budete 1) vytvárať grafiku, 2) vytvárať obsah a nakoniec 3) konvertovať webové návrhy z obrázkov do kódu, ktorý webové prehliadače používajú na prezentáciu vašej webovej stránky svetu.

Keď sa dostanete do tretej fázy, mali by ste mať jasnú predstavu o:

• ako sa vaši návštevníci dostanú z jedného miesta na druhé (1. fáza, vývojový diagram) – ako budú usporiadané vaše webové stránky (2. fáza, makety drôtového modelu)

Ak o týchto dvoch veciach nemáte jasnú predstavu, vráťte sa k prvej a druhej fáze a pokračujte v ich rozvíjaní. Zistíte, že tretia fáza je najjednoduchšia, keď si vytvoríte jasný a stručný bojový plán na navrhovanie vašej webovej stránky.

Zahoďte pero a papier
Vo fáze 3 musíte používať Photoshop alebo iný program na úpravu obrázkov, pretože na vytvorenie rozloženia pre svoju webovú stránku budete používať farby a grafiku.

Zvyčajne začíname vytvárať „domovskú“ stránku (index) ako prvú. Použite drôtové modely, ktoré ste vytvorili vo fáze 2, ako šablónu pre každú stránku, ktorú vytvoríte. Namiesto pevných políčok však použite grafiku, farby a text. Každá stránka musí vyzerať presne tak, ako chcete, aby vyzerala na internete, pretože toto je posledná fáza procesu návrhu.

Nezabudnite zahrnúť pozadie pre vašu navigáciu (ale v skutočnosti nepridávajte text do obrázka). Pri konverzii pomocou CSS (kaskádových štýlov) by vaša navigácia mala byť vo forme textu a nie obrázkov. Vyhľadávacie nástroje nemôžu prehľadávať obrázky (kľúčové slová použité vo vašej navigácii nebudú indexované na stránkach s výsledkami vyhľadávacieho nástroja, čo znamená, že vašu webovú stránku bude môcť nájsť menej ľudí).

Keď ste spokojní so svojimi návrhmi a cítite, že sú pripravené na umiestnenie na internet, je čas rozložiť návrhy, aby ste mohli vytvoriť rozloženie založené na CSS. Ďalšie informácie o prevode rozložení do CSS alebo o označovaní webových stránok v CSS nájdete na stránke w3schools.com. Keď sme sa rozhliadli po internete, nenašli sme slušný návod na konverziu obrázkov do CSS – takže ho od nás v najbližších týždňoch očakávajte. Konverzia návrhov do CSS je mimoriadne dôležitá, pretože rozloženia tabuliek sú minulosťou.

Tu je príklad takmer dokončenej webovej stránky s rozložením, ktoré sme vytvorili vo fáze 2. Toto bolo prevzaté priamo z nášho webového prehliadača a ako môžete vidieť, teraz je tu logo, farby, pekný navigačný systém, päta, a čo je najdôležitejšie, čisté, organizované usporiadanie.
Vďaka plánovaniu v etapách 1 a 2 je náš layout dobre organizovaný a ľahko použiteľný.

Dos

• odkazujte na svoje šablóny, ktoré boli vytvorené vo fáze 2; aj keď je v poriadku odchýliť sa od pôvodného rozloženia, nemusíte to robiť
• urobte si prieskum pred vytvorením svojho skutočného dizajnu; získajte nápady z iných stránok a prispôsobte si ich (bez plagiátorstva)
• zahrňte farbu a grafiku na vytvorenie konečného vzhľadu svojich webových stránok -použite CSS (kaskádové štýly) na konverziu svojich návrhov z obrázkov na značky zrozumiteľné pre webové prehliadače - pri kódovaní stránok pomocou hypertextových odkazov použite vývojový diagram z 1. fázy; je lepšie použiť rozbaľovaciu ponuku, ktorá obsahuje všetky (alebo väčšinu) odkazov na vašej webovej lokalite na každej stránke; to umožní jednoduchšiu navigáciu a tiež uľahčí prehľadávanie vašich stránok, keď sa pri nich zastavia vyhľadávače; skvelým miestom na získanie rozbaľovacích ponúk CSS je stránka DynamicDrive.com – dokončite svoj dizajn pri práci vo Photoshope alebo v akomkoľvek softvéri na úpravu obrázkov, ktorý používate; môže byť náročné vykonávať zmeny vo vašom dizajne, keď sa zmení na značku (kód)

Donts

• nezahŕňajte text do navigačných ponúk pri konverzii na CSS; namiesto obrázkového textu použite bežný text, ktorý je čitateľný pre vyhľadávače
• pri prevode nepoužívajte tabuľky; aj keď si potrebujete kúpiť knihu o CSS, bude to stáť za to; stoly sú mŕtve
• nepreskakujte prvé dve fázy, len aby ste ušetrili čas; váš web BUDE lepší, ak začnete od začiatku procesu tvorby webu (namiesto na konci)
• nezabudnite skomprimovať obrázky, keď sú rozrezané pre CSS; nie je nič horšie ako pomalé načítavanie webovej stránky kvôli veľkým súborom obrázkov; Photoshop má možnosť „Uložiť optimalizované pre web“ (CS3 – „Uložiť pre web a zariadenia“)

Proces robí majstra
Dodržiavaním procesu tvorby webu, ako je ten, ktorý je znázornený v tomto článku, zvýšite šance na vytvorenie webovej lokality, ktorá je dobre organizovaná, ľahko navigovateľná a veľmi príjemná pre používateľov. Priznajme si to – ak sa návštevníci stratia alebo budú zmätení pri pokuse o surfovanie na vašich webových stránkach, môžu stlačiť tlačidlo Späť a hľadať používateľsky prívetivejšie webové stránky. Ľudia neradi premýšľajú, pokiaľ ide o orientáciu na webových stránkach. Nenúťte ich rozmýšľať. Urobíte to tak, že naplánujete svoju webovú stránku od fázy 1 do fázy 3 a zistíte, že vašu webovú stránku bude radi navštevovať viac ľudí.