Prendi il controllo e risparmia tempo durante la progettazione per i clienti

A FHOKE abbiamo gestito centinaia di progetti in molti modi. Con l'esperienza del settore del nostro team, la gestione o il lavoro all'interno degli studi, abbiamo visto tutto; modi in cui ha funzionato e altri che hanno fallito. Nel corso degli anni abbiamo perfezionato il nostro processo e abbiamo trovato un approccio graduale che funziona bene per tutti i nostri clienti. Ci fa risparmiare tempo e mette più controllo nelle mani dei designer.

La chiave è mantenere sempre un ottimo rapporto con il cliente, lasciandoli soddisfatti alla fine di un progetto, ma risparmiando il dolore, il dolore e le lacrime che può portare un progetto in esecuzione. Quindi, se stai lottando per trattare con i clienti e perdere la passione per il design a causa di questo, allora perché non dare il via al nostro approccio?


Breve e Spec Il lavoro

Abbracciare una visione dei clienti e interrompere la funzionalità

Potrebbe sembrare ovvio, ma troppo spesso sentiamo freelance e persino agenzie che saltano dentro un progetto senza pensare prima a tutti gli scenari. Assicurati di pianificare bene, fai le domande giuste e istruisci il tuo cliente su ciò che dovrebbe aspettarsi di essere consegnato alla fine di un progetto. Soprattutto stabilisci livelli e termini di pagamento ragionevoli in modo che nessuno di voi sia lasciato senza nulla.

Creare un brief di design efficace

Se hai trovato il tuo primo ciclo di immagini rifiutate e ti stanno chiedendo perché hai intrapreso un determinato approccio, allora forse non hai preso la decisione giusta (forse non avresti nemmeno dovuto prenderne una per niente. )

Un brief di progettazione efficace è il singolo fattore più critico nel garantire che un progetto inizi con successo. Fornirà al cliente le giuste domande che, come designer, hai bisogno di una risposta. Ottieni le domande giuste e la prima fase del progetto è stata un successo.

Se non hai un brief preparato, perché non usarne uno come questo per dare ai clienti. Non tutti i clienti capiscono cosa sia una buona sintesi di design e non ti daranno sempre le risposte che vuoi - sentiti libero di usare il nostro modello come preferisci. Avendolo pronto, mostra ai clienti la tua professionalità e alla fine li salva (e tu) un sacco di tempo e denaro. Ricorda: incoraggiali a divertirti con questo e falli dare loro più informazioni possibili. Se hai ancora domande non aver paura di chiedere di più.

Stop Feeling Snubbed

Ora hai un grande brief a portata di mano che devi speci care il lavoro. Può trattarsi di un elenco dettagliato delle funzionalità o di un semplice elenco di pagine e file che il cliente dovrebbe aspettarsi al completamento. Prova e dettagliare quante più informazioni possibili all'interno della proposta, in quanto ciò delinea esattamente ciò che il cliente riceverà. Inoltre forma un contratto tra te e il cliente e ti impedisce di sentirti maltrattato se un cliente inizia ad aggiungere nuove funzionalità o elementi che non sono mai stati discussi.

Perché non usarli come titoli nelle tue specifiche:

  • Panoramica del progetto
  • Obiettivo del progetto
  • Membri del team di progetto
  • Il tuo processo
  • Flusso / mappa del sito di alto livello
  • Funzionalità e funzionalità del progetto: suddividili in blocchi facili da seguire come progettazione, sviluppo e implementazione
  • Offerta: con le fasi di pagamento
  • Accordo firmato - Firma del cliente, datato
  • I tuoi termini

Uno degli accordi più importanti per i nuovi progetti è rappresentato dalle fasi di pagamento. Scegli i termini che funzionano a tuo favore, ma sono giusti per il cliente. Ricorda mai avviare o consegnare un progetto senza pagamento iniziale o finale, si avrà no sfruttare a questo punto. Metti in chiaro, assicurati che i clienti conoscano i termini in anticipo e assicurati che capiscano che l'IP / Copyright per Tutti / Parte del progetto (se lo trasferisci) è solo loro al momento del pagamento. Non aver paura di stare in piedi o, se messo in discussione, giungere a un accordo reciprocamente vantaggioso. Ad esempio, se si prende il 50% in anticipo e il 50% al completamento, è possibile prendere in considerazione un anticipo del 35% e il 65% al ​​completamento.

Inoltre, non è raro trovare un pagamento intermedio concordato che possa essere chiaramente definito, ad esempio, dopo la pianificazione, l'ambito e la progettazione prima che inizi la generazione. Ci sono molti modi per mettere in scena i pagamenti, ma assicurati di decidere i termini con cui ti trovi a tuo agio.

