Nella parte 2, ho trattato i dettagli della valutazione di un piano, della scelta dei professionisti del web e della determinazione della struttura del tuo sito web. La domanda sul perché la pianificazione per il Web sia importante quanto la pianificazione per qualsiasi altra cosa associata alla tua attività è stata trattata nella Parte 1, quindi torna indietro a leggere prima quella parte nel caso te la fossi persa. Nella parte finale di oggi di questa guida, inizierò con alcuni degli approcci più comuni in qualsiasi progetto iniziale.

Progetto iniziale: tre approcci comuni

Ce ne sono, ovviamente, altri, inclusi ibridi che combinano elementi di ciascuno, e ogni team di progettazione e ogni progetto è diverso, ma ci sono approcci fondamentali per creare un web design.

1. Approccio classico al mockup di Photoshop

Comunemente creato in Adobe Photoshop (lo standard del settore) o altri software di progettazione come Sketch, il design iniziale consisterà in un'immagine visivamente accurata ("mockup") della home page e almeno una pagina interna.

Gli elementi di branding visivo della tua attività dovrebbero essere applicati qui. Se hai una grafica ben definita oltre al tuo logo, detteranno il design del sito. Tuttavia, se il tuo marchio manca di dettagli, il designer farà del suo meglio per creare un'opera che rifletta accuratamente l'attività, lavorando con la grafica esistente come punto di partenza.

Di seguito è riportato un breve elenco di punti chiave per prototipi di successo. Daremo per scontato che il designer stia lavorando in Photoshop, tuttavia, queste linee guida si applicano anche ad altri programmi di progettazione.

• Inizia con una griglia predefinita con guide pre-disegnate e precise al pixel. Alcuni designer creano il proprio, mentre altri possono aderire a un sistema di griglia preimpostato. In ogni caso, è importante avere un modello pulito per iniziare. Rendi la tua tela più larga della larghezza che stai progettando, in modo da poter aggiungere note su un lato e avere un'idea di come si sente il sito quando si fluttua in un'ampia finestra del browser.
• Aggiungi la tavolozza dei colori e gli elementi di branding di base (ad esempio, i caratteri) ai margini della tela in modo da averla come riferimento durante la visualizzazione sullo schermo o in stampa.
• Disegna tutto a pixel esatti e disegna guide e/o sezioni chiare attorno agli elementi di design. Questo diventa fondamentale quando lo sviluppatore front-end in seguito crea l'HTML dal mockup, tuttavia, il tuo design sarà accurato al pixel solo se visualizzato su un dispositivo "grande schermo".
• Organizza tutti gli elementi di progettazione con una struttura logica di cartelle/sottocartelle ed etichetta ogni elemento in modo chiaro.
• Se il progettista consegnerà i propri file a uno sviluppatore HTML, questo è particolarmente importante. Assegna un nome alle cartelle e ai livelli per il loro contenuto in modo da non creare confusione in seguito. Ad esempio: "Barra laterale — intestazione eventi" è chiara, "Layer14 Copy Copy Copy" non lo è.

• Prendi appunti chiari dettando caratteri, allineamento, ripetizione di elementi di sfondo, gradienti e tutto ciò che dovrà essere implementato con le tecniche CSS. In Photoshop, la funzione di nota adesiva è utile per questo. Se non è chiaro, chiedi alla persona che convertirà il tuo design in una pagina di lavoro.
• Se utilizzi uno stile comune per le intestazioni, la navigazione o altri elementi di design che appaiono in tutto il sito, prendi in considerazione la possibilità di creare documenti Photoshop separati per loro. Alcuni designer trovano più facile "abbatterlo", specialmente nei grandi progetti.
• Usa contenuti realistici. I designer usano spesso il greco ("lorem ipsum") per riempire lo spazio, il che va bene per il body copy. Tuttavia, per titoli, titoli, eventi, ecc., prova a utilizzare una copia realistica. Considera i due titoli seguenti. Le considerazioni sul layout sono diverse per ciascuno:
  • "Widgets, Inc. vince il Green Manufacturing Award"
  • "I dipendenti di Widgets, Inc. vincono una causa in tribunale affermando il diritto dei dipendenti a presentare petizioni per il rimborso delle tasse universitarie quando la formazione è rilevante per il ruolo lavorativo"

Il problema con questo metodo

Quando progetti prototipi pixel-perfetti, puoi essere certo che l'aspetto del sito Web sarà molto simile sul Web desktop, ma il gioco è fatto. Nel momento in cui passi a un dispositivo diverso, cambierà. Quindi, per lo meno, ti consigliamo di trasmettere all'azienda come cambierà il design quando viene visualizzato su schermi più piccoli (tablet, smartphone) mostrando un sito con un layout simile o progettare modelli aggiuntivi con dimensioni dello schermo comuni. Come puoi immaginare, si tratta di molto lavoro di progettazione aggiuntivo e, se modifichi un elemento sul mockup incentrato sul desktop, dovrai modificarlo anche sugli altri. Ecco la visualizzazione dello smartphone.

2. Progetta nel browser

