Koncem srpna nás kontaktoval zástupce České stomatologické akademie s přáním vytvořit novou ucelenou webovou prezentaci. Dalším požadavkem bylo vytvořit online řešení aplikace Max (zúčtovací software pro zubaře) a zároveň intuitivní rozhraní pro tvorbu a správu webových prezentací zubařů.

Po předání kompletního zadání dílčích projektů, jsme klientovi předložili cenovou nabídku a odhad časové náročnosti realizace.

Ve výběrovém řízení jsme zvítězili s nejlepším poměrem cena/výkon, nebránilo nám tedy nic v tom, předvést naše schopnosti.

S vývojem jsme začali již v den podepsání smlouvy a měsíc po té se můžeme pochlubit s téměř kompletní funkčností všech webových aplikací.

Grafický design aplikace Max online, Max web a webu DentalMax vychází z kombinací modrých odstínů s kombinací bílé tmavě modré a tyrkysové barvy. Vytvořili jsme tak základní corporate identity.

Více informací o aplikacích Max Online a Max Web můžete vyčíst z brožurek, které jsme vytvořili k propagaci těchto produktů na veletrhu Pragodent.

Ukázka aplikací:

Aplikace MaxWeb

Jedná se o na zakázku navrženou webovou stránku (multisite) pro stomatologické praxe. Její klíčovou vlastností je jednoduchost a přehlednost. Pouze kliknutím na jediné tlačítko můžete lehce editovat obsah webové stránky, přidávat obrázky do galerie a měnit barevné schéma webu.

Aplikace MaxOnline

Na zakázku vytvořená CLOUD aplikace MaxOnline, jako náhrada za starou verzi pro Windows. MaxOnline slouží jako zúčtovací nástroj pro stomatology s možností automatického exportu ceníku na internetové stránky MaxWeb, tisku a tvorby dokladů a bleskového vyúčtování.

Více informací naleznete na webových stránkách www.dentalmax.cz

Fiktivní společnost Nábytek Vystrčil, s.r.o., kterou náš klient vlastní se zabývá distribucí a výrobou nábytku z masivu. Vlastní výrobní halu, která dominuje nejmodernější technologií a distribuční středisko.  Pro návrh našeho designu, budou tyto informace a podklady klíčové k vytvoření základní palety barev, které budou spolu s logotypem tvořit část firemní identity (Corporate Identity).

Nástrojů a pomůcek pro návrh palety barev existuje celá řada. Jedním z nich je online aplikace KULER. Nabízí vám možnost si vybrat již z vytvořených schémat, nebo si můžete vytvořit schéma vlastní.

Já jsem vybral již vytvořené schéma, které odpovídá barvám loga společnosti a obsahuje i barvy různých druhů odstínů. Samotné schéma si můžete upravit dle libosti.

Tvorba wireframe neboli skici webu

Nyní, když už máme vybrané barevné schéma je načase vytvořit wireframe = (skica webu). Na tvorbu wireframe nepotřebujete žádné speciální utility či programy, můžete použít svůj bloček a tužku. Důkladně si rozmyslete a nakreslete různé varianty rozmístění jednotlivých boxů hlavní stránky a podstránek. Někteří designéři tento krok často podceňují a záměrně vynechávají, my si však chceme být jisti, že zákazníkovi daná struktura webu bude vyhovovat.

Pokud se vám nechce kreslit wireframes ručně, tak jako mně, doporučil bych program Pencil. Obsahuje různé vychytávky jako (Touch Screen Hand Gesture, Famfamfam Flag icons atd.), které si stačí stáhnout ze stránek a doinstalovat.

Pro ty línější existuje online nástroj Balsamiq Mockups. Pokud vám nepřijde zrovna vhod, využijte Google a vyhledejte si jiný. Na internetu je těchto nástrojů opravdu velká spousta.

Jakmile máme schváleny jednotlivé wireframy a celkovou strukturu obsahu webové stránky, nic nám nebrání začít vytvářet grafickou část firemní prezentace.

Dobrým pomocníkem při návrhu designu je 960 grid systém.

Grafický návrh

