7 základných prvkov, ktoré by mal obsahovať každý web

Chcem sa Vám všetkým poďakovať za super odozvu na rozhovor o affiliate marketingu, ktorý nájdete tu. Viacerí ste mi písali e-mail, že Vás rozhovor nakopol a dodal veľa inšpirácie. Som rád, že moja otvorenosť má pozitívne ohlasy.

Späť k seriálu

V poslednom článku sme nainštalovali WordPress pluginy. Dnes začneme s návrhom samotného webu.

Ideme riešiť grafiku? Zatiaľ nie…

Než začnete riešiť grafiku, mali by ste mať jasnú predstavu o tom ako bude web vyzerať.

Je úplne jedno, či si dáte spraviť grafiku na mieru, stiahnete si free šablónu z WordPress.com alebo si zakúpite šablónu z Themeforestu. Vždy by ste si mali nakresliť tzv. wireframe webu, aby ste si ujasnili, aké prvky bude Váš web obsahovať.

Čo je wireframe?

Wireframe je v preklade “drôtený model webu”. Podľa Wikipedie wireframe “definuje textový aj grafický obsah, rozmiestnenie funkčných prvkov, ale aj navigáciu a znenie nadpisov, kľúčových textov či tlačidiel (tzv. labeling).” 

Ako píše aj Jan Řezáč vo svojej knihe Web ostrý jako břitva, každý prvok na Vašom webe musí mať jasný význam. Podľa toho by sme mali postupovať pri tvorbe wireframe-u.

Software pre tvorbu wireframe

Pre tvorbu wireframu používam software Balsamiq, ktorý je jednoduchý a naučíte sa v ňom pracovať za pár minút. Licencia stojí 89 dolárov a je vhodný pre Mac aj Windows.

Ukážem Vám, na ktoré prvky by ste v návrhu webu určite zabudnúť nemali:

7 základných stavebných prvkov každého webu:

1. Zrozumiteľná navigácia

Navigácia - wireframe

Navigácia je základ

Ešte teraz si pamätám jeden web, ktorý som kódoval asi sedem rokov dozadu. Navrhol som tam šialené drop-down menu s tromi úrovňami a bol som na seba veľmi hrdý :D. V dnešnej dobe drop-down menu skutočne neodporúčam (môj osobný názor). Je zbytočne komplikované, neprehľadné a samozrejme úplne nepoužiteľné na mobilných zariadeniach.

Navigácia by mala byť jasná a zrozumiteľná pre Vašich návštevníkov. Mala by im pomôcť zorientovať sa na Vašom webe v priebehu pár sekúnd od prvej návštevy.

Na Výživovo.sk som si zvolil hlavnú navigáciu pomocou 2 rôznych menu, pričom farebne odlíšim button “Objednať sa”, ktorý bude slúžiť ako hlavný CTA prvok.

Ako to vyzerá si môžete pozrieť v poslednej verzii wireframe-u, ktorú si môžete stiahnuť nižšie.

Pár základných pravidiel pri navrhovaní navigácie

  • web musí obsahovať hlavné menu (napríklad v hlavičke), ktoré je viditeľné hneď po príchode na web
  • logo by malo odkazovať na hlavnú stránku
  • návštevník by mal vedieť, kde sa nachádza
  • návštevník by mal vedieť, kde už bol
  • navigácia by mala byť rovnaká naprieč celým webom
  • sitemapa by sa mala nachádzať v pätičke úplne dole

Zapämatajte si, že hlavným “poslaním” jednoduchej navigácie je spríjemniť a zjednodušiť Vaším návštevníkom používanie webových stránok.

2. Call To Action

Call To Action

Ak by ste mali definovať jeden jediný cieľ Vášho webu – čo by to bolo? Vyplnenie formulára? Objednávka? Zdieľanie článku na sociálnych sieťach?

Pre Výživovo.sk sa určite jedná o vyplnenie objednávkového formulára na výživové poradenstvo. To je hlavný cieľ webu.

Aby sme tento cieľ splnili a zarobili peniaze, musíme návštevníkov navigovať na konverznú landing page. Spravíme to pomocou jasného CTA prvku, ktorý by mal každý web obsahovať.

3. Zber e-mailov

Zber e-mailov

E-mailový marketing je u nás stále veľmi podceňovaný. Málokto ho robí a ešte menej ľudí ho robí fakt poriadne. Ja sám mám v tejto oblasti internetového marketingu veľké medzery a nehanbím sa to priznať.

Ak Vám e-mailový marketing nič nehovorí, začnite sa o tento odbor zaujímať. Pomocou žiadneho marketingového kanálu nedokážete vybudovať vzťah tak dobre ako s presne zacielenými e-mailami. Ak si s Vašou cieľovou skupinou vybudujete skutočný vzťah, odporúčanie produktov a služieb už bude hračka.