Ci sarà sempre un certo livello di manovrabilità in gioco una volta che un progetto è in corso, dopo tutto avrai costruito una relazione con il cliente da quel punto e vorrai piacerle. Hoever, impara a dire di no, spiega perché un cambiamento influenzerà il progetto e rimanderai alla proposta firmata. Essere in grado di limitare l'irritazione da entrambe le parti renderà un progetto più divertente per te e per il cliente.


wireframing

Lavorando su usabilità, layout e navigazione

Abbiamo lavorato su progetti di grafica visiva, dal brief alla progettazione nel browser, ma nessuno di questi approcci ha funzionato altrettanto bene durante il wireframe.

Imposta le aspettative

Wireframing definisce le aspettative del cliente per il layout del sito prima ancora di aver preso in considerazione l'introduzione di colori, tipografia e grafica. Alla fine ti farà risparmiare tempo e impedirà il temuto processo di spingere i pixel. È anche un ottimo modo per spogliare un sito e concentrarsi sulla sua usabilità, funzionalità e flusso senza distrarre il cliente con il design. Prima di tutto il design quindi il cliente si concentrerà quasi sicuramente su quello e non su quale grande layout hai presentato. Fare questo errore può portare a compromettere importanti caratteristiche e decisioni sull'usabilità del sito.

Non aver paura di sperimentare quando fai il wireframing. È un ottimo modo per creare rapidamente layout e altrettanto rapidamente per la modifica. Ma non essere sperimentale per amor di esperimenti, potrebbe sembrare carino ma il sito deve essere utilizzabile e raggiungere gli obiettivi del cliente.

Perché non provare Mockflow o Balsamiq per una soluzione economica per la creazione e la condivisione dei wireframe.

Dove iniziare

Inizia decidendo su un sistema di griglia da usare (guarda a Grid CSS o 978 g). Con i cambiamenti di risoluzione questi possono variare e dipenderanno dal cliente, dal pubblico e dai dispositivi su cui il sito dovrebbe lavorare. Assicurati di aver discusso le opzioni con il cliente durante la speculazione del sito. Ciò ti farà risparmiare tempo e impedirà a qualsiasi richiesta di cambiare risoluzione in seguito, quando la maggior parte del lavoro è stata eseguita. Ricorda di continuare a comunicare ed educare il cliente in tutto ciò che fai.

Poiché hai le funzionalità del sito in atto rispetto alle specifiche e capisci cosa piace e cosa non piace al cliente dal brief, questa dovrebbe essere una fase relativamente veloce del progetto. Il tuo lavoro inizia ora, quindi impressionali e scegli un layout ben pensato, lo stile di navigazione e decidi il modo migliore per far funzionare bene quelle aree funzionali del sito per il cliente e l'utente.

Lasciati ispirare dagli altri e dai un'occhiata a quali funzioni possono trarre beneficio agli utenti del tuo cliente. Guarda quali siti simili stanno facendo, guarda i siti nelle gallerie web e vedi se le funzionalità che usano vengono messe a frutto.

Come professionista hai la capacità di creare e utilizzare le tecniche più recenti, ma continua a chiederti se è necessario? Avrà un impatto sul tempo e sui costi? Migliora l'esperienza dell'utente? Vantaggi per il cliente? Fa il miglior uso dello spazio disponibile? E soprattutto, risponde al brief? Se la risposta a tutte queste domande è sì, allora vai avanti. Se no, allora qual è il punto?

Una volta che il tuo cliente è soddisfatto del layout del sito, assicurati di firmare per iscritto o via email che sono soddisfatti del lavoro completato fino ad oggi e sei felice di passare alla fase successiva del progetto. Questo rimette il controllo nelle tue mani se decidono di cambiare radicalmente qualcosa più avanti nel progetto. Rimanere flessibile fino a un certo livello. Le modifiche al layout del sito avvengono e quasi sicuramente scoprirai che quando si progetta il sito alcune aree potrebbero essere posizionate meglio altrove. Comunicalo chiaramente con il cliente.


Design

Iniezione di un marchio con colori, trame e tipografia

Avendo i wireframe come parte del tuo processo ora, scoprirai che progettare un sito sarà un'esperienza molto più facile e piacevole. Il pensiero è stato fatto, quindi è il momento di far fluire i succhi creativi.

Preparati a risparmiare tempo

Preparare i file prima della progettazione ti farà risparmiare tempo in seguito, avrai tutto a posto e le risorse possono essere trovate facilmente. Con un sistema a griglia, decidi di iniziare creando un livello nascosto di guide (troverai la maggior parte dei siti della griglia pronti per te) o usa un plugin come GuideGuide per Photoshop.

Prepara i tuoi livelli creando una struttura di cartelle logica e continua a nominare ogni livello del tuo file durante la progettazione. È una grande etichetta soprattutto se un altro designer o sviluppatore raccoglie i tuoi file. Non solo li aiuterà ma ti aiuterà a trovare rapidamente le risorse all'interno di quel file quando ne avrai bisogno. Prova a utilizzare oggetti intelligenti o livelli di forma per icone e loghi in modo che possano essere ridimensionati in un secondo momento, soprattutto quando si progetta per schermi retina.

