Čo zahrnúť do obrysu webu
Štruktúra stránky
Skôr ako ju zahrniete do obrysu lokality, rozložte si štruktúru svojej lokality. Nech je to jednoduché. Načrtnite na papier, do poznámkového bloku/zošita alebo dokonca na tabuľu. Prípadne použite tieto nástroje: Microsoft Visio, tabuľu, Excel, OmniGiraffe alebo Tabuľky Google.
Tu je príklad jednoduchej štruktúry:
Zdroj obrázka: Neil Patel
Tu sú úvahy pri pridávaní štruktúry lokality do osnovy:
- Kategorizácia – Kategorizujte svoje webové stránky. Zoskupte funkcie a položky, ktoré sú rovnaké. Pri kategorizácii dodržujte kategórie medzi 2 a 7. Vyvážte podkategórie. Ak má každá kategória 5 podkategórií, uistite sa, že všetky vaše kategórie majú 5 podkategórií.
- Úrovne/hĺbka stránky – Choďte na malú hĺbku stránky. Ideálne sú tri úrovne. Ak však vaša stránka potrebuje viac ako tri úrovne, v odvetviach, ako je elektronický obchod, choďte do toho. Čím menšia je hĺbka úrovní stránky, tým jednoduchšia je navigácia na vašom webe.
- Mať globálnu kategóriu – toto je jediná extra kategória, ktorú potrebujete okrem 7. Tu umiestnite položky, ako sú zásady ochrany osobných údajov, prihlasovacie údaje a funkcie vyhľadávania. Položky tu sú zahrnuté ako súčasť vašej hlavičky alebo päty.
Prečo je štruktúra vašej stránky dôležitá
Štruktúra vašej lokality určuje vašu používateľskú skúsenosť, indexové prehľadávanie, odkazy na lokalite, ktoré pravdepodobne získate, a interné odkazy, ktoré bude mať vaša lokalita.
Stránka so skvelou štruktúrou má za následok lepšiu používateľskú skúsenosť, čo vedie k nižšej miere odchodov. Všetky tieto signály prezrádzajú Googlu, že váš web má vysokú kvalitu, čo prispieva k vyššiemu umiestneniu webu vo výsledkoch vyhľadávača.
Roboty vyhľadávacích nástrojov prehľadávajú štruktúru vašej lokality, aby indexovali vašu webovú stránku. Je potrebné zhrnúť celú štruktúru vášho webu a odoslať do služby Google Search Console. To sa vykonáva pomocou XML mapa stránok.
Bez správnej štruktúry stránok existujú stránky a adresy URL, ktoré roboty vyhľadávačov nikdy neobjavia.
Vhodná štruktúra lokality pomáha vašej lokalite mať odkazy na lokalite na stránkach s výsledkami vyhľadávacieho nástroja, ako je náš príklad:
Odkazy na podstránky uľahčujú používateľom výber stránky, ktorá môže byť najrelevantnejšia. To zvyšuje vašu mieru prekliknutia (CTR), mieru konverzie a dokonca aj predaj. Vaša stránka bude pravdepodobne mať vyššie hodnotenie ako vaša konkurencia.
Tu je čo Google musel povedať o tom, čo sa nachádza na podstránke:
„Odkazy na podstránky zobrazujeme iba vtedy, keď si myslíme, že budú pre používateľa užitočné. Ak štruktúra vašej stránky neumožňuje našim algoritmom nájsť dobré odkazy na stránky alebo si myslíme, že odkazy na stránky pre vašu stránku nie sú relevantné pre dopyt používateľa, nezobrazíme ich.“
Výsledkom stránky so skvelou štruktúrou je vytváranie interných odkazov, ktoré pomáhajú pri navigácii používateľov. Vyhľadávacím nástrojom tiež uľahčuje identifikáciu súvisiacich stránok, znižuje hĺbku stránok a pomáha preniesť hodnotu odkazov na iné stránky.
Tu je webová stránka s šablóny sitemap z ktorých môžete čerpať inšpiráciu.
Rozloženie webovej stránky
Štruktúra vašej lokality vám poskytuje náčrt kostry vašej lokality. Pomôže vám napríklad zistiť počet stĺpcov, ktoré potrebujete. Teraz musíte uviesť zoznam položiek, ktoré budú tvoriť rozloženie vašej stránky. Začnite so vstupnou stránkou, pretože je to prvé miesto, ktoré návštevníci vašej stránky pravdepodobne navštívia.
Domovská stránka/vstupná stránka
Vstupná stránka je to, čo používatelia použijú na to, aby určili, či potrebujú na vašom webe stráviť viac času alebo nie. Tu je potrebné pamätať na to, že rozloženie výrazne pomôže zjednodušiť navigáciu používateľa.
Pri vytváraní rozloženia vstupnej stránky myslite na to, čo je nad záhybom stránky a čo pod záhybom stránky. To znamená, čo predchádza rolovaniu (nad záhybom stránky) a čo nasleduje po rolovaní (pod záhybom stránky).
Tu je obrázok, ktorý vám pomôže rozlíšiť medzi nad záhybom a pod záhybom stránky:
Zdroj obrázka: Performics
Nad záhybom
Tu je to, čo zahrnúť nad záhybom stránky do prehľadu vašej lokality:
- Logo
- Nadpis
- Podnadpis
- Navigačná lišta
- Primárna výzva na akciu (CTA)
Podkategórie týchto položiek, napríklad, kategorizujú logo pod navigačnou lištou. Pridajte obrázky alebo vložte video v závislosti od odvetvia.
Pod záhybom
Tu je to, čo treba zahrnúť pod záhybom stránky do prehľadu vašej lokality:
- Diania
- Blogové články
- Priemyselné trendy
- Indikátory dôvery
- Tlačové spravodajstvo
- Informácie o polohe
- Výhody a/alebo vlastnosti
V závislosti od odvetvia ďalej zoskupte vyššie uvedené položky. Pod pätu umiestnite napríklad informácie o polohe.
Tu je grafické znázornenie kategórií, ktoré sa majú vložiť nad a pod záhybom.
Vlastnosti
Uveďte funkcie, ktoré chcete mať na svojej stránke. Len sa zamyslite nad tým, čo musíte mať na svojej stránke? Pomôcť svojim zákazníkom získať informácie, ktoré potrebujú, a konať podľa nich? Všetky UI/UX, SEO a tak ďalej. Tie obsahujú:
- CTA
- Blog
- často kladené otázky
- fórum
- Galéria
- Bezpečnosť
- Newsletter
- Komentáre
- Posudky
- Olovený magnet
- Registrácia prihlásenie
- Nákupný vozík
- Spracovanie platieb
- Sociálne médiá – zdieľanie tlačidiel/odkazov
Možno neviete, kam presne tieto prvky umiestniť. Toto bude jasné, keď vytvoríte svoj drôtový model (čo je vizuálna reprezentácia obrysu vašej lokality. Zobrazuje rozloženie, navigáciu a obsah vašej lokality. Viac informácií o drôtové modely v tomto článku.
Tu je príklad drôtového modelu:
Zdroj obrázka: Smartdraw
Sprievodca štýlom
Sprievodcovia štýlmi a vzory sú nevyhnutné na to, aby pomohli webovým dizajnérom udržiavať štruktúru a vytvárať zážitky pre naše publikum pre rôzne zariadenia.
Výhody príručiek štýlov sú mnohé: vytvárajú spoločný jazyk, uľahčujú testovanie, šetria čas a námahu a vytvárajú užitočnú referenciu, ku ktorej sa môžete neustále vracať. Tie obsahujú:
- zoznamy
- Tlačidlá
- Hlavičky
- Odseky
- Schopnosť reagovať
- Odkazy – aktívne/neaktívne/vznášajúce sa
- Pozadie – biele/čierne/značkové farby
- Uveďte farby, ktoré chcete použiť. Mali by byť v súlade s farbami vašej značky.
Vo svojom prehľade uveďte súvisiace štýly pre každú položku do zátvoriek.
Zdroje
Hlavným hnacím motorom zdrojov je to, čo pre nich môžete urobiť, čo ste doteraz urobili, prečo by si mali vybrať, ako môžete pomôcť vy. Spolu so štýlom sprievodcu musíte vytvoriť tieto správy prostredníctvom rôznych metód, ktoré najlepšie pritiahnu vaše publikum.
Uveďte zdroje, ktoré budete potrebovať na dosiahnutie funkcií, ktoré zamýšľate. Tie obsahujú:
- ikony
- Písma
- Videá
- Ohlasy / recenzie
- Ilustrácie a grafika
- Marketingová kópia – biele knihy, tlačové správy
- Obrázky a ich zdroje – firemné fotografie/akcie
Vo svojom prehľade uveďte súvisiace zdroje pre každú položku do zátvoriek.
Navigácia
Rozhodnite sa, akú navigáciu chcete, na základe štruktúry vašej lokality, rozloženia stránky a funkcií (hore aj pod záhybom stránky). Môže byť horná, spodná, bočná alebo stredová. Môže byť tiež pevný (statický) – kde nemení polohu pri posúvaní – alebo lepkavý (pohybuje sa pri posúvaní používateľa).
Tu je niekoľko možností navigácie:
Horná navigácia
Tu je viacero možností.
Toto je hamburgerové menu, ktoré pravdepodobne nájdete na mobilných zariadeniach:
Zdroj obrázka: Hriankovač so šablónou
Opravená horná navigácia
Táto navigácia nemení polohu, keď používateľ roluje. Tu je ukážka:
Zdroj obrázka: WebFX
Snímka obrazovky nižšie zobrazuje navigáciu na ľavej strane a zostáva na rovnakom mieste, aj keď používateľ posúva.
Zdroj obrázkov: Template Toaster
Statická spodná navigácia
Tu sa päta používa ako hlavná navigácia. Tu je snímka obrazovky:
Zdroj obrázkov: Template Toaster
Upozornenie
Pre každú stránku musíte vytvoriť obrys. Každá stránka na vašom webe je iná. Zatiaľ čo funkcie ako hlavička a päta zostávajú rovnaké, vaša vstupná stránka a stránky s informáciami sa musia líšiť, aj keď majú rovnaký vzhľad a dojem z hľadiska konzistencie.
Šablóna
Tu je šablóna, ktorá sumarizuje všetky vyššie diskutované detaily. Nahraďte popisy v hranatých zátvorkách informáciami o vašej vlastnej spoločnosti.
Na záver
Pri vytváraní osnovy webovej stránky nezachádzajte do veľkých detailov. Náčrt je sprievodca, ktorý vám pomôže udržať dizajn vašej webovej lokality správny, štruktúrovaný a jasný. Nechajte priestor pre adaptáciu a kreativitu.
