PrA�prava na tvorbu landing page: myA?lienkovA? mapa a wireframe

Miška Struhárová Landing pages

AZalA?ie A?asti seriA?lu o tvorbe landing pages

1. diel: PreA?o je Thrive Architect skvelA? nA?stroj na tvorbu landing pages

2. diel: prA?ve A?A�tate

3. diel:A�13 tipov, ako napA�saA? presvedA?ivA? text

4. diel:A�Tvorba landing page v Thrive Architect

5. diel:A�PlatenA� aj neplatenA� spA?soby, ako propagovaA? landing page

V roku 2018 som si dala za cieA? pracovaA? so zahraniA?nA?m klientom. A�anca, A?e bude vedieA? po slovensky je takmer nulovA?, preto som sa rozhodla pripraviA? svoje portfA?lio ako anglickA? landing page, ktorA? pouA?ijem na zA�skavanie pracovnA?ch dopytov.

Aby landing page plnila A?A?el, ktorA? od nej oA?akA?vam, zamerala som sa na dA?kladnA? prA�pravu. V dneA?nom A?lA?nku vA?m ukA?A?em, ako mA?A?e pomA?cA? pri tvorbe takejto strA?nky myA?lienkovA? mapa a ako ju vyuA?ijete pri tvorbe samotnej strA?nky.

1. fA?za: myA?lienkovA? mapa

Kedysi som bola ten typ A?loveka, ktorA? si stA?le pA�A?e poznA?mky a keA? sa k nim po A?ase vrA?ti, nevyznA? sa v nich. NehovorA�m o osnovA?ch k A?lA?nkom, ale predovA?etkA?m som si nepamA�tala sA?vislosti, pri ktorA?ch poznA?mky vznikli.

Ak vA?hate, A?i je myA?lienkovA? mapa pre vA?s, asi vA?s prekvapA� ich univerzA?lne vyuA?itie. MA?A?ete premA?A?A?aA? s celA?m tA�mom nad problA�mom a spisovaA? si myA?lienky, zjednoduA?iA? zloA?itA� procesy, dokA?A?ete si zmanaA?ovaA? a naplA?novaA? svoje A?lohy, stanoviA? ciele pre svoj tA�m.

VyuA?itie nA?jdu nielen pri prA?ci a podnikanA�. MyA?lienkovA� mapy mA?A?ete pouA?iA? pri plA?novanA� dovolenky alebo na vytvorenie prehA?adnejA?ie systA�mu pri uA?enA� a spracovanA� veA?kA�ho mnoA?stva informA?ciA�.

Pri tvorbe landing page pre zahraniA?nA?ch klientov som sa rozhodla, A?e si prA�pravu urobA�m poctivejA?ie a rozpA�A?em si vA?etky myA?lienky do myA?lienkovej mapy. Predsa len, keA? porovnA?m svoje znalosti pred 2,5 rokom, kedy som zaA?A�nala pracovaA? na voA?nej nohe, boli veA?mi obmedzenA� v porovnanA� s tA?m, A?o dokA?A?em pre klientov urobiA? teraz. Takto sa mi bude A?ahA?ie tvoriA? A?truktA?ra landing page a aj texty.

NA?stroje na myA?lienkovA� mapy

KeA? v 60. rokoch 20. storoA?ia Tony Buzan vytvoril tA?to metA?du, staA?il papier a ceruzka. NehovorA�m, A?e to nie je dobrA? metA?da aj teraz, no z praktickA�ho hA?adiska som si vybrala poA?A�taA?ovA? verziu. Je to hlavne z dA?vodu neustA?le preA?krtA?vania a prehadzovania myA?lienok, A?o v by v papierovej narobilo veA?a chaosu.

MA?A?ete si stiahnuA? rA?zne softvA�ry a pouA?A�vaA? ich priamo vo svojom poA?A�taA?i, alebo si mapu vytvorA�te cez online aplikA?ciu.

