Agentuuriveebisaidi disain: 7 oppetundi saitidelt, mis tegelikult kliente vooidavad

Agentuuri veebisait kannab koormust, mida enamikul arisaitidel pole. See peab demonstreerima tapselt seda, mida muuub. Torumehe veebisait saab hakkama lihtsa paigutusega ja ikkagi tood voita. Agentuuriveebisaidi disain, mis naeb vananenud valja voi toolotab halvasti? See on tehingukatkestaja enne uhtki vestlust.

Oleme viimastel aastatel ehitanud veebisaite erinevatele tootustusharudele -- sihtlehed, ettevotte saidid, portaalid -- ja selle aja jooksul uurinud sadu agentuurisaite. Mitte ainult auhinnasaajaid Awwwardsis, vaid neid, mis tegelikult kuust kuusse sissetulevaid muugivihjeid genereerivad. Mustrid on markimisvaarselt jarjepidavad.

Jargnevalt on seitse oppetundi, mis on saadud paarisat agentuuriveebisaidi disaini naidetest. Need ei ole abstraktsed poohimotted. Need on konkreetsed, praktilised otsused, mida saate taana oma saidil hinnata. Olenemata sellest, kas kujundate nullist umber voi otsite kiireid voite, on siin suurimad tootlused tavaliselt leitavad.

Agentuuride maailmas on haigus: krypttiline kangelasjaotis. Maandute kodulehele ja naete midagi sellist: 'Loome digitaalseid kogemusi, mis ületavad piire.' Kolab muljetavaldavalt. Ei tahenda midagi. Kulastaja ei tea ikkagi, mida te teete, kelle jaoks te seda teete ega miks neil peaks hoolima.

Agentuurid, mis koige paremini konverteerivad, pooordavad seda taelikult umber. Nende kangelasjaotised vastavad kolmele kusimisele viie sekundiga: mida te teete? Kelle jaoks te seda teete? Millist tulemust voib oodata?

Datalandi sait on tugev naaide. Nende musta-valge geomeetriline tyypograafia haarab tahelepanu, kuid tegelik tugevus on see, kui kiiresti moistate nende positsioneerimist. Kontrast vaoshoitud teksti ja erksavaarvlise projekti lindi vahel juhatab pilgu otse toolele -- mis on toend.

Haptic Studio kasutab teistsugust lahenemist julge oranzi-mustaseksal taustal, mis raaagib otse asutajatele 'julge visiooniga'. See on arvamuspohine. See filtreerib. Ja see on tapselt mote. Kangelasjaotis, mis puuab koigile meeldida, ei meeldi kellelegi.

Siin on andmed: UX-uuringute kohaselt Baymard Institute'ist, 88% kasutajatest ei naase saidile parast halba kogemust. Teie kangelasjaotis on koht, kus see hinnang kujuneb. Teil on uks voimalus.

Mida teha: Kirjutage oma kangelase pealkiri nii, nagu selgitaksite oma agentuuri kellelegi ohtusoogiipeol. Kui see kolab nagu komitee kirjutatud loosung, alustage uuesti. Lisage konkreetne tulemus voi kliendi tyyyp, keda teenite. Samad poohimotted, mis kehtivad professionaalse ettevotte kodulehe disaini kohta -- selgus ekraani ylaosas, usaldussignaalid ja selge esmane tegevusele kutsumine -- kehtivad sama otseselt agentuurisaitide puhul.

Enamik agentuuri portfoolioid on ilusate ekraanipiltide kalmistud. Pisipiltide ruudustik projekti nimedega. Ehk kategooriafiltriga. See on koik.

Agentuurid, kes vooidavad koige rohkem aariat, kaasitlevad oma portfooliot erinevalt. Iga projekt on minimaalne juhtumiuuring -- mitte fotoalbum. Nad maarratlevad kliendi probleemi, selgitavad oma lahenemist ja maanduvad moodetavatele tulemustele. Figma uuring leidis, et agentuurid yksikasajalike juhtumiuuringutega (konkreetsete moodikutega nagu 'suurendasime muugivihjeid 40%' voi 'vahenendasime poikemaaara 25%') saavad markimisvaarselt rohkem kontaktivormide esitusi kui need, kes naitavad ainult ekraanipilte.

