Prestaňte kopírovať webové príklady. Ukradnite ich kostru.

Zhrnutie

Väčšina rád o webových príkladoch je pasca. Hovorí vám, aby ste kopírovali to, čo funguje, takže vložíte SaaS hero sekciu na stránku advokátskej kancelárie a čudujete sa, prečo stroskotá. Príklad je dôkazom rozhodnutia, nie šablónou na replikáciu. Proces, ktorý funguje, je spätné inžinierstvo: vytiahnite úvahy stojace za hero sekciou, dôkaz a výzvu na akciu, potom tieto rozhodnutia znovu postavte pre kupujúcich každého klienta. Tento článok vám ukáže, čo ukradnúť z príkladov SaaS, agentúr a portfólií, a ako si vytvoriť swipe súbor rozhodnutí, vďaka ktorému bude systém opakovateľný pre každého klienta.

Väčšina rád o webových príkladoch je pasca. Hovorí vám: "nájdite stránky, ktoré sa vám páčia, a ukradnite ich." Tak si vytvoríte priečinok záložiek a potom znovu postavíte rovnakú hero sekciu, rovnaký layout, rovnaké hover efekty pre pokrývača, advokátsku kanceláriu a B2B SaaS klienta. Výsledok: drahé klony, ktoré vyzerajú rovnako a konvertujú rovnako — zle. Príklad nie je šablóna. Je dôkazom rozhodnutia, ktoré urobil múdry tím pre konkrétne publikum, konkrétny moment a konkrétny komerčný sľub. Proces, ktorý skutočne funguje, je spätné inžinierstvo: prečítajte príklad, aby ste videli rozhodnutia za ním, zapíšte si ich jednoduchými vetami a potom ich odznova postavte pre kupujúcich každého klienta.

Čítajte hero sekciu ako zmluvu

Každý prehľad príkladu začnite čítaním hero sekcie ako zmluvy. Všimnite si sľub v nadpise, dôkaz v podnadpise a jedinú výzvu na akciu. Všetko ostatné je dekorácia. Opýtajte sa, aké rozhodnutie o návštevníkovi urobil tvorca pred napísaním tohto nadpisu. Odpoveď je časť, ktorú môžete znovu použiť.

Tagline Calendly — "plánujte stretnutia bez emailovej ping-pong" — funguje, pretože tvorca sa rozhodol, že návštevník je zaneprázdnený profesionál topiaci sa v emailovej komunikácii. Sľubom je ušetrený čas. CTA je "rezervovať stretnutie." Toto rozhodnutie sa prenáša na služby. Návštevník účtovníckeho klienta je podnikateľ, ktorý neznáša papierovačky; nadpis by mal sľubovať "uzavrite účtovníctvo bez chaosu v tabuľkách" a CTA by mala byť "získajte bezplatný vyčistenie." Rovnaké rozhodnutie, iné slová. Notion cieli na jedinú CTA, "Získajte Notion zadarmo," z rovnakej disciplíny: jedna stránka, jedna akcia, žiadne rozptýlenia. Všimnite si, čo nevidíte — žiadny karusel, žiadne sekundárne tlačidlá "dozvedieť sa viac", žiadny formulár žiadajúci telefónne číslo. Každé vynechanie je rozhodnutie a rozhodnutia o vynechaní sú najlacnejšie na kopírovanie, pretože nič nestoja.

Hero sekcia Linearu posúva túto disciplínu ďalej. Jeden nadpis, jeden podnadpis, jedno tlačidlo — žiadne screenshoty, kým neprejdete nižšie. Rozhodnutie: "toto publikum už pozná problém, takže našou úlohou je komunikovať vhodnosť, nie vzdelávať." Uložte si toto rozhodnutie. Keď sú kupujúci vášho klienta sofistikovaní, kopírujte zdržanlivosť. Keď nie sú, viete, že pred kliknutím musíte pridať viac vysvetlenia. Počet slov v hero sekcii je tiež rozhodnutie. Hero sekcia, ktorá sa snaží povedať tri veci, nekomunikuje nič. Ak má príklad príliš veľa myšlienok nad záhybom, berte to ako varovanie, nie ako model.