Con l'avvento del responsive web design, alcuni designer si stanno allontanando dall'approccio mockup di Photoshop, utilizzando invece framework reattivi come Bootstrap o Foundation, o strumenti come Froont o Typecast. Questi strumenti consentono una progettazione molto rapida e iterativa che ti consente di vedere come apparirà il sito su diversi dispositivi.

Puoi comunque utilizzare Photoshop o altri strumenti di progettazione grafica per creare elementi stilizzati da posizionare all'interno del design, ma la maggior parte del design avverrà al di fuori di questi strumenti. Non esiste un buon modo per mostrare all'azienda "come apparirà esattamente", quindi per i designer abituati a creare modelli perfetti per i pixel per il Web desktop, la progettazione all'interno del browser potrebbe non essere l'approccio migliore. Per molti, questo metodo rappresenta anche un cambiamento importante nel loro processo e può richiedere del tempo prima che si impadronisca. La maggior parte vede questa come un'evoluzione necessaria, dal momento che un mockup di Photoshop può rappresentare solo uno dei tanti "frame" in cui viene visualizzato il contenuto del tuo sito e il mondo del web si sta muovendo rapidamente verso la progettazione per più piattaforme fin dall'inizio.

Quando è il momento di scrivere l'HTML, CSS e Javascript che formeranno il sito, puoi attenerti al framework che hai utilizzato inizialmente per creare le tue iterazioni di progettazione, adattarne il codice o scriverne uno da zero, usando i tuoi progetti di framework come una guida.

3. Collage di elementi (noto anche come piastrella di stile, collage di stile)

Con questo approccio, il designer assemblerà una serie di elementi che compongono un sito Web, inclusi intestazione, navigazione, icone, fotografie di esempio, illustrazioni, moduli, elementi interattivi e qualsiasi altra cosa ritenuta necessaria per avere un'idea dell'aspetto del sito. . Inoltre, a seconda dello strumento di progettazione, questi elementi possono essere disposti in modo tale da mostrare come il loro aspetto cambierà all'unisono con le dimensioni dello schermo. Questo è in genere combinato con una sorta di mockup grafico almeno della home page e di alcune pagine interne. (Può essere difficile per le aziende visualizzare come appariranno le pagine di un sito basandosi esclusivamente su un collage di elementi.)

Nota: queste immagini di esempio non sono in scala: la nostra versione Photoshop del collage di elementi è una pagina lunga, 1500X4500 pixel, quindi non possiamo adattarla qui in un unico pezzo.

Per i designer (e le aziende) abituati da tempo al metodo di mockup di Photoshop, questa è anche una nuova frontiera e richiede un cambio di prospettiva. Con un prototipo di stile, non stai cercando di impaginare esattamente una pagina, ma piuttosto di mostrare le parti chiave del sito e ottenere feedback sull'aspetto generale. Poiché un sito reattivo deve cambiare radicalmente aspetto al variare delle dimensioni dello schermo, questo metodo riguarda molto di più le parti di un sito e un'idea della direzione in cui sta andando il design. Non stai mostrando il sito nel suo insieme, per non parlare di fare una rappresentazione pixel-perfetta di come apparirà ogni singola pagina.

Questo può far risparmiare un sacco di tempo, ma ancora una volta, se l'azienda non è abbastanza a suo agio (o fiduciosa) da consentire al progettista di prendere decisioni strutturali in seguito, questo metodo potrebbe essere difficile da vendere. Detto questo, può davvero creare un ambiente flessibile in cui creare rapidamente progetti web per una miriade di piattaforme.

Sebbene i principi della progettazione grafica siano senza tempo, gli approcci utilizzati per la progettazione di siti Web cambieranno e si evolveranno nel tempo. Consiglio vivamente di guardare Design Deliverables per un'era post-competizione per scoprire il valore di questo approccio.

Quando si utilizza questo metodo di collage di elementi, l'azienda deve accettare che non esiste una bozza finale esatta, precisa e finale di una determinata pagina, ma solo linee guida di layout su cui concordare. La natura stessa dei siti reattivi consiste nell'adattare il loro contenuto alle capacità di ciascun dispositivo, quindi l'azienda non deve aspettarsi di approvare layout prestabiliti prima della fase di sviluppo. Con un prototipo di stile approvato, un designer potrebbe voler tornare ai wireframe o al prototipo funzionante per elaborare tutti i layout richiesti dal tuo progetto. Quindi, quando si tratta di costruire il sito, assemblerai gli elementi del tuo collage nella struttura visiva di ogni layout unico.

Ci sono molte discussioni e dibattiti nella comunità del design sui migliori strumenti, metodi e processi per la creazione di progetti web. I designer tendono a pensare fortemente a quale sia il metodo "migliore" e, sebbene sia comprensibile, è importante utilizzare il processo più adatto per il progetto e l'azienda. È intelligente per i designer sentirsi a proprio agio nel lavorare con una serie di metodi e sistemi e ampliare i propri orizzonti quando un progetto lo consente.

