Prestani kopirati primjere web stranica. Ukradi 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 sekciju na stranicu odvjetničkog ureda i pitate se zašto ne uspijeva. Primjer je dokaz odluke, a ne predložak za kopiranje. Proces koji funkcionira je obrnuti inženjering: izvucite razmišljanje iza hero sekcije, dokaza i poziva na akciju, zatim ponovno izgradite te odluke za kupce svakog klijenta. Ovaj članak pokazuje što ukrasti iz SaaS, agencijskih i portfolio primjera te kako izgraditi swipe datoteku odluka 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.' Pa skupite mapu knjižnih oznaka, zatim ponovno izgradite isti hero, isti raspored, iste hover efekte za izvođača krovova, 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 zapravo funkcionira je obrnuti inženjering: pročitajte primjer za odluke iza njega, zapišite te odluke u običnim rečenicama, zatim ih ponovno izgradite od nule za kupce svakog klijenta.

Čitajte hero sekciju kao ugovor

Započnite svaki pregled primjera č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 kakvu je odluku kreator donio o posjetitelju prije nego što je napisao taj naslov. Odgovor je dio koji možete ponovno upotrijebiti.

Calendlyjev slogan — 'zakazujte sastanke bez razmjene e-mailova' — funkcionira jer je kreator odlučio da je posjetitelj zaposleni profesionalac koji se utapa u e-mail tenisu. Obećanje je ušteđeno vrijeme. CTA je 'zakažite sastanak.' Ta se odluka prenosi na uslužno poduzeće. Posjetitelj knjigovodstvenog klijenta je vlasnik poduzeća koji mrzi papirologiju; naslov bi trebao obećavati 'zatvorite knjige bez kaosa u proračunskim tablicama', a CTA bi trebao biti 'dobijte besplatno čišćenje.' Ista odluka, različite riječi. Notion cilja na jedan CTA, 'Nabavite Notion besplatno,' iz iste discipline: jedna stranica, jedna radnja, bez ometanja. Primijetite što ne vidite — nema karusela, nema sekundarnih gumba 'saznajte više', nema obrasca koji traži telefonski broj. Svaka izostavljena stvar je odluka, a odluke o izostavljanju najjeftinije je kopirati jer ne koštaju ništa.

Linearova hero sekcija gura istu disciplinu dalje. Jedan naslov, jedan podnaslov, jedan gumb — bez screenshotova dok ne skrolate. Odluka: 'ova publika već poznaje problem, pa je naš posao komunicirati prikladnost, a ne educirati.' Spremite tu odluku. Kada su kupci klijenta sofisticirani, kopirajte suzdržanost. Kada nisu, znate da morate dodati više objašnjenja prije nego što zatražite klik. Broj riječi u hero sekciji također je odluka. Hero koji pokušava reći tri stvari ne komunicira ništa. Ako primjer ima previše ideja iznad pregiba, tretirajte ga kao upozorenje, a ne kao model.

Prođite kroz stvarni primjer. Pregledavate SaaS početnu stranicu kojoj se divite. Hero ima kratak naslov, jedan podnaslov, jedan gumb. Napišite odluke redom: tko je posjetitelj, koja je njihova bol, koja je jedna radnja koja ih pokreće naprijed. Sada primijenite na klijenta za krovište. Posjetitelj je upravitelj zgrade s krovom koji prokišnjava usred zime. Bol je rizik i zastoj. Radnja je 'zatražite procjenu.' Ako je SaaS primjer odlučio 'posjetitelj treba vidjeti proizvod u pokretu,' zamijenite animaciju proizvoda fotografijom završenog rada. Ista odluka, drugačiji medij. Tako kradete bez neuspjeha sličnosti. Samo za disciplinu jedna stranica-jedna radnja, istražite provjerene prakse za SaaS odredišne stranice.

Nije industrija, namjera je

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

SaaS stranica ostvaruje konverziju jer je namjera kupca 'odlučiti rješava li ovo moj problem.' Naslov nosi obećanje, probna verzija ili demo je 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. Portfolio stranica ostvaruje konverziju jer je namjera kupca 'je li njihov ukus dobar kao i njihova reputacija?' Dokaz je sam rad, a CTA je ponekad skriven dizajnom.

Vrsta primjera	Namjera posjetitelja	Ukradi ovo	Preskoči ovo
SaaS	'Odluči odgovara li mi ovo'	Disciplina vrijednosne ponude, jedan CTA, kopija od značajke do koristi	Animacije samo proizvoda, struktura stranice s cijenama, CTA-evi prvo demo
Agencija	'Mogu li vjerovati ovoj tvrtki?'	Studije slučaja, dokazi klijenata, imenovani tim, jasan put angažmana	Dugačke stranice o procesu, kopija pristupa s puno žargona
Portfolio	'Je li njihov ukus jednako dobar kao i rad?'	Snažne priče o projektima, prije/poslije, suzdržana prezentacija	Oskudni kontakt podaci, kopija s naglaskom na osobnost, skriveni CTA-evi

