Share
Ho intenzione di condividere una teoria del design che ho lavorato per implementare nel mio flusso di lavoro negli ultimi due anni: pixel perfetti prototipi. Per alcuni potrebbe essere ovvio, ma è un principio fondamentale per il mio processo di progettazione ora che direi che è stata la singola idea più influente con cui mi sono presentata in oltre 10 anni di progettazione.
Adottare questa teoria non è solo un altro passo nel processo di progettazione, è una prospettiva che cambia la rivoluzione della mente che migliorerà indubbiamente la qualità di ogni disegno su cui lavori da ora in poi. Vuoi essere un web designer migliore e intraprendere progetti più grandi? Continuare a leggere.
Qualche anno fa, al SXSW 2008, sono stato introdotto per la prima volta all'idea di prototipi di design "pixel perfect". Michael Lopp (autore di diversi grandi libri di design e senior engineering manager presso Apple) è stato nel panel per una sessione dal titolo "Great Design Hurts"; Il suo discorso era esilarante e pieno di profanità quanto un episodio di Bill Maher. Tra i suoi punti di lettura incredibilmente perspicaci c'è stato un piccolo gioiello che ha spiegato come in Apple, ogni designer è dedicato all'idea di pixel perfetti comp. Cioè, ogni comp è passato intorno alla compagnia così preciso, così incontaminato, così dettagliato che lo spettatore occasionale non è in grado di distinguere tra la composizione del design e uno screenshot completamente codificato.
... Ogni comp è passato intorno alla compagnia così preciso, così incontaminato, così dettagliato che lo spettatore occasionale non è in grado di distinguere tra la composizione del design e uno screenshot completamente codificato
"Ecco fatto!", Pensai, "l'idea che rivoluzionerà il mio processo di progettazione". E infatti lo ha fatto.
Vedi, per iniziare ogni singolo progetto di design con l'intenzione di seguirlo fino all'ultimo pixel cambia praticamente ogni aspetto del processo di progettazione. Anche se in realtà non segui ogni volta, la nozione stessa di aver iniziato il progetto con questa intenzione avrà effetti drammatici sul prodotto finale.
Dopo un mese o due di provarlo, i miei PSD erano più puliti, i miei file si muovevano più velocemente, i miei progetti non stavano più "trascinandosi" nelle fasi successive e passavo meno tempo al telefono con i clienti che cercavano di spiegare la differenza tra un modello di progettazione approssimativo e il prodotto finito. Oh, e venivo assunto di più, che è una buona metrica da seguire con qualsiasi misura.
Quindi ciò che rende un pixel perfetto comp? In sostanza, sta progettando un mockup (specialmente un web mockup, ma può essere qualsiasi cosa) come se lo stessimo disegnando per codice in primo luogo. Se hai lavorato con CSS / HTML, capirai cosa intendo. Include:
Lasciatemi approfondire questa idea; Quando la maggior parte dei designer inizia un progetto, progetta come se fosse solo un mockup. La consapevolezza che qualche sviluppatore o specialista della Quality Assurance arriverà più tardi e che perfezionerà tutto, limita il tempo e lo sforzo che dedicano ai singoli progetti.
Quello che succede dopo è naturale per la maggior parte dei designer: ai clienti viene detto che le immagini e le icone sono "solo segnaposto". Il testo di Lorem Ipsum viene utilizzato al posto del contenuto reale. Diamine, anche la navigazione e altri importanti elementi dell'interfaccia utente vengono scambiati con contenuti di "riempimento" fino a quasi prima del lancio nella maggior parte dei casi.
"Perfetto" significa che ogni elemento di ogni composizione è esattamente come intendi che siano nel prodotto finale programmato.
Con margini e spaziatura, ciò significa che sono coerenti in tutto il design del sito. Se ciascun blocco della barra laterale in un progetto è progettato per avere un margine di 10px, quindi progettalo in questo modo ogni volta che c'è un blocco della barra laterale.
Con font e colori, significa uso coerente in tutto il sito. Progetta ogni font come se fosse collegato a un elemento HTML (ad esempio: tutti gli H1 sono sempre 18px, grassetto, Georgia che usa il colore nero). Non deviare - come mi ha detto una volta uno dei miei project manager preferiti, non ci dovrebbero essere più di 3 o 4 stili di font su una singola pagina a meno che tu non abbia una dannata buona ragione per farlo. Se stai usando un colore specifico di rosso come colore di evidenziazione sul sito, assicurati che sia il colore esatto del rosso in ogni singolo luogo (a meno che tu non abbia un motivo per farlo essere diverso).
Anche i bordi, le regole delle risorse umane e gli sfondi dovrebbero essere coerenti: ho visto alcune composizioni in cui ogni bordo e risorse umane hanno sfumature diverse dello stesso colore - questo alla fine porta a sembrare sciatta e poco professionale. Per un occhio inesperto, è facile vedere quando un design si sente mezzo cotto ... anche se quella persona non riesce a mettere il dito esattamente su ciò che è sbagliato.
Infine, usa icone, immagini, titoli e testo che sono il più vicino possibile alla cosa reale. Se stai ridisegnando un sito web, utilizza i contenuti che hanno già pubblicato al posto di Lorem Ipsum. Se il cliente dice di avere nuove icone o immagini che useranno nella riprogettazione, chiedi loro e includile nel design.
Ricorda, stiamo cercando di creare comp del design che siano così precisi da sembrare screenshot dell'implementazione reale, dal vivo e codificata.
Prima di fare un altro passo, affrontiamo le ovvie contro-argomentazioni. Costo. Tempo. Sforzo. Frustrazione ... l'argomento che sta già formando nella tua mente potrebbe sembrare così:
"Se trascorro il tempo necessario per dettagliare meticolosamente ogni modello di design che passa tra le mie mani, trascorrerò 3 volte tanto tempo sul design ... per non parlare del fatto che se al cliente non piace il design, tutto va nella spazzatura ".
Un argomento equo, che certamente ha i suoi meriti, ma non è sufficiente a far deragliare questo articolo :) Ricorda, l'obiettivo non è quello di rendere ogni mockup di design effettivamente perfetto (sarebbe folle e costoso) - l'obiettivo è cambiare il tuo approccio al design. Il fatto è che l'approccio pixel-perfect non è molto pratico in molti casi ... ma ciò dovrebbe impedirti di sforzarti per farlo.
Esaminiamo i vantaggi delle composizioni pixel perfette e quindi torneremo su questo argomento.
Ti costringe ad essere più organizzato. Più organizzazione significa meno tempo trascorso a lottare con il tuo PSD e più tempo passato a calci in culo al design.
Non devi più spiegare ai clienti. Se hai progettato un comp perfettamente, cioè, tutto è nel posto in cui lo hai inteso, non devi spiegare ai clienti che ciò che vedono nel comp design non è in realtà ciò che sarà nel prodotto finale.
Non è più necessario spiegare agli sviluppatori. Ciò è particolarmente utile quando il tuo cliente invia i tuoi progetti di progettazione a un team di sviluppo in India, dove lunghe e-mail esplicative non vengono tradotte. Se il loro unico compito è codificare ESATTAMENTE ciò che vedono sul comp, riduce le possibilità che possano interpretare erroneamente le specifiche di progettazione. E diamine, è ancora più facile per i programmatori fluenti con cui lavoro; Si concentrano sulla programmazione, non cercando di capire se voglio margini di 10px o margini di 15px.
Meno tempo speso in QA. L'analisi della qualità, se non si è familiari, è il ciclo finale di progettazione di chiodi su lavagna dove si ritorna in un progetto 'proposto' approssimativo e lo si prepara per la presentazione finale. Per gli sviluppatori, questo è anche il nome del round finale di "pre-lancio" in cui ogni singolo dettaglio, bug funzionale e pixel vaganti vengono risolti. Certo, in piccoli progetti potresti non passare mai attraverso un ciclo di QA; ma nei progetti più grandi che hanno il budget, semplicemente non ti allontani da un progetto finché questo passaggio non è completo e il file sorgente ripulito viene consegnato.
Direttori artistici / clienti più felici. Se il tuo art director (o qualunque sia il suo titolo) è in grado di dedicare meno tempo a spulciare i dettagli sui tuoi comps e più tempo a dare indicazioni preziose, la pressione sanguigna (e la tua) inevitabilmente andrà giù durante le riunioni di revisione del design.
Risultati finali dall'aspetto più professionale. Sì, i tuoi compari saranno più professionali. Ora che stai spendendo meno tempo a spiegare o inventare scuse per i mockup sciatti, puoi dedicare più tempo ad aumentare il tuo tasso ...
Quindi, come risposta all'argomento contro i pixel perfetti, farò questi punti finali.
Le tue comps dovrebbero già essere perfette. È l'obiettivo finale di qualsiasi progetto di design, e se non ci arriverai alla fine, potrebbe essere solo perché non hai mai voluto arrivare al primo posto.
Ci vuole meno tempo rispetto all'alternativa. Scegli uno: trascorri 6 ore disegnando meticolosamente un web mockup e ottieni rapidamente l'approvazione del cliente O Trascorri 4 ore su un progetto e altri 4 riparando gli errori stupidi prima che tu possa finalmente ottenere il cliente per firmare un progetto.
Le modifiche e le revisioni avvengono più velocemente in questo modo, non più lentamente. Se hai progettato il tuo mockup usando questa mentalità e il tuo PSD è organizzato per riflettere questo, ogni successiva serie di revisioni richieste dal cliente avverrà alla velocità della luce.
Mockup eccellenti significano meno tempo nello sviluppo. Ciò consente di risparmiare denaro (o il tuo cliente). Questo è l'inquilino di base di prototipazione rapida - fallo bene prima che vada in un ciclo di sviluppo costoso.
È il più grande divario tra piccoli progetti e grandi budget. Il semplice fatto è che un recruiter in cerca di freelance per portare avanti i loro progetti usa "attenzione al dettaglio" come la misura più indicativa per stabilire se un designer freelance sia in grado di affrontare un grande progetto web. Se hai un portfolio pieno di composizioni sciatte, sarà molto più difficile dimostrare di essere affidabile e capace.
L'ho detto prima, ma è il mio ultimo punto. In realtà non otterrai la perfezione dei pixel su ogni comp e va bene. C'è un tempo e un posto per il bozzetto-rough-comp e tu (e il tuo cliente) saprai quando sarà. Questa teoria di 'pixel perfect comps' non richiede il 100% dei risultati al 100% delle volte, stabilisce solo l'attitudine di base che porti ad ogni progetto. Dopo anni passati a lavorare su questo nei miei progetti, posso dire che ne vale la pena.
!
Accentsconagua