Perfezionamento e standardizzazione del processo di progettazione e sviluppo Divi

Pubblicato: 2017-06-02

Benvenuto alla parte 4 di 5 della nostra serie Organizzazione e controllo della tua attività di Divi Web Design. In questa serie, stiamo esplorando diverse tattiche, strumenti e strategie che ti aiuteranno a superare le lotte quotidiane che tutti noi affrontiamo come Divi Web Designer. Dall'ottimizzazione delle tue routine quotidiane, alla creazione di sistemi e processi, fino a fornire la migliore esperienza di web design per i tuoi clienti; stiamo fornendo elementi e passaggi attuabili che puoi implementare immediatamente allo scopo di aiutarti a prendere il controllo della tua attività di Divi Web Design, che tu sia un libero professionista, una piccola agenzia o un team remoto.

La creazione di un processo standardizzato per la progettazione e lo sviluppo di un sito Web Divi è fondamentale per la tua produttività e il tuo benessere come web designer. Sebbene un progetto di progettazione di siti Web raramente vada esattamente come previsto, se hai un processo e un percorso da seguire, risparmierai un po' di tempo e ti manterrà sulla buona strada per rispettare le scadenze quando i progetti crescono.

Perfezionamento e standardizzazione del processo di progettazione e sviluppo Divi

Ieri abbiamo fatto riferimento a un post precedente sulla creazione di una pagina introduttiva per aiutare a preparare i clienti. In quel post, abbiamo parlato di come presentare il tuo processo ai tuoi nuovi clienti. Ecco il modo in cui presento il mio processo ai miei clienti:

LAYOUT E PROGETTAZIONE - Una parte importante e dispendiosa in termini di tempo della progettazione di un sito Web è nella fase di pianificazione e layout del processo. Creerò prima la mappa del sito (gerarchia Pagina/Menu) del sito Web per l'approvazione, quindi progetterò la home page e una sottopagina (o più su richiesta) per l'approvazione.
SVILUPPO – Una volta approvato il layout e il design del sito, passerò alla progettazione dell'intero sito, delle pagine e aggiungerò tutte le funzionalità e i plug-in. Ci assicureremo che il tuo sito abbia un bell'aspetto e funzioni bene su tutti i dispositivi e browser web prima di passare alla fase finale.
MODIFICHE E REVISIONI – Una volta che il sito è pronto per la revisione finale, sarai in grado di rivedere ogni pagina e potremo apportare modifiche dettagliate fino a quando il sito non sarà completamente rivisto. Ti chiediamo di rivedere TUTTE le pagine per assicurarti che tutta l'ortografia, la grammatica, gli indirizzi e le informazioni siano corrette prima della pubblicazione.

Ora, come colleghi web designer, sapete che la progettazione e lo sviluppo di un sito Web sono molto più importanti di un semplice processo in 3 fasi. Il mio è in realtà più di un processo di 20 passaggi, ma ho scoperto che se sovraccaricare i miei clienti con tutto ciò che è coinvolto, spesso penseranno troppo alle cose quando si tratta di fornire contenuti. Ecco come appare in realtà il mio processo di progettazione/sviluppo Divi Web in modo un po' più dettagliato:

Crea pagina e layout di navigazione per l'approvazione
Intestazione e piè di pagina progettati
Pagina iniziale progettata
Pagina/e secondaria/e progettata/e
Invia al cliente per l'approvazione
Revisioni su intestazione, piè di pagina, home e sottopagina
Una volta approvato, costruisci le pagine rimanenti
Crea modelli per sezioni standardizzate del sito web e pagine ricorrenti come gallerie, progetti, prodotti, ecc
Implementa tutte le integrazioni per iscrizioni a mailing list, social media, widget, ecc
Crea e testa tutti i moduli di contatto
Regola e ottimizza il design per un uso mobile e reattivo
Inserisci le impostazioni SEO necessarie
Ricontrolla la grammatica e il contenuto del sito
Controllo incrociato del browser e correzioni di bug
Invia per la revisione finale
Effettua tutte le revisioni finali del cliente
Crea una dashboard personalizzata del cliente e un video di formazione (se necessario)
Elimina plug-in, immagini e strumenti non necessari
Backup del sito e salvataggio in locale
Sito di lancio

Questo processo è spesso suddiviso in modo ancora più dettagliato, ma questa è una struttura di base di tutto ciò che è coinvolto in ogni mia creazione, sia che si tratti di un sito in stile brochure di 5 pagine o di un sito di 50 pagine con eventi, e-commerce, ecc. tutto questo come una lista di controllo ed è stata una buona pratica per me assicurarmi di non aver trascurato nulla prima di lanciare un sito. Creare una lista di controllo come questa e mettere insieme una sequenza temporale può essere un modo molto efficiente per assicurarsi che il processo di progettazione/sviluppo sia in linea con le scadenze del progetto.

Ok, ora che hai un'idea di come ho organizzato il mio processo di progettazione/sviluppo interno, entriamo in qualche dettaglio in più su come ottimizzare i TUOI processi di Divi Web Design.

1) Creazione di un processo di progettazione standard

