V predchádzajúcom článku Web stránka z lego stavebnice som sľúbila, že ďalšia téma bude o tom, ako sa pripraviť na tvorbu dizajnu web stránky. Poznáte takúto situáciu? Sedíte nad čistým papierom, alebo pozeráte do prázdnej obrazovky a neviete ako začať. Zvažujete nad tým, aký obsah zvoliť a akú mu dať formu. Ako to má vyzerať, aby sa to páčilo a malo to aj šmrnc.

Ako navrhnúť web

Začnite rozhodnutím o tom,  čo bude účelom vašej web stránky. Môže ním byť blog, osobná prezentácia, produktové portfólio, firemná prezentácia, elektronický obchod,…
Majte jasno v tom, aký bude cieľ web stránky. Zvýšenie predaja? Pozretie videí? Komunikácia hodnoty? Maximalizácia dôvery? Vytvorenie zákazníckej zóny? Zväčšenie počtu zákazníkov?

Čo ďalej? Ak ste si ešte nekúpili doménu, a nemáte zabezpečený hosting, bude to potrebné. Doména a hosting sú základ. Bez nich web stránka fungovať nebude.

A čo ďalej? Ak si nechcete najímať dizajnéra,  kódera, či programátora, vyberte si redakčný systém, ktorý ľahko zvládnete aj ako neprogramátor a negrafik…

Odporúčam WordPress

Prečo WordPress? V redakčnom systéme WordPress veľmi ľahko a intuitívne vyskladáte vaše stránky a podstránky. Zahráte sa, takmer ako s legom. A to dáte, však? (Naše iné články o WordPresse vám o ňom prezradia viac.)
Ak však ešte stále tápate nad tým, ako a čím naplniť web stránku, čítajte ďalej.

Urobte si monitoring

Prezrite si iné stránky, zmapujte konkurenciu, a vyberte si z toho, čo sa vám páči. Monitoring je pre vás prínosný vo viacerých smeroch. Pozrite si weby lepších (inšpirujte sa ich plusmi) i horších konkurentov (odhaľte ich nedostatky). Monitorujte obsah, texty, fotky, ale aj štruktúru. Načrtnite si, ako asi by mohol vyzerať váš budúci web. „Vystrihnite“ si z webov to, čo vás zaujalo. Fragmenty: texty, výzvy, tlačidlá,.. ich obsah či vizuálnu podobu.
Ak nie ste tvorivý človek, tým viac vám to pomôže na ceste k webu.

Spravte si analýzu kľúčových slov.

Viete, čo je s vaším biznisom spojené, aké slovné spojenia sú vyhľadávané? Ak nie, zamyslite sa, pýtajte s iných, ako by vyhľadávali vaše produkty. Analýza kľúčových slov, ktoré používajú vaši potenciálni klienti na vyhľadávanie, je veľmi dôležitá, ak nechcete, aby vaša stránka „iba bola“, ale aby sa nachádzala na popredných miestach.

Majte v tejto oblasti presné údaje, alebo – ak to iba intuitívne tušíte – napíšte si zoznam a pracujte s ním pri tvorbe stránky. Prvá možnosť je lepšia, samozrejme… existujú rôzne techniky, ako to zistiť – pozrite si naše články o SEO.

Navrhnite si štruktúru

Ako navrhnúť štruktúru webu? Začnite tým, že si napíšete, aké položky by ste chceli mať v menu. Vytvoríte si tak pomocnú osnovu, podľa ktorej budete tvoriť obsah na jednotlivých podstránkach.

Vrhnite sa na wireframe

Ak si slovíčko „wireframe“ napíšete do Googla, dostanete veľké množstvo odkazov na to, čo to wireframe je a ako môže pomôcť úspechu vašej web stránky. Wireframe – drôtený model – predstavuje náčrt budúceho webu. Wireframe prezentuje prvky obsahu a spôsob ich rozmiestnenia na hlavnej stránke i podstránkach webu.

