Cum construim site-uri web la Articulate Marketing

În primul rând, construim site-uri web HubSpot CMS. Dacă nu știți ce este HubSpot, nu vă faceți griji. Mergeți aici pentru o introducere ușoară. Pentru cei dintre voi încă cu noi, astăzi schițăm procesul de construire a site-urilor web pentru clienții noștri.

Acest articol se bazează pe unul dintre webinarii noastre, care a fost găzduit de mine, Ioana Negulescu, Head of Studio la Articulate Marketing. Puteți vedea videoclipul și descărca diapozitivele de mai jos:

Provocări pentru crearea site-ului web

Există adesea un pas inițial atunci când vine vorba de construirea unui nou site web (sau migrarea unui site existent). Trebuie să atenuăm unele temeri. Nu este neobișnuit să ai clienți care au fost arși înainte de experiențele cu agențiile anterioare.

Când auzim...

„Ne facem griji să obținem un nou site web, deoarece ultimul a fost atât de dureros.”

Facem asta...

Am auzit asta de atâtea ori. Deci, ne străduim să facem mai bine.

De exemplu, în loc să folosim diagrame Gantt, ne place să folosim etape . Unul dintre lucrurile pe care ne concentrăm este să avem un proces transparent, cu actualizări continue privind progresul. Acest lucru oferă clienților noștri un sentiment de securitate.

Un lucru care este cu adevărat, foarte important pentru noi în timpul procesului de design web este acesta: apelurile video prin e-mailuri. Este important pentru că putem evalua reacțiile clienților noștri. Dacă sunt puțin tăcuți, dacă sunt foarte entuziasmați și așa mai departe. În acest fel, putem face recomandări care sunt în conformitate cu așteptările lor. Și, desigur, răspundeți la orice întrebări pe care le-ar putea avea.

Când auzim...

„Am încercat să urmărim dezvoltatorul de atâtea ori, încât pur și simplu nu se vor întoarce la noi.”

Facem asta...

Pentru a marca progresul, folosim apeluri regulate de management de proiect și le avem în calendar din prima zi. În timpul acelor apeluri de management de proiect, prezentăm lucrări noi și identificăm blocanții.

Designerii și dezvoltatorii au nevoie de timp pentru a finaliza efectiv munca, așa că nu are întotdeauna sens ca ei să participe la fiecare astfel de apel. Le aducem când este relevant.

Când auzim...

„Dar dacă noul site web nu va satisface așteptările noastre?”

Facem asta...

Înainte de a începe orice proiect de design de site web, parcurgem bazele strategiei de marketing ale acestora. Acest lucru este foarte important, deoarece în această etapă aflăm despre clienții unui client, călătoria cumpărătorului și obiectivele de marketing ale afacerii. Acest lucru va informa multe decizii strategice pe care le luăm cu privire la site, stabilind așteptările încă de la început.

Apoi, trecem la arhitectura de brand. Aici, prezentăm elementele de bază ale site-ului web. Culorile, imaginile sau ilustrațiile, elementele UX/UI, fonturile - estetica generală a site-ului. Acesta este un proces extrem de colaborativ. Clienții noștri sunt implicați la fiecare pas , astfel încât contribuția și cerințele lor sunt integrate în produsul final.

Un exemplu: HTG

Am creat un site web premiat pentru HTG, așa că le vom folosi ca exemplu pe tot parcursul.

Ei și-au exprimat aceste temeri și și-au subliniat provocările când le-am vorbit pentru prima dată. Acestea sunt probleme destul de comune în rândul companiilor de tehnologie B2B:

• Obiective ambițioase de creștere a afacerii
• Site web (și marca) învechit
• Puține oportunități de captare a clienților potențiali
• Navigare greoaie
• Experiență slabă a utilizatorului
• Performanță slabă a site-ului

Dacă sună ca dvs., atunci accesați aici pentru a vă nota site-ul.

