La guida pratica al flusso di lavoro del web design
Come web designer che fa parte di un team di sviluppo web più ampio, è normale che devi gestire un sacco di attività contemporaneamente.
Avendo creato alcune prime bozze di progettazione per il tuo cliente e ora aspettando quel primo feedback, sei probabilmente piuttosto entusiasta di come il tuo lavoro verrà percepito dal cliente. Con così tante cose da monitorare in un periodo di tempo rigoroso, è facile lasciarsi travolgere dalla complessità del progetto. Ci sono molti passaggi coinvolti nella progettazione di un sito web o di un'app. Questi passaggi variano leggermente da persona a persona, ma il flusso di lavoro di base rimane lo stesso.
Con una buona configurazione del flusso di lavoro e con pochi strumenti e software, è possibile mantenere facilmente la rotazione della palla ed evitare lunghi cicli di feedback.
Ecco una guida pratica per un flusso di lavoro di progettazione che puoi utilizzare per aumentare la produttività della tua squadra.
Fase di preparazione: gestione delle aspettative
Sia che tu stia semplicemente mantenendo un sito web esistente o progettando un nuovo sito web da zero, sia tu che il tuo cliente siete tenuti a gestire le aspettative l'uno dell'altro.
Mentre la tua responsabilità principale è capire in dettaglio le esigenze del progetto, la responsabilità del cliente è capire come ogni scelta effettuata influisce sull'ambito e sul budget del progetto, con il tuo aiuto.
Consenti al tuo cliente di conoscere la tecnologia richiesta, il budget richiesto e il tempo necessario per completare il progetto. Avvicinarsi al tuo progetto in modo organizzato farà risparmiare tempo, sforzi e budget.
Fase 1: definizione degli obiettivi del sito
Questa è probabilmente la fase più importante di qualsiasi progetto di design quando si definiscono gli obiettivi, si imposta la struttura generale, si decide sul contenuto e si assegnano i ruoli e i diversi deliverable in tutto il progetto. Stabilendo una corretta pianificazione sin dall'inizio, ti risparmierai molto dopo.
Qui lavori con il cliente per stabilire il programma, il budget, la tempistica, le esigenze tecniche, lo stile visivo e la struttura dei contenuti per il pubblico di destinazione.
Quando gestisco le aspettative e inizi con il tuo progetto di design, vorrei raccomandare di utilizzare una gestione dei progetti snella e di facile utilizzo per tenere traccia degli obiettivi, dei budget, delle attività e degli orari definiti.
Trello
Trello è un ben noto e facile da usare strumenti di gestione del progetto. Ti consente di creare varie schede per vari progetti. Con Trello puoi ottenere una rapida panoramica delle attività correnti e del tuo arretrato.
asana
asana è una grande cosa da fare e task tracker. Puoi anche collaborare con colleghi e clienti all'interno di Asana che ti consente di mantenere il tuo progetto trasparente e tutti aggiornati.
Campo base
Un altro ben noto, ma grande strumento di gestione del progetto è Campo base . Analogamente agli strumenti sopra menzionati, in pratica consente a te e al tuo team di tenere traccia di ogni progetto consegnabile e consente di tenere traccia.
Fase 2: sviluppo della struttura del sito e sporcarsi le mani
La struttura del sito costituisce la spina dorsale del sito web. Agisce come guida di riferimento per il team durante l'intera durata del progetto. Utilizzare i diagrammi di flusso per mostrare il flusso della struttura.
Sitemap: la creazione di una sitemap è fondamentale per la comprensione dell'organizzazione dei contenuti. È importante continuare ad aggiornare la mappa del sito dopo ogni modifica. Se non lo fai, le cose diventeranno disordinate.
Wireframe: il contenuto del sito deve essere corretto prima che il design e la grafica vengano messi a posto.
I wireframe sono schizzi a bassa fedeltà del sito Web o dell'applicazione mobile. I wireframe vengono utilizzati per creare segnaposto per i contenuti, stabilire priorità per gli elementi nella pagina e per documentare i requisiti. Questo diventa molto importante nella prossima fase.
Balsamiq
Balsamiq è uno strumento di wireframing grafico che aiuta il tuo designer a creare molti progetti e quindi a organizzare i widget predefiniti in un editor drag-and-drop affinché il team possa visualizzare e suggerire modifiche simultaneamente.
Moqups
Moqups è facile da usare, ha un sacco di funzionalità drag and drop e non richiede un plug-in del browser per funzionare. Puoi facilmente organizzare una presentazione di design per il tuo cliente usando questo strumento.
Invision
Invision ti consente di caricare progetti di lavoro e creare interazioni utilizzando gli hotspot, proprio come qualsiasi altra applicazione reale. Una delle sue caratteristiche distintive è la possibilità di inviare disegni cliccabili sul tuo telefono tramite SMS, sottolineando l'importanza di poter testare i tuoi progetti nel giusto contesto.
Notism
Notism è uno dei migliori strumenti che i team creativi utilizzano per accelerare il loro processo di lavoro. Questa è una piattaforma di progettazione e collaborazione video. Aiuta i professionisti creativi a condividere il loro progetto e ricevere feedback tramite schizzi e note. Notism consente inoltre di creare diverse versioni di uno schermo. Passando facilmente da una schermata all'altra, è possibile ottenere una visione migliore dello sviluppo del progetto.
Fase 3: progettazione e produzione
In questa fase, assicurarsi che il progettista lavori insieme al programmatore per garantire l'implementazione di elementi di progettazione coerenti.
Dopo che il cliente ha approvato le bozze di progettazione, il progettista e il team grafico lavorano sull'aspetto e sul feeling del sito web. Compressione, trasparenza, uso efficiente del colore e del design si combinano per creare una grafica web efficace.
La fase di produzione è un punto in cui viene creato il sito Web effettivo. Una volta completata la progettazione e il layout del sito, il sito entra nella parte di ingegneria del lavoro. Qui, prenderete tutti i singoli elementi grafici dal prototipo e li userete per creare il sito reale e funzionale.
Github
Il tuo codice cambierà una volta, due volte e probabilmente molto di più. Github ti consente di lavorare in modo efficiente con diverse versioni del tuo sito web. Lo strumento brilla davvero quando lavori con un team di sviluppatori. Questa è la collaborazione del codice al suo meglio.
CodePen
Questo è adorabile. È un editor online per tutte le tue esigenze HTML, CSS e JS. Si combina facilmente con Github ed è ovviamente collaborativo. L'idea è di essere in grado di testare pezzi di codice e trovare una soluzione adeguata senza intaccare il resto del codice.
Fase 4: test, raccolta di feedback e bug di correzione
Nessun progetto è mai veramente senza difetti. E anche se il testing è qualcosa che viene fatto anche durante il processo di sviluppo, ci saranno sempre dei bug. E non stiamo parlando solo di bug del software. Anche un design può essere bacato.
Quindi adesso, è importante iniziare a testare come pazzi. La risoluzione anticipata dei problemi consente di risparmiare un sacco di tempo e fatica. È fondamentale che tutte le persone che partecipano alla creazione del sito siano coinvolte nei test. Tuttavia, il test dovrebbe essere un processo agile. Una volta che hai lanciato il sito o sei in procinto di avviarlo, molte persone inizieranno a usarlo e forniranno feedback sul sito.
E anche se hai fatto tutto il possibile per testare il sito, ti mancheranno un paio di bug o ne usciranno di nuovi nel tempo. È fondamentale ottenere informazioni su bug e problemi il prima possibile. Se riesci a convincere i tuoi utenti a segnalarteli, sei d'oro.
Usersnap
(Full disclosure: lavoro per Usersnap.) Abbiamo costruito Usersnap come strumento di tracciamento e feedback visivo dei bug che facilita il lavoro di test del software. Consente ai clienti, ai visitatori del sito web e ai colleghi di segnalare bug, modificare richieste o semplicemente feedback sul tuo sito web. Anche per il test del sito web manuale, Usersnap è una scommessa sicura, poiché accelera il flusso di lavoro dei test attraverso strumenti facili da usare.
Quindi, per ricapitolare ...
I progetti di design richiedono a molte persone di lavorare insieme. Il feedback costante è una delle parti più importanti della consegna di un progetto, come richiesto dal cliente e nelle tempistiche specificate. Con tutto questo disordine e il fatto che i siti web stanno diventando sempre più complessi ogni giorno, gli strumenti online semplificano il completamento del lavoro tra tutti i soggetti coinvolti e ottengono un feedback immediato da loro.
Integrare questi strumenti in un solido flusso di lavoro, ti aiuta davvero ad arrivare dove devi essere in un campo già competitivo.
Immagine in evidenza, immagine di lavoro di squadra via Shutterstock.