Dôvodom tvorby wireframe je navrhnutie štruktúry informácií, ktorá pomôže navrhovanému webu plniť očakávaný cieľ. Požiadavku na vytvorenie wireframe môžete zadať vytvoriť skúsenému UX dizajnérovi, ktorý na základe zoznámenia sa s vaším zákazníkom, s vašimi procesmi, vstupnými známymi údajmi (analýzy kľúčových slov napríklad) a znalosťami psychológie webu wireframe navrhne. Alebo si naplánujte vo firme, či rodine tzv. brainstorming, sadnite si spolu a kreslite.

Alebo si vezmite post-it papieriky a ukladajte, prehadzujte, premýšľajte, dizajnujte.
Napríklad takto:

Papieriky vám budú slúžiť ako tzv. elementy – prvky, z ktorých vyskladáte hlavnú stránku i podstránky. Návrh môžete ľahko upravovať – iba vymeníte lístok, alebo ďalší pridáte, prípadne odoberiete.

Myslite elementárne

Môj článok vychádza z kurzu WordPress II. a Visual Composer dizajnovanie a tvorba obsahu, špičkové grafické podstránky pre neprogramátorov. Na tomto kurze, ktorý som absolvovala v IT Learningu, sa precvičuje práca s pluginom WPBakery Visual Composer vo WordPrese. Tento plugin patrí medzi tzv. page buildre, ktoré umožňujú ľahko zostavovať a meniť vizuálnu stránku webu.

Chcem vám ukázať elementy, ktoré sa najčastejšie používajú a pomocou ktorých aj vy vystaviate naozaj ľahko stránku. Plugin ponúka veľmi slušnú zbierku elementov, vďaka ktorým vaša stránka môže byť „šik“.

Každý element má svoj názov a stručný popis. Ikona naznačuje tým, ktorí sa nemusia s angličtinou, o čo ide :).

Každý element v tomto page builderi má rôzne nastavenia parametrov, čo dáva široké možnosti jeho použitia.

Nastavovanie elementu ponúka jednoduché i zložitejšie možnosti umiestnené na záložkách.

Najčastejšie používané elementy a web

Text

Pripravte si pre čitateľov zaujímavé texty. Nenuďte ich, pretože v okamihu odídu. Trvá to len pár sekúnd rozhodovania, či ostanú, alebo stránku zatvoria …a už nikdy sa nevrátia. Aj text môže byť tou príčinou.
O tom, ako písať texty, je celá veda. Písaniu textov sa profesionálne venujú copywriteri. Vedia, aké kľúčové slová do textu zakomponovať (naozaj dobrí vychádzajú z analýz kľúčových slov) a vedia motivovať užívateľa smerom k nastaveným cieľom (cieľom môže byť napríklad stiahnutie e-booku).

Ak si túto prácu chcete ponechať vo svojej réžii, skúste sa prevteliť do vášho návštevníka/zákazníka a uvažujte podobne ako on. Z prevádzkovania vášho biznisu určite viete, aké témy vašich zákazníkov zaujímajú. Tak im také ponúknite!
Vyvarujte sa kopírovaniu textu z iných stránok, ba ani kopírovanie zo stránok vašich dodávateľov nie je dobrý nápad, hoci je rýchle. Ak už od nich chcete preberať texty, napríklad k produktom, preštylizujte ich. Zakomponujte do textu veľa kľúčových slov, ktoré sú typické pre váš biznis …a predtým sa naučte robiť analýzu kľúčových slov, budete pracovať efektívnejšie (napríklad na kurze IT Learning – SEO II.).

Čo sa týka formy textu, stráňte sa uverejňovania siahodlhých viet a textov unavujúcich oči. Používajte nadpisy, podnadpisy, odseky, po ktorých sa vám bude kĺzať zrak ako po masle. Porovnajte:

Ikony

