Prestanite kopirati primjere web stranica. Ukradite njihov kostur.

Sažetak

Većina savjeta o primjerima web stranica je zamka. Kaže vam da kopirate ono što funkcionira, pa zalijepite SaaS hero na stranicu odvjetničkog ureda i pitate se zašto ne uspije. Primjer je dokaz odluke, a ne predložak za kopiranje. Proces koji funkcionira je obrnuto inženjerstvo: izvucite razmišljanje iza heroja, dokaza i poziva na akciju, zatim ponovno izgradite te odluke za kupce svakog klijenta. Ovaj članak pokazuje što ukrasti iz SaaS, agencijskih i portfeljskih primjera te kako izgraditi datoteku s odlukama koja sustav čini ponovljivim za svakog klijenta.

Većina savjeta o primjerima web stranica je zamka. Kaže vam: "pronađite stranice koje vam se sviđaju i ukradite ih." Zatim napravite mapu s bookmarkovima, pa ponovno izgradite isti hero, isti raspored, iste hover efekte za krovopokrivača, odvjetnički ured i B2B SaaS klijenta. Rezultat: skupe kopije koje sve izgledaju isto i pretvaraju jednako — loše. Primjer nije predložak. To je dokaz odluke koju je pametan tim donio za specifičnu publiku, specifičan trenutak i specifično komercijalno obećanje. Proces koji stvarno funkcionira je obrnuto inženjerstvo: pročitajte primjer i pronađite odluke iza njega, zapišite te odluke u običnim rečenicama, zatim ih ponovno izgradite od nule za kupce svakog klijenta.

Čitajte hero kao ugovor

Svaki pregled primjera započnite čitajući hero sekciju kao ugovor. Zabilježite obećanje u naslovu, dokaz u podnaslovu i jedan poziv na akciju. Sve ostalo je dekoracija. Pitajte se kakvu je odluku kreator donio o posjetitelju prije pisanja tog naslova. Odgovor je dio koji možete ponovno upotrijebiti.

Calendlyjev slogan — "zakazujte sastanke bez dugih email rasprava" — funkcionira jer je kreator odlučio da je posjetitelj zaposleni profesionalac koji se utapa u email ping-pongu. Obećanje je ušteda vremena. CTA je "zakažite sastanak." Ta se odluka prenosi na uslužni biznis. Posjetitelj knjigovodstvenog klijenta je vlasnik tvrtke koji mrzi papirologiju; naslov bi trebao obećavati "zatvorite knjige bez kaosa s proračunskim tablicama", a CTA bi trebao biti "zatražite besplatno čišćenje." Ista odluka, druge riječi. Notion cilja na jedan CTA, "Preuzmite Notion besplatno," iz iste discipline: jedna stranica, jedna akcija, bez distrakcija. Obratite pažnju na ono što ne vidite — nema karusela, nema sekundarnih gumba "saznajte više", nema obrasca koji traži telefonski broj. Svaki izostanak je odluka, a odluke o izostavljanju najjeftinije je kopirati jer ne koštaju ništa.

Linearin hero gura istu disciplinu dalje. Jedan naslov, jedan podnaslov, jedan gumb — bez snimaka zaslona dok ne skrolate. Odluka: "ova publika već zna problem, pa je naš posao komunicirati podudarnost, ne educirati." Sačuvajte tu odluku. Kad su kupci klijenta sofisticirani, kopirajte suzdržanost. Kad nisu, znate da morate dodati više objašnjenja prije nego što zatražite klik. Broj riječi u heroju također je odluka. Hero koji pokušava reći tri stvari ne komunicira ništa. Ako primjer ima previše ideja iznad pregiba (above the fold), tretirajte ga kao upozorenje, a ne kao model.

Prođite kroz stvarni primjer. Pregledavate SaaS početnu stranicu kojoj se divite. Hero ima kratki naslov, jedan podnaslov, jedan gumb. Napišite odluke redom: tko je posjetitelj, koja je njegova bol, koja je jedna akcija koja ga pokreće naprijed. Sada primijenite na klijenta koji se bavi krovovima. Posjetitelj je upravitelj zgrade s krovom koji prokišnjava usred zime. Bol je rizik i zastoj. Akcija je "zatražite procjenu." Ako je SaaS primjer odlučio "posjetitelj mora vidjeti proizvod u pokretu," zamijenite animaciju proizvoda fotografijom gotovog rada. Ista odluka, drugačiji medij. Tako kradete bez neuspjeha sličnosti. Već samo za disciplinu jedna stranica-jedna akcija, proniknite u provjerene SaaS prakse za landing stranice.

Nije industrija, namjera je