Procesul Articulate

Iată procesul nostru, pe scurt. Faceți clic pe această imagine pentru a o vizualiza mai detaliat:

Să revenim la exemplul HTG. Cu ei, am urmat procesul nostru obișnuit în șapte etape:

1. Start

Lansarea este prima interacțiune pentru proiectul site-ului web. În timpul acestui apel, încercăm să evaluăm preferințele clienților noștri pentru design și aspirațiile mărcii. Dorim să aliniem aceste preferințe, în mod strategic, cu scopul final pentru orice site web realizat de Articulate: să construim un motor de marketing care funcționează bine.

2. Moodboard-uri și structura site-ului web

Aici rulăm două procese interne. Una este să găsești panouri de spirit, recomandări de fonturi, recomandări de culori, imagini și așa mai departe.

Celălalt este că, împreună cu echipa noastră de redactori de marketing, punem împreună recomandări pentru hărțile site-ului. Aceasta este structura de navigare și paginile pe care va trebui să le construim.

Apoi, avem un apel de evaluare a clienților, care este primul nostru mare reper. La sfârșitul fiecărei etape, avem un apel de revizuire. Dacă totul este aprobat, trecem la următoarea etapă. Dacă nu, ne întoarcem și repetăm.

3. Proiecte inițiale și wireframes

Aici, proiectăm pagina de pornire ca o modalitate de a arăta estetica site-ului web. De obicei, creăm câteva opțiuni diferite din care să aleagă clientul. Pe măsură ce proiectăm într-un mod modular , considerăm că acesta este pasul pentru a prezenta cum vor arăta unele dintre cele mai importante „cărămizi Lego”.

În paralel, stabilim strategii în jurul structurii paginii. Adică, ce fel de conținut merge pe ce pagină? De ce cărămizi Lego avem nevoie?

Apoi, echipa noastră construiește wireframes, care sunt ca niște schițe brute ale paginilor site-ului web, fără elemente de design.

4. Proiectați toate modulele și scrieți o copie web

În această etapă, echipa noastră de redactori începe să redacteze o copie, în timp ce echipa de proiectare trece la proiectarea tuturor modulelor necesare pentru site-ul web. Nu este întotdeauna cazul să scriem toată copia pe site-urile clienților noștri, dar atunci când o facem, taxăm pe o pagină transparentă, pe baza unui sitemap convenit în prealabil.

5. Dezvoltați site-ul web

Pentru a arăta modelele modulelor in situ, dezvoltăm și construim toate paginile cu copie lorem ipsum și imagini substituenți , astfel încât clienții noștri să își poată face o idee corectă a rezultatului final.

Când lucrați cu un dezvoltator, orice dezvoltator, doriți să îi adresați câteva întrebări pertinente:

• Care sunt pașii principali pe care îi luați pentru a codifica site-ul nostru?
• Cum te asiguri că codul este ordonat? (O problemă majoră cu site-urile web șablon.)
• Când și cât de des verificați viteza și performanța generală?
• Cum arată construirea unei pagini odată ce site-ul este dezvoltat? Este o experiență de utilizator prietenoasă pentru oricine construiește pagina?

Sau dacă lucrați cu Articulate, „Care este cel mai rapid timp în care ați rezolvat un cub Rubik?” Sunt binevenite astfel de întrebări.

Procesul nostru de dezvoltare începe în Notion, unde ne planificăm munca. Apoi, setăm codul de bază pentru navigații și unele module globale. Apoi, pregătim o listă de verificare pentru asigurarea calității pentru fiecare element de design și funcționalitate pe care trebuie să le construim pentru acel site web specific. Acest lucru ne va ține drept pe toată durata construcției.

Eșafodăm toate modulele în HTML, apoi începem să ne uităm la stil. Deci, gândiți-vă la cărămizi, tencuială, pictură și decorare.