Nota dell'autore
Ero molto riluttante a includere alcuni dei seguenti contenuti, perché evidenziano gravi tensioni nel rapporto tra business e designer. Sebbene possa sembrare eccessivamente critico nei confronti degli imprenditori, credo che sia di grande valore per le aziende perché in un progetto di sito Web sono a rischio così tanto tempo e denaro.
Nell'interesse della diplomazia e della preservazione delle relazioni con i clienti, i designer probabilmente non daranno voce a queste frustrazioni agli imprenditori, ma i seguenti problemi possono far deragliare i progetti.

Approvazione del progetto e revisioni

Indipendentemente dal metodo di progettazione scelto per il progetto, quando il progetto è completo, i risultati vengono condivisi con l'azienda per l'approvazione e spesso c'è un processo di revisione (si spera breve). Il processo di revisione coinvolge il progettista e le parti interessate chiave che vanno avanti e indietro alcune volte, provando diverse modifiche al progetto fino all'approvazione del progetto.

Design by comitato: non farlo.

Un problema comune (e del tutto evitabile) in questa fase è considerare troppe opinioni, semplicemente avere troppi cuochi nella cucina digitale.

Per garantire un processo senza intoppi, l'azienda deve assegnare una persona come punto di contatto per il team di progettazione. Quella persona è responsabile sia della comunicazione con il progettista che delle decisioni finali sulla direzione del progetto.

Certamente, è importante sollecitare feedback sul design e gli stakeholder del progetto hanno preziose critiche da offrire, aiutando a guidare il processo di progettazione in modo che il risultato finale rappresenti accuratamente il loro business.

Inoltre, in alcuni casi, è necessaria la revisione da parte del personale legale e/o tecnico. Tuttavia, il fatto che l'intera azienda offra input e attribuisca lo stesso peso a tutti i feedback porta rapidamente a nessuno che sia soddisfatto . Il modo migliore per garantire un design confuso e sfocato è dare a tutti un input e poi correre ad apportare tutte le modifiche proposte.

In generale, nelle piccole imprese o organizzazioni, avere più di cinque persone che forniscono feedback sul design è una ricetta per lo stallo. Meno è meglio è, cinque è il massimo. Queste cinque (o meno) persone richiederanno feedback ai loro subordinati o colleghi di reparto, ma tale input dovrebbe essere compilato da ogni stakeholder e presentato come un'unica opinione unificata. In altre parole, non invitare quindici persone a una riunione di revisione del design. Elimina tutto il avanti e indietro prima di andare dal designer con l'input. È anche molto importante distinguere tra problemi di design oggettivi ("questa combinazione di colori si adatta davvero alla nostra pasticceria?") e preferenze di design personali ("Adoro il colore blu - usiamo molto più blu") .

Il design non è una ricerca arbitraria. C'è un buon design e un cattivo. Ci sono regole da seguire, best practices a cui attenersi e, fintanto che la pianificazione è stata eseguita correttamente, le decisioni progettuali non sono quasi mai davvero una questione di gusti. Cioè, c'è una buona ragione per cui il designer ha usato quel blu esatto, in quel punto esatto, o quel carattere a quella dimensione. Tutte quelle piccole scelte comunicano cose all'utente. Possono sembrare insignificanti, ma in realtà tutte queste scelte che fa il designer sono importanti. Possono influenzare drasticamente il modo in cui il sito funziona e come viene ricevuto. Sfortunatamente, molte aziende non riescono a capire che solo perché gli piace non significa che lo faranno tutti gli altri, e fare ciò che è meglio per trasmettere l'anima dell'azienda è ciò per cui il designer viene assunto. L'opinione non dovrebbe entrare in esso se non strettamente necessario.

Quando l'ego governa

Qualsiasi designer esperto ha avuto a che fare con decisori che hanno la terribile combinazione di forte ego e scarsa sensibilità progettuale. Nel peggiore dei casi, ai designer verrà chiesto di utilizzare un logo sviluppato dal CEO in Microsoft PowerPoint, oppure colori e caratteri totalmente inadatti all'immagine aziendale. Questo, sfortunatamente, arriva con il territorio di essere un designer. A volte è possibile diffonderlo posizionando l'opera d'arte incriminata in una griglia insieme a materiale progettato professionalmente da concorrenti o aziende simili del settore: Pinterest è un buon strumento per questo.

Se una recensione della concorrenza faceva parte della valutazione delle tue esigenze, potresti voler fare riferimento ai loro marchi come riferimento. La speranza è che l'azienda possa vedere quanto sia orribile la sua versione accanto alla concorrenza e ripensare al proprio impegno per la cattiva idea. In definitiva, tuttavia, i responsabili delle decisioni possono e rovinano i progetti insistendo, contrariamente a tutte le prove disponibili, sul fatto che il loro senso progettuale dovrebbe avere la priorità sui principi di progettazione stabiliti.

Aiuto! Non si sposteranno!

I lettori di una versione precedente di questo libro hanno chiesto dei modi per affrontare il problema dell'ego. Vorrei avere una risposta intelligente o utile per te. Basti dire che questo è un problema con le persone, non con la tecnologia. Fai la tua migliore causa per il valore di un buon design, combatti la tua battaglia migliore, quindi preparati a lasciar perdere.

Tensione progettuale: designer vs. impresa

