I passaggi da seguire durante la progettazione di un nuovo sito Web

Pubblicato: 2021-04-19

Il grande web design consiste nel combinare un'estetica eccezionale con funzionalità straordinarie. Per realizzare un sito web dal design brillante hai bisogno di una serie di competenze, un po' di estro creativo e un po' di organizzazione all'inizio!

Questa guida ha lo scopo di aiutarti a creare un sito web brillante. Uno che sembra fantastico e funziona ancora meglio. Analizzeremo alcuni dei passaggi chiave che devi intraprendere per ottenere il miglior sito web possibile. Iniziamo!

Scopo e ricerca

Prima di passare alla parte creativa del processo di progettazione web, ci sono alcune cose che dovresti stabilire prima. La chiave è capire il tuo pubblico di destinazione. Questo è vitale. Dopotutto, non ha senso investire tempo e denaro in un sito Web che non soddisfa le esigenze del tuo target demografico.

Questo primo passaggio può essere piuttosto complicato. È facile presumere che tu sappia cosa vuole il tuo pubblico. Tuttavia, dedicare del tempo alla ricerca di questo aspetto all'inizio può far risparmiare un sacco di avanti e indietro nel progetto e aumentare le possibilità che il tuo sito Web abbia successo. E non dimenticare, se stai progettando un sito web per un cliente, assicurati di coinvolgerlo in questo processo!

Alcuni punti chiave che potresti voler considerare, soprattutto se il sito Web è per un cliente, sono i seguenti:

Il sito Web è un elemento autonomo a sé stante o fa parte di una strategia di marketing più completa?
Esiste già un marchio forte? In tal caso, è importante che il sito web lo rifletta. A volte può essere una cosa difficile da fare in quanto la tentazione potrebbe essere quella di concentrarsi sulle tendenze del design moderno che non si adattano necessariamente allo stile già stabilito da un marchio. Sebbene sia importante che un nuovo sito non sembri datato fin dall'inizio, non può nemmeno deviare troppo dai principi di progettazione fondamentali già stabiliti da un marchio (a meno che il marchio non sia disposto a intraprendere un'intera revisione della propria immagine).
È anche molto importante guardare alla concorrenza dei tuoi o dei tuoi clienti. Identifica i loro punti di forza e di debolezza per assicurarti che il tuo nuovo sito incorpori tutto il necessario per avere successo. Anche guardare la concorrenza può essere utile in quanto può assicurarti di non perdere una caratteristica o una funzione potenzialmente vitale.

Con la tua ricerca ora dovresti sentirti sicuro che qualsiasi nuovo sito che progetti soddisferà i requisiti del tuo cliente (o te stesso ovviamente!). La ricerca a volte può sembrare noiosa, specialmente quando ti senti traboccante di succhi creativi e il desiderio di iniziare a ottenere qualcosa di tangibile sullo schermo può essere travolgente. Non saltare questo passaggio, per quanto allettante. Può farti risparmiare MOLTO tempo in futuro.

Sequenza temporale

La creazione di una sequenza temporale per il lavoro necessario per completare il sito Web, sebbene non obbligatoria, è altamente raccomandata. I traguardi all'interno di una sequenza temporale possono aiutarti a chiarire i processi necessari per passare da una pagina vuota a un sito Web finito e possono aiutarti a citare accuratamente il progetto all'inizio. Per i siti più grandi, una sequenza temporale con pietre miliari ti consentirà di dividere il lavoro tra i membri del tuo team in modo più efficiente, con tutti in grado di vedere come il loro lavoro (e le scadenze!) si adattano al quadro generale.

Può essere utile utilizzare uno strumento come Asana per aiutare con questo processo. Scomporre accuratamente ogni elemento del sito Web in attività assicurerà che nulla sfugga alle crepe e ti consentirà di fornire con maggiore sicurezza al cliente una data di completamento per il sito Web. Se il nuovo sito Web deve sostituire un sito Web esistente, non dimenticare di creare il tempo necessario per gestire la transizione "passa in diretta" in cui potresti dover inserire reindirizzamenti dalle vecchie pagine alle nuove e così via.

Infine, ricorda sempre di sottoscrivere e consegnare in eccesso. I siti Web, come la maggior parte dei progetti, richiedono invariabilmente più tempo di quanto potresti stimare inizialmente, quindi una buona regola pratica è aggiungere un altro 20% di tempo alla stima iniziale per assicurarti di non cadere nella trappola secolare di ritrovarti a correre a corto di tempo (e quindi suscettibile di perdere una scadenza) sin dall'inizio.

Mappa del sito

