Come costruiamo siti web in Articulate Marketing

Prima di tutto, costruiamo siti Web HubSpot CMS. Se non sai cos'è HubSpot, non preoccuparti. Vai qui per una facile introduzione. Per quelli di voi ancora con noi, oggi stiamo delineando il processo per la creazione di siti Web per i nostri clienti.

Questo articolo è basato su uno dei nostri webinar, ospitato da me, Ioana Negulescu, Head of Studio di Articulate Marketing. Potete vedere il video e scaricare le slide qui sotto:

Sfide di creazione di siti Web

C'è spesso un primo passo quando si tratta di creare un nuovo sito Web (o migrare un sito esistente). Dobbiamo alleviare alcune paure. Non è raro avere clienti che sono stati bruciati in precedenza da esperienze con agenzie precedenti.

Quando sentiamo...

"Ci preoccupiamo di ottenere un nuovo sito Web perché l'ultimo è stato un tale dolore."

Facciamo questo...

L'abbiamo sentito così tante volte. Quindi, ci sforziamo di fare meglio.

Ad esempio, invece di utilizzare i diagrammi di Gantt, ci piace utilizzare le pietre miliari . Una delle cose su cui ci concentriamo è avere un processo trasparente con continui aggiornamenti sui progressi. Questo dà ai nostri clienti un senso di sicurezza.

Una cosa davvero, davvero importante per noi durante il processo di progettazione web è questa: le videochiamate tramite e-mail. È importante perché possiamo valutare le reazioni dei nostri clienti. Se sono un po' silenziosi, se sono molto eccitati, e così via. In questo modo, possiamo formulare raccomandazioni in linea con le loro aspettative. E, naturalmente, rispondi anche a tutte le loro domande.

Quando sentiamo...

"Abbiamo cercato di inseguire lo sviluppatore così tante volte che semplicemente non ci risponderanno".

Facciamo questo...

Per segnare i progressi, utilizziamo regolari chiamate di gestione del progetto e le abbiamo nel calendario dal primo giorno. Durante queste chiamate di gestione del progetto, presentiamo nuovo lavoro e identifichiamo i bloccanti.

Designer e sviluppatori hanno bisogno di tempo per portare a termine il lavoro, quindi non ha sempre senso che partecipino a tutte queste chiamate. Li portiamo dentro quando è rilevante.

Quando sentiamo...

"E se il nuovo sito Web non soddisfa le nostre aspettative?"

Facciamo questo...

Prima di iniziare qualsiasi progetto di progettazione di siti Web, esaminiamo le basi della loro strategia di marketing. Questo è molto importante perché è in questa fase che apprendiamo i clienti di un cliente, il percorso dell'acquirente e gli obiettivi di marketing dell'azienda. Questo informerà molte decisioni strategiche che prendiamo sul sito Web, stabilendo le aspettative sin dall'inizio.

Quindi, si passa all'architettura del marchio. Qui, esponiamo i fondamenti del sito web. I colori, le immagini o le illustrazioni, gli elementi UX/UI, i caratteri: l'estetica generale del sito web. Questo è un processo estremamente collaborativo. I nostri clienti sono coinvolti in ogni fase , quindi i loro input e requisiti sono integrati nel prodotto finale.

Un esempio: HTG

Abbiamo creato un sito Web pluripremiato per HTG, quindi lo utilizzeremo come esempio.

Hanno espresso queste paure e delineato le loro sfide quando abbiamo parlato con loro per la prima volta. Questi sono problemi piuttosto comuni tra le aziende tecnologiche B2B:

• Obiettivi ambiziosi di crescita aziendale
• Sito (e marchio) obsoleti
• Poche opportunità di acquisizione di lead
• Navigazione goffa
• Esperienza utente scadente
• Scarse prestazioni del sito

Se suona come te, vai qui per segnare il tuo sito web.

Il processo articolare

Ecco il nostro processo, in poche parole. Clicca questa immagine per vederla più nel dettaglio:

Torniamo all'esempio di HTG. Con loro, abbiamo seguito il nostro solito processo in sette fasi:

1. Calcio d'inizio

Il kick-off è la prima interazione per il progetto del sito web. Durante quella chiamata, proviamo a valutare le preferenze dei nostri clienti per il design e le aspirazioni del marchio. Vogliamo allineare queste preferenze, strategicamente, con l'obiettivo finale di qualsiasi sito web realizzato da Articulate: costruire un motore di marketing ben funzionante.

2. Moodboard e struttura del sito web

Qui eseguiamo due processi interni. Uno è mettere insieme moodboard, consigli sui caratteri, consigli sui colori, immagini e così via.

L'altro è che, con il nostro team di copywriter di marketing, mettiamo insieme consigli sulla mappa del sito. Questa è la struttura della navigazione e le pagine che dovremo costruire.

Quindi, abbiamo una chiamata di revisione del cliente, che è la nostra prima grande pietra miliare. Alla fine di ciascuna delle fasi, abbiamo una chiamata di revisione. Se tutto viene approvato, si passa alla fase successiva. In caso contrario, torniamo indietro e ripetiamo.

3. Disegni iniziali e wireframe

Qui, progettiamo la homepage come un modo per mostrare l'estetica del sito web. In genere, creiamo alcune opzioni diverse tra cui il cliente può scegliere. Poiché progettiamo in modo modulare , pensiamo a questo come al passaggio per mostrare come saranno alcuni dei più importanti "mattoni Lego".

Parallelamente, elaboriamo strategie intorno alla struttura della pagina. Cioè, che tipo di contenuto va su quale pagina? Di quali mattoncini Lego abbiamo bisogno?

Il nostro team costruisce quindi wireframe, che sono come schizzi approssimativi delle pagine del sito Web senza elementi di design.