I designer spesso affrontano la tensione tra i loro concetti informati di design e le critiche al design disinformate delle aziende. Questo è meglio illustrato dall'enigma della "cattiva idea". L'azienda richiederà una caratteristica di progettazione che sia brutta, impraticabile o semplicemente una cattiva idea. (Questo è così comune che ci sono molti siti Web che raccontano attività all'oscuro e i mal di testa che si traducono in questa dinamica ^1. ) Il designer risponderà da qualche parte sul continuum tra "è orribile, non lo faremo" e "beh, se è quello che preferisci...". Questa risposta dipende da una varietà di fattori in continuo cambiamento, tra cui:

¹ https://clientsfromhell.net, https://theoatmeal.com/comics/design_hell



• Quando il designer spera di essere pagato.
• Quanto è coinvolto emotivamente il designer nel progetto.
• Quanto tempo ha investito il progettista nella fase di progettazione e quanto ritardo risulterà dall'implementazione della cattiva idea.
• Quanto è alta la posta in gioco: quanti danni farà la cattiva idea al sito nel suo insieme.
• Personalità, disponibilità delle aziende a ricevere consigli costruttivi sulle proprie idee.

Ogni progetto è diverso. Quando i designer hanno a che fare con aziende che richiedono continuamente funzionalità sconsiderate, a un certo punto possono cancellare del tutto il progetto. A un certo punto, è semplicemente estenuante spiegare continuamente perché i paragrafi centrati e in grassetto in rosso, la SCRITTA TUTTO MAIUSCOLO, le folli animazioni Flash o le fotografie di scarsa qualità rendono un sito web inefficace ² . L'atteggiamento del designer cambia rapidamente da "facciamo qualcosa di veramente eccezionale di cui siamo orgogliosi" a "facciamolo e basta, così non dobbiamo mai più guardarlo".

² Altri killer dell'umore includono video a riproduzione automatica e font usati più spesso nei libri per bambini.



Considerando quanto sopra, renditi conto anche che c'è un altro lato di questa medaglia. I problemi delle persone possono anche sorgere alla fine dello spettro dei designer. Le capacità di alcuni designer potrebbero non essere all'altezza, potrebbero rifiutarsi di ascoltare critiche valide nei confronti del loro lavoro o potrebbero non apprezzare l'input informato dell'azienda. Un buon modo per evitarlo è ottenere buone referenze dai clienti passati dei designer.

Considera il contenuto

Pensa all'espansione. Ad esempio, potresti avere una sezione di notizie. Per iniziare, hai sei notizie. Va bene. Creerai una pagina principale delle notizie con i riepiloghi e collegherai i riepiloghi a una pagina dei dettagli. Ma cosa succede quando hai dieci, venti o cinquanta notizie? Ora ci sono altre considerazioni. Vuoi archiviare le vecchie notizie? Creare impaginazione? Mostrare solo gli ultimi dieci elementi? Questo dovrebbe essere considerato nel processo di progettazione. Pianifica il più possibile i contenuti nel processo di progettazione e pensa al futuro ovunque puoi: pianifica i contenuti che avrai, non quelli che hai in questo momento.

Guida allo stile web

Una guida di stile è dove brilla una corretta pianificazione. Una guida di stile consisterà in tutti gli elementi di design, layout, interattivi (es. JavaScript) e di tipo utilizzati in tutto il sito in un'unica posizione. Questo di solito viene fatto in HTML, quindi se sei un designer che non codifica, dovrai creare un mockup per la tua guida di stile e consegnarlo al tuo sviluppatore front-end insieme al resto dei tuoi progetti. Se hai utilizzato il metodo del collage di elementi trattato in precedenza, potrebbe non essere necessario ripetere te stesso in una guida allo stile web separata. Se stai usando il classico metodo di mockup di Photoshop, ne avrai bisogno. Gli elementi di una guida di stile includono, ma non sono limitati a:

• Stili di navigazione
• da <h1> a <h5>, noti anche come tag di intestazione
• Paragrafi
• Elenchi
• Blocca virgolette
• Corsivo, grassetto, sottolineature
• Collegamenti, inclusi stati attivi, al passaggio del mouse e visitati, ovvero l'aspetto dei collegamenti, anche quando si passa con il mouse
• Icone
• Uso delle immagini e dello stile dell'immagine
• Uso di immagini di sfondo o "filigrane"
• Le forme.

Questo articolo di Canva esplora 10 guide di stile web per aziende famose. Puoi anche utilizzare uno strumento online come Frontify.

Utilizzo di una libreria di modelli

Per i siti Web di portata più ampia, è possibile espandere il concetto di stile Web alla libreria di modelli più robusta, che spiega come appaiono i vari elementi e come vengono gestiti. Il codice di esempio per questi elementi fa solitamente parte della libreria. Non è solo una sua foto, ma la cosa stessa. Ad esempio, che aspetto ha un modulo, cosa succede visivamente in caso di errori, qual è il processo per l'invio dei commenti, ecc.

Mockup, collage di elementi e wireframe approvati, insieme alla guida di stile, vengono utilizzati come elementi costitutivi per le fasi successive dello sviluppo.

Creazione HTML/CSS

Utilizzando il design e la guida allo stile, un esperto HTML/CSS (il front-end Coder) creerà modelli HTML che rappresentano accuratamente il design approvato. In alcuni casi, i modelli appariranno identici ai prototipi, tuttavia, laddove Photoshop è stato utilizzato per i prototipi, sono prevedibili sottili differenze.

Il tuo codificatore front-end potrebbe anche aver bisogno di linee guida e risorse aggiuntive relative ai progetti, come tavolozze di colori, immagini specifiche, icone e, se non già esplicitamente indicato, regole di progettazione come margini e spaziatura interna. Assicurati di sapere quali saranno tutti i risultati finali prima di iniziare a inviare file. Se i design e la guida allo stile sono stati creati con molta attenzione ai dettagli, in questa fase dovrebbero esserci poche domande o congetture; il lavoro dovrebbe andare avanti.

Creazione di elementi interattivi

Gli elementi interattivi possono essere semplici come un menu a discesa o elaborati come un creatore di grafici a torta. Questi elementi sono in genere sviluppati con JavaScript, spesso utilizzando una libreria di script come jQuery. A livello più generale, questo consiste nell'assemblare (e scrivere) un insieme di istruzioni che interagiscono con le pagine del tuo sito web. Potrebbe esserci anche l'interattività tra il sito e il server da considerare. Potresti connettere API ³ , creare qualcosa come un sistema di prenotazione o calendario ecc. o utilizzare widget di servizi di terze parti.

³ In sostanza, un ponte tra uno o più sistemi. Ad esempio, Facebook offre un'API che ti consente di inserire post dalla tua bacheca a un sito Web non correlato.

 ### Integrazione CMS

Finalmente il tuo brillante design è stato convertito in codice ed è pronto per essere integrato in un Content Management System (CMS). È sulla buona strada per diventare un sito web!

L'individuo o il team incaricato di "cucire" il codice al CMS ti fornirà un login per il pannello di controllo del CMS, che ti consente di inserire il contenuto, inclusi testo, foto, video e documenti. La maggior parte degli scrittori preferisce tagliare e incollare da Microsoft Word.

A seconda delle specifiche del CMS selezionato, potresti essere in grado di farlo senza problemi, mantenendo una formattazione semplice come grassetto, corsivo ed elenchi. Tuttavia, il CMS potrebbe eliminare questa formattazione quando tagli e incolli, richiedendoti di aggiungerla nuovamente. Anche se a volte noioso, questo assicura che il tuo contenuto rimanga pulito e ordinato, il che lo rende più facilmente indicizzato dai motori di ricerca, più facilmente stampabile, citato e convertito in altri formati.

Sebbene in realtà questo processo sia piuttosto complicato, ho omesso i dettagli perché il processo esatto sarà unico per ciascun CMS e farlo bene si basa sull'esperienza dello sviluppatore Web/CMS.

Formazione e documentazione

Sebbene i moderni CMS possano essere molto facili da usare, è importante coordinare la formazione per le persone responsabili dell'inserimento dei contenuti. Quando possibile, la formazione in loco è la migliore, con la conferenza web una seconda scelta. La formazione funziona meglio in gruppi molto piccoli - 5 persone o meno. Inoltre, fare in modo che le persone seguano effettivamente i passaggi necessari per completare un'attività da sole (piuttosto che limitarsi a guardare l'allenatore e cercare di ricordare come farlo quando sono da sole) è molto più efficace.

La formazione dovrebbe essere supportata da documentazione, che può assumere molte forme:

• Video passo-passo ("screencast")
• PDF con screenshot
• Linee guida stampate
• Guida contestuale (integrata nel CMS).

A volte la documentazione combina alcune o tutte le precedenti. Qualunque cosa tu scelga, tieni presente il livello di abilità delle persone che accedono ai contenuti. Molte persone che lavorano negli uffici sono competenti con Microsoft Word e la posta elettronica, ma possono essere sfidate da attività di "progettazione" di base ma necessarie come il ridimensionamento e il ritaglio delle immagini. Ricorda inoltre che l'azienda probabilmente non sta lavorando con lo stesso set di strumenti di progettazione professionali del designer, quindi tieni conto anche delle preoccupazioni tecnologiche dell'azienda.

È una buona idea salvare la scrittura della documentazione fino al termine del progetto il più vicino possibile. Ricorda che se modifichi qualcosa nel progetto CMS a metà, potresti dover aggiornare la documentazione in modo che corrisponda. Questo può richiedere molto tempo (e anche confondere), quindi cerca di coordinare le parti del tuo progetto in modo che la documentazione venga scritta una volta finalizzato il processo di immissione del contenuto.

Mettendo tutto insieme...

A questo punto, dopo aver seguito i passaggi precedenti, dovresti ora essere seduto su un sito Web piuttosto solido. Indipendentemente dalle dimensioni del tuo progetto, ora è un buon momento per:

Rivedi i tuoi contenuti ancora una volta, confrontandoli con i punti elencati sotto la scrittura per il web sopra.

Chiedi a una terza parte di correggere tutti i tuoi contenuti. Questo non è il compito del designer o dello scrittore originale. È meglio coinvolgere qualcuno con una nuova prospettiva. Non correggere il tuo lavoro.

BETA TEST

Quando ritieni che il tuo sito Web sia quasi pronto per essere visualizzato dal pubblico, è il momento del beta test, un processo che esamina tutti gli aspetti del sito, assicurandosi che tutto appaia e funzioni come previsto. Considera questa lista di controllo, come minimo:

• Il sito ha l'aspetto previsto in tutti i browser web di destinazione? I browser Web includono i consueti Internet Explorer, Firefox, Safari e Chrome, oltre a quelli forniti con i comuni dispositivi mobili. Se finora hai visualizzato il sito su un browser desktop, potresti riscontrare problemi imprevisti quando passi a un tablet o uno smartphone. Questo è il momento di esaminare a fondo il tuo sito su una varietà di dispositivi prima che possa essere considerato pronto per il consumo pubblico. Ricorda: il pubblico del tuo sito utilizzerà un'ampia gamma di dispositivi per visualizzare il tuo sito e deve funzionare in modo accettabile su tutti loro. Non devi testare fisicamente il tuo sito su ogni possibile telefono o tablet, ma dovresti provarlo su una manciata di dispositivi comuni. Non uscire e comprare un Blackberry di cinque anni a scopo di test.
  I siti Web e i servizi di "emulazione" come Spoon.net genereranno anteprime del tuo sito su quasi tutti i browser o dispositivi conosciuti dall'umanità, dandoti una buona idea di come apparirà nella maggior parte degli scenari.
• Le funzionalità interattive funzionano senza problemi.
• I contatti o altri moduli funzionano in modo prevedibile e generano la risposta corretta all'utente e al destinatario delle informazioni inviate.
• I messaggi di errore sono utili e a misura d'uomo.
• Funzione link interni ed esterni.
• Le immagini sono dimensionate correttamente.
• Tutto il contenuto del segnaposto è stato sostituito dalla copia/immagini finali, ecc.
• I collegamenti interni ed esterni, inclusi i collegamenti e-mail, funzionano correttamente.
• Le integrazioni con software di terze parti, come i fornitori di servizi di posta elettronica, stanno funzionando.

A questo punto è molto saggio arruolare qualcuno che non è stato coinvolto nel processo fino ad oggi e chiedere loro di esaminare metodicamente ogni pagina e funzionalità del sito, notando eventuali errori o difetti che trovano. Non usare qualcuno che fissa il sito da mesi. I problemi a cui prestare attenzione potrebbero includere errori di battitura, collegamenti errati, dimensioni delle immagini, errori su dispositivi mobili specifici o contenuto mancante o incompleto. (Assicurati di dire al tuo tester che il design del sito è scolpito nella pietra a questo punto, quindi non perdono tempo a guardare considerazioni non sui contenuti.)

Coordinamento pre-lancio

Quando ti avvicini al momento del lancio, dovrai coordinarti con gli altri sforzi di marketing della tua azienda. Se sei attivo sui social media, scrivi e rileggi l'annuncio del tuo nuovo sito/ridisegnato e fissa un programma per pubblicare l'annuncio. Preparati ad aggiornare il tuo messaggio di posta vocale in uscita e a coordinare la pubblicità sulla stampa: tutto il necessario per supportare il lancio del sito.

Reindirizzamento del traffico dal "vecchio" sito

Se il tuo nuovo sito web sta sostituendo una versione precedente, probabilmente avrà una struttura URL diversa e dovrai mappare la vecchia struttura alla nuova. Ci sono due ragioni per farlo. Innanzitutto, i motori di ricerca hanno indicizzato gli URL del tuo vecchio sito. Questa indicizzazione ha molto valore per le persone che cercano ciò che offre la tua azienda. Quando avvii un nuovo sito con URL diversi, quelli vecchi si interrompono e gli utenti riceveranno un messaggio "pagina non trovata" (errore 404). Vuoi mantenere il tuo posto duramente guadagnato nei motori di ricerca. In secondo luogo, i visitatori del sito potrebbero avere pagine preferite all'interno del tuo vecchio sito e voler tornare su di esse. Se gli URL di quelle pagine cambiano, devi assicurarti che i visitatori ricevano comunque contenuti pertinenti alle loro esigenze, invece di una pagina che non esiste più.

Ad esempio, il tuo vecchio sito potrebbe avere:

• https://oursite.com/company/history.html
• https://oursite.com/staff/california.html

mentre il nuovo sito ha:

• https://oursite.com/company-history
• https://oursite.com/staff/california

Le differenze sono sottili, ma i computer sono cose molto letterali: per il browser, la differenza tra "history.html" e "company-history.html" potrebbe anche essere la distanza tra Marte e la Terra. È necessario esaminare la struttura del vecchio sito e prendere nota di ogni pagina che contiene informazioni equivalenti nel nuovo sito e dei relativi URL. Se il tuo vecchio sito ha molte pagine, puoi utilizzare uno strumento come Powermapper per automatizzare il processo. A volte vecchi e nuovi URL si allineano abbastanza bene, come quelli sopra. Altre volte un vecchio URL potrebbe non avere un equivalente nel nuovo sito. Ciò accade spesso se hai chiuso una divisione della tua azienda, interrotto un progetto o riorganizzato un reparto. Indipendentemente dal motivo, avrai comunque bisogno di URL esatti con cui lavorare per il passaggio successivo. Esistono tre modi per gestire i vecchi URL:

• Se hanno un equivalente come gli esempi sopra, puoi puntare il vecchio URL al nuovo. Per divergere per un momento dalla tecnica, questo viene fatto con un reindirizzamento 301, che dice ai motori di ricerca e ai browser Web degli utenti che un URL è stato modificato in modo permanente. Si presenta così: Redirect 301 /company/history.html https://oursite.com/company-history
• Se i collegamenti non hanno equivalenti, puoi indirizzare i visitatori del sito a una pagina che dice "Spiacenti, non riusciamo a trovare quello che stai cercando. Abbiamo riprogettato e riorganizzato il nostro sito e alcuni contenuti sono cambiati o spostati". e fornire una mappa del sito e un'opzione di ricerca.
• Puoi anche puntare tutti gli URL inesistenti direttamente alla home page.

Maggiore è la scala del tuo vecchio sito, maggiore sarà il lavoro necessario per reindirizzare i vecchi URL. Se disponi di analisi in esecuzione sul tuo vecchio sito, puoi scegliere di indirizzare nuovamente solo i primi 10 o 20 vecchi URL a quelli nuovi e impostare un catch-all per tutto il resto, indicandoli o "Siamo spiacenti, possiamo non trovare quello che stai cercando..." o la home page. La creazione di reindirizzamenti catch-all, o quelli che corrispondono a un pattern URL specifico è un'attività tecnica che non affronteremo qui, ma puoi facilmente trovare informazioni sui file .htaccess (per server Linux) o file web.config (per server NT ) in Stack Exchange o altre risorse.

Non lanciare mai di venerdì

Non è mai una buona idea lanciare un sito web, soprattutto uno da cui dipendono molte persone, di venerdì o subito prima delle vacanze. Se qualcosa va storto, potresti non avere le risorse per risolverlo quando la maggior parte del personale dell'ufficio, i fornitori e altre terze parti che potrebbero essere in grado di aiutarti sono tornati a casa per il fine settimana. Il lunedì è l'ideale per lanciare un nuovo sito, poiché ti dà l'intera settimana per risolvere eventuali problemi imprevisti che potrebbero sorgere e un sacco di supporto per aiutarti a farlo.

Lanciare!

Dopo aver testato a fondo il sito in versione beta, è ora di avviarlo. I passaggi specifici variano in base al progetto, ma in genere ciò significa spostare il sito (file, database, configurazione) da un ambiente di sviluppo a uno pubblico rendendolo visibile al mondo, o semplicemente aggiornare le impostazioni del server per consentire ai visitatori di yourcompany.com di vedere il nuovo sito.

Post-Lancio

Statistiche web

La revisione delle statistiche sui visitatori del tuo sito web può darti informazioni vitali su come le persone utilizzano il tuo sito. Avrai bisogno di almeno un mese o due di dati per prendere decisioni. Non rimanere troppo attaccato ai numeri puri: sono tutti approssimativi in ​​un modo o nell'altro. Le tendenze dovrebbero essere il tuo obiettivo principale. Ecco alcuni punti chiave da considerare:

• Da dove vengono i visitatori? Motori di ricerca, traffico diretto (ad esempio, qualcuno ha appena digitato il tuo sito.
• URL nel browser), annunci, collegamenti da altri siti, ecc.
• Dove vivono i visitatori? Sono per lo più locali, regionali, nazionali, internazionali?
Quali sono le pagine più popolari?
• Quanto tempo rimangono i visitatori sul sito?
• Qual è la frequenza di rimbalzo, ovvero quanti utenti visitano una sola pagina del sito prima di abbandonarla del tutto?

Google Analytics è tra i software di statistica web più utilizzati e troverai facilmente risposte a queste domande nei dati di alto livello che presenta. Anche altri software di statistiche web come KISSMetrics o Clicky dovrebbero fornire prontamente queste risposte.

Documentazione tecnica

Avrai anche bisogno di note dettagliate su come le varie parti del sito sono implementate nel CMS. Questo è diverso dalla documentazione fornita all'azienda. Much of your technical documentation will simply consist of the annotated elements discussed earlier in this document, including wireframes, style guide and Photoshop documents. Think about what information would be needed if you brought new people in to maintain the site, people who were not at all familiar with it. What do they require to pick up the project? They'll need:

• Credentials for the CMS, web server, and other services connected to the site.
• Written or video instructions on how to perform tasks in the CMS: adding news items, blog posts, swapping out photos — everything that someone can do to the site.
• Recommended technical maintenance — how often do the CMS and other services require updating?
• Notes on backups — what is being backed up, how often, and where is it backed up to?

Note: writing documentation of all kinds is one of a web professional's least favorite tasks, but it's very important. Don't slack on it. Think how terrible it would be to inherit a project without any technical documentation. Then use that dread as your inspiration! You don't want to leave anybody in a lurch down the line and doing this right will save time and frustration later on.

Backup

This is often overlooked by businesses and designers alike. Schedule regular backups of the site's files and database. Daily is ideal. Your hosting company may provide an automated way to do this, but if they don't, there are plenty of effective services and tools available to facilitate this process. That way, if your files or database get hacked, erased, corrupted or otherwise damaged, you can restore them with copies from the previous day.

Depending on the size of your site, frequency of updates and some technical matters that vary with each site, you may want to schedule more frequent backups. Ideally, your site will be backed up off-site, that is, in a different place than where it is hosted. Services like Amazon S3 or Rackspace Cloud are ideal for this purpose. The idea is that if your website gets irrevocably damaged, a recent copy is stored in a different physical location, allowing restoration of the site to the last undamaged version.

Maintenance plan

Your maintenance plan, which should have been budgeted for before you started, should clarify roles and responsibilities for every aspect of the site. For example, if two articles per week are to be posted, who is responsible for this, and who is that person's backup? If your site requires photos or graphics to be created regularly, make sure this work is assigned and understood by all involved. Determine who will check links, re-size images, write blog posts, etc. Write a simple maintenance plan and share it with everyone involved in the site's care and feeding. Remember, a good website isn't a one-time event, but rather an extensible communication tool that requires regular updates to remain valuable, relevant and compelling to site visitors.

Solicit visitor feedback

After it's been online for a while, a great way to improve the impact of your site is to solicit visitor feedback. There are a variety of ways to do this, from simple online surveys to on-site focus groups. Site visitors often have trouble articulating what they like and don't like about their experience. With this in mind, it's important to craft very clear and specific questions when soliciting feedback. And remember, if you're going to take a significant amount of visitors' time, offer something in return — a product discount, prize, or simply a handwritten note thanking them.

FIN

OK, one more time for posterity: A good website isn't a one-time event, but rather an extensible communications tool. Once you've built a great website, keep the momentum going. Devote resources to regular maintenance, and check in with your site visitors regularly to identify areas for improvement.

Lettura consigliata

• "Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability" by Steve Krug
  Helps readers understand the principles of intuitive navigation and information design.
• "Content Strategy for Mobile" by Karen McGrane
  Making the case for a mobile strategy, publishing flexibly to multiple channels, and adapting your workflow to a world of emerging devices, platforms, screen sizes, and resolutions.
• "Design Is A Job" by Mike Monteiro
  From contracts to selling design, from working with clients to working with each other, learn why navigating the business of design is just as important as the craft of it.
• "Grow your SEO" by Candy Phelps
  A beginner's guide to SEO.

DEFINIZIONI

Term	Definitions
Adobe Flash	A proprietary system for creating rich, interactive website features such as charts, graphs, animations and streaming video. The Flash player, that is, the browser add-on that allows users to via Flash content, is free. Flash authoring software is sold by Adobe.
Beta testing	The process of reviewing a website to ensure everything works as intended prior to launch.
Content Management System (CMS)	Software that provides website authoring, collaboration and administration tools designed to allow users with little knowledge of web programming languages or markup languages to create and manage the site's content with relative ease. Offers users the ability to manage documents and output for multiple author editing and participation. Popular CMS include WordPress, ExpressionEngine, Drupal, Joomla, Perch, Statamic, Craft, and hundreds more.
Grid system	A grid takes the available screen area and divides it up in to equal parts, for example, 10 columns of 96 pixels = 960 pixels. This makes layout and design easier. Many grid systems are available — use a search engine to see what's current.
HTML	Short for 'Hypertext Markup Language.' HTML is a tag-based language which defines the elements of content on a web page. For example, surrounding content in <p>...</p> tags creates a paragraph, while <strong>...</strong> creates bold text (adapted from Wikipedia).
Javascript (JS)	A programming language that runs inside a user's web browser, enhancing websites with a wide range of features such as mouseovers, slide shows, moving and fading elements, and more. Commonly implemented through a library like jQuery.
CSS	Short for 'Cascading Style Sheets.'' CSS is a set of instructions which define the layout and appearance of HTML elements. For example, CSS may specify that all paragraphs be 12 point Verdana, dark gray.
Disposizione	Deals with the arrangement of visual elements on a page. It generally involves organizational principles of composition to achieve specific communication objectives.
Lorem Ipsum ("Greeking")	Placeholder text used by web and graphic designers to fill space in mockups and incomplete web pages until real content is provided. May be as old as the sixteenth century.
Meta tags	Information about a web page (for example, title, description, author) that helps search engines and other resources understand the contents of that page.
Responsive Web Design (RWD)	A set of web design techniques that insure a site adjusts its presentation appropriately for different devices. Term originally coined by Ethan Marcotte.
Search Engine Optimization (SEO)	The process of affecting the visibility of a website in a search engine's results.
URL	Stands for Uniform Resource Locator, that is, a unique address on the web that contains specific content. For example, tastyfruit.com/citrus/oranges
Wireframe	A visual representation of the layout elements of a web page, intended to show page structure, element placement and sizing.