Il passaggio successivo nel processo di progettazione è creare una mappa del sito. Anche se il tuo sito è piccolo, è bello averne uno. Le Sitemap non solo ti aiutano a visualizzare completamente il layout di un nuovo sito (e quindi ti assicurano di non perdere nulla di vitale o di avere una struttura di navigazione confusa), ma alla fine aiutano anche Google a eseguire la scansione del tuo sito quando diventa attivo, il che può aiutare a migliorare il tuo SEO.

Alcuni designer sono felici di abbozzare una mappa del sito utilizzando il loro strumento di illustrazione preferito, ma potresti cercare di utilizzare uno strumento dedicato alla mappa del sito come WriteMaps per semplificarti la vita.

Wireframe, mockup e prototipi

Wikipedia definisce un wireframe di un sito web come "una guida visiva che rappresenta la struttura scheletrica di un sito web". La creazione di un wireframe di un sito Web è di solito il primo passo durante la progettazione di un sito Web in quanto ti aiutano a ottenere un'importante chiarezza sul layout del sito. I wireframe sono anche un ottimo strumento da utilizzare quando si discute di un nuovo sito con il cliente e il tuo team in quanto forniscono una visualizzazione molto più tangibile del design proposto ma, soprattutto, possono essere creati molto più rapidamente di un vero mockup di una pagina. Ciò consente alle parti interessate di criticare un progetto prima che un sacco di ore venga affondato nel sito.

Un mockup porta un wireframe al livello successivo. Alcuni designer possono scegliere di creare un mockup "a ossa nude" di un sito che è una versione leggermente più rimpolpata del wireframe (possibilmente aderente alla scala di grigi) mentre altri scelgono di creare mockup completi che includono immagini, colori e persino alcune funzionalità. Quanto lontano vuoi spingere il tuo mockup dipenderà da quanto sei sicuro del design che stai proponendo. Se ritieni che il cliente possa ancora voler modificare una parte significativa del design del sito, allora ha chiaramente senso mantenere il mockup semplice quanto necessario per trasmettere il design/la funzionalità proposta.

Una volta che tu e il tuo cliente avete fiducia nel design, potete creare un mockup completo che mostra completamente il design di una pagina o dell'intero sito web.

Esistono numerosi strumenti online che possono accelerare notevolmente il processo di mockup. Questi includono Mockflow e Moqups, entrambi i quali possono portarti da un wireframe fino a un modello di sito Web completo.

Anche se un mockup non ti consente di trasmettere completamente la funzione di un sito Web, garantisce che tu, il tuo team e il cliente siate tutti al 100% sulla stessa pagina quando si tratta di progettazione del sito. E, come tutti noi che codificano siti per vivere saprà, è molto più facile cambiare il design di un sito in un mockup che nel sito finale stesso!

L'ultimo passaggio che potresti voler fare è creare un sito Web prototipo. Tradizionalmente questo avrebbe richiesto tempo (e praticamente lo stesso della costruzione del sito finale stesso). Tuttavia, grazie a strumenti come Framer, ora è più facile che mai portare i tuoi mockup al livello successivo introducendo elementi funzionali nel design del mockup che consentono al cliente di avere davvero un'idea di come funzionerà il sito.

Come nota finale a questa sezione, vale la pena ricordare che troppa scelta può essere una cosa negativa. In definitiva, indipendentemente da ciò che il cliente può dire, sei l'esperto di design e, insieme al tuo team, è probabile che tu capisca meglio cosa fornirà il risultato ottimale nella progettazione di un sito web. Per questo motivo, a volte è meglio presentare i colori e il layout che ritieni funzionino meglio e non confondere le cose fornendo anche una gamma di opzioni tra cui il cliente può scegliere. Ciò evita che il cliente finisca per "scegliere e scegliere" da elementi che, combinati, potrebbero non essere compatibili. Meno può sicuramente essere di più a volte!

Scrivere ottimi contenuti

Non importa quanto sia buono il design di un sito web, alla fine non ha senso se la copia sul sito non trasmette il messaggio desiderato. Per questo motivo, è buona norma coinvolgere un copywriter nel progetto fin dall'inizio. Possono aiutare a creare il contenuto che coinvolgerà davvero il lettore e puoi quindi lavorare con loro per assicurarti che venga inserito nel sito in modo ottimale.

Ad esempio, il copywriter potrebbe inventare uno slogan fantastico che trasmette il prodotto/servizio in una singola frase. Questa è chiaramente un'informazione importante, ma se coinvolgi il copywriter solo nella fase finale del progetto, potresti scoprire di non aver progettato in una posizione adatta per visualizzare questo testo. Chiaramente sarebbe un grosso errore.

Il copywriting è un elemento spesso trascurato di un sito web. Veniamo tutti risucchiati dal fascino visivo, ma la copia può finire per essere un'aggiunta dell'"ultimo minuto" che non favorisce nessuno.

