Príprava na tvorbu landing page: myšlienková mapa a wireframe

Miška Struhárová Landing pages

Ďalšie časti seriálu o tvorbe landing pages

1. diel: Prečo je Thrive Architect skvelý nástroj na tvorbu landing pages

2. diel: práve čítate

3. diel: 13 tipov, ako napísať presvedčivý text

4. diel: Tvorba landing page v Thrive Architect

5. diel: Platené aj neplatené spôsoby, ako propagovať landing page

V roku 2018 som si dala za cieľ pracovať so zahraničným klientom. Šanca, že bude vedieť po slovensky je takmer nulová, preto som sa rozhodla pripraviť svoje portfólio ako anglickú landing page, ktorú použijem na získavanie pracovných dopytov.

Aby landing page plnila účel, ktorý od nej očakávam, zamerala som sa na dôkladnú prípravu. V dnešnom článku vám ukážem, ako môže pomôcť pri tvorbe takejto stránky myšlienková mapa a ako ju využijete pri tvorbe samotnej stránky.

1. fáza: myšlienková mapa

Kedysi som bola ten typ človeka, ktorý si stále píše poznámky a keď sa k nim po čase vráti, nevyzná sa v nich. Nehovorím o osnovách k článkom, ale predovšetkým som si nepamätala súvislosti, pri ktorých poznámky vznikli.

Ak váhate, či je myšlienková mapa pre vás, asi vás prekvapí ich univerzálne využitie. Môžete premýšľať s celým tímom nad problémom a spisovať si myšlienky, zjednodušiť zložité procesy, dokážete si zmanažovať a naplánovať svoje úlohy, stanoviť ciele pre svoj tím.

Využitie nájdu nielen pri práci a podnikaní. Myšlienkové mapy môžete použiť pri plánovaní dovolenky alebo na vytvorenie prehľadnejšie systému pri učení a spracovaní veľkého množstva informácií.

Pri tvorbe landing page pre zahraničných klientov som sa rozhodla, že si prípravu urobím poctivejšie a rozpíšem si všetky myšlienky do myšlienkovej mapy. Predsa len, keď porovnám svoje znalosti pred 2,5 rokom, kedy som začínala pracovať na voľnej nohe, boli veľmi obmedzené v porovnaní s tým, čo dokážem pre klientov urobiť teraz. Takto sa mi bude ľahšie tvoriť štruktúra landing page a aj texty.

Nástroje na myšlienkové mapy

Keď v 60. rokoch 20. storočia Tony Buzan vytvoril túto metódu, stačil papier a ceruzka. Nehovorím, že to nie je dobrá metóda aj teraz, no z praktického hľadiska som si vybrala počítačovú verziu. Je to hlavne z dôvodu neustále preškrtávania a prehadzovania myšlienok, čo v by v papierovej narobilo veľa chaosu.

Môžete si stiahnuť rôzne softvéry a používať ich priamo vo svojom počítači, alebo si mapu vytvoríte cez online aplikáciu.

Dobrý článok o nástrojoch som našla na blogu umeniekreativity.sk, kde je rozpísaný zoznam 15 nástrojov na myšlienkové mapy.

Moju som vytvorila v aplikácii mindmup.com. Program je zadarmo a mapu si viete stiahnuť v rôznych formátoch. Na vzhľade mi až tak nezáleží, dôležitý bol pre mňa účel.

Takto vyzerá rozhranie, svoje myšlienky vpisujete do okienok, ktoré vzájomne prepájate a mapa sa postupne rozvetvuje:

rozhranie práce v mindmup.com

kliknite pre väčšie rozlíšenie

Aké sú výhody tvorby myšlienkovej mapy?

Existuje veľa rád, ako z máp vyťažiť maximum, no najlepšie urobíte, ak si nájdete vlastný štýl a využiť benefity, ktoré vám vyhovujú. Tony Buzan tiež pridáva rady, ako si vkladať do máp obrázky a používať iba jedno kľúčové slovo. Svoju mapu som pripravila bez akéhokoľvek čítania tipov a vďaka nej som si perfektne zoradila myšlienky, ktoré mi dávajú zmysel.

Na začiatok si treba zvoliť účel mapy. V mojom prípade je to rozpracovanie služieb, ktoré poskytujem ako freelancer. Stráviť čas nad tvorbou myšlienkovej mapy vnímam pozitívne z 2 dôvodov:

1. Myšlienky mám zhrnuté na jednom mieste, rozdelené podľa súvislostí

Rozdelila som si mapu na 3 hlavné časti: KTO je môj potenciálny, aký má PROBLÉM a aké RIEŠENIA na problém môžem ponúknuť.

Keď budem chcieť nabudúce odprezentovať svoje služby, pripraviť si email alebo popis, stačí si otvoriť mapu a všetko v nej nájdem pekne prepojené.

2. Prišla som na ďalšie nápady, ktoré nadväzovali na jednotlivé časti mapy