For the People, loovagentuur, demonstreerib seda suureparaselt. Nende kangelasjaotis kasutab hooljumisefekti, mis naitab pilku paarisat kliendi tooloost, kui kursori liigutate. See on interaktiivne toend vooimekusest, mis on ehitatud otse esmamuljesse. Eraldi portfooliolehele kloopsamine pole vajalik -- tool leiab teid.

Kuid te ei vaja uhkeid hooljumisefekte. Vajalik on struktuur. Igal juhtumiuuringul peaks olema:

• Kliendi vaaljakutse (uks lause)
• Teie lahenemine (kaks kuni kolm lauset)
• Moodetav tulemus (konkreetsed numbrid)
• Visuaal, mis naitab tegelikku tulemit

Hoidke oma portfoolio tihedana. Maksimaalselt seitse kuni kumme projekti. Kurreurige halastamatult. Viis tugevat juhtumiuuringut reaalsete tulemustega voidiab kakskymmend ekraanipiltide galeriid iga kord. Ja kui toolotate oma portfoolio kallal, seadke sygavus laiusest tahtsemaks. Tekst igas juhtumiuuringus on sama oluline kui visuaalid -- sisu-esmane lahenemine veebidisainile tagab, et sonad teevad oma osa muugitooost.

Uuendamise sagedus on samuti oluline. Uuendage oma portfooliot iga kuue kuni kaheteistkumne kuu jarvel. Agentuur, mis naitab kolme aasta tagust toold, tekitab kusimuse, mis on sellest ajast saadik juhtunud.

Enne kui kulastaja teie lehel uhtki soona loeb, on ta juba arvamuse kujundanud. Tyypograafia ja vahed teevad seda tood. Need annavad marku, kas olete alustav idufirma voi vaaljakujunenud stuudio, kas olete mangulev voi ettevottlik, kas higistate detaile voi laiendate kiirelt.

Parimad agentuuriveebisaidi disaini naited kasutavad tyypograafiat esmase disainielementina -- mitte jarelemdelduna. Dataland'i julge geomeetriline tyyyp ehitab sama palju braandi kui ukskoik milline logo. Immersive Garden, mitme auhinnaga stuudio, loob rytmi, varieerides teksti suurust ja vahesid dramaatiliselt, juhatades kulastajaid labi sisu viisil, mis tundub tahtlik, mitte mallipohine.

Tuhhiruum on selle vorrandi teine pool. Sisu toppimine igasse vabasse pikslisse on algaja viga, mis annab meeleheite marku. Heelded veerised ja polster kommunikeerivad enesekindlust. Need utlevad: meil pole vaja karjuda. Meie tool raaagib enda eest.

Mooned praktilised tyypograafia juhised agentuurisaitide jaoks:

• Pohitekst: minimaalselt 16px arvutis, 18px pikema sisu jaoks
• Rea korgus: loetavuse tagamiseks 1,5 kuni 1,7
• Maksimaalne rea pikkus: 65 kuni 75 tahemaarki rea kohta
• Pealkirja hierarhia: tehke suuruse erinevus H1 ja H2 vahel piisavalt dramaatiliseks, et skannimine oleks vaevatu

Maarkus kirjatyybi valikute kohta -- susteemifondid ja hasti tuntud sans-serif fondid (Inter, Sohne, General Sans) laadivad kiiremini ja naeevad ikkagi esmaklassilised valja. Kohandatud ekraanifont pealkirjadele koos puhta pohifondiga on tavaliselt kuldne kesktee. Ararge kasutage rohkem kui kahte kirjatyypi. Kolm on peaaegu alati uks liiga palju.

Siin on statistika, mis peaks iga agentuuri disainerit ebamugavaks tegema: uhe sekundiga laadivad saidid konverteerivad kolm korda paremini kui viie sekundiga laadivad saidid. Ja 40% kulastajaid hylgab lehe, mis votab laadimiseks kauem kui kolm sekundit arvutis. Mobiilis on see arv 53%.

Agentuuriveebisaidid on kurikuulsad joodluse rikkujad. Hiiglaslikud kangelase videod, optimeerimata portfoolio pildid, rasked animatsioooni teegid, kolmandate osapoolte vestlusvidinaid laadivad igal lehel. Koik see liidub.

Iroonia on valus. Pyyyate toestada, et ehitate suureparaseid veebisaite, samal ajal kui teie oma sait roomab. Potentsiaalne klient, kes kaivitab teie kodulehel kiire Lighthouse auditi ja naeb skoori 45, jouuab tapselt sellele jareldusele, mida te ei soovi.