Un altro motivo per coinvolgere il copywriter fin dall'inizio (se avevi dei dubbi) è assicurarsi che il sito sia ottimizzato dal punto di vista SEO. La copia può creare o distruggere la SEO di un sito Web, quindi se non pensi che sia importante, ripensaci! Utilizzando le parole chiave e le frasi chiave nel modo giusto, è più probabile che i motori di ricerca ti diano una priorità maggiore nelle SERP. Ci sono alcuni ottimi strumenti per aiutare a migliorare il tuo SEO come Google Keyword Planner, Screaming Frog's SEO Spider, Google Trends e altro ancora.

E se non hai il lusso di assumere un copywriter e stai pensando di "farcela da solo", allora potresti voler dare un'occhiata a un paio di risorse e strumenti di scrittura che potrebbero semplificarti la vita. Il primo strumento che vale la pena dare un'occhiata è Grammarly, un assistente di scrittura facile da usare. Grammarly può aiutarti a evitare errori di battitura e anche a migliorare il modo in cui il tuo testo è formattato (dal punto di vista linguistico) aiutandoti a garantire che la tua copia sia il più leggibile possibile.

Il secondo a cui suggeriamo di dare un'occhiata è meno uno strumento e più una risorsa di marketing chiamata Storybrand. Storybrand organizza workshop che ti aiutano a "chiarire il tuo messaggio". In tal modo, è possibile aumentare alle stelle il successo del tuo sito Web aumentando il messaggio che trasmette sulla tua attività in termini chiari e inequivocabili. Se i loro workshop sono troppo costosi, dai un'occhiata al libro sul loro framework di marketing.

Visuale

La prima cosa che probabilmente colpirà il cervello di un visitatore del sito Web sono le immagini sul sito Web! Inutile dire che questi sono quindi piuttosto importanti.

Senza dubbio come designer avrai pensieri concreti sul tipo di elementi visivi che desideri utilizzare. Questi possono variare da disegni animati fino a foto di prodotti o foto che rappresentano il marchio e il loro prodotto. Qualunque cosa tu scelga di utilizzare, assicurati che questi elementi visivi siano di alta qualità o tutti gli altri tuoi sforzi andranno sprecati.

La grafica è un'area chiave in cui puoi sperare di distinguerti davvero dalla concorrenza. Non lasciare che questa opportunità vada sprecata! Prima di citare e accettare un progetto, assicurati di discutere gli elementi visivi che desideri utilizzare con il cliente. Scopri se hanno una libreria di immagini interna che puoi utilizzare, o forse se hanno in programma di fare un servizio fotografico per ottenere le immagini necessarie. Se non lo sono e non hai immagini a portata di mano di qualità adeguata, puoi trovare immagini "generiche" ragionevoli da librerie di foto come Shutterstock?

Infine, durante la fase di sviluppo, assicurati di prestare attenzione alle dimensioni di queste immagini e assicurati che siano ottimizzate in modo da non rallentare il sito. Vale la pena utilizzare uno strumento come TinyPNG o, in alternativa, il tuo host potrebbe fornire un servizio equivalente come lo strumento Image Smacking che utilizziamo in Pressidium.

Con il layout completo, la copia scritta e le immagini adatte, hai raggiunto un traguardo entusiasmante... sviluppo! Diamo un'occhiata a ciò che questo comporta e ad alcune delle insidie a cui prestare attenzione.

Sviluppo

A meno che tu non stia gestendo tu stesso la build, allora sarà il momento di inviare il design del sito ai tuoi sviluppatori affinché facciano le loro cose. Più chiaro è il tuo design e anche la descrizione di eventuali funzionalità aggiuntive di cui hai bisogno, più facile sarà per gli sviluppatori fornire il sito che hai visualizzato. È qui che un prototipo di sito creato utilizzando uno strumento come Framer può davvero prendere il sopravvento.

Durante la build, molti sviluppatori forniranno collegamenti di sviluppo che possono essere passati al client in modo che possano visualizzare in anteprima come sta arrivando la build. A prima vista, questa sembra una buona idea poiché è sempre bello poter dimostrare che il lavoro è in corso (soprattutto se il cliente sta accumulando pressioni per portare a termine il sito!). Molti sviluppatori tendono a creare alcuni collegamenti di sviluppo per mostrare al cliente che il lavoro è in corso.

Se ti senti tentato di farlo, forse fermati e valuta se questa è davvero una buona idea. La maggior parte dei clienti non capirà il flusso di lavoro che seguirà uno sviluppatore e probabilmente finirà per risponderti con un numero qualsiasi di domande e forse anche richieste di modifica. Avere a che fare con questi in questa fase è controproducente e può essere un problema in tempo reale, quindi è meglio aspettare che il sito finale sia pronto prima di sederti con loro per un'analisi completa.