DobrA? A?lA?nok o nA?strojoch som naA?la na blogu umeniekreativity.sk, kde je rozpA�sanA? zoznam 15 nA?strojov na myA?lienkovA� mapy.

Moju som vytvorila v aplikA?cii mindmup.com. Program je zadarmo a mapu si viete stiahnuA? v rA?znych formA?toch. Na vzhA?ade mi aA? tak nezA?leA?A�, dA?leA?itA? bol pre mA?a A?A?el.

Takto vyzerA? rozhranie, svoje myA?lienky vpisujete do okienok, ktorA� vzA?jomne prepA?jate a mapa sa postupne rozvetvuje:

rozhranie prA?ce v mindmup.com

kliknite pre vA�A?A?ie rozlA�A?enie

AkA� sA? vA?hody tvorby myA?lienkovej mapy?

Existuje veA?a rA?d, ako z mA?p vyA?aA?iA? maximum, no najlepA?ie urobA�te, ak si nA?jdete vlastnA? A?tA?l a vyuA?iA? benefity, ktorA� vA?m vyhovujA?. Tony Buzan tieA? pridA?va rady, ako si vkladaA? do mA?p obrA?zky a pouA?A�vaA? iba jedno kA?A?A?ovA� slovo. Svoju mapu som pripravila bez akA�hokoA?vek A?A�tania tipov a vA?aka nej som si perfektne zoradila myA?lienky, ktorA� mi dA?vajA? zmysel.

Na zaA?iatok si treba zvoliA? A?A?el mapy. V mojom prA�pade je to rozpracovanie sluA?ieb, ktorA� poskytujem ako freelancer. StrA?viA? A?as nad tvorbou myA?lienkovej mapy vnA�mam pozitA�vne z 2 dA?vodov:

1. MyA?lienky mA?m zhrnutA� na jednom mieste, rozdelenA� podA?a sA?vislostA�

Rozdelila som si mapu na 3 hlavnA� A?asti: KTO je mA?j potenciA?lny, akA? mA? PROBLA�M a akA� RIEA�ENIA na problA�m mA?A?em ponA?knuA?.

KeA? budem chcieA? nabudA?ce odprezentovaA? svoje sluA?by, pripraviA? si email alebo popis, staA?A� si otvoriA? mapu a vA?etko v nej nA?jdem pekne prepojenA�.

2. PriA?la som na A?alA?ie nA?pady, ktorA� nadvA�zovali na jednotlivA� A?asti mapy

Pri spisovanA� rieA?enA�, ktorA� dokA?A?em klientom ponA?knuA?, mi napadli A?alA?ie typy obsahu, ktorA� nepouA?A�vam kaA?dA? deA?. Napadli A?alA?ie skupiny klientov, pre ktorA?ch by som mohla byA? prA�nosom.

Je teda moA?nA�, A?e keA? uvidA�te A?truktA?ru svojej mapy a jednotlivA� prepojenia, dostanete novA� nA?pady, na ktorA� by ste pri beA?nom poznA?mkovanA� nepriA?li.

FinA?lny vA?sledok mojej myA?lienkovej mapy (rozkliknite pre vA�A?A?ie rozlA�A?enie)

moja myA?lienkovA? mapa

2. fA?za: tvorba A?truktA?ry strA?nky

KeA? uA? mA?m vA?etky dA?leA?itA� body okolo mojich sluA?ieb spA�sanA� a rozdelenA� v myA?lienkovej mape, prichA?dza A?as, pouA?iA? ich na tvorbu A?truktA?ry landing page, A?iA?e toho, ako budA? jednotlivA� prvky usporiadanA�.

StrA?nku budem skladaA? v builderi Thrive Architect. MA?m 2 moA?nosti:

  • vytvorA�m si wireframe celA? podA?a seba a pouA?ijem prA?zdnu strA?nku,
  • pouA?ijem niektorA? zo vyA?e 220 A?ablA?n, ktorA� Thrive Architect ponA?ka.