Prestanite klasificirati primjere po industrijskoj oznaci. "Ovo je SaaS stranica" ne govori gotovo ništa korisno. "Ovo je stranica za složenu odluku gdje kupac uspoređuje tri opcije prije nego se obveže" govori vam što ukrasti. Klasificirajte prema namjeri kupca vašeg klijenta, zatim uskladite tip primjera s tom namjerom.

SaaS stranica ostvaruje konverziju jer je namjera kupca "odlučiti rješava li ovo moj problem." Naslov nosi obećanje, proba ili demo su dokaz, CTA je jedan. Agencijska stranica ostvaruje konverziju jer je namjera kupca "mogu li vjerovati ovoj osobi sa svojim novcem, brendom ili krizom?" Dokaz su studije slučaja, logotipi klijenata, vjerodostojnost tima. CTA je često konzultacija. Portfeljska stranica ostvaruje konverziju jer je namjera kupca "je li njihov ukus jednako dobar kao njihova reputacija?" Dokaz je sam rad, a CTA je ponekad skriven s namjerom.

Tip primjera	Namjera posjetitelja	Ukradite ovo	Preskočite ovo
SaaS	"Odlučiti odgovara li mi ovo"	Disciplina vrijednosne ponude, jedan CTA, kopija koja pretvara značajke u koristi	Isključivo animacije proizvoda, struktura stranice s cijenama, CTA-ovi koji prvo traže demo
Agencija	"Mogu li vjerovati ovoj tvrtki?"	Studije slučaja, dokazi klijenata, imenovani tim, jasan put angažmana	Dugotrajne stranice o procesu, kopija puna žargona o pristupu
Portfelj	"Je li njihov ukus jednako dobar kao rad?"	Snažne priče o projektima, prije/poslije, suzdržana prezentacija	Oskudni kontakt podaci, kopija s naglaskom na osobnost, skriveni CTA-ovi

Ovdje agencije griješe: usklađuju primjer s vlastitom ambicijom umjesto s kupcem klijenta. Klijent odvjetničkog ureda traži "portfeljsku stranicu" jer je ima konkurent. Provedite test namjere. Osoba koja angažira odvjetnika uplašena je. Želi dokaz da je odvjetnik dobio slične slučajeve, pošteno naplaćuje i neće je učiniti da se osjeća glupo. To je agencijski obrazac — dokaz, vjerodostojnost, rezultati — a ne portfeljski obrazac. Kradite iz agencijskih primjera: rezultate slučajeva, priče klijenata, članstva u komorama, jasan odjeljak "kako angažman počinje." Kad trebate odlučiti koji format zapravo pobjeđuje za danog klijenta, prođite kroz okvir za odabir formata prije nego otvorite bilo koji primjer.

Tablica je alat za trijažu, a ne zatvor. Za građevinskog podizvođača koji se natječe za komercijalne projekte, namjera kupca je "može li ova ekipa raditi prema rasporedu i budžetu?" To je agencijsko povjerenje s portfeljskim dokazima. Hibridi se stalno događaju. Pogreška je misliti da morate odabrati jedan format. Birate koji obrazac dominira, a ne koji jedinstveni format koristiti. Građevinska stranica može prikazati fotografije prije/poslije (portfeljski obrazac) i i dalje prednjačiti sa sigurnosnim certifikatima i sindikalnim članstvima (agencijski obrazac). Odlučite omjer prema namjeri, zatim neka glas brenda klijenta odredi konačni izgled.

Prođite kroz drugi scenarij: konzultantska tvrtka za fractional-CFO usluge. Kupac je osnivač koji je izgorio s prethodnim konzultantom. To je agencijski problem. Proučite agencijske stranice koje imenuju klijente i precizne rezultate. Vaš klijent ne može uvijek imenovati klijente — NDA — pa se odluka prenosi, ali se dokaz mijenja: anonimizirana "portfeljska tvrtka u fintechu" i jezik rezultata umjesto logotipa. Upišite "povjerenje ovisi o specifičnosti dokaza" u plan. Sada klijent zna zašto svaki element postoji.

Posudite odluku, ne dizajn

Većina članaka o "najboljim praksama" govori vam da se dizajnerski izbori prenose. Ne prenose se. Full-bleed video hero radi na portfelju za fotografiju dronom jer je posao publike prosuđivati slike. Stavite isti full-bleed video na početnu stranicu usluge pravnih dokumenata i sakrili ste proizvod. Najgori savjet kojeg se možete poslužiti je "kradi kao umjetnik." Krađa outputa stvara slične stranice. Krađa odluka stvara prilagođeni rad koji usput pretvara.

Za svaki značajan izbor u primjeru napišite rečenicu "zato." Bijeli prostor: "zato što ova publika prostor poistovjećuje s premiumom." Tamna pozadina: "zato što ova publika razmišlja inženjerski, a tamni način rada djeluje tehnički." Osoba koja se smiješi: "zato što se ova publika boji transakcije i želi toplinu." Sada je odluka prenosiva. Premium odvjetnički ured možda treba odluku o bijelom prostoru; diskontna pravna usluga mora je odbaciti. Sada imate pravilo za primjenu, a ne snimku zaslona za kopiranje.

