Co dělat a co nedělat skvělého webdesignu

Když budete postupovat podle této příručky, ukáže se, že je docela cenným zdrojem webového designu, zvláště pokud plánujete používat software pro vývoj webových stránek v budoucnu. Od nezkušených po zkušené, tento průvodce má pro každého něco.

Proces skvělého webdesignu Abychom se ujistili, že jsme všichni na stejné stránce, začněme základní definicí pro „webdesign“. Podle Wikipedie je web design:

„proces konceptualizace, plánování, modelování a provádění doručování elektronických médií přes internet ve formě značkovacího jazyka vhodného pro interpretaci webovým prohlížečem a zobrazení jako grafické uživatelské rozhraní“ .

Proces tvorby webu lze přirovnat k procesu psaní výzkumné práce. Ve fázi konceptualizace/plánování se vytvoří vývojové diagramy (nákres), které ilustrují navigační strukturu vašeho webu. Ve fázi modelování jsou vytvořeny statické drátěné modely (hrubý návrh), které ilustrují skeletální rozvržení pro každou sekci vašeho webu. Po vytvoření drátěných rámů se grafika, barvy a text použijí k vytvoření designu vašich webových stránek na základě rozložení drátěných rámů. Ve fázi realizace je váš návrh převeden do formátu podporovaného webovými prohlížeči, je přidán text a obsah a nakonec je váš web zveřejněn na internetu, aby jej mohl vidět celý svět (konečný návrh).

Všechny tři fáze procesu návrhu jsou stejně důležité. Mnoho webových designérů přeskočí fázi, aby ušetřili čas nebo protože si nemyslí, že je to nutné. Všechny tři fáze jsou však nezbytné, pokud je vaším cílem vytvořit úspěšný design a slušný web. I když jsou použity tři fáze, existuje mnoho chyb, kterých se mohou weboví designéři dopustit a které povedou k nekvalitním a uživatelsky nepřívětivým webům. Je čas vyčistit skříň od špatných webdesignových praktik a doplnit ji těmi dobrými.

Fáze 1: Konceptualizace a plánování
Tato fáze se přeskakuje častěji než ostatní dvě fáze. Většinu autorů nebaví vytvářet osnovy pro výzkumné práce a většina webových designérů také nerada vytváří vývojové diagramy. Nebuďte líní. Pokud vynaložíte úsilí a naplánujete svůj web, zjistíte, že proces návrhu webu bude probíhat hladce a s menším počtem chyb.

Existuje několik věcí, které budete potřebovat, abyste mohli efektivně koncepčně a plánovat svůj web:

• mozek
• tužku a papír
• (volitelný) software pro vývojový diagram
• obecnou představu o různých částech vašeho webu

Chcete-li začít, popadněte pero a papír nebo spusťte svůj oblíbený software pro vývojový diagram. Používáme OmniGraffle Professiona pro Mac OS X, který stojí 150 $ za licenci, ale stojí za to, pokud vytváříte webové stránky pravidelně. Pokud jste na PC, pak SmartDraw je skvělý bezplatný software pro vývojový diagram, který můžete použít. Tužka a papír však fungují dobře.

Existuje mnoho metod vytváření vývojových diagramů. Ukážeme vám nejzákladnější způsob, jak to udělat, s ohledem na čas a délku tohoto článku. Pokud se chcete dozvědět více o vývojových diagramech, vyhledejte vývojové diagramy na Google nebo Yahoo.

Podívejte se na vývojový diagram, který jsme vytvořili při konceptualizaci chromatických webů. (1) V horní části vývojového diagramu uvádíme název našeho webu. (2) Dále uvádíme každou primární sekci našeho webu: Domovskou stránku, O aplikaci a Služby. Tyto sekce jsou hlavní navigací vašeho webu. To, jak se budou jednotlivé sekce jmenovat, zcela závisí na obsahu vašeho webu. Snažte se používat co nejméně sekcí, aby vaši návštěvníci nebyli při procházení webu zahlceni.

(3) Dále přidejte všechny sekundární stránky (podsekce), které budou uvedeny na každé z primárních stránek. Pro Home jsme zahrnuli profesionální webový design, webový vývoj a optimalizaci pro vyhledávače. Sekundární navigace musí být popisnější než primární navigace. Čím hlubší je navigační hierarchie vašich webových stránek, tím popisnější by měl být každý štítek.

Dos

• Méně je více; omezte počet primárních sekcí na minimum. Na našem webu používáme 6 sekcí, což je více než dost
• Ať už používáte tužku a papír nebo software pro vývojový diagram, udržujte věci co nejčistší a uspořádané. Přestože jste vy (a kdokoli, kdo s vámi spolupracuje) jediní, kdo bude vývojový diagram používat, stále to musí dávat smysl – Vaše primární sekce by měly používat širší termíny, zatímco sekundární a terciární termíny by měly být popisnější.

