Zpeněžujte své Blogy a Gadgety: Tipy pro Experty na SEO, Sociální Sítě a Affiliate Marketing

Co zahrnout do obrysu webu (s bezplatnou šablonou)

Co zahrnout do obrysu webu (s bezplatnou šablonou)

Co zahrnout do osnovy webu

Struktura webu

Než ji zahrnete do osnovy svého webu, rozvrhněte si strukturu svého webu. Nechte to jednoduché. Načrtněte na papír, do poznámkového bloku/notebooku nebo dokonce na tabuli. Případně použijte tyto nástroje: Microsoft Visio, whiteboard, Excel, OmniGiraffe nebo Google Sheets.

Zde je příklad jednoduché struktury:

Zdroj obrázku: Neil Patel

Zde jsou úvahy při přidávání struktury webu do osnovy:

  • Kategorizace – Kategorizujte své webové stránky. Seskupte prvky a položky, které jsou stejné. Při kategorizaci udržujte kategorie mezi 2 a 7. Vyrovnejte podkategorie. Pokud má každá kategorie 5 podkategorií, ujistěte se, že všechny vaše kategorie mají 5 podkategorií.
  • Úrovně/hloubka stránky – Použijte malou hloubku stránky. Ideální jsou tři úrovně. Pokud však váš web potřebuje více než tři úrovně, v odvětvích, jako je elektronický obchod, jděte do toho. Čím menší je hloubka úrovní stránky, tím snazší je navigace na vašem webu.
  • Mít globální kategorii – toto je jediná další kategorie, kterou potřebujete kromě 7. Zde umístíte položky, jako jsou zásady ochrany osobních údajů, přihlášení a funkce vyhledávání. Zde uvedené položky jsou součástí záhlaví nebo zápatí.

Proč je struktura vašeho webu důležitá

Struktura vašeho webu určuje vaši uživatelskou zkušenost, procházení, odkazy na podstránky, které pravděpodobně získáte, a interní odkazy, které váš web bude mít.

Web se skvělou strukturou má za následek lepší uživatelský dojem, což má za následek nižší míru okamžitého opuštění. Všechny tyto signály sdělují Googlu, že váš web je vysoce kvalitní, což přispívá k lepšímu umístění vašeho webu ve výsledcích vyhledávačů.

Roboti vyhledávačů procházejí strukturu vašeho webu, aby indexovali vaši webovou stránku. Celou strukturu vašeho webu je třeba shrnout a odeslat do Google Search Console. To se provádí pomocí XML mapa webu.

Číst:  Akinator, co to je a jak funguje genialita webu

Bez správné struktury webu existují stránky a adresy URL, které roboti vyhledávačů nikdy neobjeví.

Vhodná struktura webu pomáhá vašemu webu mít na stránkách s výsledky vyhledávače odkazy na podstránky, jako je náš příklad:

Odkazy na podstránky uživatelům usnadňují výběr stránky, která může být nejrelevantnější. To zvyšuje vaše CTR (Click Through Rate), konverzní poměr a dokonce i tržby. Vaše stránky se také pravděpodobně umístí výše než vaše konkurence.

Tady je co Google musel říct o tom, co je na podstránce:

„Odkazy na podstránky zobrazujeme u výsledků pouze tehdy, když si myslíme, že budou pro uživatele užitečné. Pokud struktura vašeho webu neumožňuje našim algoritmům najít dobré odkazy na podstránky nebo se domníváme, že odkazy na podstránky na vašem webu nejsou relevantní pro dotaz uživatele, nezobrazíme je.“

Stránky se skvělou strukturou mají za následek vytváření interních odkazů, které pomáhají s navigací uživatele. Vyhledávačům také usnadňuje identifikaci souvisejících stránek, snižuje hloubku webu a pomáhá předávat hodnotu odkazů na jiné stránky.

Zde je webová stránka s šablony sitemap ze kterých můžete čerpat inspiraci.

Rozvržení webu

Struktura vašeho webu vám poskytuje náčrt kostry vašeho webu. Pomůže vám například zjistit počet sloupců, které potřebujete. Nyní musíte uvést položky, které budou tvořit rozvržení vašeho webu. Začněte svou vstupní stránkou, protože je to první místo, které návštěvníci vašeho webu pravděpodobně navštíví.

Domovská stránka/vstupní stránka

Vstupní stránka je to, co uživatelé použijí k tomu, aby zjistili, zda na vašem webu potřebují trávit více času, či nikoli. Zde je třeba pamatovat na to, že rozvržení výrazně pomůže usnadnit uživatelskou navigaci.

Při vymýšlení rozvržení vstupní stránky přemýšlejte o tom, co je nad okrajem a co pod okrajem. To znamená, co předchází rolování (nad okrajem) a co následuje po rolování (pod okrajem).

Zde je obrázek, který vám pomůže rozlišit mezi nad okrajem a pod okrajem:

Zdroj obrázku: Performics

Nad skladem

Zde je to, co do obrysu webu zahrnout nad okrajem:

  • Logo
  • Titulek
  • Podnadpis
  • Navigační lišta
  • Primární výzva k akci (výzva k akci)