Napišite "zato" prije nego napravite snimku zaslona. Vaše pamćenje će snimku zaslona pohraniti pod "lijep dizajn" i izgubiti razmišljanje unutar tjedan dana. Zapisano "zato" tjera vas da artikulirate mehanizam. Ako ne možete napisati nijedan, niste razumjeli primjer — samo vam se sviđao. Ta razlika je cijela igra.

Složite jedan konkretan primjer. Vidite portfeljsku stranicu za samostalnog dizajnera. Svaki projekt otvara se velikom slikom, zatim rezultatom, zatim imenom klijenta. Odluka: "ova publika kupuje rezultate gledajući stvar." Sada redizajnirate stranicu za renoviranje domova. Posao kupca također je gledati stvar — transformacije. Dakle, odluka se prenosi: krenite s galerijom projekata prije/poslije. Ali kupac također mora vjerovati da ekipa dolazi na vrijeme, pa dodajete odluku iz agencijske kolumne: CTA za konzultacije i preporuku iznad pregiba. To je metoda krađe kostura: dvije posuđene odluke, nula posuđenog dizajna.

Čut ćete otpor klijenata koji žele stranicu koja izgleda kao nagrađivani primjer koji ste im pokazali. Uljudno se oduprite. Recite im da je primjer osvojio nagrade zbog svojih odluka, a ne zbog piksela, i da njihovi kupci nisu kupci iz primjera. Razgovor je lakši kada možete pokazati na rečenicu "zato" i reći "ova odluka funkcionira; ovaj vizual ne funkcionira za vašu publiku."

Napomena: ako su kupci klijenta vizualno sofisticirani — arhitekti, kreativni direktori, interni brend timovi — ukus je proizvod. Posuđujte doslovnije. Pitanje nikada nije "sviđa li mi se ovaj primjer?" Već "treba li kupac mog klijenta ovu odluku?" Ako ne, odbacite bez grižnje savjesti.

Izgradite swipe datoteku s kontekstom

Jednokratna inspiracija je beskorisna kada gradite mnogo stranica godišnje. Izgradite swipe datoteku koja pohranjuje odluke, a ne snimke zaslona. Koristite jednostavnu tablicu: primjer, URL, publika, namjera, obećanje, dokaz, CTA i "nemojte koristiti za." Dodajte još jedan stupac za rečenicu "zato." U tom stupcu živi vrijednost.

Svaki redak treba: URL primjera, snimku zaslona, rečenicu "zato", dominantnu namjeru kupca, obećanje, dokaz, CTA i upozorenje "nemojte koristiti za." Oznake za svaki redak prema namjeri: "hitna lokalna usluga," "promišljena kupnja," "profesionalac osjetljiv na povjerenje," "kreativac vođen ukusom." Kad stigne novi brief od klijenta, prvo filtrirajte prema oznaci namjere. Industrija je samo za odlučivanje u neodlučenim slučajevima. Stomatološki klijent i vodoinstalaterski klijent mogu dijeliti namjeru "zatražite ponudu odmah" — primjeri iz vodoinstalaterstva mogu bolje poslužiti stomatološkoj stranici nego fancy stranica specifična za zubare koju ste spremili prošli tjedan.

Pregledavajte datoteku kvartalno. Izbrišite primjere koji više ne pretvaraju ili su istekli. Dodajte jedno otkriće tjedno, čak i ako je to samo jedan CTA. Nakon dva kvartala posjedujete internu biblioteku odluka koju nijedan pojedinačni primjer ne može pružiti.

Koristite datoteku na početnim sastancima s klijentima. Predstavite filtrirani prikaz: "izgradili smo ovaj sustav stranice od tri odluke koje odgovaraju vašim kupcima." To pokazuje da vaša agencija ima sustav, a ne samo ukus. To samo po sebi osvaja više posla nego kopiranje trendi izgleda.

Prije nego bilo što objavite, revidirajte rezultat onako kako bi to učinio kupac kojeg nije briga. Ta revizija uhvati svaku ukradenu dizajnersku odluku koja ne zaslužuje svoje mjesto.

Zaključak

Prestanite skupljati web stranice. Počnite skupljati razloge. Sljedeći put kad dobijete brief od klijenta, otvorite swipe datoteku, pronađite namjeru koja odgovara njihovim kupcima i ukradite odluke koje odgovaraju. Dizajn će biti njihov po nužnosti — jer su njihovo tržište, brend i budžet drugačiji. U tome je poanta. Stranica izgrađena obrnutim inženjerstvom pretvara jer je izgrađena od odluka koje su bile istinite za tuđu publiku i ponovno testirane na vašoj.