Una delle migliori domande e discussioni ricorrenti che vedo nei gruppi Facebook Divi è qualcosa sull'effetto di "Come progetti il tuo sito Divi?" Lo prendi in giro in Photoshop o Illustrator? Crei un wireframe di base che il cliente deve approvare? Ti immergi in Divi e lo fai dal vivo?

Ovviamente non esiste un modo giusto o sbagliato per farlo. Ho scoperto che comunque scegli il tuo processo di progettazione, deve fare 3 cose:

Deve funzionare per te o per il tuo team
Deve funzionare per il tuo cliente
Deve farti risparmiare tempo

Quando inizio un nuovo progetto, tendo a creare uno schizzo molto approssimativo su carta e mi tuffo direttamente in Divi per progettare l'intestazione, il piè di pagina, la home page e tutte le sottopagine necessarie per l'approvazione iniziale.

Ecco perché:

Funziona per me – Tradizionalmente il web design inizia con un ampio processo wireframe tramite carta o un programma come Adobe Illustrator per progettare e mostrare al cliente per l'approvazione prima ancora di andare online. Questo metodo funziona per alcuni e può essere un percorso molto efficiente in particolare se fai parte di un team e consegni il tuo progetto a uno sviluppatore per il codice. Ma una volta che Divi è arrivato, ha cambiato completamente il mio processo. Ora mi tuffo direttamente in Divi dopo che ho una struttura di base e un concetto visivo nella mia mente e sulla carta.
Funziona per i miei clienti: ho scoperto che i clienti amano vedere un'anteprima dal vivo reale che possono vedere su un browser molto più di un modello piatto. A volte il flusso e la sensazione di un sito possono perdersi in una simulazione di una pagina, mentre quando un cliente vede il sito dal vivo in un browser, spesso porta a un "fattore wow" molto più grande. Possono vedere i passaggi del mouse, gli effetti di scorrimento e il flusso del design del sito che crea un'ottima prima impressione e spesso meno modifiche e revisioni.
Mi fa risparmiare tempo: posso cambiare le cose così rapidamente con CSS e i miei layout e impostazioni salvati in Divi che non avrebbe senso per me dover apportare quelle revisioni in Photoshop o Illustrator e poi duplicare lo stesso nel mio foglio di stile e nelle impostazioni Divi. Risparmio un'enorme quantità di tempo con le revisioni e la progettazione iniziale facendo le cose dal vivo utilizzando l'elemento inspect direttamente sul mio sito di sviluppo Divi. Posso anche apportare modifiche e revisioni sui siti spesso mentre sono al telefono con i clienti. Puoi sembrare una vera rock star del web designer quando un cliente ti chiede di cambiare alcune cose e tu lo fai mentre sei al telefono con loro o in pochi minuti.

Ancora una volta, questo processo di progettazione è ciò che funziona per ME come negozio individuale. Con un team, il processo deve funzionare per tutti i soggetti coinvolti. Ma la maggior parte dei web designer freelance sono un mix di designer/sviluppatori, quindi fai qualsiasi processo funzioni per te, funzioni per i tuoi clienti e ti faccia risparmiare tempo!

2) Utilizzo della libreria Divi e del tuo lavoro precedente

Una delle mie funzionalità preferite di Divi è la possibilità di salvare i layout e i design delle pagine. Questa funzione è un punto di svolta e può farti risparmiare un po' di tempo durante la progettazione e lo sviluppo con Divi. In un recente episodio di DiviChat, il pannello parla del salvataggio di più modelli di design di pagina, quindi dell'eliminazione di quelli che non utilizzano su un nuovo sito. Parla di un modo per risparmiare tempo! Se riesci a creare una serie di layout di pagina e modelli di pagina e tutto ciò che devi fare è importare e modificare contenuto, colori e immagini, stai risparmiando ore di potenziale progettazione e sviluppo.

Ecco 3 suggerimenti rapidi che offro quando si tratta di salvare gli elementi della libreria Divi e il lavoro precedente:

Salva il tuo CSS: ho un "foglio di stile principale" con la maggior parte del codice CSS che ho scritto per determinati moduli, sezioni di pagina e classi che voglio imitare su altri siti. In questo modo posso aprirlo ed estrarre il codice che vorrei utilizzare nel progetto corrente. Ha fatto miracoli per risparmiare tempo invece di dover riscrivere righe di CSS più e più volte.
Crea elementi della libreria Divi: il salvataggio dei layout come elementi della libreria può essere un ottimo modo per salvare il tuo lavoro in pagine o come un sito completo che può essere duplicato e modificato facilmente con immagini e colori. Se non sei sicuro di come farlo, segui questo tutorial.
Esporta file json : spesso avrò clienti che faranno riferimento a una pagina da un sito precedente, quindi invece di doverla ricreare da zero, esporterò spesso quella pagina dal vecchio sito, la importerò nel mio nuovo sito e regolare gli stili e le immagini di conseguenza! Ancora una volta, un altro ottimo modo in cui Divi ci fa risparmiare tempo nel processo di progettazione e sviluppo. Maggiori dettagli su questo qui se non hai familiarità.

