Come Pianificare la Realizzazione di un Sito Web

Se hai intenzione di progettare e creare un sito web, è utile dedicare un po' di tempo alla pianificazione del progetto. La fase di pianificazione permette allo sviluppatore e al committente di lavorare insieme per individuare il format e il layout del sito che soddisfa le esigenze di entrambi. Il processo di pianificazione andrà a influenzare lo stile del sito, ed è probabilmente l'aspetto più importante del lavoro di web design, in particolare di quello professionale.

Parte 1

Parte 1 di 4:

Realizza la Struttura di Base

Scarica PDF

1
Determina la funzionalità del sito. Se stai facendo il sito per te stesso, probabilmente già conosci la risposta a questa domanda. Se fai il sito per qualcun altro, un'azienda o un'organizzazione, dovrai capire ciò che il committente si aspetta dal sito e dalle sue funzionalità. Tutte le decisioni prese in questo momento avranno un impatto sul risultato finale.
- Il sito ha bisogno di una vetrina virtuale? Hai bisogno dei commenti degli utenti? Gli utenti avranno bisogno di creare un account? È un sito orientato alla lettura di articoli? Alla visualizzazione di immagini? Tutte queste domande, e molte altre, ti aiuteranno a progettare il design e la struttura del sito.
- Questa fase può essere estenuante, soprattutto per le grandi aziende, quando molte persone sono coinvolte nel progetto.
Un diagramma della mappa del sito è come un diagramma di flusso, e mostra come gli utenti si possono muovere da una pagina alla successiva. Non c'è bisogno delle pagine durante questa fase, ma solo del generale flusso di idee. Per creare il diagramma puoi utilizzare un programma apposito, o disegnarlo su un pezzo di carta. Utilizza il diagramma per mostrare come immagini la gerarchia fra le pagine e la loro connettività.
Un metodo molto diffuso per lavorare in gruppo consiste nell'utilizzare dei foglietti di carta per capire l'approccio ideale di ognuno al lavoro. Prendi un blocchetto di carta e scrivi in maniera sintetica il contenuto di ogni pagina su ogni foglietto. La squadra di lavoro dovrà organizzare i foglietti nel modo che ritiene più utile. Questo è il procedimento migliore quando si lavora con altre persone alla creazione di un sito.^{[1]XFonte di ricerca}
Questo metodo di pianificazione è il più classico, viene utilizzato nei progetti low-budget e ti permette eliminare le idee, riposizionarle o di reindirizzarle. Disegna la struttura del progetto su dei pezzi di carta, connettili con delle linee o disegna lo schema su una lavagna. Questo metodo è eccellente per le sessioni di brainstorming.
Questo è più utile quando si deve riprogettare un sito già esistente rispetto a quando si comincia da zero. inserisci tutti i contenuti o le pagine esistenti in una tabella. Segnati la finalità di ogni contenuto e utilizza questa lista per determinare ciò che deve rimanere e ciò che deve essere tolto. Questo procedimento ti aiuterà a eliminare gli elementi non essenziali, semplificando la procedura di riprogettazione.
Pubblicità

Parte 2

Parte 2 di 4:

Costruisci il Wireframe HTML

Scarica PDF

1
Costruisci un wireframe per rendere più solido l'ordine gerarchico. Il wireframe HTML è la struttura di base del sito che utilizza solo le etichette e i blocchi fondamentali per rappresentare i contenuti. Questa struttura risponde alla domanda "Che cosa appare sullo schermo e dove?". La formattazione e lo stile del sito non vengono considerati in questa fase di progettazione.^{[2]XFonte di ricerca}
- Il wireframe ti permette di vedere la struttura dei contenuti e il flusso di concetti prima di dedicarti alle scelte stilistiche.
- Il wireframe HTML è una struttura statica come un documento PDF o un'immagine e ti permette di spostare velocemente blocchi di contenuti per creare una nuova struttura.
- Un wireframe è una struttura interattiva, il che è positivo sia per lo sviluppatore sia per il committente. Poiché il wireframe è scritto in linguaggio HTML, hai la possibilità di navigare al suo interno per avere un'idea di come ci si possa muovere fra le varie pagine del sito. Questo sarebbe impossibile utilizzando il formato PDF.
2
Prova a utilizzare il metodo "Gray Box". Fai una bozza del contenuto delle pagine utilizzando le gray box, mettendo gli elementi fondamentali del contenuto nella parte superiore. I blocchi di contenuto vengono organizzati in colonne singole, con la parte di contenuto più importante nella zona superiore. Ad esempio, se si tratta della pagina che fornisce informazioni su un'azienda, i dettagli più importanti verranno inseriti nella parte superiore, seguiti da una lista di componenti dello staff, poi le informazioni di contatto e così via.^{[3]XFonte di ricerca}
- Questo non include l'intestazione e il piè di pagina. Le gray box sono una semplice rappresentazione visiva del contenuto della pagina.
3
Prova a utilizzare un programma di wireframing. Ci sono molti programmi che ti possono aiutare durante il processo di progettazione del wireframing. Il livello di conoscenza del codice varia da programma a programma. Fra quelli più popolari includiamo:
- Pattern Lab. Questo sito è specializzato nell'"atomic design", dove ogni parte del contenuto è considerato come una "molecola" che fa parte di una struttura più ampia, la pagina.
- Jumpcharts. Questo sito offre un servizio di progettazione e realizzazione del wireframe. Questo servizio è a pagamento, ma permette di realizzare velocemente un wireframe senza doversi preoccupare troppo del codice.
- Wirefy. Wirefy è un altro sistema di "atomic design". Gli strumenti del sito sono disponibili gratuitamente per gli sviluppatori.
4
Utilizza un markup HTML semplice. Un buon wireframe può essere convertito con facilità in un sito internet. Non ti devi preoccupare dell'aspetto stilistico durante il processo di realizzazione del wireframe. Invece, utilizza un markup di facile comprensione e facilmente intercambiabile.^{[4]XFonte di ricerca}
- Per quanto riguarda il wireframe, si fa tanto di più con l'essenzialità. L'obiettivo è semplicemente costruire la struttura di base. La parte visiva verrà aggiustata successivamente con i CSS e i modelli avanzati.
Potresti avere la tentazione di realizzare un singolo wireframe, pensando magari di usarlo per tutte le pagine. In realtà, questo renderà il sito anonimo e noioso. Prenditi il tempo di realizzare un wireframe per ogni pagina e, ben presto, ti renderai conto che ogni pagina ha le proprie necessità organizzative.
Pubblicità