Donts
Vytvoření vývojového diagramu je docela jednoduché; existuje však několik chyb, které lze snadno udělat:

• Nepoužívejte ve své primární navigaci velmi popisné výrazy, pokud se celý váš web nezaměřuje na jedno úzké téma – Nepokoušejte se házet více témat na stejnou stránku. Vytvořte obecnou sekci pro tato témata az této sekce vytvořte podsekce. Díky tomu budou mít podsekce (popisné) webové stránky s větší pravděpodobností lepší hodnocení ve vyhledávačích (Google, Yahoo, MSN, Ask) Jakmile vytvoříte stručný a popisný vývojový diagram, jste připraveni přejít do druhé fáze procesu tvorby webu:

Fáze 2: Modelování
Ve fázi modelování jsou vytvořeny statické makety „drátového modelu“. Každá maketa ilustruje kostru rozložení pro každou webovou stránku, která bude součástí vašeho webu. Tato fáze je důležitá, protože nám dává představu o tom, kde budou v našem návrhu umístěny různé prvky. Některé z těchto prvků jsou:

• logo
• navigační menu
• obsah
• obrázky, videa

K vytvoření těchto maket můžete použít tužku a papír nebo preferovaný maketový software. V minulosti jsme používali Photoshop, ale v poslední době používáme OmniGraffle Professional. OmniGraffle není tak náročný na zdroje jako Photoshop a umožňuje nám sestavit naše drátěné modely mnohem rychleji.

Kromě toho se ujistěte, že máte v blízkosti vývojové diagramy, které jste vytvořili, protože na ně budete muset čas od času odkazovat, abyste se ujistili, že zesměšňujete všechny stránky, které se na vašem webu objeví.

Zde je náš příklad toho, jak by měla vypadat maketa drátového modelu. Jak vidíte, nejsou zahrnuty žádné barvy ani grafika. Přesně takový by měl být model drátěného modelu – kostra vašeho návrhu. Účelem je mít obecnou představu o tom, kde budou umístěny jednotlivé prvky webové stránky.

Obvykle začínáme zleva nahoře a postupujeme dolů až dolů. Neexistuje žádný konkrétní způsob, jak by měl drátěný model vypadat. Použij svou představivost. Dbejte však na to, abyste při vytváření svých drátových modelů nezapomněli zahrnout nejdůležitější prvky webu (logo, navigační menu, umístění obsahu, umístění obrázků/videí).

Pokud některé z vašich stránek budou používat stejné rozvržení, pak není nutné všechny tyto stránky zesměšňovat (i když určitě můžete). Nezapomeňte vytvořit maketu jakéhokoli jedinečného rozvržení, které bude mít váš web. Později si poděkujete.

Dělat

• maketa všech unikátních stránek
• zahrňte důležité prvky (logo, navigaci, umístění obsahu, umístění obrázků/videa) -začněte odshora a postupujte dolů -odkažte se na svůj vývojový diagram vytvořený ve fázi 1, abyste nezapomněli napodobit žádné stránky -uložit, uložit, uložit – jako u čehokoli na počítači ukládejte své makety každých 10 minut
• zaměřte se na čisté, uživatelsky přívětivé rozvržení – označte své prvky, abyste nezapomněli, jaké jsou, když na ně odkazujete ve fázi 3, provedení – použijte jiné webové stránky jako inspiraci; není nic špatného na tom, když si vezmete prvky z jiných stránek a uděláte si je vlastní (viz „donts“)

Dont's

• nezahrnujte grafiku ani barvy (to je pro další fázi) - nezatěžujte své makety; zaměřte se na čisté, dobře organizované a uživatelsky přívětivé rozvržení – tuto fázi nepřeskakujte; je stejně důležitá jako první a poslední - pokud přebíráte prvky z jiných webových stránek, ujistěte se, že neplagiujete; je rozdíl mezi tím, když se necháte inspirovat jinou webovou stránkou k vytvoření určitých prvků vašeho designu, a očividně vytrhnete jejich rozložení a barvy

Fáze 3: Provedení
Ve třetí a poslední fázi, provádění, se plánování z fází 1 a 2 spojí, aby napomohly vytvoření živé interaktivní webové stránky.
Třetí fáze je časově zdaleka nejnáročnější, protože budete 1) vytvářet grafiku, 2) vytvářet obsah a nakonec 3) převádět webové návrhy z obrázků do kódu, který webové prohlížeče používají k prezentaci vašeho webu světu.

Než dosáhnete třetí fáze, měli byste mít jasnou představu o:

• jak se vaši návštěvníci dostanou z jednoho místa na druhé (fáze 1, vývojový diagram) – jak budou vaše webové stránky rozvrženy (fáze 2, drátové modely)

Pokud o těchto dvou věcech nemáte jasnou představu, vraťte se k první a druhé fázi a pokračujte v jejich rozvoji. Zjistíte, že třetí fáze je nejjednodušší, když si vytvoříte jasný a stručný bojový plán pro navrhování vašich webových stránek.