Test di qualità

Con il sito finale pronto per l'uso, ora è il momento di eseguire alcuni controlli prima di prendere in considerazione l'idea di andare online. Questi possono essere piuttosto estesi e vale la pena creare una lista di controllo riutilizzabile che può essere spuntata per assicurarsi che non si perda nulla. Alcune delle cose che potresti voler controllare (in nessun ordine particolare) sono le seguenti:

Convalida HTML e CSS: convalida il tuo HTML e CSS utilizzando strumenti come il Validatore HTML W3C e il Validatore CSS. Il W3C fornisce anche un controllo dell'internazionalizzazione che ti aiuta a verificare se il tuo sito web può essere facilmente tradotto in altre lingue.
Collegamenti: in questa fase è essenziale verificare che tutti i collegamenti interni ed esterni funzionino correttamente.
Grammatica e ortografia: si spera che il testo sia stato copiato e incollato dai documenti forniti dal tuo copywriter, dovrebbe essere ok. Tuttavia, possono verificarsi errori, quindi vale la pena rileggerli.
Moduli: controlla questi lavori come previsto e tutti gli invii arrivano. Ti consigliamo di testare nuovamente questi moduli una volta che il sito sarà attivo e quindi di istruire il cliente a programmare i test futuri, magari su base mensile.
Tempi di caricamento: un sito web veloce è d'obbligo. Strumenti come WebPageTest, GTMetrix, PageSpeed Insights o Pingdom possono essere utilizzati per verificare che i tempi di caricamento siano piacevoli e veloci. Se il tuo sito è ospitato su un server di sviluppo che non verrà utilizzato come server live, ti consigliamo di eseguire nuovamente il test quando il sito sarà attivo.
Reattività mobile: assicurati che il tuo sito web venga visualizzato correttamente su tutti i tipi di dispositivi. Puoi utilizzare uno strumento come BrowserStack per farlo.
Funzionalità: se disponi di funzionalità più avanzate sul tuo sito oltre a cose come un modulo di contatto, ti consigliamo di testare attentamente queste funzioni. Ad esempio, se stai avviando un sito WooCommerce, è probabile che il tuo processo di test debba essere più intenso rispetto a un sito Web in stile brochure. Usando WooCommerce come esempio, testa i gateway di pagamento, la funzionalità del carrello, come funzionano cose come i codici promozionali e così via. Prova prova e prova ancora!
Controlli visivi: dai un'occhiata alla consistenza della tua tavolozza dei colori e alle spaziature, ai margini, ai padding, ecc. Lo stesso vale per la tipografia e il posizionamento, la risoluzione e l'ottimizzazione delle immagini.
Comportamento del browser: il prossimo passo nell'elenco è il controllo del comportamento del sito Web su più browser e dispositivi.
SEO: controlla di nuovo il tuo SEO! Ciò include tutti gli elementi della tua struttura semantica come intestazioni, paragrafi, elenchi e altri tipi di tag che potresti utilizzare, nonché i meta titoli e le descrizioni, nonché le impostazioni di Open Graph per i social media.

Quando sei felice che il tuo sito funzioni come previsto e sia bello come speravi, ora potresti pensare di essere pronto per il lancio. Ti suggeriamo di ottenere ora circa 5 persone che non sono state coinvolte nel progetto per testare anche il tuo sito. Idealmente, questi utenti sarebbero anche meno "orientati alla tecnologia" di te. Saresti stupito di ciò che un nuovo paio di occhi può cogliere. In questo modo puoi evitare problemi con i clienti "reali" dopo il lancio e darti l'opportunità di migliorare ulteriormente il flusso del sito.

Lancio

Questo è! Idealmente, avvia il tuo sito in un'ora del giorno in cui è probabile che i volumi di traffico siano bassi. L'utilizzo di un provider DNS come Cloudflare può aiutare a evitare problemi di memorizzazione nella cache DNS. È anche meglio avviare quando il tuo sviluppatore è a portata di mano in modo che possa intervenire e assistere se qualcosa va storto.

Ora che sei in diretta assicurati di dedicare un po' di tempo a ricontrollare il sito e non preoccuparti se trovi qualche problema! È quasi impossibile evitare che qualcosa cada attraverso le crepe, ma si spera che l'utilizzo di un elenco di controllo completo aiuterà a garantire che la maggior parte degli elementi principali funzionino come previsto.

Conclusione

La progettazione di un buon sito Web è un lavoro enorme ed è facile sentirsi un po' scoraggiati dal compito da svolgere. Suddividere il lavoro in blocchi gestibili e pianificare davvero le cose prima di rimanere troppo bloccati può davvero aiutare a rendere il processo più efficace e divertente.

Buona fortuna!