Parte 3

Parte 3 di 4:

Crea il Contenuto

Scarica PDF

1
Prepara parte del contenuto prima di iniziare la realizzazione del sito. Sarà più facile rendere un'idea generale dello stile del sito se utilizzi l'effettivo contenuto anziché delle etichette. Non ti serve avere molti contenuti, ma il modello sarà migliore se disponi di alcune immagini, sia originali che copie.
- Non hai bisogno del testo degli articoli, ma dovresti avere almeno i titoli.
2
Ricorda che un buon contenuto non si limita al semplice testo. Internet è qualcosa di più di un insieme di siti contenenti testi. Per riuscire a farti notare all'interno della tua nicchia, avrai bisogno di diversi tipi di elementi per attrarre e fidelizzare gli utenti. Alcune tipologie di contenuti da prendere in considerazione:
- Materiale fotografico
- File Audio
- File Video
- Stream (Twitter)
- Possibilità di interagire con Facebook
- RSS (aggregatori di contenuti)
- Content feeds
3
Ingaggia un fotografo professionista. Se hai intenzione di inserire delle immagini, l'impatto iniziale sarà sicuramente migliore se utilizzi materiale fotografico professionale. Una sola foto di ottima qualità vale più di venti foto mediocri.
- Cerca un fotografo giovane e appena diplomato anziché un esperto professionista per risparmiare.
4
Scrivi articoli di qualità. I contenuti testuali sono quelli che portano maggiore traffico su un sito. Anche se durante questa fase di progettazione non ti devi preoccupare eccessivamente della creazione dei contenuti, è utile iniziare a pensarci, poiché ne avrai bisogno costantemente una volta che il sito sarà attivo.
- Oltre al contenuto degli articoli, ci sono altri elementi testuali da realizzare durante il processo di realizzazione del sito. Fra questi, sono incluse le informazioni di contatto, il nome dell'azienda e qualsiasi altra cosa dovrai inserire in diverse parti del sito.
Pubblicità

Parte 4

Parte 4 di 4:

Trasforma l'Idea in un Sito

Scarica PDF

1
Stabilisci lo stile degli elementi generali. Ci sono elementi che verranno visualizzati in ogni pagina del sito, come l'intestazione, il piè di pagina e il menù di navigazione. Imposta le linee stilistiche fondamentali, in modo da poter verificare l'impatto visivo di ogni pagina. Questo sarà molto utile in previsione della fase di impostazione del layout.
- Non ti curare troppo dei dettagli, ma cerca di avvicinarti il più possibile al risultato finale che stai cercando.
2
Crea il layout di base. Inizia a spostare i vari elementi del wireframe dalla colonna alla loro posizione sulla pagina. Ad esempio, puoi mettere il blocco di navigazione nella parte sinistra della pagina e la lista dei titoli nella parte destra.
- Prova a utilizzare diversi layout in varie pagine prima di proseguire. Fai testare il lavoro ad alcune persone per essere sicuro che il lavoro mantenga una sua organicità.
3
Crea un modello. Utilizza un programma come Photoshop per creare un modello da utilizzare in alcune pagine del sito. Usa le linee guida del layout che hai impostato. Puoi lavorare molto più velocemente impiegando un programma di editing di immagini per ottenere il risultato che desideri. Questo ti permetterà di utilizzare le immagini come punti di riferimento nel momento in cui devi codificare il tutto.
- Inserisci l'effettivo contenuto nel modello per essere sicuro che l'insieme abbia un buon impatto visivo.
Inizia ad aggiungere i tuoi contenuti alla pagina. Non ti preoccupare dell'aspetto stilistico per ora, ma metti ogni elemento al proprio posto. Questo ti aiuterà a stabilire se i cambiamenti estetici che hai in mente possono funzionare.
5
Crea delle linee guida estetiche. Questo è essenziale per mantenere una certa coesione stilistica, soprattutto per i siti più grandi. Se il sito è di un'azienda che già possiede un logo o elementi di immagine, questi dovrebbero essere incorporati nel progetto. Elementi da prendere in considerazione nelle linee guida:
- Navigazione
- Titoli (<h1>, <h2>, etc.)
- Paragrafi
- Caratteri in corsivo
- Caratteri in grassetto
- Link (attivi, inattivi, in sospeso)
- Utilizzo delle immagini
- Icone
- Pulsanti
- Liste
Una volta scelto lo stile e il design per il sito, devi iniziare a renderlo effettivo. Utilizzare i CSS (fogli di stile) è uno dei modi più semplici per applicare un modello stilistico a una pagina o a un intero sito. Cerca sul web una guida dedicata all'utilizzo dei CSS per maggiori dettagli.
Pubblicità