Pre Výživovo.sk mám naplánovaný e-book, pomocou ktorého budem zbierať e-mailové adresy. Čo im budem ďalej posielať ešte neviem, ale určite sa budem snažiť vybudovať si s príjemcami e-mailov vzťah. Presne taký vzťah aký sa snažim vybudovať aj s Tebou, čitateľom tohto blogu.

4. Prvky dôveryhodnosti

Prvky dôveryhodnosti na Vašom webe

Dôveryhodnosť Vášho webu je nesmierne dôležitá. Je to jedna z vecí, ktorú affiláci podceňujú asi najviac. Stiahnu si free šablónu, nahodia tam obsah a čakajú, že sa im konverzie pohrnú samé. Chyba!

Ak Váš web nebude pôsobiť dôveryhodne, nikto si cez neho nič neobjedná a žiadnu odporúčanú službu nevyužije.

Pritom zvýšiť dôveryhodnosť celého webu je také jednoduché. Stačí pridať na web Vašu fotku, pár čísiel, reálne názory zákazníkov, sociálne siete… Návštevníci sa budú na webe cítiť bezpečnejšie a začnú Vám viac dôverovať.

ZAPAMÄTAJTE SI: To, či Váš web bude pôsobiť pre návštevníkov dôveryhodne alebo nie do veľkej miery rozhoduje o jeho úspechu.

5. Brand (značka)

Brand ako súčasť strategie

Ak to myslíte s Vašimi projektami vážne, snažte sa už od začiatku budovať brand. Zvýši hodnotu Vášho webu niekoľkonásobne.

Čo je to brand?

Je to úplne všetko od farby na webe cez logo, titulok… až po to, či Vaším návštevníkom tykáte alebo vykáte.

Ako ale začať? Začnite logom a jasným poslaním Vášho webu vo forme sloganu. To na začiatok stačí.

Logo a slogan sú dva prvky, ktoré zvýšia dôveryhodnosť Vášho webu, odlíšia Vás od konkurencie a pridajú webu hodnotu.

Ak s webovými projektami začínate, investícia do loga by mala byť tou jedinou investíciou čo sa grafiky týka. Viac potrebovať nebudete a vystačíte si s free šablónou, ktorú upravíte.

6. Kontaktné údaje

Kontaktné údaje

Písať o tom, že by ste mali mať na webe kontaktné údaje (viditeľné!) je trochu klišé, ale aj to je dôležitým prvkom každého webu. Snažte sa mať viditeľnú e-mailovú adresu a v lepšom prípade aj telefonné číslo.

Nielenže pochopíte problémy Vašej cieľovej skupiny, keď Vás budú kontaktovať, ale tiež zvýšite dôveryhodnosť, ktorá je veľmi dôležitá (opäť zdôrazňujem).

7. Obsah

Je úplne jedno aký máte vyumelkovaný web. Návštevníci ho aj tak budú navštevovať kvôli hodnotnému obsahu. Zabudnite na texty za pár korún a do obsahu investujte! Vráti sa Vám to.

V úplne najlepšom prípade si obsah napíšete Vy sami. Bude to pôsobiť autentickejšie a ak ste na danú problematiku skutočný odborník, zvýšite kredibilitu webu.

Na Výživovo.sk budem spolupracovať s niekoľkými redaktormi, ale témy článkov budem navrhovať sám a skontrolujem každý jeden článok pred jeho publikáciou.

BONUS – celý wireframe na stiahnutie

Ak si chcete stiahnuť celý wireframe webu Výživovo.sk, stačí, ak lajknete tento článok na akejkoľvek sociálnej sieti. Áno, stačí aj Google Plus 🙂

Končíme…

…ale iba pre dnešok 🙂 Makáme a nepoľavujeme.

Dúfam, že Vám článok aspoň trochu pomohol.  Ak máte akékoľvek otázky, pýtajte sa v komentároch .

V ďalšom diele reality show začneme vyberať tému pre WordPress.

Máte sa na čo tešiť!

P.S.: Budem rád, ak mi odpoviete na otázku, či wireframe-y pre Vaše projekty robíte alebo nie. Celkom ma to zaujíma 🙂

Anketa

Kreslíte si wireframy Vašich webov?

 

Toto je mini reality show webového projektu, s ktorým sa za 365 dní pokúsim prekročiť hranicu čistého zisku 1 000 € mesačne. Začínam 15.03.2015.

 

7 základných prvkov, ktoré by mal obsahovať každý web
5 (100%) 3 hlas[ov]
Zaujal Ťa tento článok?
V tom prípade sa prihlás k viac ako 700 odberateľom, ktorým pomáham s podnikaním na internete. Píšem praktické návody, ktoré je možné obratom aplikovať do praxe.
The following two tabs change content below.
Prevádzkujem e-shopy a budujem webové projekty, ktoré následne monetizujem pomocou affiliate marketingu. Online podnikanie mi dáva neuveriteľnú voľnosť, za posledný rok som viac ako 5 mesiacov strávil mimo kancelárie a precestoval som polovicu Európy.