Ještě před tím, než začnete designovat, rozmístěte si správně základní vodítka (Photoshop ->menu->zobrazení->nové vodítko). Vodítka ve photoshopu slouží jako pomocník, který vám zabrání přesažení velikosti vymezeného layoutu. Pomůže nám tedy udržet konstantní šířku stránky (960px) atp.

Pokud jste aspoň trošku zkušený designér a máte vlastní kreativní nápady, nezapomeňte na jednoduchost a hlavně použitelnost webu. Nechceme, aby naše kreativní výstřelky stěžovali návštěvníkům orientaci na stránce a posléze kodérům jejich práci. Dále bych doporučil klást důraz na přehlednost struktury jednotlivých vrstev designu. Každou vrstvu je nutné náležitě pojmenovat a zařadit ji do té správné složky.

Jak navrhnout grafiku pro web?

Při tvorbě dbáme především na uživatele, kteří budou naši stránku používat.

Dbáme na uživatele webu

Stránku musíme přizpůsobit cílové skupině uživatelů, je dobré při návrhu zachovat základní konvenci.

Standartní prvky na webu:

• Logo v hlavičce webu odkazující zpět na hlavní stránku
• Fulltextové vyhledávání umístěné v pravo nebo ve středu nahoře
• Menu stránky horizontální nebo vertikální
• Navigace (u obsahově bohatších stránek – e-shopů atp.)
• Změna barvy odkazu po najetí
• Mapa stránek umístěná v patičce webu
• Nákupní košík u e-shopu umístěný v pravo nahoře

Každý člověk, muž i žena vnímá různé podněty odlišně. Grafický vzhled webu proto optimalizujeme pro ty, kteří ho budou skutečně používat.

Pokud to s použitelností webu myslíte skutečně vážně, doporučuji vám knihu Webdesign, Nenuťte uživatele přemýšlet (Steve Krug ).

Jakmile je návrh hotov, necháme ho schválit zadavatelem (klientem). V průběhu tvorby designu je dobré klientovy pravidelně zasílat náhledy vaší práce k vyjádření. Jakmile je klient spokojen, máte hotovo.

Tento článek není podrobným návodem výroby grafického designu, ale snaží se popsat soubor konvenčních postupů a kroků důležitých k tvorbě návrhu.

O tom, které z faktorů, má ten pravý význam pro vyhledávání se vedou různé rozepře. Proto společnost SEOmoz pořádá průzkum názorů předních odborníků v oblasti SEO optimalizace, ze kterého sestavuje tabulku faktorů a jejich vliv (odkaz: tabulka on-page faktorů při vyhledávání).

Jaké faktory na webových stránkách (on-page faktory) jsou považovány za klíčové?

1) URL adresa stránky (Uniform Resource Locator)

Url adresa stránky by měla být na první pohled jednoduchá a lehce zapamatovatelná. Pokud je to možné, vyberte url obsahující klíčové slovo, na kterou stránku optimalizujete. Url s klíčovým slovem vzbuzuje větší důvěru ve výsledcích vyhledávání (hledané výrazy jsou zvýrazněny tučným písmem).
Stejně jak jsou důležitá klíčová slova v doméně, tak je podstatné, jak vypadá celá adresa url. V souvislosti s optimalizací pro vyhledávače jste se možná někdy setkali s pojmem SEO frendly URL (SEF). Jak by měla adresa SEF vypadat a co by měla splňovat si ukážeme na tabulce 1.1.

2) Titulek stránky

Titulek stránky je jeden z nejdůležitějších (on-page) faktorů, najdete jej v HTML kódu pod značkou <title>Titulek vaší stránky</title>. Titulek říká vyhledávačům, jaký obsah se na stránkách nachází a zároveň se zobrazuje ve výsledcích vyhledávání jako modrý nadpis.

Dobře zvolený a srozumitelný titulek stránky korespondující s jejím obsahem i tím co lidé hledají, může stránce ve výsledcích vyhledávání honě pomoci, nebo naopak při nevhodném zvolení i uškodit.

3) Popis stránky

Každá stránka by měla obsahovat i popis stránky, ten je skryt pod meta značkou (description).