Prejdite si s tým reálny príklad. Prezeráte si domovskú stránku SaaS, ktorú obdivujete. Hero sekcia má krátky nadpis, jeden podnadpis, jedno tlačidlo. Zapíšte rozhodnutia v poradí: kto je návštevník, aká je jeho bolesť, aká je jedna akcia, ktorá ho posunie vpred. Teraz to aplikujte na klienta v pokrývačstve. Návštevník je správca nehnuteľnosti so zatekajúcou strechou uprostred zimy. Bolesťou je riziko a prestoje. Akciou je "získať posúdenie." Ak sa SaaS príklad rozhodol, že "návštevník potrebuje vidieť produkt v pohybe," vymeníte produktovú animáciu za fotografiu dokončenej práce. Rovnaké rozhodnutie, iné médium. Takto kradnete bez zlyhania lookalike. Len pre disciplínu jedna-stránka-jedna-akcia ponorte sa do osvedčených postupov pre SaaS landing pages.

Nie je to o odvetví, ale o zámere

Prestaňte klasifikovať príklady podľa odvetvia. "Toto je SaaS stránka" vám nepovie takmer nič užitočné. "Toto je stránka pre zložité rozhodnutie, kde kupujúci porovnáva tri možnosti, kým sa zaviaže" vám povie, čo ukradnúť. Klasifikujte podľa zámeru kupujúceho vášho klienta a potom priraďte typ príkladu k tomuto zámeru.

SaaS stránka dosahuje konverziu, pretože zámer kupujúceho je "rozhodnúť sa, či to vyrieši môj problém." Nadpis nesie sľub, skúšobná verzia alebo demo je dôkaz, CTA je jednotná. Agentúrna stránka dosahuje konverziu, pretože zámer kupujúceho je "môžem tejto osobe zveriť svoje peniaze, značku alebo krízu?" Dôkazom sú prípadové štúdie, logá klientov, dôveryhodnosť tímu. CTA je často konzultácia. Portfóliová stránka dosahuje konverziu, pretože zámer kupujúceho je "je ich vkus taký dobrý ako ich reputácia?" Dôkazom je samotná práca a CTA je niekedy zámerne skrytá.

Typ príkladu	Zámer návštevníka	Ukradnite toto	Preskočte toto
SaaS	"Rozhodnúť, či mi to sedí"	Disciplína hodnotovej ponuky, jediná CTA, copy od funkcií k výhodám	Animácie len produktu, štruktúra cenníka, CTA orientované na demo
Agentúra	"Môžem tejto firme dôverovať?"	Prípadové štúdie, dôkazy od klientov, menovaný tím, jasná cesta spolupráce	Dlhé procesné stránky, copy plné žargónu
Portfólio	"Je ich vkus taký dobrý ako ich práca?"	Silné príbehy projektov, pred/po, zdržanlivá prezentácia	Riedke kontaktné údaje, copy orientovaný na osobnosť, skryté CTA

Tu agentúry robia chybu: príklad prispôsobia vlastnej ambícii, nie kupujúcemu klienta. Klient advokátskej kancelárie žiada "portfólio stránku", pretože ju má konkurencia. Urobte test zámeru. Človek, ktorý si najíma právnika, má strach. Chce dôkaz, že právnik vyhral podobné prípady, účtuje spravodlivo a nebude mu dávať pocit, že je hlúpy. To je agentúrny vzor — dôkaz, dôveryhodnosť, výsledky — nie portfólio. Ukradnite z agentúrnych príkladov: výsledky prípadov, príbehy klientov, členstvo v komore, jasnú sekciu "ako spolupráca začína." Keď potrebujete rozhodnúť, ktorý formát skutočne vyhrá pre daného klienta, prejdite si rámec výberu formátu pred otvorením akéhokoľvek príkladu.

