Cosa fare e cosa non fare per un ottimo web design

Se seguita, questa guida si rivelerà una risorsa di web design piuttosto preziosa, soprattutto se prevedi di utilizzarla software di sviluppo di siti web in futuro. Dall'inesperto all'esperto, questa guida ha qualcosa per tutti.

Il processo del grande web design Giusto per assicurarci che siamo tutti sulla stessa pagina, iniziamo con la definizione di base di “web design”. Secondo Wikipedia, il web design è:

“un processo di concettualizzazione, pianificazione, modellazione ed esecuzione della distribuzione di media elettronici via Internet sotto forma di linguaggio Markup adatto all'interpretazione tramite browser Web e alla visualizzazione come interfaccia utente grafica” .

Il processo di web design può essere paragonato al processo di scrittura di un documento di ricerca. Nella fase di concettualizzazione/pianificazione, vengono creati diagrammi di flusso (lo schema) che illustrano la struttura di navigazione del tuo sito web. Nella fase di modellazione, vengono creati wireframe statici (la bozza) che illustrano il layout di base per ciascuna sezione del tuo sito web. Dopo aver creato i wireframe, grafica, colori e testo vengono utilizzati per creare il design delle tue pagine web in base al layout dei wireframe. Nella fase di esecuzione, il tuo progetto viene convertito in un formato supportato dai browser web, vengono aggiunti testo e contenuti e, infine, il tuo sito web viene pubblicato in diretta su Internet affinché il mondo possa vederlo (bozza finale).

Tutte e tre le fasi del processo di progettazione sono ugualmente importanti. Molti web designer saltano una fase per risparmiare tempo o perché non pensano che sia necessario. Tuttavia, tutte e tre le fasi sono necessarie se il tuo obiettivo è creare un design di successo e un sito web rispettabile. Anche se vengono utilizzate le tre fasi, ci sono molti errori che i web designer possono commettere e che porteranno a siti Web di scarsa qualità e non di facile utilizzo. È tempo di ripulire l'armadietto dalle cattive pratiche di web design e di rifornirlo con quelle buone.

Fase 1: Concettualizzazione e pianificazione
Questa fase viene saltata più spesso delle altre due fasi. Alla maggior parte degli scrittori non piace creare schemi per documenti di ricerca e alla maggior parte dei web designer non piace nemmeno creare diagrammi di flusso. Non essere pigro. Se ti impegni e pianifichi il tuo sito web, scoprirai che il processo di progettazione web procederà senza intoppi con meno errori commessi lungo il percorso.

Ci sono alcune cose di cui avrai bisogno per concettualizzare e pianificare in modo efficace il tuo sito web:

• un cervello
• carta e penna
• (opzionale) software per diagrammi di flusso
• un'idea generale delle diverse sezioni del tuo sito web

Per iniziare, prendi carta e penna o avvia il tuo software per diagrammi di flusso preferito. Utilizziamo OmniGraffle Professiona per Mac OS X che costa $ 150 per licenza ma ne vale la pena se crei siti Web regolarmente. Se utilizzi un PC, SmartDraw è un ottimo software GRATUITO per diagrammi di flusso che puoi utilizzare. Carta e penna funzionano bene, però.

Esistono molti metodi per creare diagrammi di flusso. Ti mostreremo il modo più semplice per farlo per motivi di tempo e per la lunghezza di questo articolo. Se vuoi saperne di più sui diagrammi di flusso, cerca i diagrammi di flusso su Google o Yahoo.

Visualizza il diagramma di flusso che abbiamo creato durante la concettualizzazione dei siti cromatici. (1) Nella parte superiore del diagramma di flusso elenchiamo il nome del nostro sito web. (2) Successivamente, includiamo ciascuna sezione principale del nostro sito Web: Home, Informazioni e Servizi. Queste sezioni rappresentano la navigazione principale del tuo sito web. Quali saranno i nomi di ciascuna sezione dipende interamente dal contenuto del tuo sito web. Cerca di utilizzare il minor numero possibile di sezioni in modo che i tuoi visitatori non siano sopraffatti durante la navigazione nel tuo sito web.

(3) Successivamente, aggiungi tutte le pagine secondarie (sottosezioni) che verranno elencate su ciascuna delle pagine primarie. Per la casa, abbiamo incluso web design professionale, sviluppo web e ottimizzazione dei motori di ricerca. La navigazione secondaria deve essere più descrittiva della navigazione primaria. Quanto più profonda è la gerarchia di navigazione dei tuoi siti web, tanto più descrittiva dovrebbe essere ciascuna etichetta.

Il Dos

• Meno è meglio; mantenere il numero delle sezioni primarie al minimo. Usiamo 6 sezioni sul nostro sito web che sono più che sufficienti
• Sia che utilizzi carta e penna o un software per diagrammi di flusso, mantieni le cose il più pulite e organizzate possibile. Sebbene tu (e chiunque lavori con te) siate gli unici a utilizzare il diagramma di flusso, è necessario che abbia comunque senso: le sezioni primarie dovrebbero utilizzare termini più ampi, mentre i termini secondari e terziari dovrebbero essere più descrittivi

