Costruire un sito web aziendale dal brief al codice
Costruire un sito web è un’attività che parte molto prima di scrivere una riga di codice
Costruire un sito web oggi è fondamentale per qualsiasi azienda che voglia avere successo nel mondo digitale. Bisogna però considerare che un buon sito web è prima di tutto progettato sui bisogni e le caratteristiche uniche dell'azienda che lo richiede: è il principio con cui seguiamo la realizzazione di siti web B2B.
Perché vi riguarda
Costruire un sito web: gli errori che si pagano dopo il lancio
Un sito aziendale si decide molto prima della grafica. Se obiettivi, pubblico e struttura non sono chiari all'inizio, il progetto si allunga e il risultato non cambia il vostro modo di vendere.
- 01
«Abbiamo rifatto il sito, ma i contatti sono rimasti quelli di prima»
Un sito nuovo nella grafica e vecchio nella logica non cambia i risultati. Partire da obiettivi commerciali, pubblico e messaggio fa del sito uno strumento che genera richieste, non solo una vetrina aggiornata.
- 02
«Il progetto è partito dalla grafica e si è arenato sui testi»
Molti progetti si bloccano perché contenuti, struttura e approvazioni interne arrivano dopo il layout. Un brief condiviso e una struttura definita prima del design riducono rifacimenti, tempi e costi.
- 03
«Il sito deve esserci, ma nessuno ha deciso a cosa serve»
Contatti, supporto alla rete vendita, distributori esteri, candidature: senza un obiettivo scelto, ogni decisione diventa una questione di gusti. Il brief iniziale fissa priorità e pubblico e rende il sito valutabile.
- 04
«Ogni reparto vuole la sua pagina in home»
Commerciale, ufficio tecnico e direzione spingono contenuti diversi e la home diventa un elenco senza gerarchia. Decidere obiettivi e struttura a monte fa scegliere in base a chi visita il sito, non a chi lo approva.
Prima di scegliere grafica e piattaforma, chiarite cosa deve fare il sito per la vostra impresa: il resto ne è la conseguenza. Realizzazione di siti web B2B: il nostro metodo →
Perché un sito web oggi è fondamentale per la tua presenza online
Un sito web oggi
Nel contesto attuale, costruire un sito web è una delle mosse più strategiche che un'azienda possa fare. Oltre a rappresentare una piattaforma per promuovere i tuoi prodotti o servizi, un sito web ti consente di raccogliere dati preziosi sui visitatori, migliorando la tua comprensione del comportamento dei clienti. Con l'integrazione di strumenti SEO, un sito web può aumentare significativamente la tua visibilità online, portando traffico organico e potenziali clienti direttamente alla tua porta digitale. Un sito web professionale e funzionale è quindi un investimento che porta a una crescita a lungo termine e a una presenza solida sul mercato.
Un sito web ben strutturato offre non solo informazioni, ma anche esperienze interattive che coinvolgono i visitatori e li trasformano in clienti fedeli. Attraverso il blog, i moduli di contatto, e-commerce e integrazione con i social media, un sito web diventa un hub centrale per tutte le tue attività di marketing digitale. Questo non solo migliora la percezione del tuo brand, ma facilita anche la gestione delle relazioni con i clienti e l’espansione della tua azienda.
Costruire un sito web oggi non significa costruire una bella scatolina di contenuti preimpostati, perché sia efficace deve prevedere diverse analisi.
I passi di definizione prima di partire
- 01
brief
Brief per un sito istituzionale
Obiettivi di comunicazione:
- Obiettivi dell'azienda
- Creare un nuovo trend nel mercato
- Creare consenso e curiosità
Obiettivi di marketing:
- Awareness, positioning
- Ottenere nuovi clienti online
Target:
- Chi visita il sito: settori, ruoli e mercati; per il pubblico consumer anche età e interessi
Payoff:
- Sintetizzare vocazione e valori del brand
- 02
costruzione web
Costruiamo il sito istituzionale
Partiamo dai valori di base e ricerchiamo la connessione logica con l’obiettivo:
- cosa farà il nostro sito per l’utente?
- rispetto al payoff, costruiamo la tagline
- Spieghiamo cosa fa l’azienda e il sito di questa per l’utente, creiamo la welcome blurb
Output del processo:
dati testuali di orientamento di partenza
- 03
struttura
Struttura del sito
Prepariamo i dati di web architecture, sito istituzionale quindi home, chi siamo, referenze, contatti, prodotti… quanti, quali.
- Organizziamo il menu, le etichette, la navigazione
- Elementi salienti da ricordare: la legge di Hick, menu mono livello, struttura ampia, nel caso non fosse possibile allora scomposizione, personalizzazione, diffusione
- a seguire scomporre i contenuti per limitare la profondità del menù, valutare la personalizzazione del menu in base al target, se serve aggiungere infine una proposta di "profumo dell’informazione"
Output del processo: organigramma strutturale
- 04
branding
Branding del sito
Partiamo con la creazione di contenuti, sarà grazie a questi e alla loro contestualizzazione rispetto i dati di payoff, tagline, welcome blurb che declineremo il brand del sito.
- Creiamo un bisogno
- Soddisfiamo il bisogno appena creato
- Distinguiamoci dai competitor
- Prendiamo gli elementi visivi del nostro racconto e cerchiamoli su google, il nostro racconto che lettering userà (mi raccomando più di uno, dimentichiamo il minimalist), colori, textures, accostamenti…
Output del processo: moodboard
- 05
interfaccia
La struttura dell’interfaccia
Struttura home: ricordiamo che sempre ma in particolar modo per siti istituzionali il brand è tutto: ampio spazio all’emozionalità, ampio spazio di testata emozionale.
- Posizionamento del marchio in alto a sx, per le leggi di convenzione il logo è cliccabile e porta in home, per la legge di Fitts quindi il menu non potrà essere molto distante dal logo;
- aggiungiamo la tagline e la welcome blurb.
- Progettiamo uno starting point,
- aggiungiamo una parte sotto la testa per definire un po’ di testo e diffondere un po’ di profumo dell’informazione
- ricordiamo i 5 parametri di Krug cioè definire una chiara gerarchia visiva, sfruttare le convenzioni, scomporre le pagine in aree ben definite, ricordarsi di rendere ovvio ciò che è cliccabile, minimizzare il "rumore".
- Chiudiamo con un piede in cui inseriamo dati di rimarcazione, accessori, eventuali footer-sitemap, ed elementi di affidabilità: premi, partner, ecc.
- 06
template interno
La struttura del template interno
Struttura di massima del template interno: riduciamo lo spazio di testata, manteniamo posizione e struttura degli elementi di navigazione, il logo, il piede. Aggiungiamo il menu di navigazione secondario o locale. Definiamo la griglia di scomposizione e la gabbia. Per ultimo se presente nella precedente ricerca iconica aggiungiamo gli elementi di ornato per contestualizzare la pagina.
- Ancora ricordiamo i 5 parametri di Krug cioè definire una chiara gerarchia visiva, sfruttare le convenzioni, scomporre le pagine in aree ben definite, ricordarsi di rendere ovvio ciò che è cliccabile, minimizzare il "rumore"
*in questa fase è opportuno valutare la progettazione delle varianti di breakpoint su mobile
Output del processo: wireframe
- 07
visual
Il visual
Ora finalmente possiamo definire il visual:
- Prendiamo i valori del brief, i dati del nostro precedente moodboard, se necessario approfondiamo su qualche stock-photo del caso.
- Si utilizzi un programma di fotoritocco per comporre la testata.
- Recuperiamo gli spazi preposti nel wireframe, prepariamo la testata, struttura asimmetrica (ideale per la progettazione visual si veda "Presentation Zen" di Garr Reynolds), si predisponga la disposizione immagine e tagline di header.
- Ancora nell’editor raster o in altro programma vettoriale o direttamente in codice
- Utilizziamo i lettering scelti nel moodboard per definire titoli e testi, gestire negli spazi composizioni partendo da composizione classica occhiello > titolo > sommario > testo, inserire nelle colonne, aggiungere catenacci e titoletti, infine le immagini e se servono didascalie.
Output del processo: bozza del visual
- 08
codice
Ora si parte col codice
Procediamo ora con la preparazione del primo esecutivo tramite codice, predisponiamo cartelle, file di reset, ecc.
Il brief di un sito web aziendale B2B: le domande da chiarire
Il brief è il documento che orienta tutte le fasi descritte sopra. Per costruire un sito web aziendale B2B conviene che risponda per iscritto ad alcune domande precise, condivise con chi in azienda dovrà approvare il progetto.
- A che cosa serve il sito? Generare richieste di offerta, sostenere la rete vendita, trovare distributori, attrarre candidati: sceglietene uno principale e pochi secondari.
- Chi lo visita? Buyer, uffici tecnici, progettisti, distributori, direzioni acquisti: ognuno cerca informazioni diverse, in momenti diversi.
- In quali mercati e lingue? Le versioni estere vanno pensate per il mercato, non solo tradotte.
- Che cosa vi distingue? Le ragioni per cui un cliente sceglie voi, con le prove che le sostengono: certificazioni, casi, dati verificabili.
- Quali contenuti esistono già? Cataloghi, schede tecniche, foto, video, referenze: che cosa si può riusare e che cosa va prodotto.
- Con quali sistemi deve dialogare? CRM, gestionale, configuratori, aree riservate.
- Come si misura il risultato? Quali azioni contano e chi legge i dati.
Immaginiamo un’azienda che produce impianti di filtrazione. Se l’obiettivo principale è ottenere richieste dagli uffici tecnici di altre aziende, la struttura metterà al centro applicazioni, dati tecnici e casi; se invece è trovare distributori all’estero, al centro andranno mercati, condizioni di collaborazione e materiali scaricabili. Stesso prodotto, due siti diversi: per questo il brief viene prima della grafica.
Dopo il codice: contenuti, test e messa online
I passi descritti sopra si fermano all’avvio dello sviluppo, ma un sito aziendale non è pronto quando il codice funziona. Prima e dopo la pubblicazione restano passaggi che incidono molto sul risultato:
- Contenuti definitivi: testi revisionati, foto, schede e traduzioni caricati nel CMS, con title e meta description per ogni pagina.
- Test: su browser e dispositivi diversi, prova di tutti i moduli, controllo di velocità e accessibilità.
- Redirect: se esiste un sito precedente, ogni vecchio indirizzo deve portare alla nuova pagina equivalente, per non perdere visite e posizioni su Google.
- Privacy e misurazione: informativa, gestione del consenso ai cookie, statistiche e tracciamento delle richieste di contatto.
- Formazione: chi aggiornerà il sito deve saperlo fare in autonomia.
- Dopo il lancio: monitoraggio di errori e indicizzazione nelle prime settimane, poi aggiornamenti e manutenzione regolari.
Per i controlli da ripetere nel tempo trovate una lista nel check di un sito web; per capire come leggere e confrontare le offerte dei fornitori, la guida al preventivo di un sito web.
Chi coinvolgere in azienda per costruire il sito
Un sito B2B racconta il lavoro di più reparti, e i ritardi nascono spesso dalle approvazioni interne più che dallo sviluppo. Conviene stabilire fin dall’inizio chi partecipa e con quale ruolo:
- un referente di progetto con potere di decisione
- la direzione, per obiettivi e posizionamento
- i commerciali, che conoscono domande e obiezioni dei clienti
- l’ufficio tecnico, per dati e schede di prodotto
- marketing e comunicazione, per contenuti e immagine
- IT e consulente privacy, per sistemi, accessi e consensi
Con ruoli chiari e un calendario di revisioni concordato, ciascuno interviene nella fase in cui il suo contributo serve: i contenuti arrivano in tempo e le scelte già approvate non vengono rimesse in discussione a progetto avanzato.
Perché quando diventiamo tutti uguali diventa solo una questione di prezzo! What Studio facciamo la differenza.
Esempi pratici