Comments

  1. Radoslav Černý says:

    Ahoj Peter, wireframy nedělám, ale odteď budu a to díky Tvému článku:) Jinak by mě zajímalo (a asi o tom budeš psát), jak budeš koordinovat své redaktory případně další spolupracovníky a jak jim zadáváš a kontroluješ úkoly. Díky moc!

  2. Wireframy taky nedělám vždycky jsem si stáhl nějaký super program nebo cokoli, ale nepochopil jsem to :-). Čeho tím docílím? Rozvrhnu si prvky a pak se mi z toho zformátuje šablona pro wordpress nebo je to jen kreslení, které můžu udělat i na papíru?

  3. Super článek Peter, děkuju. Taky jsem zatím wireframy moc neřešil a místo baslamiqu šáhnul vždy jen po tužce a papíru… Bude součástí tohoto seriálu i článek o linkbuildingu? Hlavně mě zajímá tvůj názor na využívání blogů zdarma (web 2.0 jak říká Tomáš Dekan)… Každopádně děláš super práci a jsi mi inspirací, díky

    • Ahoj! Tuška a papír sú úplne v pohode aj keď ja mám rád tie wireframy vždy po ruke ale to už je na každom asi 🙂 Linkbuilding budem riešiť určite, to je jasné. Web 2.0 a blogy zdarma… blogy, Wikipedia, sociálne siete.. atd… určite pre linkbuilding fajn. Ak máš ale na mysli služby ako Webnode alebo Linkuj.cz, tak takéto odkazy Ti zase až tak nepomôžu.

      • Ano, mám na mysli platformy jako blog.cz, webnode, blogspot… a postavit z nich pyramidu. Jestli ještě má cenu něco takového budovat, nebo už je to přežitek. Četl jsem i názor, že to Google vnímá jako blackhat… Ale rád si počkám na článek o linkbuildingu, ať ti nekazím téma článku.

      • No tak na linkbuilding sa teším najviac. Len neprezrádzaj úplne všetko 😛

        • Ahoj!

          Na tom linkbuildingu fakt není nič zložité 🙂

          Proste nerobíš linkbuilding, ale PR spojenú s analýzou kľúčových slov. Hľadáš odkazy, z ktorých Ti môže prísť relevantná návštevnosť na Tvoj web.

          PR články, fóra, diskusie, FAQ servery, guestblogging, sociálne siete, YouTube…

          Ako príklad zoberiem Tvoj komentár s menom “tabletky”.

          Typický príklad old-school linkbuildingu, kedy sa snažíš získať odkaz zo silného webu na kľúčové slovo. Problém je, že tento web Ti NIKDY neprinesie relevantný traffic. Pre vyhľadávače Ti to tiež (priamo) nepomôže, pretože slovo “tabletky” je veľmi všeobecné a nemal by si sa na neho zameriavať. Plus, odkaz je nofollow.

          Na druhej strane však musím povedať, že tento odkaz nie je úplne zlý. Čím je tvoj odkazový profil pestrejší, tým lepšie. Aj nofollow odkazy z netématických webov nepriamo pomôžu. Určite by som ale nahradil slovo “tabletky” Tvojím menom.

          Viac sa dozvieš v článku 🙂

  4. Ano máš pravdu tabletky nieje najideálnejšie KW. ale tak nechcem velmi moje meno spájať stým odkazom ešte sa dostanem tam že pri zadaní mojho mena do google bude hore podstránka s tabletkami na erekciu 😛
    PS: nofollow odkazy si myslím že su troška podcenované.

  5. David Řezáč says:

    Jako vždy, skvěle sepsáno! 🙂 Článek s dovolením sdílím dále v seznamu článků o použitelnosti webu: http://www.affilo.cz/clanek/zobrazit/25/

  6. Zdravím

    skvelý článok! Chcem sa opýtať ak je v téme aj SEO prvok či mi ho odporúčate vypnúť a používať Yoast SEO plugin alebo nie ?

    vďaka za vašu odpoveď

    ešte raz – skvelý článok, fakt veľa pridanej hodnoty nielen pre začiatočníka ale aj pre profi.

    Martin

    • Ahoj,

      ďakujeeeem za pochvalu :)))

      Som rád, že článok prináša hodnotu to je hlavný dôvod prečo články píšem 🙂

      Vieš čo, asi záleží od témy. Osobne som nenarazil na takú tému zatiaľ, ktorá by pridala možnosť pre SEO k článkom a stránkam. Ak by sa pomocou tejto témy dali pridávať Titles, popisky, bola by tam sitemapa a téma by podporovala Schema.org markup, tak by možno plugin nebol potrebný. Ale osobne takú tému nepoznám, tak neviem povedať.

      Peter

Trackbacks

  1. […] 5. časť – 7 základných prvkov pre Váš web […]

  2. […] 5. časť – 7 dôležitých prvkov pre Váš web […]

Pridaj komentár