Il Donts
Creare un diagramma di flusso è piuttosto semplice; tuttavia, ci sono alcuni errori che possono essere facilmente commessi:

• Non utilizzare termini molto descrittivi nella navigazione principale, a meno che l'intero sito web non si concentri su un argomento ristretto. -Non provare a raggruppare più argomenti nella stessa pagina. Crea una sezione generale per questi argomenti e da quella sezione crea delle sottosezioni. Ciò aumenterà la probabilità che le pagine Web delle sottosezioni (descrittive) abbiano un posizionamento migliore nei motori di ricerca (Google, Yahoo, MSN, Ask). Dopo aver creato un diagramma di flusso conciso e descrittivo, sei pronto per passare alla seconda fase del processo di progettazione web:

Fase 2: modellazione
In fase di modellazione vengono realizzati mock up statici “wireframe”. Ogni mockup illustra uno scheletro essenziale del layout per ciascuna delle pagine web che verranno incluse nel tuo sito web. Questa fase è importante perché ci dà un'idea di dove verranno posizionati i diversi elementi nel nostro progetto. Alcuni di questi elementi sono:

• logo
• menu di navigazione
• contenuto
• immagini, video

Per creare questi mockup, puoi utilizzare carta e penna o il tuo software di mockup preferito. In passato abbiamo utilizzato Photoshop, ma ultimamente utilizziamo OmniGraffle Professional. OmniGraffle non richiede molte risorse come Photoshop e ci consente di assemblare i nostri modelli wireframe molto più rapidamente.

Inoltre, assicurati di avere a portata di mano i diagrammi di flusso che hai creato poiché dovrai farvi riferimento di tanto in tanto per assicurarti di simulare tutte le pagine che appariranno sul tuo sito web.

Ecco il nostro esempio di come dovrebbe apparire un mockup wireframe. Come puoi vedere, non sono inclusi colori o grafica. Questo è esattamente come dovrebbe essere un modello wireframe: un layout scheletrico del tuo progetto. Lo scopo è quello di poter avere un'idea generale di dove verrà posizionato ciascuno degli elementi della pagina web.

Di solito iniziamo dall'alto a sinistra e procediamo verso il basso. Non esiste un modo specifico in cui dovrebbe apparire un wireframe. Usa la tua immaginazione. Tuttavia, assicurati di non dimenticare di includere gli elementi più importanti di un sito web quando crei i tuoi wireframe (logo, menu di navigazione, posizionamento dei contenuti, posizionamento di immagini/video).

Se alcune delle tue pagine utilizzeranno lo stesso layout, non è necessario simularle tutte (anche se certamente puoi). Assicurati solo di creare un mockup di qualsiasi layout unico che avrà il tuo sito web. Ti ringrazierai più tardi.

Le cose da fare

• mockup di tutte le pagine uniche
• includere elementi importanti (logo, navigazione, posizionamento dei contenuti, posizionamento di immagini/video) -inizia dall'alto e procedi verso il basso -fai riferimento al diagramma di flusso creato nella fase 1 per non dimenticare di creare un mockup di qualsiasi pagina -salvare, salvare, salva: come con qualsiasi cosa sul computer, salva i tuoi modelli ogni 10 minuti circa
• concentrati su layout puliti e facili da usare -etichetta i tuoi elementi in modo da non dimenticare cosa sono quando li fai riferimento nella fase 3, esecuzione -usa altri siti web come ispirazione; non c'è niente di sbagliato nel prendere elementi da altri siti e farli propri (vedi "non fare")

Il non

• non includere grafica o colori (questo è per la fase successiva) -non rendere i tuoi mockup troppo “occupati”; concentrarsi su layout puliti, ben organizzati e facili da usare: non saltare questa fase; è importante tanto quanto il primo e l'ultimo -se prendi elementi da altri siti web, assicurati di non plagiarli; c'è una differenza tra l'ispirarsi a un altro sito web per creare determinati elementi del tuo design e copiarne palesemente il layout e i colori

Fase 3: esecuzione
Nella terza e ultima fase, l'esecuzione, la pianificazione delle fasi 1 e 2 viene combinata per assistere nella creazione di un sito web live e interattivo.
La terza fase è di gran lunga quella che richiede più tempo poiché dovrai 1) creare la grafica 2) creare il contenuto e infine 3) convertire i progetti web da immagini in codice che i browser web utilizzano per presentare il tuo sito web al mondo.

Quando raggiungi la terza fase, dovresti avere un'idea chiara di:

• come i tuoi visitatori si sposteranno da un luogo all'altro (fase 1, diagramma di flusso) -come saranno disposte le tue pagine web (fase 2, mockup wireframe)

