Ai designer con amore (una lettera da uno sviluppatore front-end)

Cari Designer,

Questa lettera è stata preparata per anni. Parti di esso sono state consegnate a voce e per iscritto a vari designer per un lungo periodo di tempo.

Tuttavia ho sempre temuto pubblicarlo per paura che potesse coinvolgere l'attuale designer o cliente con cui sto lavorando. Quindi, prima di procedere, vorrei sottolineare che questo non è un reclamo specifico, ma piuttosto un elenco dettagliato di 18 anni di disaccordi.

Abbiamo lavorato insieme per quasi due decenni e ogni file PSD che mi hai inviato ha avuto (più o meno) gli stessi problemi. Perdonami quindi per l'indecenza di cercare di insegnarti il ​​tuo mestiere.

Non ho la presunzione di insegnarti grafica o estetica. Non approfondirò la tipografia, la leggibilità o l'uso degli spazi bianchi.

Invece, vorrei spiegare come i frutti del tuo lavoro informano il mio.

Vorrei ricordarvi cosa è necessario per riprodurre i design come pagine Web perfette per i pixel. Vorrei dirvi come verranno utilizzati i file di progettazione per la documentazione e come le immagini create determinano le tecnologie utilizzate, fino ai livelli di scalabilità e prestazioni di base.

Inoltre, vorrei dimostrare cosa può essere fatto in modo rapido e semplice e cosa genererà un sovraccarico che trascinerà l'intera produzione alla ricerca per indicizzazione.

E soprattutto, vorrei ricordarti che l' immagine che stai creando in questo momento sarà trasformata in un essere vivente che interagisce e risponde, che comunica con migliaia di individui diversi, che ha bisogno di insegnargli e imparare da loro nel modo più semplice possibile. Sia per questo che per loro.

Progettare per la documentazione

Prima di tutto, vorrei ricordarti che i file PSD che stai producendo non sono solo la fonte delle immagini che il cliente deve approvare, ma sono anche documentazione tecnica e materiale sorgente per gli sviluppatori. Pertanto, mantieni i tuoi livelli e gruppi in ordine, organizzati e nominati .

Annota il tuo disegno. Crea un file separato con le convenzioni che hai utilizzato o annotale in un livello nascosto separato.

Dimmi quali caratteri hai usato per cosa. Fammi sapere quali colori, spaziature e contesti usare. Ho bisogno di sapere.

Ho anche bisogno di sapere cosa estrapolare se non è stato realizzato alcun progetto per una caratteristica specifica.

Immagino che quello che sto cercando di dire sia: se possibile, crea una breve guida di stile per il prodotto che stai progettando.

Per entrambi i nostri vantaggi, quando aggiungi blocchi di testo standard, come i titoli, aggiungi un rettangolo dietro di essi per indicare la spaziatura attorno ad essi. Ciò dovrebbe consentirti di posizionarli costantemente ogni volta. Se questo è troppo lavoro, indica almeno quale esempio nel documento è canone.

Non posso dirti quanto spesso trovo che i titoli siano posizionati a occhio in modo che si adattino visivamente alla singola istanza in cui vengono posizionati, ma quando vengono misurati, rivelano che ognuno ha la propria spaziatura individuale.

Lo stesso vale per i blocchi di contenuto. Se disponi di un elenco di diversi blocchi di contenuto, distanziali in modo coerente.

Ti dirò di più nella sezione Progettazione per il contenuto , ma per favore non dare per scontato che i tuoi titoli siano sempre su una riga e utilizza tali informazioni nel file.

Continuo a imbattermi in questi titoli che hanno una dimensione del carattere 22px e un'altezza della linea di 92px (ovviamente copia e incolla dal titolo della pagina principale). Le impostazioni che scegli sono rilevanti anche se non modificano visivamente il file esportato.

Progettare per la tecnologia

Ci sono due aspetti in questo: cosa si può fare e cosa è appropriato per il mezzo.

Mentre stiamo rapidamente raggiungendo il punto in cui tutto sarà tecnicamente possibile per lo sviluppo di siti Web (se non altro, posso ancora disegnarlo pixel per pixel usando la tela), molte di queste soluzioni non sono pronte per la produzione.

