Návody pro Corel – cesta ke kvalitnímu webdesignu

Corel je vektorový grafický editor, tedy program umožňující vám vytvářet a upravovat soubory s vektorovou grafikou. Vektorové editory jsou dobré pro tvorbu diagramů, schémat, technických výkresů, nákresů s ostrými hranami, ale také návrhů webových stránek. Corel Draw podporuje i vytváření jednoduchých animací. Základní formát souboru je CDR, ale data mohou být ukládána v některém z dalších formátů jako např. EPS, PDF, WMF nebo SVG. Předpokladem dobrého webdesignu je, že uživatel na webové stránce snadno provede zamýšlený úkon - tedy tak jednoduše, jak je to jen možné.

Faktem je, že design mnoha webových stránek není dostačující, natož optimální. Stránka by měla ihned nabídnout řešení problému, který je nejběžnější - nákup, objednávka, seznam služeb, produktů a webdesign by se tomu měl přizpůsobit. Často se uvádí Amazon.com - to je příkladná stránka, na které snadno interagujete, ačkoli je tento web velký a komplexní. Webdesign je vlastně nové řemeslo - manuální dovednost, provozovaná většinou za účelem obživy, ale i pro zábavu.

Důležité je řemeslo zvládnout - naučit se některý z grafických programů - a soustředit se posléze na kvalitu vytvářené grafiky. Vysoký podíl ruční práce, spojený s používáním mnoha nástrojů a pomůcek - může tuto činnost a tedy vysokou kvalitu výstupu velmi zkomplikovat. Webdesign je základem pro následnou výrobu webových stránek. Intelektuální dovednosti a osobní schopnosti, manuální zručnost, odborné znalosti a zkušeností grafika z webdesignu dělají umělecké řemeslo v širším slova smyslu.

Definice webdesignu

Proč je webdesign důležitý?

Výsledný webdesign stránek je komplex důležitých částí celého souboru faktorů, které působí na návštěvníka. Do tohoto souboru patří především

  • přehlednost, a dostupnost informací
  • přehlednost a dostupnost funkcí
  • vizuální prestiž stránek

Webdesign podtrhuje a podporuje přehlednost. Dobrý webdesign jednoduše odlišuje jednotlivé části webových stránek a usnadňuje tak orientaci. Žádná renomovaná firma si nedovolí mít neprofesionální webdesign svých stránek také z těchto důvodů:

  • návštěvník se v drtivé většině o dalším používání stránek rozhoduje podvědomě a teprve poté si jej racionálně zdůvodní
  • internetový uživatel pokračuje v prohlížení pouze těch stránek, kterým důvěřuje

Všichni marketingoví odborníci dobře vědí, že i webdesign je to, co prodává produkt!

Webdesign je činnost, při které jsou navrhovány webové stránky a webové aplikace. Spočívá v návrhu struktury a vzhledu webových stránek, přičemž pro realizaci se používají zejména technologie (X)HTML (pro strukturu a textový obsah) a CSS společně s obrázky(PNG, GIF, JPG), které tvoří grafickou podobu webu. Navíc se někdy používají další technologie umožňující vyšší interaktivitujako např. JavaScript, SVG, Flash či Java applety. Do webdesignu někdy lze počítat také části tvorby serverové části aplikací – programování v jazycích jako PHP či ASP – a záležitosti spojené se zvyšováním úspěšnosti stránky (SEO, copywriting).

Důležité aspekty při tvorbě webových stránek

  • Použitelnost a přístupnost webové stránky – tedy správné zobrazení v různých prohlížečích (Internet Explorer, Mozilla Firefox, Opera, Safari, Netscape Navigator a dalších)
  • Dobrá stylizace, kvalitní webdesign a snadná ovladatelnost i přehlednost
  • Beztabulkový layout – ten umožňuje prohlížet webovou stránku, pokud návštěvník používá čtečku
  • Popisky u obrázků a odkazů webové stránky
  • Možnost používat klávesové zkratky pro zjednodušení procházení webových stránek
  • Jasné a zřetelné zobrazení odkazů – například jinou barvou a podtržením