Se non hai un'idea chiara di queste due cose, torna alla prima e alla seconda fase e continua a svilupparle. Scoprirai che la terza fase è più semplice quando avrai costruito un piano di battaglia chiaro e conciso per progettare il tuo sito web.

Abbandona carta e penna
Nella fase 3, devi utilizzare Photoshop o un altro programma di editing di immagini poiché utilizzerai colori e grafica per creare il layout per il tuo sito web.

Di solito iniziamo prima a creare la pagina "home" (indice). Utilizza i wireframe che hai creato nella fase 2 come modello per ciascuna delle pagine che crei. Tuttavia, invece di utilizzare scatole piene, utilizza grafica, colori e testo. Ogni pagina deve apparire esattamente come vuoi che appaia su Internet poiché questa è la fase finale del processo di progettazione.

Assicurati di includere lo sfondo per la navigazione (ma non aggiungere effettivamente il testo all'immagine). Se convertito utilizzando CSS (fogli di stile a cascata), la navigazione dovrebbe essere sotto forma di testo e non di immagini. Le immagini non possono essere scansionate dai motori di ricerca (le parole chiave utilizzate nella tua navigazione non verranno indicizzate nelle pagine dei risultati dei motori di ricerca, il che significa che meno persone saranno in grado di trovare il tuo sito web).

Quando sei soddisfatto dei tuoi progetti e ritieni che siano pronti per essere messi su Internet, è il momento di separare i progetti in modo da poter creare un layout basato su CSS. Per ulteriori informazioni sulla conversione dei layout in CSS o sul markup del tuo sito web in CSS, visita w3schools.com. Dopo aver cercato in Internet, non siamo riusciti a trovare un tutorial decente per trasformare le immagini in CSS, quindi aspettatene uno da noi nelle prossime settimane. Convertire i tuoi progetti in CSS è estremamente importante poiché i layout delle tabelle appartengono al passato.

Ecco un esempio di un sito web quasi completato del layout che abbiamo simulato nella fase 2. Questo è stato preso direttamente dal nostro browser web e come puoi vedere, ora c'è un logo, colori, un grazioso sistema di navigazione, un piè di pagina, e, soprattutto, un layout pulito e organizzato.
Grazie alla pianificazione nelle fasi 1 e 2, il nostro layout è ben organizzato e facile da usare.

Il Dos

• fai riferimento ai tuoi modelli creati nella fase 2; anche se va bene deviare dal layout originale, non dovresti averne bisogno
• fai qualche ricerca prima di creare il tuo progetto vero e proprio; prendi spunti da altri siti e falli tuoi (senza plagiare)
• includere colori e grafica per creare l'aspetto finale delle tue pagine web -usare CSS (fogli di stile a cascata) per convertire i tuoi progetti da immagini in markup comprensibile dai browser web -fai riferimento al tuo diagramma di flusso dalla fase 1 quando codifichi le tue pagine con collegamenti ipertestuali; è meglio utilizzare un menu a tendina che includa tutti (o la maggior parte) dei link presenti nel tuo sito in ogni pagina; ciò consentirà una navigazione più semplice e renderà anche le tue pagine più facili da scansionare quando gli spider dei motori di ricerca si fermano; un ottimo posto per ottenere i menu a discesa CSS è DynamicDrive.com -finalizza il tuo progetto mentre lavori in Photoshop o qualsiasi software di editing di immagini utilizzi; può essere complicato apportare modifiche al progetto una volta convertito in markup (codice)

Il Donts

• non includere il testo nei menu di navigazione durante la conversione in CSS; invece di utilizzare il testo dell'immagine, utilizza testo normale leggibile dagli spider dei motori di ricerca
• non utilizzare tabelle durante la conversione; anche se devi comprare un libro sui CSS, ne varrà la pena; i tavoli sono morti
• non saltare le prime due fasi solo per risparmiare tempo; il tuo sito web SARÀ migliore se inizi dall'inizio del processo di progettazione web (invece che alla fine)
• non dimenticare di comprimere le tue immagini quando vengono tagliate per CSS; non c'è niente di peggio di un sito web che si carica lentamente a causa di file di immagini di grandi dimensioni; Photoshop dispone dell'opzione "Salvataggio ottimizzato per il Web" (CS3 – "Salvataggio per Web e dispositivi")

Il processo rende perfetti
Seguendo un processo di web design come quello illustrato in questo articolo, aumenti le possibilità di creare un sito web ben organizzato, facilmente navigabile e molto user-friendly. Ammettiamolo: se i visitatori si perdono o si confondono mentre tentano di navigare nel tuo sito web, potrebbero premere il pulsante Indietro e cercare un sito web più facile da usare. Alla gente non piace pensare quando si tratta di orientarsi nei siti web. Non farli pensare. Fai il pensiero pianificando il tuo sito web dalla fase 1 alla fase 3 e scoprirai che più persone apprezzeranno visitare il tuo sito web.