WEB DESIGN: Il Processo
Come funziona, e perchè
Progettare un sito web che funziona richiede esperienza e gli strumenti adeguati.
Nel nostro campo, un professionista non chiede 300 euri, nemmeno per una singola pagina. Non utilizza Divi, o Elementor, o Wix, o Squarespace, o Shopify. La pubblicità di questi prodotti parla chiaro: chiunque può costruire un sito web. Vero, se è la brochure per le torte della nonna. Non è vero se dev'essere un sito vero.
Un professionista ha sviluppato un metodo, un processo efficace. Si assicura la totale libertà nel costruire, e la massima flessibilità per poter intervenire, in futuro, con modifiche immediate e senza vincoli.
Scalabilità e mantenibilità sono fondamentali, mettono il tuo sito in condizione di crescere senza dover rifare tutto da capo quando vuoi modificare il colore di un elemento, o aggiungere un servizio che non offrivi. Potrebbe significare spendere di più oggi, ma significa anche mettersi al riparo da eventuali grane domani.
Il discorso potrebbe diventare un po' tecnico, ma lo considero molto importante.
TL;DR: Se vuoi comprare una Fiat Panda del 1998, pagherai il suo prezzo e avrai una Panda. Se vuoi comprare una Lamborghini Huracán sai già che paghetrai qualcosa in più. Non possiamo pretendere di pagarla come la Panda, sono costruite in modo diverso per fare cose diverse, vivendole in un diverso modo.
Non è questione di lusso: è questione di utilità, di finalità, di comodità, di processo produttivo, di cura, di e di potenzialità. E non significa che la Panda sia inadeguata, potresti essere davvero interessato alla Panda, e va benissimo: ne conosci pregi e difetti, capacità e limiti, ed è precisamente quello che ti serve.
Quando in concessionaria ti offrono la Lamborghini allo stesso prezzo, però, forse è il caso di non fidarsi troppo. Forse sotto sotto è una Panda.
Scoperta
Scopriamo chi sei, e le tue opportunità
Ogni progetto inizia con una fase di scoperta, che include la ricerca di parole chiave, un’analisi della concorrenza, la ricerca di mercato generale, e una revisione del sito esistente (se lo hai), nonché una verifica completa sulla SEO (Search Engine Optimization, l’ottimizzazione per i motori di ricerca), e altro ancora.
Il processo di scoperta mi fornisce dati grezzi su come il sito dovrà essere strutturato, quali pagine devono esistere e quale tipo di contenuto deve essere su quelle pagine.
In breve, questo processo assicura che ciò che costruisco abbia una forte possibilità di essere efficace, non solo carino. In questa prima fase mi occupo di:
- Ricerca sulla tua attività
- Ricerca di mercato
- Ricerca SEO
- Sessione su contenuti e strategia
- Creazione sitemap per l’architettura
- Incontro e approvazione finale
Uso poi le intuizioni del processo di scoperta per creare una mappa visiva del sito. Ciò garantisce che ogni pagina abbia uno scopo, che tutte le possibilità di classificazione siano decise e pianificate, e che ci sia una chiara tabella di marcia per la crescita futura.
Pianificare l’architettura è importante sia per la SEO che per l’esperienza utente, e questo passaggio deve essere eseguito prima della progettazione o dello sviluppo.Molti freelance e agenzie non progettano un’architettura del sito adeguata, il che è un errore costoso sia in termini di tempo che di denaro, sia per le opportunità perse.
Mi assicuro che il tuo sito abbia un’appropriata tabella di marcia prima di iniziare a costruire.Copywriting
La scrittura che funziona
Il 90% del successo di un sito dipende da cosa c’è scritto, non da quanto è grande il tuo logo.
Anche il sito più bello del mondo, se ha contenuti di scarso valore o scritti male, non ha speranze di funzionare come dovrebbe. Non sono un maestro, lo ammetto, ma se non hai un copywriter di fiducia puoi affidarti a me e ai miei collaboratori. I testi sono redatti in ottica soft-SEO, ovvero con un’attenzione non maniacale all’ottimizzazione per i motori di ricerca.
Mi spiego: purtroppo, quando cerchi qualcosa su internet, il più delle volte i primi risultati non sono le risposte alle tue domande, ma sono aziende che cercano di venderti qualcosa. La SEO spinge fortissimo affinché i contenuti non siano scritti in un italiano corretto, ‘ottimizzare’ significa ripetere più e più volte alcune parole chiave, in modo da essere tra i primi posti nelle ricerche, sacrificando il reale valore dei testi e il reale significato dei contenuti.
Nel mio piccolo cerco di lottare contro la devastazione della lingua, fornendo testi che vendano e che funzionino.
Lavorare sul copywriting significa:
- Scrivere testi per ogni pagina
- Scrivere intestazioni e Call To Action
- Infilare i testi nel wireframe
- Far convivere testo e wireframe
- Modifiche e correzioni
- Incontro e approvazione finale
UX Design
Gli elementi e la narrativa
Poiché ogni sito web ha un obiettivo unico e ogni pagina di un sito web ha uno scopo diverso, ogni pagina richiede un layout e una struttura dei contenuti unici.
Assicurarsi che le pagine siano predisposte in modo intuitivo, per rendere più facile per i visitatori navigarle e comprenderne il contenuto, richiede molta esperienza e competenza. Questo si chiama ‘progettare la UX’ – l’esperienza che l’utente avrà mentre naviga attraverso il sito web.
Un efficace design – progettazione – della UX può più che raddoppiare il tasso di conversione del tuo sito, ridurre il tasso di rimbalzo (la percentuale di persone che se ne vanno dopo aver visualizzato solo una pagina) e rendere i visitatori più propensi a tornare in futuro.
I wireframe che genero durante questa fase sono come i progetti per una casa: sono fondamentali per la progettazione iniziale del prototipo del sito, in modo da poterlo costruire in modo corretto ed efficiente:
- Creazione di Wireframe a bassa fedeltà
- Pianificazione della narrativa di ogni pagina (Content Planning)
- Identificazione di CTA (Call to Action) e punti di conversione
- Incontro e approvazione finale
UI Design
Forme e Colori
Il design della UI (interfaccia utente) è il processo di rendere un sito web visivamente attraente, assicurando al contempo che corrisponda all’essenza del brand.
Questo è il passo a cui la maggior parte delle persone pensa quando pensa ‘web design’. Come puoi vedere, però, è solo un piccolo passo nel processo di creazione di un sito efficace.
Disegnare la UI significa:
- Consegnare il design definitivo, estremamente fedele al risultato
- Scelta e utilizzo dei colori
- Scelta dei caratteri tipografici
- Implementazione del Brand
- Scelta delle eventuali animazioni
- Vari ritocchi finali
- Incontro e approvazione finale
Per la maggior parte dei lavori non devo progettare ogni singola pagina. Invece disegno la home page, la navigazione, il piè di pagina, i modelli dinamici e una ‘guida allo stile’, le linee guida che governano l’aspetto di tutti gli elementi fondamentali del tuo sito.
Questi prototipi, combinati con i wireframe della UX, sono tutto ciò di cui ho bisogno per costruire il sito web.
Sviluppo Responsive
Il sito prende vita
Questo passaggio, principalmente, comprende:
- Sviluppo custom da zero (nessun tema di partenza)
- Sviluppo scalabile e mantenibile
- Sviluppo con particolare attenzione all’accessibilità (contrasto e dimensioni adeguate, tecnologie ausiliarie come screen reader)
- Identificazione di CPT (Custom Post Type) e CF (Custom Field) e implementarli
- Sviluppo fluid-responsive
- Pianificazione ripetizioni, correzioni, modifiche future facili ed economiche
- Ottimizzazione di performance e velocità
- Ottimizzazioni SEO
- Ottimizzazione mobile
- Ottimizzazione in base al Container
- Lista di controllo e test finali
- Deploy
Mentre segui e approvi il design visivo del tuo nuovo sito, finirò la scrittura del codice assicurandomi che ogni pagina (ed ogni elemento) sia ‘responsive’, il che significa che dovrà essere splendido e funzionare perfettamente su ogni dispositivo.
Quando ho dei wireframe adeguati, un design professionale da cui iniziare a lavorare, e una un copy scritto professionalmente, lo sviluppo è estremamente veloce, fluido ed efficiente.
La maggior parte dei problemi che si incontrano durante il processo di sviluppo si verificano quando le fasi precedenti di UX Design, UI Design, Copywriting, ecc. vengono saltate, trascurate o tentate contemporaneamente. Seguendo il mio processo, sono in grado di assicurarmi che ogni progetto sia consegnato in tempo, nel budget, ogni volta.
In alcuni rari casi il design della UI e lo sviluppo possono sovrapporsi, per motivi tecnici e di revisione: puoi vedere pagine perfettamente funzionanti mentre le costruisco. Potrebbero non essere definitive, ma questo ti aiuta a renderti conto come saranno le pagine quando lo sviluppo sarà concluso.
Ottimizzazione e Lancio
Ci siamo quasi
Quando la fase di sviluppo è finita, dovrebbe iniziare il processo di test e ottimizzazione.
Testerò il tuo nuovo sito in tutti i principali browser, su tutti i principali dispositivi, e su moltissime dimensioni dello schermo. Inoltre, mi assicurerò che tutte le immagini siano adeguatamente dimensionate e ottimizzate, che il codice sia il più pulito possibile e che tutti i requisiti tecnici SEO siano implementati. Una volta completati test e ottimizzazione, lanceremo il sito in modo che sia accessibile al pubblico.
A questo punto ti fornirò un report sulle performance, tramite GTmetrix e Google PageSpeed. Questi servizi esamineranno il sito e forniranno una valutazione, molto dettagliata, per poi esprimere un giudizio.
GTmetrix utilizza il metro di valutazione anglosassone, facendo uso di lettere e non di numeri, dove A è il voto più alto. Ed è l’unico che considero accettabile.
A equivale all’eccellenza, B è un 8 (bene ma non benissimo), C significa una sufficienza, D è insufficiente. Non so per quanto si possa proseguire nell’alfabeto, ho visto con i miei occhi delle F e delle G. Per quanto mi riguarda: B non è abbastanza, e dalla C in poi è tutto da rifare.
La valutazione è una sintesi in lettere di un punteggio in percentuale sulle performance (0-100%) e sulla struttura (0-100%). Inoltre, GTmetrix evidenzia quelle che sono le metriche più importanti:
- LCP (Largest Contentful Paint) misura quanto tempo ci vuole perché l’elemento di contenuto più grande (ad esempio l’immagine principale o un l’intestazione) sulla pagina diventi visibile all’interno della finestra dei tuoi visitatori
- TBT (Total Blocking Time) indica quanto tempo viene perso per colpa degli script che bloccano il caricamento della pagina
- CLS (Cumulative Layout Shift) misura lo spostamento del layout che viene sperimentato dai visitatori man mano che la pagina viene caricata.
Vengono anche presentati ulteriori dettagli su metriche aggiuntive, i test superati, consigli su come migliorare le performance, e una timeline degli eventi che accadono durante il caricamento della pagina.
PageSpeed, invece, esprime un giudizio sulle prestazioni da 0 a 100. Sembrerebbe una percentuale, ma è calcolato in modo piuttosto complesso. Anche PageSpeed utilizza le metriche LCP, TBT e CLS, più altre ancora come FCP (First Contentful Paint) e SI (Speed Index). Inoltre, offre analisi riguardanti altri aspetti fondamentali: Accessibilità, Best Practices (processi di costruzione della pagina standard, di riferimento), e SEO (Search Engine Optimization). Anche PageSpeed offre una panoramica sui test superati, e consigli per incrementare il punteggio. L’aspetto più interessante di PageSpeed, però, è che l’analisi viene effettuata (in emulazione) anche su un dispositivo mobile, attualmente (estate 2023) un Motorola Moto G Power. Il test su uno smartphone ha metriche diverse e il giudizio è, di conseguenza, differente. La mia impressione è che PageSpeed sia estremamente pignolo sui test da smartphone, e forse per questo continuo a considerarlo molto utile nonostante la quasi impossibilità di raggiungere punteggi ottimali. se non aggirando i problemi con strumenti che non rispecchiano affatto una visita reale da una persona vera.
Una nota: queste analisi sono un importante strumento, ma non sempre rispecchiano la reale esperienza che il visitatore ha. Possono aiutarmi a capire il perché una pagina ci metta più di un secondo a completare il suo caricamento, ma non è detto che sia un secondo in cui non accada nulla di rilevante. Rimangono comunque estremamente utili, e difficilmente un voto davvero basso non evidenzierà problemi reali.
Se il tuo sito non avrà una bella A con GTmetrix significa che non ho lavorato abbastanza bene, per i miei standard. Non mi considererò soddisfatto e non dovresti esserlo nemmeno tu. Uno dei miei obiettivi è offrire il meglio anche sul lato puramente tecnico, e benché non sia sempre facile ottenere il voto più alto (alcuni siti web sono davvero complessi e forse non è fisicamente possibile), faccio tutto il possibile per raggiungere l’eccellenza. Se dovessi arrendermi e lanciare il tuo sito senza aver raggiunto il massimo possibile (non è ancora successo), ti farò lo sconto.
Questo concluderà la ‘fase uno’ del tuo progetto, a quel punto inizieremo la fase di gestione, ed eventualmente quella del marketing.
Gestione
Amministrazione e Manutenzione
Un sito web efficace è una cosa viva, che respira.
Come dico ai miei clienti, è come un giardino. Va curato, ogni tanto va annaffiato, va tagliata l’erba. Le aziende di successo, con siti web di successo, non adottano un approccio ‘fatto e dimenticato’, sanno che il loro sito funzionerà solo se seguiranno una tabella di marcia di gestione e sviluppo coerente.
Un sito senza questa tabella di marcia è un sito che sta morendo di una morte lenta. Le aziende competitive supereranno facilmente il tuo sito se non viene gestito attivamente, motivo per cui la gestione attiva fa parte del mio impegno a lungo termine nei confronti di quasi tutti i clienti con cui lavoro.
Inoltre, i siti web richiedono un hosting continuo, una manutenzione di base e un monitoraggio della sicurezza che devono essere eseguiti da professionisti di fiducia.
La gestione di un sito web include:
- Hosting di qualità
- Dominio
- Gestione sicurezza
- Backup quotidiani
- Backup offline
- Aggiornamenti WordPress
- Aggiornamenti dei plugin
- Licenze dei plugin
- Ottimizzazione performance
- Ottimizzazione accessibilità
- Analisi degli accessi
- Account e-mail
Offro diversi piani di gestione e manutenzione a tariffa mensile. I prezzi variano in relazione al tipo di hosting, a quali servizi sono inclusi, e al loro livello.
Marketing
Uno sforzo un più
Non basta essere online per essere visibili, a volte serve farsi un po’ di pubblicità.
Consiglio di strutturare la maggior parte delle campagne di gestione e marketing come campagne annuali poiché le strategie e le tattiche richiedono uno sforzo a lungo termine, ma consiglio anche di mantenere separate le due cose in modo da poterle gestire singolarmente e indipendentemente.
Queste strategie potrebbero includere:
- SEO continua
- Campagne PPC (Pay Per Click)
- Pubblicità su Facebook, Youtube, e altri canali
- Invio report mensili
Ogni mestiere, quando fatto bene, esige gli strumenti corretti e l'esperienza nel saperli maneggiare per poter essere fatto per a modo. Servono anni di ricerca, di apprendimento, e di esercizio.
In attesa di un titolo di studio che abiliti legalmente chi vuole fare questo lavoro, sciegliere a chi affidarsi e con chi investire rimane troppo spesso una decisione dettata quasi esclusivamente dalle cifre in fondo al preventivo, che a volte non viene neppure letto per intero.
Se ti serve un avvocato, o un dentista, oppure un architetto, sai che quel professionista ha studiato sul serio, ha seguito un persorso formativo preciso, che almeno in teoria lo pone al pari di chiunque abbia conseguito la stessa laurea. È abilitato, può farlo.
Visto che, invece, qualsiasi essere umano dotato di un computer può dichiararsi web designer (discorso analogo per moltissime professioni che non richiedono un titolo), per il cliente può essere complicato capire la differenza tra un preventivo di 300 euri e uno che parte da 5000.
La differenza è lampante, siamo d'accordo, ma per aiutarti a capire questo svarione di prezzi farò un parallelo alla portata di ogni italiano: la pizza.
Esistono pizze surgelate, in confezioni da tre, a meno di 5€. Il processo per prepararla è semplice, e chiunque può cucinarla: apri la scatola, metti la pizza in forno. Fine.
Esistono invece pizze fatte a mano, da pizzaioli capaci, che utilizzano solo la mozzarella di bufala campana D.O.P. e i pomodori San Marzano, olio extravergine di oliva di quello buono, farine di grano tenero 0 o 00. L'impasto deve essere preparato nel modo giusto, nei tempi giusti, e queste pizze vengono poi cotte in forni a legna creati appositamente per questo scopo. Pazzesco, vero? Il processo è molto diverso, le competenze richieste sono diverse, gli ingredienti sono diversi. Il sapore, la digeribilità, la fragranza, sono altrettanto diverse. E ovviamente il prezzo è diverso.
Il processo è ciò che fa la differenza tra una pizza surgelata e una pizza vera, tra un completino comprato sul Postalmarket e un vestito su misura confezionato da un sarto. In sintesi: tra un dilettante (un amatore) e un professionista. Non ho nulla contro i dilettanti, basta saperlo prima e non aspettarsi professionalità.
Pagare poco significa, ovviamente, ottenere poco. E significa anche rischiare che domani chi ti ha fatto il sito non esista più, se vive di progetto in progetto e non si assicura entrate sufficienti da mantenere vivo il suo business. Pagare un sito quanto vale ti mette al riparo anche da questo.
Ora capisci perchè non è sostenibile poagare un sito 300 euri, per te o per chi te lo costruisce?
parliamone
Raccontami chi sei, di cosa ti occupi, e di cosa hai bisogno.
Vieni a scambiare due chiacchiere con me e con i miei due cani, fatti offrire un caffè. Nessuna pressione e nessun obbligo di lavorare insieme.