Ikony sú malé obrázky. Sú ľahko rozpoznateľné a nahrádzajú texty, prípadne ich vhodne dopĺňajú. Stretávame sa s nimi každý deň, a poznáme ich aj z bežného života. Vidíme ich v hoteloch, na čerpacích staniciach, letiskách… Ikony majú medzinárodný rozmer. Ženy, budete asi so mnou súhlasiť, že oveľa suverénnejšie vstúpite do dverí v Pekingu, keď na nich vidíte postavičku v sukni, než ak by tam bolo napísané:  廁所.

Ikony sa dajú nájsť v mnohých knižniciach. Najväčšiu databázu vektorových ikon obsahuje Font Awesome. Ak chcete byť originálni, dajte nakresliť „dvornému“ grafikovi vlastné ikony, aké nikde inde nenájdete.

Čiary a oddeľovače

Váš pripravený text môžete vo WP Bakery ľahko opticky rozdeľovať do odsekov, ako som spomínala vyššie. Iné optické oddelenie dosiahnete pomocou tzv. oddeľovačov. Oddeľovačom môže byť prázdny väčší odstup dvoch odsekov, priama čiara, alebo cik-cak čiara. Prečo nie?
Dávate tým na známosť, že text, ktorý bude nasledovať, je tematicky iný, alebo ho len chcete istým spôsobom zdôrazniť a oddeliť od ostatného obsahu. Asi takto:

Správy a hlášky

Obrázky

Bez fotografií to asi nepôjde. Vaša web stránka by bola „holá“, bez emócií. Nezáživná.
Ale pozor na výber fotografií. Tu je pár najdôležitejších rád:

• Formát fotiek – jpg, png, webp, svg sú vítané formáty.
• Veľkosť – bežne sa stáva, že administrátor stránky nahrá na web fotografiu priamo zo svojho počítača. Neuvedomuje si, že fotka má veľkosť v bytoch napr. 4mega, teda je absolútne nevhodná na web stránku. Spôsobí pomalé načítanie web stránky, a takisto vezme užívateľom veľa dát z kreditu pri načítaní stránky, najmä v prípade, ak sa pripájajú z mobilu a nie sú na WIFI.
  Je lepšie obrázky pred vložením na stránky optimalizovať, komprimovať, zmenšiť ich dátovú veľkosť.
• Autorské práva – prečítajte si článok o fotkách zadarmo na našom blogu, budete vedieť o téme viac.

Vlastný nadpis

V elemente Text block pri formátovaní obsahu môžete zvoliť nadpis h1 – h6. K zvolenému formátu je preddefinovaný font i veľkosť. V prípade, že chcete použiť nejaké ozdobné písmo, siahnite po elemente Vlastný nadpis (Custom Heading).

Tlačidlá a CTA plochy

Voláme ich aj „buttony“ (z angl. button – gombík) a sú veľmi dôležitou súčasťou web stránky. Slúžia na zjednodušenie vykonania akcie, ktorú očakávame od návštevníka stránky. Volajú po kliku.
Ich použitie hrá významnú rolu. Pomocou nich dokážete ľahšie plniť svoje konverzné ciele. Nezabudnite si vytvoriť určitý štýl, ktorý budete používať na celom svojom webe. Nadefinujte si farby, tvar, efekty,…

Elementov je oveľa viac. Ukázala som vám, po ktorých najviac siaham ja. Ak si chcete vyskúšať ďalšie, nech sa páči. Grafy, ilustrácie, záložky, free doplnky, post gridy – výpisy článkov, panely, sociálne tlačidlá,… čakajú na vás a tešia sa na svoje uplatnenie na vašej stránke 🙂

Stačí si vo WordPresse nainštalovať čarovný plugin WP Bakery (hoci je platený, môžete ho dostať ako bonus pri kúpe niektorých WP šablón, napríklad Impreza) a môžete začať tvoriť. Je to fakt porovnateľné ako keď sa hráte s Legom.
Vyskúšajte si a uvidíte. Dáte mi za pravdu ?