3) Rivelare il tuo sito web al cliente

Questo è uno degli aspetti del web design più importanti, ma trascurati e sottovalutati secondo me. Molto si basa su una prima impressione e su ciò che il cliente pensa inizialmente quando vede il tuo nuovo design. Se fai un mockup o un wireframe, naturalmente la prima impressione sarà leggermente deludente finché il cliente non vedrà una versione live online che è totalmente comprensibile e, ancora una volta, potrebbe funzionare a seconda della complessità del tuo processo dalla progettazione allo sviluppo. Come hai visto nel mio processo sopra, preparo l'intestazione e il piè di pagina e progetto la home page per intero insieme a una o più sottopagina in genere a seconda delle esigenze del progetto, quindi invio per la revisione. Tuttavia, il modo in cui invio al cliente il mio progetto iniziale è cambiato di recente, con grande effetto.

In passato inviavo semplicemente il link di sviluppo dal vivo in modo che il cliente potesse visualizzare il sito da solo, a suo piacimento. Ha funzionato abbastanza bene, ma ho scoperto che la rara possibilità che ho avuto di fare un'anteprima di persona o su Skype, quelle prime impressioni sono andate ancora meglio e perché? Credo che sia perché il cliente ha avuto modo di ascoltare la mia visione quando ha visto il sito e mi ha permesso di guidarlo attraverso le mie idee di design, colore ed estetica senza che prima esprimesse il proprio giudizio.

Ora creo un video di anteprima veloce (di solito meno di 5 minuti) di me mentre li guido attraverso il sito! Questo è stato ricevuto con un feedback estremamente positivo finora. È un po' dispendioso in termini di tempo, ma trovo che ne valga la pena per ottenere una prima impressione straordinaria dai miei clienti.

Ecco uno screenshot di come mostro un nuovo sito a un cliente su Basecamp:

Registro i miei video di guida con Screenflow per Mac. Quindi carico il video sul mio canale Vimeo e lo rendo un video privato. Da lì, come puoi vedere nell'istantanea sopra, invio quel collegamento video al client insieme a una breve descrizione, un elenco puntato di cosa aspettarsi dopo e l'effettivo URL del sito di sviluppo che il client può vedere sul proprio browser dopo aver visto il video.

Ecco un paio dei miei recenti video di anteprima se vuoi vedere come presento i nuovi siti ai clienti:

Video anteprima sito web 1

Video anteprima sito web 2

4) Gestire le revisioni e le modifiche

Infine, una parte importante del tuo processo di progettazione e sviluppo sarà il modo in cui gestirai le revisioni e le modifiche dei client. Se stai progettando siti web da molto tempo, sai che questo processo può richiedere molto tempo. Riunioni di persona, chiamate estese ed e-mail casuali con piccoli cambiamenti qua o là possono essere enormi perdite di tempo nel processo di modifica e revisione.

Ci sono alcuni modi per combattere questo. Cerco di convincere tutti i miei clienti a pubblicare tutte le loro revisioni (per pagina se necessario) in Basecamp dove creo una discussione per le revisioni. Accetterò una telefonata o un incontro di persona se necessario, ma solo dopo che le modifiche iniziali verranno inviate nel modo in cui desidero riceverle prima. Inoltre, dichiaro MOLTO chiaro che non voglio ricevere revisioni una alla volta, per più giorni via e-mail. Dico ai miei clienti, se possibile, di ritirarli in pochi giorni e pubblicarli tutti in una volta o come molti miei clienti sembrano voler fare, di organizzarli tutti in un .doc o .pdf.

Tornando al post precedente di questa serie e al mio colloquio con i ragazzi di Artillery Media, hanno un processo molto snello per le revisioni in cui richiedono che i loro clienti inviino le loro modifiche in un documento su Google Drive e quindi possano apportare le modifiche tutto in una volta. Questo è anche un grande risparmio di tempo. Il trucco qui è far funzionare il processo di modifica e revisione per te nel modo più rapido possibile. E solo un consiglio, ogni cliente ha il suo modo di fare le cose, quindi è tuo compito guidarlo su come vuoi revisioni e modifiche

In chiusura

Bene, spero che queste idee e il mio processo di progettazione/sviluppo ti abbiano incoraggiato a crearne uno tuo se non hai già un processo standardizzato in atto! Se hai alcuni processi che funzionano bene per te, sentiti libero di farcelo sapere nei commenti qui sotto!

Prossimo: come gestire in modo efficace più progetti di web design Divi

Quando hai più progetti in corso, è difficile gestirli tutti rimanendo creativi, destreggiandosi tra scadenze e soddisfacendo le aspettative dei clienti. Nel nostro post finale di questa serie, parleremo di alcuni modi in cui puoi gestire efficacemente tutti i tuoi progetti Divi Web Design in modo da poter bilanciare l'acquisizione di nuovi clienti, la progettazione, lo sviluppo e il rispetto delle scadenze che hai impostato fuori per colpire. Il tutto rimanendo creativi e freschi. Fino ad allora!

Assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da non perdere mai un grande annuncio, un consiglio utile o un omaggio Divi!