Tabuľka je nástroj triage, nie väzenie. Pre stavebného subdodávateľa, ktorý sa uchádza o komerčné projekty, je zámer kupujúceho "dokáže tento tím pracovať podľa harmonogramu a rozpočtu?" To je agentúrna dôvera s portfóliovým dôkazom. Hybridy sa dejú neustále. Chybou je myslieť si, že musíte vybrať jeden formát. Vyberáte, ktorý vzor dominuje, nie ktorý jediný formát použiť. Stavebná stránka môže ukázať fotografie pred/po (portfólio vzor) a aj tak viesť s bezpečnostnými certifikátmi a členstvom v odboroch (agentúrny vzor). Rozhodnite pomer podľa zámeru a potom nechajte hlas značky klienta určiť finálny layout.

Prejdite si druhý scenár: konzultácia fractional-CFO. Kupujúcim je zakladateľ, ktorého spálil predchádzajúci konzultant. To je agentúrny problém. Študujte agentúrne stránky, ktoré uvádzajú mená klientov a presné výsledky. Váš klient nie vždy môže uviesť mená klientov — NDA — takže rozhodnutie sa prenáša, ale dôkaz sa mení: anonymizovaná "portfóliová spoločnosť vo fintech" a jazyk výsledkov namiesto log. Napíšte do plánu "dôvera závisí od konkrétnosti dôkazu." Teraz klient vie, prečo každý prvok existuje.

Požičajte si rozhodnutie, nie dizajn

Väčšina článkov o "najlepších postupoch" vám hovorí, že dizajnové voľby sa prenášajú. Neprenášajú sa. Full-bleed video hero funguje na portfóliu leteckej fotografie, pretože úlohou publika je posudzovať obrázky. Umiestnite rovnaké full-bleed video na domovskú stránku služby právnych dokumentov a skryjete produkt. Najhoršia rada, ktorú môžete nasledovať, je "kradni ako umelec." Kradnutie výstupov vytvára lookalike. Kradnutie rozhodnutí vytvára vlastnú prácu, ktorá konvertuje.

Takže pre každú pozoruhodnú voľbu v príklade napíšte jednovetové "pretože." Biele miesto: "pretože toto publikum spája priestor s prémiovosťou." Tmavé pozadie: "pretože toto publikum myslí inžiniersky a tmavý režim pôsobí technicky." Usmievavý človek: "pretože toto publikum sa bojí transakcie a chce teplo." Teraz je rozhodnutie prenosné. Prémiová advokátska kancelária môže potrebovať rozhodnutie o bielom mieste; zľavnená právna služba ho musí odmietnuť. Teraz máte pravidlo, ktoré môžete aplikovať, nie screenshot na kopírovanie.

Napíšte "pretože" predtým, než urobíte screenshot. Vaša pamäť zaradí screenshot pod "pekný dizajn" a do týždňa stratí úvahu. Napísané "pretože" vás núti formulovať mechanizmus. Ak ho neviete napísať, nepochopili ste príklad — len sa vám páčil. Tento rozdiel je celá hra.

Pridajte jeden konkrétny príklad. Vidíte portfólio stránku pre nezávislého dizajnéra. Každý projekt sa otvára obrovským obrázkom, potom výsledkom, potom menom klienta. Rozhodnutie: "toto publikum kupuje výsledky pohľadom na vec." Teraz prerábate stránku pre rekonštrukciu domov. Úlohou kupujúceho je tiež pozerať sa na vec — na premeny. Takže rozhodnutie sa prenáša: začnite galériou projektov pred/po. Ale kupujúci tiež potrebuje dôveru, že tím príde načas, preto pridáte rozhodnutie z agentúrneho stĺpca: CTA na konzultáciu a odporúčanie nad záhybom. To je metóda kradnutia kostry: dve požičané rozhodnutia, nulový požičaný dizajn.