Webdesign může označovat jak činnost, tak výsledný produkt – tedy webové stránky. Kvalitu webových stránek můžeme hodnotit dle různých kritérií. Nejdůležitější je snad přehlednost a použitelnost. Pokud např. nevidomí nemohou využívat všech funkcí díky vstupním nebo výstupním zařízením (např. hlasová čtečka či uživatelé pouze s klávesnicí), je to mínus. Pokud se ale dostanou ke všem textům, je to dostačující. Nástroje, který nám pomůže kvalitu exaktně kontrolovat, je takzvaná validita webové stránky, tedy dodržení pravidel vytvořených konsorciem W3C.

Kvalitní webové stránky se zařazují do takzvaných galerií. V těchto galeriích webů můžete nalézt inspiraci nejen vy, ale webdesignéři z celého světa. Příklad galerie je www.thefwa.com, které obsahuje převážně flashové webové stránky, nebo www.newwebpick.com, který ohodnocuje i stránky stavěné běžným html a javascriptem.

Cíl webdesignu je propojit funkce a vizuál tématu, který je potřeba odkomunikovat. Nové technologie umožňují do webových stránek vnést atmosféru, například pomocí animací a hudby.

Optimalizace webdesignu pro uživatele

Optimalizace pro uživatele je nutná pro

  • nastavení co nejpřímější cesty uživatele k důležitým informacím či produktům
  • snadnou orientaci uživatele po celém webových stránkách
  • tvorbu kvalitního webdesignu
  • optimalizaci pro vyhledávače (SEO)

Dodavatel v rámci optimalizace pro uživatele zpracuje

  • Seznam šablon
  • Definice jednotlivých šablon ve formě textového wireframe
  • Hierarchii obsahu – tzv. mapu webu včetně přiřazení šablon jednotlivým sekcím

Co je to textový wireframe:

Textový wireframe je seznam obsahu, funkční prvků a dalších elementů ke každé šabloně stránky. Promyšlený textový wireframe je stěžejní pro uživatelský komfort na stránkách. Dá se přirovnat k seznamu objektů a funkcí při návrhu půdorysu domu – dobré promyšlení pater, místností, jejich velikostí, návazností, propojení a rozmístění nábytku a funkcí je klíčem k příjemnému obývání. Webdesign má svá pravidla, aby se ze stránek nestal kýč. I návštěvník stránek by se měl ihned dobře zorientovat. Neměl by být zahlcen množstvím obsahu na jednom místě, ani by neměl procházet složitou strukturou poloprázdných stránek.

Stavba wireframe webových stránek

Co je to grafický wireframe

Grafický wireframe definuje rozložení obsahu a funkčních prvků na stránce (tedy na obrazovce). Zpracovává se ve formě obdélníkových objektů, které symbolizují textové, grafické i funkční prvky (například menu, anketa) na budoucí stránce a určují jejich vzájemné pozice a proporce. Grafický wireframe není návrhem webdesignu, je to pouze příprava ideálního rozložení objektů, které se budou dále „oblékat“ do kvalitního webdesignu. V rámci tohoto návrhu se nepoužívají se barvy, výjimkou jsou pouze barvy pro zpřehlednění (např. odlišení funkčních, obsahových a imageových částí). Při tvorbě wireframe můžete použít Corel Draw.

Dobře navržený webdesign totiž zvýrazní důležité informace (např. navigaci), usnadní vstřebávání textu (typ písma, zarovnání, šířky a výšky řádků...), podpoří sémantiku dokumentu (tj. logické navaznosti informací, např. nadpisy a podnadpisy) a má mnoho dalších úkolů.

Stavba grafického wireframe je nutná pro

  • Snadnou orientaci uživatele na stránce
  • Zdůraznění důležitých funkcí a obsahu na stránce
  • Přípravu kvalitního webdesignu
  • Optimální využití obrazovky

Dodavatel v rámci stavby grafického wireframe zpracuje

  • Grafického wireframe (rozložení) definice jednotlivých šablon ve formě
  • Hierarchii obsahu – tzv. mapu webu včetně přiřazení šablon jednotlivým sekcím
  • Přípravu pro webdesign