Prendere decisioni sul design

Da dove cominciare è giù per ogni designer, ma tipicamente (perché i wireframe sono a posto) avrete già un'idea di guardare le migliori pratiche altrove e dal brief del cliente sullo stile che assumerete. Sii ispirato, ma ricorda di farlo tuo. Nel corso del tempo scoprirai che creerai il tuo stile e i clienti vorranno lavorare con te per questo.

Lo stile deriva dal trattamento delle trame, dai caratteri utilizzati e dai piccoli dettagli come pulsanti, icone, divisioni e stati di interazione. Per i font utilizzare repository come Google Fonts o TypeKit per ottenere gli ultimi caratteri tipografici che funzionano online. Per i pulsanti giocare con idee e stili; è molto veloce per passare uno stile, cambiando l'intero aspetto del sito con pochi effetti di livello. Prendi ad esempio questo bottone piatto:

Creato usando lo "Strumento rettangolo" (Forma) (U) in una dimensione di 100 x 40 pixel, al livello sono stati applicati diversi effetti di livello. Innanzitutto con un colore rosso scuro piatto, utilizzando l'impostazione 'Sovrapposizione colore' con una modalità di fusione 'Normale' al 100%. Quindi applicato con un "tratto" usando un rosso più scuro al 100% con un tratto di 2 pixel all'interno. Questo crea un pulsante molto piatto, generico, ma elegante che complimentarmi con molti siti.

È altrettanto rapido cambiare gli effetti di livello per creare un sito con maggiore profondità, utilizzando sfumature e ombre morbide per creare profondità. Cambiare semplicemente da una "Sovrapposizione colore" a una "Sovrapposizione sfumatura" ti darà la possibilità di aggiungere una leggera sfumatura al colore del pulsante. L'aggiunta di un 'Ombra esterna' con una bassa opacità ti darà un'ombra morbida e cambierà immediatamente l'aspetto del pulsante.

Trova entrambi questi pulsanti qui.

Che dire del marchio?

Se è una parte del tuo progetto e ti sforzi di fare in modo che un logo o un sito si adattino all'altro, allora perché non brandizzarli e progettarli in parallelo? Con molte aziende basate online ha perfettamente senso. Abbiamo adottato questo approccio quattro anni fa e da allora non ci siamo più voltati indietro. Non è sempre possibile, ma ha sempre aiutato i nostri clienti a costruire una visione dell'intero marchio (che include un sito) piuttosto che chiedere loro di fidarsi di te e spero che vedano come funziona un logo su tutti i media.

Ridurrà drasticamente il tuo tempo cercando di adattarsi l'un l'altro quando, forse, lo stile del sito non è stato considerato al momento di progettare un logo. Ovviamente, disegna ancora le tue idee e usa un processo simile a quello che usi ora, ma giocare con le due idee allo stesso tempo funziona davvero. È anche molto più rapido e semplice estrapolare un marchio offline piuttosto che far funzionare online un marchio offline.


Devolvere

Non lasciare il tuo sviluppatore al buio

Ricorda mai consegnare un progetto o file senza pagamento finale e una firma dal cliente, avrai no torna a questo punto se fai senza di questi.

Se non stai sviluppando il sito da solo, non lasciare il tuo sviluppatore o il tuo cliente a indovinare.

Se hai avuto bisogno di tempo per stratificare correttamente i tuoi file, non avrai un backlash di uno sviluppatore o di un cliente insoddisfatti. È cortesia professionale consegnare file ben preparati e non solo farà felici il tuo cliente o sviluppatore, ma ti farà risparmiare tempo con pochissime domande sulla configurazione dei file.

Assicurati di impacchettare font e risorse o documenti richiesti. Mantenere tutti i file in un posto come Dropbox consentirà l'accesso a tutti coloro che sono coinvolti nel progetto.


Conclusione

Goditi il ​​tuo ruolo di designer

Non stiamo suggerendo che questo è il modo in cui tutti dovrebbero lavorare, piuttosto deriva dalla nostra esperienza del settore.

Il design è molto soggettivo e se riesci a semplificare un processo ci sarà meno spingere pixel e dipingere con i numeri come dettato da un cliente. Più controllo hai su un design, più ti sentirai ispirato a migliorare ogni progetto.

E ricorda, imparare a dire di no al momento giusto può far risparmiare tempo e fatica alla tua azienda e molto dolore. Detto nel momento sbagliato e ti porterà tutti questi e altro ancora. Quindi considera le tue risposte ai cambiamenti che il cliente chiede, dai sempre una buona ragione ed è chiaro perché pensi che la loro idea potrebbe non funzionare. Infine, sii pronto a fare un passo indietro; a volte le idee dei clienti possono accenderne una migliore.