Il fatto che tu abbia trovato un esempio in cui qualcuno ha combinato con successo WebGL 3D con CSS blur plus filter mask per una pagina demo non significa che puoi usarlo come pannello di parallasse a finestra intera in un'applicazione a pagina singola.

E se vuoi davvero camminare all'avanguardia, consulta il tuo sviluppatore prima di inviare il progetto per l'approvazione. Altrimenti, sarà difficile convincere il cliente ad accontentarsi di meno.

Se vuoi davvero testare i bordi, però, e se vuoi provarlo per divertimento, contattami in privato. Amo creare cose del genere tanto quanto te. Basta non mettere quella roba in un progetto di produzione preventivato.

Al di là di queste cose – al di là del testare i limiti di ciò che si può fare, cerca di essere sensibile e ragionevole riguardo a ciò che dovrebbe essere fatto .

Non sei un artista grafico; Sei più di questo, sei un designer.

Non lo stai solo progettando per apparire in un certo modo, devi anche progettarlo per funzionare in un certo modo, comunicare e comportarsi in un certo modo.

Per andare per il cliché familiare ai designer di tutto il mondo: a che serve una sedia dall'aspetto meraviglioso se nessuno può sederci sopra ?

È necessario incorporare la velocità di caricamento, la velocità di esecuzione e la facilità d'uso nel progetto affinché sia ​​un progetto anziché un'immagine.

Cerca di ottenere il più possibile con solo HTML e CSS. Evita di utilizzare funzionalità di bell'aspetto disponibili in Photoshop. Non usare la miscelazione! Non usare finto grassetto e finto corsivo.

A meno che tu non intenda che l'elemento sia un'immagine, non utilizzare affatto filtri, a parte le ombre più semplici.

Non farmi calcolare o scegliere i colori perché hai utilizzato riempimenti di colore misti. Si prega di non falsificare le immagini trasparenti utilizzando la fusione sovrapposta; In realtà ho bisogno di un'immagine trasparente sul sito.

Se utilizziamo un framework front-end, come Bootstrap, molti di questi problemi saranno già risolti, quindi scopri come è fatto e come può essere modificato. Non limitarti a progettare qualcosa di non correlato, volente o nolente.

Se il tuo design non è in linea con ciò che fa il framework, implementarlo non significa implementare il design. Invece finiamo per sovrascrivere selettivamente il framework, quindi non interferisce con il nostro design e quindi lo implementa da zero. Il carico di lavoro raddoppia invece di dimezzarsi.

E infine, non utilizzare più di tre font – o varianti di font – sul sito. Se hai bisogno di sei diversi pesi, ognuno con le sue varianti regolari e corsivo, non stai più progettando per il web.

Progettare per l'interattività

Questo è enorme. E questa lettera è stata originariamente scritta esclusivamente per questo argomento. Devi davvero conoscere e comprendere tutti i modi in cui gli utenti e le funzionalità possono interagire.

Cominciamo dalle cose più semplici: i link.

I collegamenti non hanno solo due stati.

Nella navigazione che ricevo, fornisci sempre dei design per i link e un link attivo (pagina corrente).

In altri casi di solito fornisci gli stati di base e al passaggio del mouse .

Se vuoi essere il meno facile da usare, dovresti avere design distinti per gli stati di base, hover e focus ( visitato e attivo sono anche belli da avere per UX). E per la navigazione, un collegamento e un collegamento attivo hanno ciascuno tutti gli stati di cui sopra .

Oh, e non osare cambiare un layout di collegamento tra gli stati (variando la larghezza del bordo, il riempimento e simili).

Allo stesso modo, se non sembra un pulsante, non ha uno sfondo. Periodo. Il riempimento di un elemento di testo in linea è un pasticcio e gli sfondi di testo non riempiti non lo faranno mai.

Dato che lo useremo sui dispositivi mobili, assicurati che ci sia abbastanza spazio bianco tra elementi interattivi separati e che ogni hitbox sia sufficientemente grande. Penso che un minimo di 42px su ciascun asse sia la norma.