Ovdje agencije griješe: usklađuju primjer s vlastitom ambicijom umjesto s kupcem klijenta. Klijent odvjetničkog ureda traži 'portfolio stranicu' jer je konkurent ima. Provedite test namjere. Osoba koja angažira odvjetnika je prestrašena. Želi dokaz da je odvjetnik dobio slične slučajeve, pošteno naplaćuje i neće ih učiniti glupima. To je agencijski obrazac — dokaz, vjerodostojnost, rezultati — a ne portfolio obrazac. Ukradite iz agencijskih primjera: rezultate slučajeva, priče klijenata, članstva u komorama, jasan odjeljak 'kako angažman počinje.' Kada trebate odlučiti koji format zapravo pobjeđuje za danog klijenta, prođite kroz okvir za odabir formata prije nego što 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 proračunu?' To je agencijsko povjerenje s portfolio dokazima. Hibridi se stalno događaju. Pogreška je misliti da morate odabrati jedan format. Birate koji obrazac dominira, a ne koji jedan format koristiti. Građevinska stranica može prikazati fotografije prije/poslije (portfolio obrazac) i dalje imati vodeće certifikate o sigurnosti i članstva u sindikatima (agencijski obrazac). Odlučite omjer prema namjeri, a zatim pustite glas brenda klijenta da odredi konačni izgled.

Prođite kroz drugi scenarij: konzultantska tvrtka za fractional-CFO. Kupac je osnivač kojeg je opekao prethodni konzultant. 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 'portfolio tvrtka u fintechu' i jezik rezultata umjesto logotipa. Zapiš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. Hero video preko cijele stranice funkcionira na portfoliju za fotografiju dronom jer je posao publike prosuđivati slike. Stavite isti video preko cijele stranice na uslugu pravnih dokumenata i sakrili ste proizvod. Najgori savjet po kojem možete postupiti je 'kradi kao umjetnik.' Krađa rezultata stvara slične stranice. Krađa odluka stvara prilagođen rad koji se pretvara.

Dakle, za svaki značajan izbor u primjeru napišite rečenicu 'zato.' Prazan prostor: 'zato što ova publika prostor poistovjećuje s premium.' Tamna pozadina: 'zato što ova publika razmišlja u inženjerskim terminima, 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 praznom prostoru; diskontna pravna usluga mora je odbaciti. Sada imate pravilo za primjenu, a ne screenshot za kopiranje.

Napišite 'zato' prije nego što napravite screenshot. Vaše pamćenje će screenshot spremiti pod 'lijep dizajn' i izgubiti razmišljanje unutar tjedan dana. Napisano 'zato' tjera vas da artikulirate mehanizam. Ako ne možete napisati jedan, niste razumjeli primjer — samo vam se svidio. Ta razlika je cijela igra.

Nadovežimo se na konkretan primjer. Vidite portfolio stranicu za solo dizajnera. Svaki projekt počinje ogromnom 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 treba vjerovati da ekipa dolazi na vrijeme, pa dodajete odluku iz agencijske kolone: CTA za konzultacije i preporuku iznad pregiba. To je metoda krađe kostura: dvije posuđene odluke, nula posuđenog dizajna.

Naići ćete na otpor klijenata koji žele stranicu koja izgleda kao nagrađivani primjer koji ste im pokazali. Odupirite se pristojno. Recite im da je primjer osvojio nagrade zbog svojih odluka, 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, ne screenshotove. Koristite jednostavnu tablicu: primjer, URL, publika, namjera, obećanje, dokaz, CTA i 'ne koristi za.' Dodajte još jedan stupac za rečenicu 'zato.' U tom stupcu živi vrijednost.

Svaki redak treba: URL primjera, screenshot, rečenicu 'zato,' dominantnu namjeru kupca, obećanje, dokaz, CTA i upozorenje 'ne koristi za.' Označite svaki redak oznakom namjere: 'hitna lokalna usluga,' 'promišljena kupnja,' 'profesionalac osjetljiv na povjerenje,' 'kreativac vođen ukusom.' Kada stigne novi brief klijenta, prvo filtrirajte prema oznaci namjere. Industrija je samo tiebreaker. Stomatološki klijent i vodoinstalaterski klijent mogu dijeliti namjeru 'zatraži ponudu sada' — primjeri iz vodoinstalacija mogu bolje poslužiti stomatološkoj stranici nego fensi stranica specifična za stomatologe koju ste spremili prošli tjedan.

Pregledavajte datoteku tromjesečno. Obrišite primjere koji više ne pretvaraju ili su istekli. Dodajte jedan nalaz tjedno, čak i ako je to jedan CTA. Nakon dva tromjesečja imat ćete internu biblioteku odluka koju nijedan pojedinačni primjer ne može pružiti.

Koristite datoteku na uvodnim 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 rasporeda.

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

Zaključak

Prestanite skupljati web stranice. Počnite skupljati razloge. Sljedeći put kada dobijete brief klijenta, otvorite swipe datoteku, pronađite namjeru koja odgovara njihovim kupcima i ukradite odluke koje odgovaraju. Dizajn će biti njihov iz nužde — jer su njihovo tržište, brend i proračun drugačiji. To je poanta. Stranica s obrnutim inženjeringom pretvara jer je izgrađena od odluka koje su bile istinite za tuđu publiku i ponovno testirane protiv vaše.