Joodlus on UX/UI disainiotsus, mitte ainult arendusemure. Igal visuaalsel valikul on joodluskulud ja parimad agentuurid teevad need kompromissid teadlikult.

Siin on kohad, kus suurimad kasud tavaliselt peituvad:

• Pildid: Teisendage koik WebP voi AVIF vormingusse. Laadige laisalt koik, mis on ekraani alla. Teenige reageerivaid suurusi.
• Fondid: Alamhulk oma fondid. Eellaadige esmane kaal. Kasutage font-display: swap.
• Animatsioonid: CSS yleminekud ja teisendused eelistatult JavaScripti animatsioooni teekide asemel, kus voimalik. Kui kasutate GSAP-i voi Framer Motioni, laadige neid laisalt.
• Kolmanda osapoole skriptid: Vestlusvidinaid, analyytika, jaalgimispikslid -- lukkake koik edasi, mis ei ole kriitilise tahtsusega esimese renderduse jaoks.

Taotlege Lighthouse'i joodluse skoori yle 90. See on taelikult saavutatav agentuurisaidi jaoks ja saadab vaikse, kuid voimsa sooni tehnikateadlikele potentsiaalsetele klientidele.

Igal agentuurisaidil on rida kliendi logosid. See on minimaalne standard. Kuid riba hallide logodega on minimaalne sotsiaalne toend -- see utleb 'meil on olnud kliente' ilma palju muud utlemata.

Agentuurid, kes looovad oma suuruse yle, ehitavad sotsiaalse toendi kogu lehe struktuuri. Iseloomustused ilmuvad asjakohaste juhtumiuuringute korval. Konkreetsed tulemused on tsiteeritud koos klientidega, kes need saavutasid. Auhinnad ei ole ainult jaluses loetletud -- nad kontekstualiseerivad toold.

Hasti disainitud UI suurendab konversioonimaarasid kuni 200%, ja tugevate UX-ga kombineerimisel saab see arv ulatuda 400%-ni, vastavalt DesignRushi koostatud uuringutele. Sotsiaalne toend on uks tugevamaid UX hoobasid, mis teil on, kuna see vahendab kognitiivset pingutust otsustada, kas teid usaldada.

Siin on see, mis eristab noorgat sotsiaalset toendit tugevast:

Paigutage oma tugevaim iseloomustus ekraani ylaosa juurde voi kohe selle alla. Aarge matke toendit pika lehe looppu -- selleks ajaks on skeptilised kulastajad juba lahkunud.

Pyysiva ja pealetykiva vahel on peen piir. Moonel agentuurisaidil on uks 'Vootke meiega uhendust' nupp paases ja mitte midagi muud. Teistel on 'Brooneeri koone' igal kerimiskorral. Moimad on markist mooodas.

Strateegiline tegevusele kutsumiste paigutus -- kulastajatele selge jargmine samm andmine hetkel, kui nad on koige veendunumad -- suudab konversioonimaarasid parandada 41%. Ja visuaalse segaduse vahendamine tegevusele kutsumise nupu ymber on toestanud konversioonide toostmist kuni 232%.

Haptic Studio teeb seda naelapea pihta ainulaadse animeeritud tegevusele kutsumise nupuga, mis eristub ylejaaanud lehest. See ei sulanda navigatsiooni. See ei tundu jarelemdelduna. See on disainitud interaktsiooni hetk.

Parim paigutusmuster agentuurisaitide jaoks jaergib rytmi:

1. Kangelasjaotis: Esmane tegevusele kutsumine kohe parast vaartuspakkumist
2. Parast portfooliot/juhtumiuuringuid: Kui kulastaja on just nainud toendit teie voimekusest
3. Parast sotsiaalset toendit: Kui usaldus on tipus
4. Jalus: Loplik kinnipidamine kulastajatele, kes kerisid koik alla

Hoidke oma tegevusele kutsumise keelt toimingule spetsiifilisena. 'Brooneeri 15-minutiline strateegiakoonele' yleditab 'Vootke meiega yhendust', kuna see seab ootused ja vahendab pyyhendumisaarevust. Kulastaja teab tapselt, millega ta noustub.

Ja aarge jaatke ymbritsevat teksti tahelepanuta. Yksinda seisev tegevusele kutsumise nupp on kusimus ilma kontekstita. Tegevusele kutsumine, millele eelneb 'Enamik meie klientidest naab tulemusi 60 paeva jooksul', annab kulastajale poojuse kohe kloopsata.