Disegna un rettangolo invisibile o un livello nascosto che mostra le hitbox; assicurati che non si sovrappongano e che le interazioni dell'utente non siano ambigue.

Gli elementi della forma sono anche peggiori.

Il caso più comune che vedo è con i pulsanti di opzione e le caselle di controllo. Quelli standard sono brutti! Quindi, progetti il ​​tuo, e mi dai uno stato controllato e uno non controllato e ti consideri fatto.

Tuttavia, esiste un'intera tabella multidimensionale di stati per una casella di controllo e ciascuno dovrebbe essere indicato visivamente all'utente.

Abbiamo i seguenti stati:

• Selezionato o deselezionato
• Passa il mouse o no
• Concentrati o no
• Abilitato o disabilitato
• Errore o no

Ognuno di questi può combinarsi con gli altri.

Disabilitato impedisce alcune combinazioni (il passaggio del mouse e lo stato attivo sono solitamente irrilevanti quando disabilitati) ma non tutti (l'errore selezionato-disabilitato è uno stato perfettamente valido e informativo per una casella di controllo). Quindi finiamo con 16 stati abilitati e quattro disabilitati, per un totale di almeno 20 stati distinti. Ad esempio, gli stati che di solito mi dai sono selezionati-non-non-abilitati-non-non-selezionati-non-non-abilitati-non in quella configurazione.

Altri elementi del modulo potrebbero non avere uno stato selezionato-deselezionato ma possono essere vuoti o non vuoti (mostrando il testo segnaposto). Possono anche avere uno stato informativo più complesso in modo che il caso di errore o meno possa essere complesso quanto l'avvertimento neutro di errore-successo.

Quindi, oltre a ciò, dovresti avere indicatori obbligatori o facoltativi insieme a un layout e un design chiaramente definiti per etichette, guida di input e testo di errore.

E, se vuoi davvero essere user friendly, hai bisogno di stati pristine-set-dirty, che indicano che l'utente non ha mai fornito i dati, o che i dati sono già archiviati, o sono stati modificati ma non ancora archiviati.

Quello che sto dicendo è: progettare per l'interattività è difficile. E se vuoi cambiare l'aspetto dei pulsanti di opzione, non farlo in modo disinvolto con due stati.

Solo un ultimo punto sulla progettazione per l'interattività: decidere che aspetto ha l'interazione. Significa che decidi quali convenzioni utilizzerai per gli elementi interattivi e non usarle su nient'altro.

No, non puoi usare il colore principale del tuo marchio per indicare i link, soprattutto se utilizzerai la stessa soluzione per accentuare i contenuti importanti!

Progettare per il contenuto

Il layout ideale di ogni elemento riempito con contenuto di lipsum è abbastanza buono per presentare al cliente un'immagine per ottenere un'approvazione sullo stile visivo. Ma il design dei contenuti non inizia né finisce qui.

Una volta che hai un'idea approssimativa di cosa vuoi fare con il layout del contenuto, ricorda che stai lavorando con il contenuto dinamico. Ci sono due casi che devi controllare per ogni contenuto:

• E se ce ne fosse troppa?
• E se ce n'è troppo poco (o manca del tutto)?

Controlla cosa succede se il titolo è ridicolmente corto o insolitamente lungo. Come dovrebbe essere il blocco di contenuti se mancano elementi cruciali? E se non c'è nessuna immagine?

Se non ci sono contenuti per una sezione della pagina, rimuoviamo l'intera sezione - titolo, contenitore e tutto - o manteniamo la sezione e visualizziamo qualcosa sulla falsariga di: "Nessun articolo ancora, ricontrolla più tardi?" Ancora meglio: “Vuoi essere avvisato quando arriva questo contenuto? Iscriviti alla nostra newsletter!"

Prendi le decisioni! Quindi progetta quelle cose!

Se stai progettando un feed o un contenuto caricato da una fonte esterna o dinamica, non dimenticare di includere tutti gli errori e le notifiche. In effetti, progetta il meta contenuto della notifica della pagina per mostrare come appare a livello globale, quindi attieniti a quelle convenzioni di progettazione per avvisare l'utente nel caso qualcosa vada storto.

Evita pulsanti a larghezza fissa e blocchi di testo ad altezza fissa. E, se non l'ho detto prima, se pensi che sarà sempre una riga di testo, ti sbagli! Ora, vai a controllare il modo migliore per renderlo multilinea.

Assicurati che lo stesso contenuto abbia la stessa struttura.

Se lo stesso titolo è visibile in più punti, non mettere in grassetto una parola in un caso e un'altra altrove!

In effetti, cerca di evitare del tutto la formattazione delle strutture all'interno dei titoli. Allo stesso modo, non spezzare il testo manualmente in un punto, ma romperlo in modo diverso in un altro. In effetti, non interrompere manualmente il testo!

Queste cose potrebbero migliorare il tuo progetto, ma ricorda che molto probabilmente il contenuto verrà inserito tramite un CMS e la persona che lo inserisce potrebbe non vedere come appare fino a quando non viene pubblicato, o potrebbe non avere nemmeno gli strumenti per interrompere manualmente, o formattare il testo.

Progetta con le stesse restrizioni che avrà il contenuto finale: contenitori di testo a larghezza fissa e a capo automatico. Se sembra brutto in quel modo, il design non è buono.

Progettare per la reattività

Questo è progredito molto di recente. Almeno nei casi in cui il cellulare è effettivamente progettato. Sempre di più, lasciamo che bootstrap lo capisca e schiaffeggiamo i cerotti sulle crepe.

Indipendentemente da ciò, ci sono alcuni semplici principi che devi conoscere.

Innanzitutto, le varianti mobile e desktop non sono pagine separate. So che lo sai. Sono semplicemente reflow della stessa pagina.

In parole povere, è come lavorare con il testo allineato a sinistra. La frase non cambia l'ordine delle parole o delle lettere solo perché l'hai inserita in un contenitore più piccolo.

Inoltre, i gruppi di contenuti devono essere condivisi in tutti i layout. Quando aggiungi colonne, assicurati che le interruzioni di colonna siano coerenti.

Inoltre, le tue convenzioni dovrebbero seguire la stessa struttura per le diverse versioni della pagina. Ciò significa che, se due elementi sembrano identici su un desktop, dovrebbero essere identici anche su dispositivi mobili.

Oh, e se vuoi il parallasse, fornisci gentilmente un'immagine abbastanza grande da poter essere spostata. Se ti adatti o ritagli l'immagine in modo che appaia proprio sul file che stai mostrando al cliente, non ho nulla da spostare.

Progettare le eccezioni

Naturalmente, le eccezioni sono sempre possibili. Inoltre, sono necessari affinché il prodotto appaia attraente ed efficace. Tuttavia, non aggiungerli al primo passaggio casella per casella.

Se ti ritrovi a risolvere lo stesso problema di progettazione più e più volte, questo non funzionerà, specialmente se scegli una soluzione diversa in ogni caso.

Dopo aver eseguito tutto quanto sopra, dovresti ottenere un design efficiente, stabile e coerente (sebbene un po' noioso). Ora è il momento di ravvivare le cose. Guardando una pagina nel suo insieme, parla con il cliente per identificare i colpi di denaro, gli oggetti che gli daranno il massimo per i loro soldi.

Lavoriamo insieme da anni e i nostri clienti sono sempre rimasti soddisfatti del risultato finale.

Ovviamente interverrò se perdi alcuni di questi punti e, quando l'utilizzo di un design complesso è giustificato, scriverò la logica di rendering in JavaScript, se necessario.

Interverrò e giustificherò il lavoro extra al cliente, se necessario. Cavolo, ho progettato moduli e interattività in aggiunta ai progetti ricevuti per anni, quindi questo non sarà un problema.

Spero solo che, dopo aver letto questo, terrete a mente alcuni di questi suggerimenti la prossima volta che lavoreremo insieme. Spero che informeranno il tuo lavoro e forniranno indicazioni quando non sai cosa fare. Vorrei che tu capissi che il nostro rapporto è importante per me e che non ho scritto questo per ferirti, ma per migliorare il nostro rapporto.

Con amore,

Il tuo sviluppatore front-end