Pe tot parcursul, testăm totul, verificăm performanța și aducem îmbunătățiri. Adesea, vom învăța cum să facem ceva mai bun și vom aduce această experiență pe următorul nostru site web.

6. Populați paginile

În această etapă, după mai multe iterații și recenzii ale clienților, populăm paginile cu copii și imagini aprobate. În această etapă, site-ul este aproape gata de lansare. Trecem printr-o altă etapă de revizuire a clienților și, după aceea, rulăm o listă de verificare completă a QA înainte de lansare.

7. Lansează!

Lansăm și apoi rulăm o altă listă de verificare QA post-lansare, pentru că este foarte important să ne asigurăm că site-ul web este funcțional și că nimic nu s-a rupt de la montaj la live.

În sfârșit, bineînțeles, sărbătorim!

10 sfaturi pentru un design excelent de site-uri web

Iată câteva reguli pe care le-am învățat de-a lungul anilor și peste zeci de creări de site-uri web:

1. Pune-ți preferințele pe al doilea rând, iar punctele dureroase ale personajelor tale mai întâi.
2. Concentrați-vă pe modul în care vă ajutați clienții, în loc să vă enumerați doar serviciile.
3. Nu încerca să reinventezi roata. Ceea ce funcționează, funcționează cu un motiv. De exemplu, concentrarea exclusiv pe zona de deasupra pliului este un mit. Toată lumea știe să defileze. Există chiar și un site web despre asta: http://abovethefold.fyi/
4. Păstrați navigarea scurtă și simplă.
5. Faceți butoanele bazate pe valoare. Evitați copierea generică acolo unde este posibil.
6. Conectați întotdeauna la o pagină relevantă dacă există o pagină cu mai mult context.
7. Pe paginile cheie, evitați să aveți prea multe link-uri externe. (Blogul tău este o poveste diferită.)
8. Încheiați întotdeauna pagina cu unul sau mai multe CTA (indemnuri), ducând utilizatorul la pasul următor al procesului.
9. Nu subestimați puterea unei pagini de contact - prea des este un punct de ieșire, dar chiar doriți să păstrați oamenii pe pagina respectivă.
10. Mai puțin înseamnă mai mult!

Bonus: nu lăsați logo-ul să dicteze un design prost

Când am proiectat site-ul HTG, logo-ul lor era depășit și nu se mai potrivea cu brandul pe care ne-am propus. L-am modernizat cu câteva modificări simple:

Iată ceva de gândit. În era noastră digitală, marca dvs. este cel mai probabil să fie site-ul dvs. web și nu logo-ul dvs. Deci, gândiți-vă în primul rând la site-ul, apoi la logo.

Ce se întâmplă după lansare?

În regulă. Ai un site nou. Acum ce? După cum am spus, la Articulate vedem site-urile web ca motoare de marketing, astfel încât implicarea noastră nu trebuie să se încheie la lansare. De fapt, acesta este doar începutul călătoriei pentru majoritatea clienților noștri.

De la crearea de conținut nou, cum ar fi bloguri, pagini pilon, oferte închise și pagini „strângere”, până la rularea de urmărire a comportamentului și teste multivariante, site-ul dvs. poate face mult mai multe.

Pe furiș: Nucleu

Deci, cum puteți obține un site web HubSpot? Există câteva opțiuni, cum ar fi o construcție personalizată a unui site web, dar o modalitate este să utilizați o temă HubSpot. Nucleus este tema proprie a lui Articulate.

O temă este ca un șablon de site mult mai sofisticat. Propul nostru site web este construit pe Nucleus și l-am folosit pentru mai mulți clienți cu o gamă largă de stiluri de design. Îl lansăm pe HubSpot Marketplace în 2022. Cu Nucleus, putem construi site-uri web foarte optimizate în săptămâni, chiar zile, pentru clienții noștri. Totul este destul de interesant!

>> Faceți clic aici pentru a explora Nucleus <<