Popis stránky není při prohlížení stránky vidět, ale pro uživatele má velký význam, jelikož vyhledávače do svých výsledků tento popis zahrnují jako úryvek textu (toto platí u Googlu), ostatní vyhledávače zobrazují text kolem hledaného výrazu na dané stránce.

Ukázka meta značky popisující  stránku:

<meta name=“description“ content=“Tvorba webových stránek. Vytváříme webové stránky na míru dle přání našich klientů. Webové stránky na klíč“ />

4) Nadpisy na stránce

Nejdůležitějším nadpisem je ten který se nachází v html značce <h1>. Tento nadpis zároveň zachycuje pozornost návštěvníků, protože jim ve zkratce sděluje to, co na stránce mohou najít. Měl by tedy vyjadřovat stručně obsah stránky a také by měl být odlišný od titulku stránky.

Podnadpisy <h2>,<h3> ,<h4> mají menší význam, mohou však uživatelům přispět k lepší orientaci na webu.

5) Zbylé faktory v bodech

• Používat klíčové slova v textu a zvýraznění pomocí html značek (<i>,<strong>,<i>,<em>)
• Ke každému obrázku na stránce přidat popis do atributu alt
• Rovněž u všech odkazů na stránce uvádět atribut title
• Text odkazu by měl obsahovat klíčové slovo, které je na stránce, na niž odkazuje
• Validní kód html, css. O tom zda jsou vaše stránky validní, se můžete přesvědčit na stánkách konsorcia Word Wide Web (http://validator.w3.org/).

Co by nemělo mezi klíčovými slovy chybět:

• Název organizace.
• Název stránek (serveru)
• Název produktu, který vyrábíte/prodáváte
• Slova nejlépe vystihující druh vašeho podnikání, typ služeb a nabízené výrobky
• Řešení problémů, které vaše výrobky nabízí
• Více slovné výrazy a různé varianty slov podobných, synonym, hovorových výrazů

Jak vybrat klíčová slova ?

Pro výběr klíčových slov můžeme použít různé techniky a nástroje. Společnost Google vyvinula nástroj pro návrh klíčových slov, který najdete na adrese https://adwords.google.com/, ovšem musíte mít založený Gmail účet. Po přihlášení v menu „přehledy a nástroje“ zvolíte „Návrhy klíčových slov“ a můžete začít tvořit.

Dalším pomocníkem při analýze klíčových slov a zároveň i konkurence jsou google statistiky vyhledávání (Google insights –  http://www.google.com/insights/search/). Tento nástroj vám umožní porovnávat objemy vyhledávání mezi jednotlivými oblastmi, kategoriemi, časovými intervaly a službami.

Nyní, pokud již máte dostatečně velký seznam klíčových slov, je třeba vybrat ta pravá. Která to ale jsou?

Na co se zaměřit při konečné volbě klíčových slov:

• vždy optimalizovat slovní spojení 2-5 slov
• hledat neobvyklá slova a slovní spojení (tato neobvyklá slova sice hledá málo lidí, ale často se z nich stávají budoucí zákazníci)
• neoptimalizovat příliš obecná slova, která bývají často více konkurenční
• neoptimalizovat na příliš konkrétní slova, která by nikdo nehledal
• využívat synonyma, antonyma
• u e-shopů a reklamních stránek používat akční slova (výhodná koupě, sleva, zdarma)
• využít místní názvy například název obce kde vaše firma působí, pokud plánujete optimalizovat pro lokální trh

Závěrem tohoto SEO tipu si pamatujte, že výběr správných klíčových slov je pro cílení vašeho webu to nejdůležitější, neboť to výrazně napomáhá lidem, kteří váš web hledají.

S novým webech přichází i blog, ve kterém Vám budeme psát různé zajímavosti ze zákulisí naší tvorby a o tématech věnujících se především grafickému designu a programování webových aplikací.

Působíme ve Zlínském kraji (Uherském Brodě, Kroměříži, Uherském Hradišti, Zlíně, Otrokovicích), ovšem dostáváme zakázky z celé ČR i zahraničí.

Děkujeme Vám za přízeň a těšíme se na budoucí spolupráci.