Pri spisovaní riešení, ktoré dokážem klientom ponúknuť, mi napadli ďalšie typy obsahu, ktoré nepoužívam každý deň. Napadli ďalšie skupiny klientov, pre ktorých by som mohla byť prínosom.

Je teda možné, že keď uvidíte štruktúru svojej mapy a jednotlivé prepojenia, dostanete nové nápady, na ktoré by ste pri bežnom poznámkovaní neprišli.

Finálny výsledok mojej myšlienkovej mapy (rozkliknite pre väčšie rozlíšenie)

moja myšlienková mapa

2. fáza: tvorba štruktúry stránky

Keď už mám všetky dôležité body okolo mojich služieb spísané a rozdelené v myšlienkovej mape, prichádza čas, použiť ich na tvorbu štruktúry landing page, čiže toho, ako budú jednotlivé prvky usporiadané.

Stránku budem skladať v builderi Thrive Architect. Mám 2 možnosti:

  • vytvorím si wireframe celý podľa seba a použijem prázdnu stránku,
  • použijem niektorú zo vyše 220 šablón, ktoré Thrive Architect ponúka.

Ak ste ešte žiadnu landing page nevytvorili, najjednoduchšie riešenie bude vybrať si niektorú zo šablón. Prvky sú usporiadané, stačí si len vymeniť fotky, doplniť vlastné texty, odkazy a prípadne prepojiť s kontaktným formulárom alebo e-mailovou databázou.

Tvorba vlastného wireframe

Druhá možnosť je vlastný wireframe. Ja som sa rozhodla pre túto možnosť. Wireframe je náčrt vzhľadu webu a rozloženie obsahu, umiestnenie call-to-action prvkov atď. Dizajnéri ho používajú ako súčasť procesu navrhovania webu, kedy stránka dostane svoj prvý vizuálny náčrt. 

Existuje množstvo nástrojov. Pre vlastné potreby si niektorí kreslia návrhy na papier, no ja uprednostňujem online nástroje. Používam program Balsamiq Mockups, ktorý obsahuje všetky dôležité prvky a je veľmi jednoduchý na používanie.

Návrhy si z programu viem uložiť a poslať klientovi, prípadne si ich vytlačím a textujem.

Keď program otvoríte, zobrazí sa pred vami pracovná plocha. Na hornej lište sú abecedne zoradené všetky prvky, ktoré môžete pri dizajnovaní wireframe potrebovať.

dashboard balsamiq

Aby návrh vyzeral realisticky, hneď na úvod si vložím browser. Výška a šírka sa dá počas práce prispôsobovať a môžete si do neho vpísať názov svoje webstránky.

Vďaka browseru vyzerá wireframe realisticky

Následne začnem s pridávaním jednotlivých elementov. Obrázky, textové polia, ikony, obsahové boxy, tlačidlá, cenník, referencie až po kontakty. Wireframe je úplne jednoduchý, žiadne rafinované UX finty nie sú potrebné. Keď potenciálny klient príde na landing page, odpoviem na jeho otázky, ktoré som si už rozobrala v myšlienkovej mape: komu dokážem pomôcť s jeho problémom, akým spôsobom a za koľko. 

Takto som si vytvorila základnú štruktúru stránky, ktorú budem v textovať. Súbor si z Balsamiqu môžete stiahnuť v PDF alebo PNG formáte. 

Návrh wireframe

Keď budem mať pripravené texty, v Thrive Architecte už ľahko pridám jednotlivé prvky a dokončím celú landing page.

Záver

Aby bola predajná stránka efektívna, treba sa pred samotnou tvorbou pripraviť. Svoj tok nápadov si utriedite vďaka myšlienkovej mape, ktorú môžete použiť na tvorbu štruktúry stránky.

Umiestnenie jednotlivých prvkov na stránke si môžete navrhnúť podľa seba na papier alebo v niektorom z nástrojov na tvorbu wireframov. Alebo sa inšpirujte šablónami v Thrive Architect, kde tvorcovia nástroja prednastavili všetko za vás.

Zistite viac o Thrive Architect

Miška Struhárová

Copywriterka a content manažérka. Bojuje proti nudnému obsahu písaním užitočného, ktorý pomôže alebo vyrieši problém. S WordPressom kráča ruka v ruke každodennou prácou na voľnej nohe.

Diskusia ku článku

Zanechať komentár

*

*

Tvorba landing page v Thrive Architect | Zarábajúciweb.sk

[…] 2. diel: Príprava na tvorbu landing page: myšlienková mapa a wireframe […]

13 tipov, ako napísať presvedčivý text | Zarábajúciweb.sk

[…] 2. diel: Príprava na tvorbu landing page: myšlienková mapa a wireframe […]

Thrive Architect: skvelý nástroj na tvorbu landing pages | Zarábajúciweb.sk

[…] 2. diel: Príprava na tvorbu landing page: myšlienková mapa a wireframe […]