4. Progetta tutti i moduli e scrivi una bozza di copia web

In questa fase, il nostro team di copywriter inizia a redigere il testo mentre il team di progettazione passa alla progettazione di tutti i moduli necessari per il sito web. Non è sempre il caso che scriviamo tutta la copia sui siti Web dei nostri clienti, ma quando lo facciamo, addebitiamo una base trasparente per pagina sulla base di una mappa del sito prestabilita.

5. Sviluppa il sito web

Per mostrare i progetti dei moduli in situ, sviluppiamo e costruiamo tutte le pagine con lorem ipsum copy e immagini segnaposto , in modo che i nostri clienti possano avere un'idea corretta del risultato finale.

Quando lavori con uno sviluppatore, qualsiasi sviluppatore, vuoi porre loro alcune domande pertinenti:

• Quali sono i passaggi principali da seguire per codificare il nostro sito Web?
• Come assicurarsi che il codice sia ordinato? (Un grosso problema con i siti Web modello.)
• Quando e con quale frequenza controlli la velocità e le prestazioni complessive?
• Come appare la creazione di una pagina una volta sviluppato il sito Web? È un'esperienza utente amichevole per chiunque costruisca la pagina?

Oppure, se stai lavorando con Articulate, "Qual è il tempo più veloce in cui hai risolto un cubo di Rubik?" Diamo il benvenuto a tali domande.

Il nostro processo di sviluppo inizia in Notion, dove pianifichiamo il nostro lavoro. Quindi, impostiamo il codice base per le navigazioni e alcuni moduli globali. Successivamente, prepariamo un elenco di controllo per la garanzia della qualità per ogni elemento di design e funzionalità che dobbiamo creare per quel sito Web specifico. Questo ci manterrà a posto durante l'intera build.

Impalcature di tutti i moduli in HTML, quindi iniziamo a guardare lo stile. Quindi, pensa ai mattoni, all'intonaco, alla pittura e alla decorazione.

Durante tutto, testiamo tutto, controlliamo le prestazioni e apportiamo miglioramenti. Spesso impareremo come fare qualcosa di meglio e porteremo questa esperienza nel nostro prossimo sito web.

6. Popola le pagine

A questo punto, dopo diverse iterazioni e recensioni dei clienti, popolamo le pagine con testi e immagini approvati. In questa fase, il sito Web è quasi pronto per il lancio. Passiamo attraverso un'altra fase di revisione del cliente e, successivamente, eseguiamo un'accurata checklist di controllo qualità pre-lancio.

7. Lancia!

Lanciamo, quindi eseguiamo un'altra checklist per il QA post-lancio, perché è molto importante assicurarsi che il sito Web sia funzionante e che nulla si sia interrotto dalla messa in scena al live.

Finalmente, ovviamente, si festeggia!

10 consigli per un ottimo design del sito web

Ecco alcune regole che abbiamo appreso nel corso degli anni e oltre dozzine di build di siti Web:

1. Metti al secondo posto le tue preferenze e al primo posto i punti deboli dei tuoi personaggi.
2. Concentrati su come aiuti i tuoi clienti, piuttosto che limitarti a elencare i tuoi servizi.
3. Non cercare di reinventare la ruota. Ciò che funziona, funziona per una ragione. Ad esempio, concentrarsi esclusivamente sull'area above-the-fold è un mito. Tutti sanno come scorrere. C'è anche un sito web a riguardo: http://abovethefold.fyi/
4. Mantieni la navigazione breve e semplice.
5. Rendi i pulsanti guidati dal valore. Evita la copia generica ove possibile.
6. Collegati sempre a una pagina pertinente se esiste una pagina con più contesto.
7. Nelle pagine chiave, evita di avere troppi link esterni. (Il tuo blog è una storia diversa.)
8. Termina sempre la pagina con uno o più CTA (call to action), portando l'utente al passaggio successivo del processo.
9. Non sottovalutare il potere di una pagina di contatto: troppo spesso è un punto di uscita, ma vuoi davvero mantenere le persone su quella pagina.
10. Meno è di più!

Bonus: non lasciare che il logo imponga un cattivo design

Quando abbiamo progettato il sito Web di HTG, il loro logo non era aggiornato e non si adattava più al marchio che stavamo cercando. L'abbiamo modernizzato con alcune semplici modifiche:

Ecco alcuni spunti di riflessione. Nella nostra era digitale, è molto probabile che il tuo marchio sia il tuo sito Web piuttosto che il tuo logo. Quindi, pensa prima al sito Web, poi al logo.

Cosa succede dopo il lancio?

Va bene. Hai un nuovo sito web. E adesso? Come abbiamo detto, in Articulate vediamo i siti web come motori di marketing, quindi il nostro coinvolgimento non deve finire al momento del lancio. In effetti, questo è solo l'inizio del viaggio per la maggior parte dei nostri clienti.

Dalla creazione di nuovi contenuti come blog, pagine pilastro, offerte gated e pagine "spremete", all'esecuzione di monitoraggio del comportamento e test multivarianti, c'è molto di più che il tuo sito web può fare.

Picco di anticipazione: Nucleo

Quindi, come puoi ottenere un sito Web HubSpot? Ci sono alcune opzioni, come la creazione di un sito Web su misura, ma un modo è utilizzare un tema HubSpot. Nucleus è proprio questo tema di Articulate.

Un tema è come un modello di sito Web molto più sofisticato. Il nostro sito Web è basato su Nucleus e lo abbiamo utilizzato per diversi clienti con una vasta gamma di stili di design. Lo stiamo lanciando su HubSpot Marketplace nel 2022. Con Nucleus, possiamo creare siti Web altamente ottimizzati in settimane, anche giorni, per i nostri clienti. È tutto piuttosto eccitante!

>> Clicca qui per esplorare Nucleus <<