Budete počuť odpor klientov, ktorí chcú stránku, čo vyzerá ako ocenený príklad, ktorý ste im ukázali. Slušne odolávajte. Povedzte im, že príklad vyhral ocenenia za rozhodnutia, nie za pixely, a ich kupujúci nie sú kupujúci z príkladu. Konverzácia je jednoduchšia, keď môžete ukázať na jednovetové "pretože" a povedať "toto rozhodnutie funguje; tento vizuál nie pre vaše publikum."

Poznámka: ak sú kupujúci vášho klienta vizuálne sofistikovaní — architekti, kreatívni riaditelia, interné brand tímy — vkus je produkt. Požičiavajte doslovnejšie. Otázka nikdy nie je "páči sa mi tento príklad?" Ale "potrebuje kupujúci môjho klienta toto rozhodnutie?" Ak nie, zahoďte ho bez výčitiek.

Vytvorte si swipe súbor s kontextom

Jednorazová inšpirácia je zbytočná, keď ročne vytvoríte mnoho stránok. Vytvorte si swipe súbor, ktorý ukladá rozhodnutia, nie screenshoty. Použite jednoduchú tabuľku: príklad, URL, publikum, zámer, sľub, dôkaz, CTA a "nepoužívať pre." Pridajte ešte jeden stĺpec pre jednovetové "pretože." V tomto stĺpci je hodnota.

Každý riadok potrebuje: URL príkladu, screenshot, jednovetové "pretože", dominantný zámer kupujúceho, sľub, dôkaz, CTA a varovanie "nepoužívať pre." Označte každý riadok štítkom zámeru: "naliehavá miestna služba," "zvážený nákup," "profesionál citlivý na dôveru," "kreatívec riadiaci sa vkusom." Keď príde nová klientova brífka, najprv filtrujte podľa štítku zámeru. Odvetvie je len rozhodujúce v prípade rovnosti. Zubný klient a inštalatérsky klient môžu zdieľať zámer "získať cenovú ponuku ihneď" — inštalatérske príklady môžu zubnej stránke poslúžiť lepšie ako luxusná stránka špecifická pre zubárov, ktorú ste uložili minulý týždeň.

Prehodnoťte súbor štvrťročne. Odstráňte príklady, ktoré už nekonvertujú alebo stratili platnosť. Pridajte jeden poznatok týždenne, aj keď je to jediná CTA. Po dvoch štvrťrokoch vlastníte internú knižnicu rozhodnutí, ktorú žiadny jednotlivý príklad nemôže poskytnúť.

Použite súbor na kickoffoch s klientmi. Prezentujte filtrovaný pohľad: "tento stránkový systém sme postavili z troch rozhodnutí, ktoré sedia vašim kupujúcim." Ukazuje to, že vaša agentúra má systém, nielen vkus. To samo o sebe vyhrá viac práce ako kopírovanie trendového layoutu.

Predtým, než niečo odovzdáte, auditujte výsledok tak, ako by to urobil zákazník, ktorému je to jedno. Tento audit odhalí každé ukradnuté dizajnové rozhodnutie, ktoré si svoje miesto nezaslúži.

Záver

Prestaňte zbierať webové stránky. Začnite zbierať dôvody. Keď nabudúce dostanete klientovu brífku, otvorte swipe súbor, nájdite zámer, ktorý sedí ich kupujúcim, a ukradnite rozhodnutia, ktoré sedia. Dizajn bude ich z nevyhnutnosti — pretože ich trh, značka a rozpočet sú iné. To je pointa. Spätne vyvinutá stránka konvertuje, pretože je postavená z rozhodnutí, ktoré boli pravdivé pre publikum niekoho iného a boli znovu otestované proti vášmu.