Yle poole veebiliiklusest on mobiilne. Te juba teate seda. Kuid selle teadmine ja selle jaoks kujundamine on erinevad asjad. Avage enamik agentuuriveebisaite telefonis ja leiate ylemaarse kangelase teksti, mis kerib kohmakalt ymber, portfoolio ruudustikke, mis muutuvad loopmatuks vertikaalseks kerimiseks, ja navigeerimismenyyysid, mis vooitleevad teie poidlaga.

Agentuurid, kes kaasitlevad mobiili esmase vaateaknana -- mitte reageeriva jarelemdelduna -- kipuvad omama ka puhtamaid arvuti disaine. Piirangute jaoks kujundamine sunnib selgusele. Iga element teenib oma koha, kuna ekraanipind on napp.

Mooned mobiilispetsiiffilised mustrid, mis tasub yle vootta:

• Kleepuvad tegevusele kutsumised: Pyysiv nupp voi riba, mis jaargib kasutajat ilma tyytlikuks muutumata. Mobiilis on see kriitiline, kuna paase tegevusele kutsumine kaob niipea, kui kerite.
• Pooidla sobralikud puudutussihtmaargi d: Apple'i HIG soovitab minimaalset 44x44 punkti puudutussihtmaaarki. Koik vaaiksem tekitab pettumust.
• Jaarkjaaarguline avalikustamine: Aarge naitake koike korraga. Akordionjaotised, 'Loe rohkem' lingid ja vahelehtedega sisu hoiavad mobiilikogemuse fookuses.
• Lihtsustatud kangelasjaotised: See ilus taeisekraaniga video kangelane arvutis? Mobiilis on see sageli aku tyhjenev, andmeid tarbiv kohustus. Teenige selle asemel staatiline pilt.

Testige oma saiti tegelikel seadmetel, mitte ainult Chrome DevToolsis. Lehe kerimise kogemus poidlaga 6,1-tollisel ekraanil on pohimotteliselt erinev sellest, kui klopsate laabi reageeriva eelvaate 27-tollisel monitoril. Kui teie ettevotte veebisait ei tundu telefonis loomulik, saab pool teie publikusest kompromiteeritud kogemuse.

Need seitse oppetundi ei ole soltumatud maarkekastid. Need tugevdavad uksteist. Selge kangelasjaotis muudab teie portfoolio tooghusemaks, kuna kulastaja moistab, mida ta vaatab. Kiire lehe kiirus hoiab inimesed piisavalt kaua, et nende ees on sotsiaalset toendit. Tugevad tegevusele kutsumised konverteerivad usalduse, mille iseloomustused ehitavad.

Kui hindate oma praegust agentuuriveebisaidi disaini, alustage kahe valdkonnaga, mis koige kiiremini naite naitavad: kangelasjaotise selgus ja portfoolio sygavus. Saage need oigeks ja ylejaaanud muutub taaustuseks, mitte paastmiseks.

Siin on kiire enesediagnostika, mida saate kymne minutiga laabi viia:

1. Laadige oma koduleht telefonis. Kas vooras saab viie sekundi jooksul aru, mida te teete?
2. Kaivitage Lighthouse audit. Kas joodluse skoor on yle 80?
3. Valige oma tugevaim juhtumiuuring. Kas see sisaldab moodetavat tulemust?
4. Leidke oma esmane tegevusele kutsumine. Kas see on nahtav ilma kerimata?
5. Lugege oma iseloomustusi. Kas need mainivad konkreetseid tulemusi voi ainult kiidavad?

Kui vastasite 'ei' rohkem kui kahele, jaatab teie sait toenaoliselt muugivihjeid lauale. Ja turul, kus 60% tarbijatest vaaldib kaubamaarke ebaatraktiivse disainiga soltumata arvallustest, ei ole see kosmettiline probleem -- see on tuluproblem.

Hea uudis? Iga yks neist oppetundidest on parandatav. Mooned parastloona jooksul. Teised planeeritud ymberkujundamise osana. Agentuurid, kes kaasitlevad oma veebisaiti sama strateegilise rangusega, mida nad toovad klientide tooldesse, on need, kes kasvavad koige kiiremini. Nende sait ei ole broshyyyr. See on nende parim muugiinimene -- toolotab iga tund, igal seadmel, iga kulastaja jaoks, kes voib saada nende jaargmiseks kliendiks.