Číst:  Software pro určování polohy na webu: 20 nejlepších softwarových programů pro určování polohy na webu

Podkategorie těchto položek, například, kategorizuje logo pod navigační lištou. Přidejte obrázky nebo vložte video v závislosti na vašem odvětví.

Pod záhybem

Zde je to, co zahrnout do obrysu webu pod okrajem:

  • Události
  • Blogové články
  • Průmyslové trendy
  • Indikátory důvěry
  • Tiskové zpravodajství
  • Informace o poloze
  • Výhody a/nebo vlastnosti

V závislosti na vašem odvětví dále seskupte výše uvedené položky. Umístěte informace o poloze například pod zápatí.

Zde je grafické znázornění kategorií, které je třeba vložit nad a pod záhybem.

Funkce

Uveďte funkce, které chcete mít na svém webu. Jen se zamyslete nad tím, co musíte mít na svých stránkách? Chcete svým zákazníkům pomoci získat informace, které potřebují, a jednat podle nich? Všechny UI/UX, SEO a tak dále. Tyto zahrnují:

  • CTA
  • Blog
  • Nejčastější dotazy
  • Fórum
  • Galerie
  • Bezpečnostní
  • Zpravodaj
  • Komentáře
  • Posudky
  • Olověný magnet
  • Registrovat se Přihlásit se
  • Nákupní košík
  • Platba je v procesu zpracování
  • Sociální média – sdílení tlačítek/odkazů

Možná nevíte, kam přesně tyto prvky umístit. To bude jasné, když vytvoříte drátěný model (což je vizuální reprezentace obrysu vašeho webu. Ukazuje rozvržení, navigaci a obsah vašeho webu. Další informace o drátěné modely v tomto článku.

Zde je příklad drátového modelu:

Zdroj obrázku: Smartdraw

Průvodce stylem

Stylové průvodce a vzor jsou nezbytné, aby pomohly webovým návrhářům udržovat strukturu a vytvářet zážitky pro naše publikum pro různá zařízení.

Příručky stylů mají mnoho výhod: vytvářejí společný jazyk, usnadňují testování, šetří čas a námahu a vytvářejí užitečnou referenci, ke které se budete neustále vracet. Tyto zahrnují:

  • Seznamy
  • Tlačítka
  • Záhlaví
  • Odstavce
  • Schopnost reagovat
  • Odkazy – aktivní/neaktivní/vznášející se
  • Pozadí – bílé/černé/značkové barvy
  • Uveďte barvy, které chcete použít. Měly by být v souladu s barvami vaší značky.

V osnově uveďte související styly pro každou položku do závorek.

Zdroje

Hlavní hnací silou zdrojů je to, co pro ně můžete udělat, co jste dosud udělali, proč by si měli vybrat, jak můžete pomoci. Spolu s průvodcem styly musíte vytvořit tato sdělení různými metodami, které nejlépe přitahují vaše publikum.

Číst:  Podpořte své online podnikání pomocí ReactJS: Uvolněte sílu responzivního webu

Uveďte zdroje, které budete potřebovat k dosažení funkcí, které zamýšlíte. Tyto zahrnují:

  • ikony
  • Písma
  • videa
  • Ohlasy / recenze
  • Ilustrace a grafika
  • Marketingová kopie – bílé knihy, tiskové zprávy
  • Obrázky a jejich zdroje – firemní fotografie/zásoby

Ve své osnově uveďte související zdroje pro každou položku do závorek.

Zvolte navigaci, kterou chcete, na základě struktury webu, rozvržení stránky a funkcí (jak nahoře, tak pod okrajem). Může být horní, spodní, boční nebo středový. Může být také fixní (statický) – kde při rolování nemění polohu – nebo lepivý (pohybuje se, jak uživatel roluje).

Zde je několik možností navigace:

Horní navigace

Zde je několik možností.

Toto je hamburgerové menu, které pravděpodobně najdete na mobilních zařízeních:

Zdroj obrázku: Toustovač šablony

Opravená horní navigace

Tato navigace nemění polohu, když uživatel posouvá. Zde je ukázka:

Zdroj obrázku: WebFX

Snímek obrazovky níže ukazuje navigaci na levé straně a zůstává na stejném místě, i když uživatel posouvá.

Zdroj obrázků: Template Toaster

Statická spodní navigace

Zde se zápatí používá jako hlavní navigace. Zde je snímek obrazovky:

Zdroj obrázků: Template Toaster

Upozornění

Pro každou stránku musíte vytvořit osnovu. Každá stránka vašeho webu je jiná. Zatímco funkce jako záhlaví a zápatí zůstávají stejné, vaše vstupní stránka a stránky s informacemi se musí lišit, i když mají stejný vzhled a dojem, aby byly konzistentní.

Šablona

Zde je šablona, ​​která shrnuje všechny výše diskutované detaily. Nahraďte popisy v hranatých závorkách informacemi o vaší vlastní společnosti.

Na závěr

Při vytváření osnovy webu nezacházejte do velkých podrobností. Nástin je průvodce, který vám pomůže udržet design vašeho webu na správné cestě, strukturovaný a jasný. Nechte prostor pro adaptaci a kreativitu.