Focus Lab
Agentura zaměřující se na značky.
🧭 V prezentaci se posouvejte se šipkami ↑ nahoru a ↓ dolů
Landing page odshora až dolů™
Rozbor hlavní stránky
Prohlédněte si stránku živě—
a pak pokračujte v rozboru…
💪🏻 Pojďme na rozbor…
Focus Lab je ve světě známá agentura, která roky navrhuje zajímavé značky, nastavuje vizuální komunikaci, tvoří weby apod.
Pojďme mrknout na jejich web…
První sekce webu? Skvělá… Bez fotografie nebo ilustrace. Pouze text s dekorativními prvky. Ne vždy je nutnost používat vizuál v první sekci stránky.
Proč jim to funguje? Jak zaručit, aby textový obsah vizuálně vyčníval? Ukažme si to…
Kde je kontrast, tam je atraktivita. Jak je kontrast zaručen?
1. Velikost nadpisu vůči ostatním textům—velikost nadpisu je oproti dalším textům enormně velký.
Tip: Pokud chcete dosáhnout kontrastu ve velikosti, udělejte jeden prvek minimálně 2x větší.
115 px
30 px
15 px
16 px
16 px
Min. 3x větší
2. Syté navzájem kontrastní barvy jsou výhra.
Kombinace 2 barev z palety, které jsou syté a vůči sobě v kontrastu fungují skvěle jak v tisku, tak na obrazovce.
Pozn.: Tmavě zelená není barvou značky Focus Lab. Patří jednomu ze zpracovaných projektů. Shodou náhod (nebo záměrem) je v kontrastu s červenou barvou, takže v souhře působí dynamicky a atraktivně. 👍
3. Výrazné a vyčnívající patkové písmo.
Tvary jednotlivých písmen mají hodně nepravidelné tvary. Oproti např. geometrickým písmům.
Všimněte si třeba toho, jak se střídají tloušťky tahů. Toto střídání „extrémů“ přináší další část kontrastní skládačky.
Tenké tahy
Tlusté tahy
Takhle by to vypadalo, kdyby se použilo písmo z běžného textu. Nevypadá to špatně. Přijdete ale o kontrast získaný z výběru odlišného písma.
4. Nepravidelný prvek, který rozbourá stereotyp.
Zakroužkování jednoho slova přináší 2 situace, jak je použitý kontrast.
a) Kroužek je červený a odlišuje se od okolního černého písma.
b) Kroužek má nepravidelný tvar (ručně kreslený). Narozdíl od zbytku prvků. Přestože písmena nadpisu mají nepravidelné tvary, tak jako celek (písmo) fungují pravidelně a zarovnaně.
Takhle by to vypadalo, kdybyste nezvýraznili žádné slovo. Ano, bude to fungovat. Ale s kroužkem vás sekce praští více do očí.
Kromě toho je kroužek vizuálně (barevně) propojen s dalšími prvky (logo, šipka u odkazu). Rozkládá se tak barevná „váha“ v celé sekci webu.
Když toto všechno spojíte dohromady, dokážete vytvořit atraktivní rozložení sekcí webu, aniž byste použili příliš grafiky.
Tip: Pokud se vám při návrhu vašeho webu zdá rozložení nudné, zamyslete se, kde všude lze doplnit kontrast. Kontrasty můžete sčítat a efekt stupňovat.
A co po obsahové stránce? Minimální a kreativní…
Nadpis:
„Buďte značkou, kterou vaši zákazníci chtějí a kterou bude konkurence závidět.“
Kreativní zpracování s nápadem a myšlenkou. Málo slov řekne opravdu hodně.
Přináší rovnou 2 přísliby:
a) Získáte přesně takovou značku, kterou zákazníci chtějí a která s nimi bude rezonovat.
b) Získáte značku, kterou vám bude konkurence závidět. Protože bude opravdu dobrá. 👏
Podnadpis:
„Focus Lab je globální B2B agentura tvořící značky.“
Vysvětlení, co Focus Lab je. Jasně, stručně a bez keců.
Jasné zacílení zákazníků. Pro koho Focus Lab pracuje = B2B.
Po shlédnutí této první sekce stránky je vám hned jasné, o čem web je a co a komu nabízí. A také co mohu jako potenciální zákazník získat.
Je to pro mě? Pokud ano, skroluju dál…
Ukázka 3 případových studií.
Nutně neukazujte všechny práce. Vypíchněte klidně jen 3. Snížíte tak uživatelovo mentální zatížení a nepřehltíte jo. Snadněji se rozhodne.
Další položky skryjte pod odkaz.
Hickův zákon (Hick’s Law) – Čas, který potřebuje uživatel k udělání rozhodnutí, se zvyšuje s počtem voleb a rostoucí složitostí. Více
Podívejte se, jak jsou jednotlivé prvky vizuálně propojeny…
1) Všechno je zarovnáno na mřížku. Tím se zaručí vizuální provázanost a konzistence. Zarovnávejte prvky vůči sobě
a k mřížce.
2) Každý prvek je rozložen tak, aby působil, že patří k jinému. Na základě Gestalt principu blízkosti tvoří prvky pomyslné skupiny. A musí to být vizuálně zřejmé. Jen tak se zaručí jasná informační hierarchie.
Proto musí být mezi prvky tak akorát prázdného prostoru. Prvky se buď pomocí malých mezer „spojují“ nebo větší mezer „oddělují“.
Na můj vkus bych ještě mezeru mezi „velkým“ projektem a dvěma „menšími“ zvětšil, aby se od sebe vizuálně více „odpoutaly“ a tvořily samostatné skupiny.
Video – mocný prvek. Ukažte lidem svoji práci, aniž by cokoliv museli dělat. U videa se jen zastaví a seldují. Nemusí skrolovat. Obecně jsou lidé „líní“. Ulehčete jim jakoukoliv akci, když to jde.
Jedno video řekne více ne 1000 slov. Navede vás příběhem tam, kam je potřeba. Snadno si informace zapamatujete.
Video krásně vytvoří vazbu mezi vámi a značkou.
Znáte to, když se o nějakou věc začnete zajímat a pak ji vidíte všude? Právě proto k tomu díky silné vazbě dochází. Říká se tomu Iluze frekvence. 🎁 Více v bonusu.
Ahh, že by „prodejní“ sekce?
„Posuňte se za hranice vaší současné značky.“
To je vcelku klišé a bez nápadu. Určitě by se dal vymyslet kreativnější, prodejnější a přínosnější nadpis…
…Následující textové bloky už jsou promyšlenější.
Pracují tu s „what if“…
Co když/co kdyby:
- „Mohli byste jasně sdělit, co děláte a proč na tom záleží?“
- „Vaše značka by byla plně v souladu s vaším posláním a vizí?“
- „Věděli byste, že vaše značka je připravena přerůst ze startupu na miliardový byznys?“
- „Vaše vnitřní kultura by vám připadala jako dokonalé rozšíření vaší značky?“
…
Nechte zákazníka snít. Nalaďte se na jeho vlnu. Ukažte mu, jak by mohla vypadat dokonalá realita a co by mohl získat. Ulehčete mu vizualizaci pomocí správných textů.
Tip: Pro lepší vizualizaci použijte
i obrázky, fotky, videa, …
Cílem je, aby se v popsané situaci viděl a sám si odpověděl, že potřebuje posunout svůj aktuální stav a vyřešit problém.
Cesta z bodu A do body B. Zákazník je někde (A), a potřebuje se dostat někam jinam (B).
Jde o přeměnu, kterou zákazník podstoupí, zakoupí-li si produkt nebo službu.
Pojďme ještě trochu podtrhnout sociální důkaz. Ne vždy to musí být čísla a hodnocení zákazníků.
Jednou z ověřených forem je předávání know-how a zkušeností. Když o něčem publikujete, je dost zřejmé, že o tématu hodně víte.
Běžná praktika content marketingu.
Sociální důkaz - ukažte lidem, s jakými společnostmi jste spolupracovali, abyste vzbudili důvěru.
Všimněte si, jak jsou loga vizuálně vybalancovaná. To znamená, že loga nemají stejně danou pevnou velikost. Každé z nich je různé velké. Cílem je dosáhnout optické rovnováhy mezi různě velkými a tučnými logy.
Zajímavý „social proof“ prvek, který jsem jen tak neviděl.
Výpis článků z médií, které se týkají klientů.
Přestože články nejsou o agentuře Focus Lab, působí důvěryhodně a vrhají na společnost pozitivní světlo.
Výzva k akci. Na první pohled blok s textem a odkazem pro kontakt. Ale v textu skrývá jeden zajímavý prodejní prvek…
„Rádi si poslechneme o problémech vaší značky a podnikání, i když si nejste jisti, jaký bude váš další krok. Žádné závazky.“
1/ Ukazujete, že si klienta rádi poslechnete. Projevujete zájem.
2/ A to i přesto, že v tom trochu plave a neví, jak dál postupovat. Odbouráváte obavu ozvat se.
3/ Sdělujete, že se klient ničím nezavazuje. To je další obava, která je vyvrácena.
Začínali jsme kontrastem, pojďme jím skončit…
Celý blok pro výzvu k akci funguje, protože:
- Bílá karta je v kontrastu v ostatním pozadím. Překrývá je a vytváří hloubku v designu. Je zároveň světlejší než pozadí ostatních sekcích, a tak působí, že je v prostoru blíže k nám.
Tip: Světlé objekty působí, že jsou v prostoru blíže k nám a tmavé naopak.
- Krátký odstavec textu
– člověk by si řekl, že když jde o výzvu k akci, že musí být velký. Díky kontrastu nemusí. Je kolem něj spoustu prázdného prostoru, takže na sebe dostatečně upozorňuje. -
Odstavec textu je navíc
v kontrastu s velkým odkazem.
Díky tomu celý blok s výzvou dobře funguje.
Na závěr určitě stojí za zmínku i patička webu, která má netradiční rozložení a zaujme.
V levé půlce odkaz na důležité stránky webu. V pravé půlce newsletter, slogan a meta informace o webu.
Obě půlky jsou od sebe odděleny prázdným místem. Takže patička nepůsobí zahlceně.
Prázdný prostor, velikost sloganu a červený znak dělají patičku díky kontrastu zajímavou, ne nudnou.
Výborně! Dokončili jste rozbor! 🎉
Co si z něho odnést? (pokračujte 👉)
🎉
🎉
🎉
🎉
🎉
🎉
- Když není vizuál, použijte jen text s využitím kontrastu.
- Velikost jednoho textu vůči ostatním (minimálně 2x větší).
- Použijte syté a vůči sobě kontrastní barvy.
- Pro nadpisy použijte nepravidelné písmo (členité, různé šířky tahů).
- Zvýrazněte důležité slovo nebo frázi nepravidelným tvarem, podtržením, zakroužkováním, apod.
- Provázejte design barevnými prvky a snažte se ho vybalancovat.
- Používejte v textech přísliby pro zákazníky.
- Když ukazujete práce, ukažte jich pár a zbytek skryjte viz Hickův zákon.
- Zarovnejte prvky vůči sobě a také na mřížku (konzistence a provázaní).
- Prvky k sobě shlukujte. Zmenšujte nebo zvětšujte prostor mezi nimi tak, aby tvořily pomyslné skupiny viz Gestalt princip blízkosti.
- Když to jde, použijte v prezentaci video, které se zákazníkem naváže vztah, zapamatuje si jej a zafunguje tzv. Iluze frekvence.
- Do textů začleňte v určité formě obsah typu „Co když / co kdyby…“. Ať si zákazník představí vysněnou budoucnost (cesta z bodu A do bodu B).
- Jako prvky sociálního důkazů zkuste použít profesní články nebo články z medií, které se netýkají přímo vás, ale vašich klientů.
- U výzvy k akci vyvraťte potenciální obavy zákazníků.
Klíčové shrnutí
Co jste se dozvěděli? Tipy pro návrh prodejní stránky
👍 Jako předplatitelé rozborů dnes získáváte bonusový obsah, který se vám bude hodit při návrhu webu…
…jde vždy o čerstvě napsaný obsah, který aktuálně tvořím pro své budoucí e-booky…
…k rozborům i bonusům mají přístup pouze předplatitelé. Nikdo další je nezíská…
…v každém rozboru najdete nový materiál… Tak si ho nenechte utéct…
—tady je…👉
✅
2
3
Bonus
Hodnocení
Příště…
Bonus
Mohu vás poprosit o laskavost? Dejte mi, prosím, ⭐️hodnocení na rozbory…
Pomůžete mi tím udržet se
v sedle a pokračovat ve tvorbě →
…
Iluze frekvence
Zpětná vazba
Hodnocení
Jak se vám rozbory líbí? Co byste udělali jinak? Dejte mi zpětnou, abych věděl, co zlepšit. Budu vám opravdu vděčný.
✅
✅
3
Bonus
Hodnocení
Příště…
Klik 👉
👋 Uvidíme se za 2 týdny
V záloze mám spoustu výborných webů
a bonusů, o které se s vámi chci podělit.
Jsem vděčný každému, kdo sdílí myšlenku rozborů na svých sociálních sítích nebo blogu.
Získejte 25% slevu pro vaše předplatné—Jako odměnu za doporučení…
…více o partnerském programu →
✅
✅
✅
Bonus
Hodnocení
Příště…
(Odesílám 1. a 15. v měsíci)