Zahoďte tužku a papír
Ve fázi 3 musíte používat Photoshop nebo jiný program pro úpravu obrázků, protože budete používat barvy a grafiku k vytvoření rozvržení pro svůj web.

Obvykle začínáme nejprve vytvářet „domovskou“ stránku (index). Použijte drátové modely, které jste vytvořili ve fázi 2, jako šablonu pro každou ze stránek, které vytvoříte. Místo plných rámečků však použijte grafiku, barvy a text. Každá stránka musí vypadat přesně tak, jak chcete, aby vypadala na internetu, protože toto je poslední fáze procesu návrhu.

Nezapomeňte zahrnout pozadí pro vaši navigaci (ale ve skutečnosti nepřidávejte text do obrázku). Při převodu pomocí CSS (kaskádové styly) by vaše navigace měla být ve formě textu, nikoli obrázků. Vyhledávače nemohou obrázky procházet (klíčová slova použitá ve vaší navigaci nebudou indexována na stránkách s výsledky vyhledávače, což znamená, že váš web bude moci najít méně lidí).

Když jste se svými návrhy spokojeni a máte pocit, že jsou připraveny k umístění na internet, je čas návrhy rozdělit, abyste mohli vytvořit rozvržení založené na CSS. Další informace o převodu rozvržení do CSS nebo označování vašich webových stránek v CSS najdete na w3schools.com. Když jsme se rozhlédli po internetu, nemohli jsme najít slušný návod pro převod obrázků do CSS – v nadcházejících týdnech ho tedy od nás očekávejte. Převádění návrhů do CSS je nesmírně důležité, protože rozvržení tabulek je minulostí.

Zde je příklad téměř dokončené webové stránky s rozložením, které jsme vytvořili ve fázi 2. Toto bylo převzato přímo z našeho webového prohlížeče a jak můžete vidět, nyní je zde logo, barvy, pěkný navigační systém, zápatí, a co je nejdůležitější, čisté, organizované uspořádání.
Díky plánování ve fázích 1 a 2 je náš layout dobře organizovaný a snadno použitelný.

Dos

• odkazujte na své šablony, které byly vytvořeny ve fázi 2; i když je v pořádku odchýlit se od původního rozvržení, nemusíte to dělat
• před vytvořením skutečného návrhu proveďte průzkum; získat nápady z jiných webů a vytvořit si je vlastní (bez plagiátorství)
• zahrňte barvu a grafiku pro vytvoření konečného vzhledu vašich webových stránek -použijte CSS (kaskádové styly) k převodu svých návrhů z obrázků do značek srozumitelných pro webové prohlížeče -při kódování stránek pomocí hypertextových odkazů odkazujte na svůj vývojový diagram od fáze 1; je lepší použít rozbalovací nabídku, která obsahuje všechny (nebo většinu) odkazů na vašem webu na každé stránce; to umožní snazší navigaci a také usnadní procházení vašich stránek, když se u vás zastaví vyhledávače; skvělým místem pro získání rozbalovacích nabídek CSS je DynamicDrive.com – dokončete svůj návrh při práci ve Photoshopu nebo v jakémkoli softwaru pro úpravu obrázků, který používáte; může být bolestné provádět změny ve vašem návrhu, jakmile je převeden na značku (kód)

Donts

• nezahrnujte text do navigačních nabídek při převodu do CSS; místo textového obrázku použijte běžný text, který je čitelný pro vyhledávače
• při převodu nepoužívejte tabulky; i když si potřebujete koupit knihu o CSS, bude to stát za to; stoly jsou mrtvé
• nepřeskakujte první dvě fáze, jen abyste ušetřili čas; vaše webové stránky BUDE lepší, pokud začnete od začátku procesu návrhu webu (místo na konci)
• nezapomeňte zkomprimovat obrázky, když jsou rozřezány pro CSS; není nic horšího než pomalé načítání webových stránek kvůli velkým obrázkovým souborům; Photoshop má možnost „Uložit optimalizované pro web“ (CS3 – „Uložit pro web a zařízení“).

Proces dělá mistra
Dodržováním procesu návrhu webu, jako je ten, který je znázorněn v tomto článku, zvýšíte šance na vytvoření webu, který bude dobře organizovaný, snadno se s ním dá pohybovat a je velmi uživatelsky přívětivý. Přiznejme si to – pokud se návštěvníci ztratí nebo budou zmateni při pokusu o procházení vašich webových stránek, mohou stisknout tlačítko Zpět a hledat uživatelsky přívětivější web. Lidé neradi přemýšlejí, když jde o orientaci na webových stránkách. Nenuťte je přemýšlet. Uděláte to tak, že naplánujete své webové stránky od fáze 1 do fáze 3 a zjistíte, že návštěvu vašich webových stránek bude bavit více lidí.