Finora questa settimana vi abbiamo mostrato come creare un sito web. Ora, vedremo come curare il design perfetto per il tuo piccolo angolo di Internet. Alla fine di questo articolo, saprai come fare quanto segue:
- Crea una pagina web da zero
- Progettazione di pagine Web
- Come testare un frame di un sito web
- Come creare un prototipo di sito web
- Come applicare il tuo marchio al tuo sito web
Prima di iniziare, considera il tuo tempo e i tuoi obiettivi
In questa sezione, ci impegneremo nella progettazione di un sito Web in dettaglio, dai primi schizzi di layout alla produzione finale. È davvero importante rendersi conto che creare siti Web di grandi dimensioni e di qualità è un processo iterativo che richiede molto tempo.
Quel processo inizia ora ma continuerà... per sempre. Il web è un'arena in continuo cambiamento e ci si aspetta che continui a muoversi. Lavorerai sempre sul tuo sito web mentre ne migliori le prestazioni nel tempo o modifichi gli obiettivi del sito web per reagire ai cambiamenti del mercato.
Per far partire qualcosa e farlo funzionare rapidamente, devi essere molto strategico su cosa scegli di fare per primo. Non devi lanciare TUTTO immediatamente. Ripensa ai tuoi obiettivi e delinea come dovrebbe essere il sito web più piccolo possibile per soddisfare tali obiettivi: un prodotto minimo vitale.
Ora concentra tutta la tua attenzione sul raggiungimento di questo obiettivo. Se esageri troppo, troppo presto, finirai per impantanarti per settimane. Sii intelligente nel lavoro che scegli di intraprendere.
Forse tutto ciò che puoi ottenere questa settimana è creare un sito web di una pagina con il tuo logo prototipo e il testo "in arrivo"! È decisamente meglio di niente e ti prepara ad espanderti in seguito.
Creare il tuo sito web potrebbe sembrare un compito arduo, ma quando lo pianifichi, ti renderai conto di quali pagine sono assolutamente essenziali per il lancio e quali pagine possono essere aggiunte in seguito. È meglio creare un sito web più piccolo e di alta qualità piuttosto che creare un sito ampio con molte pagine contenenti contenuti scadenti o mancanti. Non perderai nulla tagliando queste pagine extra per cominciare. I siti web sono destinati a evolversi e cambiare nel tempo e puoi facilmente espandere il tuo sito web dopo il lancio.
Pianificazione di una pagina web
Quando inizi a creare il tuo sito web, la prima cosa che devi considerare è con quali pagine lanciarlo e come collegarle tra loro in modo che gli utenti possano trovare facilmente i contenuti che crei.
La navigazione è incredibilmente importante da fare bene. Se i visitatori non riescono a trovare rapidamente ciò che stanno cercando, se ne andranno con la stessa rapidità con cui sono arrivati!
Questo problema viene solitamente risolto con una barra di navigazione che rimane bloccata in cima alla pagina quando l'utente scorre verso il basso. La navigazione per il 95% dei siti Web si presenta sotto forma di una barra in cima che si riduce a un'icona quando si è su siti mobili. È quindi essenziale scegliere le pagine di primo livello giuste da posizionare in questa barra di navigazione. Non è necessario che ogni singola pagina sia collegata in cima, poiché ciò causerebbe un ingombro molto rapido della barra, ostacolando la navigazione.
Se il tuo sito web richiede molte pagine, anche dal lancio, dovrai raggrupparle in categorie e annidarle in menu a discesa nella barra di navigazione. L'avrai visto molte volte nei siti web di moda in cui hanno una vasta gamma di prodotti suddivisi in più categorie. In genere usano grandi e spaziosi pannelli a discesa per soddisfare questa esigenza. Gli esempi migliori riescono a visualizzare chiaramente una vasta gamma di opzioni senza che si trasformi in un mucchio disordinato di menu all'interno dei menu. Se stai pianificando un'attività di moda o qualsiasi attività con una vasta gamma di prodotti, vale la pena dedicare molto tempo a ottenere la giusta navigazione. Se le persone non riescono a trovare i tuoi prodotti, non possono nemmeno acquistarli.
Fai riferimento alla tua ricerca di mercato per capire cosa potrebbero voler ottenere i tuoi visitatori visitando il tuo sito web e conducili a quel punto il più rapidamente possibile con il minor numero di confusione possibile.
La tua ricerca di mercato dovrebbe anche aiutarti a definire la progettazione generale del tuo sito web.
Progettazione di pagine Web
Uno degli aspetti a cui devi pensare quando progetti una pagina web da zero è il design.
La settimana scorsa abbiamo trattato la creazione di una mood board per aiutarti a stabilire l'aspetto e la sensazione del tuo marchio e per raccogliere ispirazione. Dovresti attingere a questo per il tuo sito web. Potresti anche creare un'intera mood board dedicata all'ispirazione per il sito web. Ancora una volta, ci sono molte risorse che mostrano incredibili design di siti web.
Di seguito sono riportate alcune risorse che potresti utilizzare per aiutarti in questo processo:
- Articoli del sito web Abduzeedo
- Esempi di siti web Dribbble
- Esempi di siti web Behance
- Esempi di siti web Pinterest
Wireframe del sito web
Il wireframing è una fase comune ed estremamente utile nella progettazione, che si tratti di creare un sito di destinazione di una sola pagina o un ampio negozio di e-commerce.
Ti consente di giocare rapidamente con i layout senza dover elaborare design di alta qualità. Il wireframing può essere eseguito con carta e penna e il processo prevede la simulazione di ogni pagina web utilizzando linee e caselle per indicare dove può essere posizionato il contenuto. Ciò ti consente di generare rapidamente layout e immaginare il flusso della pagina senza dedicarci molto tempo. Utilizzalo per considerare il posizionamento delle tue call to action (CTA), immagini, blocchi di testo e navigazione.
Prototipo del sito web
Questo è un passaggio extra che puoi fare quando crei il tuo sito web. È molto più semplice di quanto sembri, in quanto non richiede alcuna codifica, dato che ci sono molte app là fuori progettate per rendere questo processo rapido e semplice.
L'idea è quella di digitalizzare i wireframe (è comunque possibile utilizzare segnaposto per testo e immagini) e di utilizzare il software di prototipazione per collegarli tra loro, in modo da avere un'idea ancora più chiara del flusso e della navigazione del sito.
Puoi creare immagini statiche in scala di grigi dei tuoi layout wireframe in software di immagini come Photoshop e poi caricarle su questi siti di prototipazione. I siti ti consentiranno quindi di collegare più prototipi insieme per creare un mockup del tuo sito web che puoi visualizzare in anteprima e testare.
Molte di queste app ti permetteranno di realizzare progetti direttamente all'interno del software:
Puoi iniziare a usare i tuoi prototipi per capire dove collocherai i tuoi messaggi per renderli più efficaci. Quando sostituisci il contenuto segnaposto con contenuto reale, assicurati che funzioni per raggiungere la tua strategia. Quando qualcuno arriva alla tua landing page, saprà esattamente cosa fa la tua attività entro pochi secondi? Il sito web li sta rapidamente guidando verso le azioni che vuoi che gli utenti completino?
Naturalmente, ciò che conta è tanto i messaggi in sé quanto la loro collocazione e presentazione sulla pagina.
Progettazione di siti web di branding
Una volta stabiliti i layout ideali, il design sarà naturalmente soddisfatto dal tuo marchio. Devi applicare il lavoro completato la settimana scorsa al tuo sito web, poiché la coerenza è la chiave per costruire il tuo marchio. Il tuo sito web deve apparire all'altezza e adattarsi al resto delle tue attività di marketing e comunicazione.
L'immagine del marchio che hai scelto sarà fondamentale per creare un sito dall'aspetto accattivante e coinvolgente. Immagini di alta qualità sono essenziali per garantire che il tuo sito web appaia nitido in molte dimensioni diverse. Un'immagine sfocata crea una cattiva prima impressione.
Il logo che hai progettato nella settimana del branding dovrebbe essere il tuo primo punto di riferimento. Assicurati che sia visibile in cima al tuo sito web su ogni pagina. Molti siti web lo incorporeranno nel menu di navigazione in alto che sarà probabilmente su ogni pagina. Puoi anche usare il logo per la navigazione, cliccando puoi tornare alla home page del sito.
Posizioni dei colori del marchio
Applicare la palette di colori del tuo marchio al tuo sito Web assicura che il tuo marchio venga percepito chiaramente, questo da solo può essere sufficiente a rendere il tuo sito Web immediatamente riconoscibile. Il colore primario del tuo marchio dovrebbe essere presente in modo coerente in tutto il tuo sito.
Ecco i luoghi più comuni in cui trovare il colore primario del tuo marchio:
- Titoli di navigazione
- Colori di sfondo del banner superiore (fai attenzione se hai un colore dominante)
- Titoli e sottotitoli delle pagine
- Collegamenti ipertestuali di testo
- Colori dei pulsanti – (anche se potresti voler scegliere un colore contrastante per far risaltare i tuoi CTA)
- Icone a colori
- Sovrapposizioni sulle tue foto stock
Puoi usare i tuoi colori secondari in modi simili per creare interesse, variazione e contrasto. Sii semplicemente coerente con il tuo metodo di applicazione. Ricorda, puoi usare il tuo software di prototipazione per sperimentare quanto vuoi. Testare le variazioni e iterare sui tuoi progetti è la chiave per arrivare rapidamente a un progetto finale di cui sei soddisfatto.
Scegliere le immagini giuste
La scelta di una buona grafica per il tuo sito web dovrebbe utilizzare le risorse del marchio che abbiamo descritto come creare nella settimana 8. Ecco alcuni ulteriori suggerimenti per applicarle al tuo sito web:
- Assicurati che le immagini che scegli siano complementari al testo che scrivi per accompagnarle. Dovrebbero supportare il messaggio chiaro che stai cercando di trasmettere.
- Fai attenzione a mettere del testo sopra le immagini. Può compromettere la leggibilità. Applicare un colore di accento sopra può aiutare a ridurre il rumore sullo sfondo.
- Le immagini di grandi dimensioni possono influire sui tempi di caricamento. Puoi sempre salvarle come jpeg per comprimere le dimensioni del file se questo è il caso.
- Evita stock che sembrano troppo generici o falsi. Sono davvero ovvi e danneggeranno la fiducia e l'autenticità del tuo sito web (ne parleremo più avanti).
- Non esagerare con le immagini. Le immagini sono molto potenti e possono distrarre se usate troppo. Ricorda gli obiettivi del tuo sito web e assicurati che ogni immagine abbia un ruolo e non li ostacoli.
Concentrati sul sito web
Un altro elemento critico del web design è il modo in cui scrivi e presenti i tuoi contenuti in modo che le persone si prendano il tempo di leggerli. Scrivere saggi sui prodotti sulla tua homepage non funziona e non è abbastanza coinvolgente.
Parte di questo problema si risolve usando un font web chiaro, con un buon contrasto, dimensione e spaziatura. Se stai usando temi integrati in una piattaforma web, allora ci sono molti temi là fuori che hanno naturalmente una grande leggibilità integrata. Tuttavia, questa è solo metà della battaglia. La stanchezza da lettura, specialmente sugli schermi, è molto reale e devi essere intelligente nell'assicurarti di scrivere e posizionare il tuo testo in un modo che venga effettivamente letto.
Segui queste linee guida:
- Assicuratevi che il testo sia chiaro ed evitate ambiguità.
- Mantieni semplice la struttura della frase. Evita parole e combinazioni complesse.
- Arriva rapidamente al punto.
- Suddividere grandi quantità di testo in blocchi separati e più piccoli, ognuno con un proprio titolo.
- Non cercare di dire troppo in una volta sola. Decidi il punto che ogni blocco di testo sta cercando di far passare e attieniti a quello.
- Utilizza immagini insieme al testo per incoraggiare le persone a leggere.
- Utilizza lo spazio bianco! Lascia abbastanza spazio (imbottitura) attorno al tuo contenuto in modo che non sia affollato.
Come assicurarti di creare un sito web ottimizzato per i dispositivi mobili
È incredibilmente importante che il tuo sito web funzioni senza problemi su cellulari e tablet, poiché ormai molte persone consumano contenuti tramite questi dispositivi. Google penalizzerà effettivamente i siti web nelle sue ricerche se non rispetti questa regola!
Fortunatamente, oggigiorno è piuttosto facile. La maggior parte dei temi standard forniti con una piattaforma di siti web dovrebbe utilizzare un design "responsive". Ciò significa che man mano che la larghezza dello schermo diminuisce, il contenuto si adatterà automaticamente per adattarsi a questa nuova dimensione, perfetto!
Tuttavia, vale la pena controllare che le immagini e i video che stai utilizzando rimangano visibili quando ridimensionati e che il testo sia ancora leggibile. Se non possiedi diversi tipi di tablet e telefoni cellulari, potresti chiederti come verificarlo. Bene, il modo più rapido è afferrare il bordo sinistro o destro del tuo browser (assicurati che non sia a schermo intero) e trascinarlo verso sinistra o destra per ingrandire o rimpicciolire la finestra. Vedrai il contenuto del tuo sito Web adattarsi mentre lo fai e così potrai analizzare i tuoi layout a diverse dimensioni. Esiste anche un metodo più preciso che prevede l'utilizzo di uno strumento integrato nel browser Chrome:
- Fai clic con il pulsante destro del mouse sulla tua pagina web
- Fare clic su "Ispeziona" (viene visualizzato un pannello)
- In basso a sinistra di questo nuovo pannello c'è un'icona di uno schermo e di un telefono (barra degli strumenti del dispositivo di attivazione/disattivazione)
- Fare clic su questa icona
Ora lungo la parte superiore hai diverse barre grigie che ti permettono di simulare l'aspetto del tuo browser a risoluzioni specifiche. C'è persino un menu a discesa per scegliere i telefoni/tablet più diffusi e le risoluzioni che usano. Bello!
Che tu scelga di creare il sito web della tua azienda da solo o di assumere un'agenzia che lo faccia per te, ci sono molti costi associati alla progettazione di un sito web. Non solo dovrai pagare il tuo nome di dominio, i costi di hosting e qualsiasi piattaforma web tu scelga, ci saranno anche delle spese di manutenzione continua del sito web.
Se assumi un'agenzia di design per farlo per te, questo sarà un costo elevato per la tua startup. Dovresti considerare se i tuoi fondi copriranno questo costo o se sarà più economico farlo da solo. Come abbiamo dimostrato negli ultimi articoli, creare un sito web è molto più facile di quanto pensi. Sebbene ci siano costi associati a entrambi gli approcci alla progettazione del tuo sito web, devi determinare quale sia più fattibile per te.
Sintesi
Quando progetti un sito web, pensa a come vuoi che il tuo marchio venga rappresentato. È probabile che il tuo sito web sia una delle prime impressioni che i clienti hanno del tuo marchio. Ciò significa che è fondamentale che tu trasmetta il messaggio giusto. Devi anche assicurarti che il tuo sito web sia intuitivo e che possa essere utilizzato su un'ampia gamma di dispositivi. Un sito web che non ha un bell'aspetto sui dispositivi mobili potrebbe indurre un utente ad abbandonarlo.
Ripensa alla tua strategia e pensa a come puoi usare il tuo design per incoraggiare gli utenti a muoversi nel sito web nel modo desiderato per raggiungere l'obiettivo desiderato.
Una volta progettato e lanciato il tuo sito web, vorrai verificare se sta effettivamente svolgendo il suo compito.