Ak ste eA?te A?iadnu landing page nevytvorili, najjednoduchA?ie rieA?enie bude vybraA? si niektorA? zo A?ablA?n. Prvky sA? usporiadanA�, staA?A� si len vymeniA? fotky, doplniA? vlastnA� texty, odkazy a prA�padne prepojiA? s kontaktnA?m formulA?rom alebo e-mailovou databA?zou.

Tvorba vlastnA�ho wireframe

DruhA? moA?nosA? je vlastnA? wireframe. Ja som sa rozhodla pre tA?to moA?nosA?. Wireframe je nA?A?rt vzhA?adu webu a rozloA?enie obsahu, umiestnenie call-to-action prvkov atA?. DizajnA�ri ho pouA?A�vajA? ako sA?A?asA? procesu navrhovania webu, kedy strA?nka dostane svoj prvA? vizuA?lny nA?A?rt.A�

Existuje mnoA?stvo nA?strojov. Pre vlastnA� potreby si niektorA� kreslia nA?vrhy na papier, no ja uprednostA?ujem online nA?stroje. PouA?A�vam program Balsamiq Mockups, ktorA? obsahuje vA?etky dA?leA?itA� prvky a je veA?mi jednoduchA? na pouA?A�vanie.

NA?vrhy si z programu viem uloA?iA? a poslaA? klientovi, prA�padne si ich vytlaA?A�m a textujem.

KeA? program otvorA�te, zobrazA� sa pred vami pracovnA? plocha. Na hornej liA?te sA? abecedne zoradenA� vA?etky prvky, ktorA� mA?A?ete pri dizajnovanA� wireframe potrebovaA?.

dashboard balsamiq

Aby nA?vrh vyzeral realisticky, hneA? na A?vod si vloA?A�m browser. VA?A?ka a A?A�rka sa dA? poA?as prA?ce prispA?sobovaA? a mA?A?ete si do neho vpA�saA? nA?zov svoje webstrA?nky.

VA?aka browseru vyzerA? wireframe realisticky

NA?sledne zaA?nem s pridA?vanA�m jednotlivA?ch elementov. ObrA?zky, textovA� polia, ikony, obsahovA� boxy, tlaA?idlA?, cennA�k, referencie aA? po kontakty. Wireframe je A?plne jednoduchA?, A?iadne rafinovanA� UX finty nie sA? potrebnA�. KeA? potenciA?lny klient prA�de na landing page, odpoviem na jeho otA?zky, ktorA� som si uA? rozobrala v myA?lienkovej mape: komu dokA?A?em pomA?cA? s jeho problA�mom, akA?m spA?sobom a za koA?ko.A�

Takto som si vytvorila zA?kladnA? A?truktA?ru strA?nky, ktorA? budem v textovaA?. SA?bor si z Balsamiqu mA?A?ete stiahnuA? v PDF alebo PNG formA?te.A�

NA?vrh wireframe

KeA? budem maA? pripravenA� texty, v Thrive Architecte uA? A?ahko pridA?m jednotlivA� prvky a dokonA?A�m celA? landing page.

ZA?ver

Aby bola predajnA? strA?nka efektA�vna, treba sa pred samotnou tvorbou pripraviA?. Svoj tok nA?padov si utriedite vA?aka myA?lienkovej mape, ktorA? mA?A?ete pouA?iA? na tvorbu A?truktA?ry strA?nky.

Umiestnenie jednotlivA?ch prvkov na strA?nke si mA?A?ete navrhnA?A? podA?a seba na papier alebo v niektorom z nA?strojov na tvorbu wireframov. Alebo sa inA?pirujte A?ablA?nami v Thrive Architect, kde tvorcovia nA?stroja prednastavili vA?etko za vA?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

*

*

PlatenA� aj neplatenA� spA?soby, ako propagovaA? landing page | Zarábajúciweb.sk

[…] 2. diel:A�PrA�prava na tvorbu landing page: myA?lienkovA? mapa a wireframe […]

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 […]