Le dieci migliori regole di progettazione front-end per gli sviluppatori

In quanto sviluppatori front-end, il nostro compito è, essenzialmente, trasformare i progetti in realtà tramite codice. Comprendere ed essere competenti nel design è una componente importante di questo. Sfortunatamente, capire veramente il design del front-end è più facile a dirsi che a farsi. La codifica e il design estetico richiedono alcuni set di abilità piuttosto diversi. Per questo motivo, alcuni sviluppatori front-end non sono così competenti nell'aspetto del design come dovrebbero e, di conseguenza, il loro lavoro ne risente.

Il mio obiettivo è darti alcune regole e concetti facili da seguire, da uno sviluppatore front-end all'altro, che ti aiuteranno ad andare dall'inizio alla fine di un progetto senza rovinare ciò su cui i tuoi designer hanno lavorato così duramente (o forse permettendoti anche di progettare i tuoi progetti con risultati decenti).

Naturalmente, queste regole non ti porteranno da male a magnifico nel tempo necessario per leggere un articolo, ma se le applichi al tuo lavoro, dovrebbero fare una grande differenza.

Fai cose in un programma di grafica

È davvero raro completare un progetto e andare dall'inizio alla fine mantenendo ogni singola mutazione estetica nei file di progettazione. E, sfortunatamente, i designer non sono sempre disponibili a correre per una soluzione rapida.

Pertanto, arriva sempre un punto in qualsiasi lavoro front-end in cui si finisce per dover apportare alcune modifiche estetiche. Sia che si tratti del segno di spunta che viene visualizzato quando si seleziona la casella di controllo o di un layout di pagina che il PSD ha mancato, i front-end spesso finiscono per gestire queste attività apparentemente minori. Naturalmente, in un mondo perfetto non sarebbe così, ma devo ancora trovare un mondo perfetto, quindi dobbiamo essere flessibili.

Per queste situazioni, dovresti sempre usare un programma di grafica per i prototipi. Non mi interessa quale strumento scegli: Photoshop, Illustrator, Fireworks, GIMP, qualunque cosa. Basta non tentare di progettare dal tuo codice. Trascorri un minuto avviando un vero programma di grafica e immaginando come dovrebbe apparire, quindi vai al codice e fallo accadere. Potresti non essere un designer esperto, ma otterrai comunque risultati migliori.

Abbina il design, non provare a batterlo

Il tuo compito non è quello di impressionare con quanto sia unico il tuo segno di spunta; il tuo compito è abbinarlo al resto del design.

Coloro che non hanno molta esperienza di progettazione possono essere facilmente tentati di lasciare il segno sul progetto con dettagli apparentemente minori. Per favore, lascialo ai designer.

Invece di chiedere "Il mio segno di spunta è fantastico?" dovresti chiederti "Quanto bene il mio segno di spunta corrisponde al design?"

Il tuo obiettivo dovrebbe essere sempre quello di lavorare con il design, non di cercare di superarlo.

La tipografia fa la differenza

Saresti sorpreso di sapere quanto l'aspetto finale di un design sia influenzato dalla tipografia. Saresti altrettanto sorpreso di sapere quanto tempo ci dedicano i designer. Questo non è uno sforzo "prendi e vai", ci vuole un po' di tempo e impegno.

Se finisci in una situazione in cui devi effettivamente scegliere la tipografia, dovresti dedicare una discreta quantità di tempo a farlo. Vai online e cerca buoni abbinamenti di caratteri. Trascorri qualche ora provando quegli abbinamenti e assicurandoti di ottenere la migliore tipografia per il progetto.

Se stai lavorando con un design, assicurati di seguire le scelte tipografiche del designer. Questo non significa solo scegliere il carattere. Prestare attenzione all'interlinea, all'interlinea delle lettere e così via. Non trascurare quanto sia importante abbinare la tipografia del design.

Inoltre, assicurati di utilizzare i caratteri giusti nel punto corretto. Se il designer utilizza Georgia solo per le intestazioni e Open Sans per il corpo, non dovresti usare Georgia per il corpo e Open Sans per le intestazioni. La tipografia può creare o distruggere facilmente l'estetica. Dedica abbastanza tempo ad assicurarti di corrispondere alla tipografia del tuo designer. Sarà tempo ben speso.

Il design front-end non tollera la visione a tunnel

Probabilmente realizzerai piccole parti del design generale.

Un esempio che ho seguito è il segno di spunta per un design che include caselle di controllo personalizzate, senza mostrarle selezionate. È importante ricordare che le parti che stai realizzando sono piccole parti di un progetto generale. Rendi i tuoi controlli importanti come dovrebbe apparire un segno di spunta su una pagina, né più né meno. Non avere una visione a tunnel sulla tua piccola parte e falla diventare qualcosa che non dovrebbe essere.

In effetti, una buona tecnica per farlo è fare uno screenshot del programma fino a quel momento, o dei file di progettazione, e progettare al suo interno, nel contesto in cui verrà utilizzato. In questo modo, puoi davvero vedere come influisce sugli altri elementi di design sulla pagina e se si adatta correttamente al suo ruolo.

Relazioni e gerarchia

Presta particolare attenzione a come funziona il design con la gerarchia. Quanto sono vicini i titoli al corpo del testo? Quanto sono lontani dal testo sopra di loro? In che modo il designer sembra indicare quali elementi/titoli/corpi di testo sono correlati e quali no? Di solito fanno queste cose mettendo insieme i contenuti correlati, usando uno spazio bianco variabile per indicare le relazioni, usando colori simili o contrastanti per indicare contenuti correlati/non correlati e così via.

È tuo compito assicurarti di riconoscere i modi in cui il design realizza le relazioni e la gerarchia e assicurarti che quei concetti si riflettano nel prodotto finale (anche per i contenuti che non sono stati progettati specificamente e/o contenuti dinamici). Questa è un'altra area (come la tipografia) in cui vale la pena dedicare più tempo per assicurarsi di fare un buon lavoro.

Sii esigente riguardo agli spazi bianchi e all'allineamento

Questo è un ottimo consiglio per migliorare i tuoi progetti e/o implementare meglio i progetti di altri: se il progetto sembra utilizzare spazi di 20 unità, 40 unità, ecc., assicurati che ogni spaziatura sia un multiplo di 20 unità.

Questo è un modo davvero semplice per qualcuno che non ha occhio per l'estetica per apportare rapidamente un miglioramento significativo. Assicurati che i tuoi elementi siano allineati fino al pixel e che la spaziatura attorno a ogni bordo di ogni elemento sia il più uniforme possibile. Laddove non puoi farlo (come i luoghi in cui hai bisogno di spazio extra per indicare la gerarchia), rendili multipli esatti della spaziatura che stai usando altrove, ad esempio due volte il valore predefinito per creare una separazione, tre volte per crearne di più , e così via.

Molti sviluppatori ottengono questo risultato per contenuti specifici nei file di progettazione, ma quando si tratta di aggiungere/modificare contenuti o implementare contenuti dinamici, la spaziatura può andare dappertutto perché non hanno veramente capito cosa stavano implementando.

Fai del tuo meglio per capire come il designer ha utilizzato gli spazi bianchi e segui questi concetti nella tua build. E sì, dedica del tempo a questo. Una volta che pensi che il tuo lavoro sia terminato, torna indietro e misura la spaziatura per assicurarti di aver allineato e distanziato tutto il più possibile in modo uniforme , quindi prova il codice con molti contenuti variabili per assicurarti che sia flessibile .

Se non sai cosa stai facendo, fai di meno

Non sono una di quelle persone che pensa che ogni progetto dovrebbe usare un design minimalista, ma se non sei sicuro delle tue capacità di design e hai bisogno di aggiungere qualcosa, allora meno è di più.

Il designer si è occupato delle cose principali; devi solo fare piccoli riempitivi. Se non sei molto bravo nel design, allora una buona scommessa è fare il minimo importo possibile per far funzionare quell'elemento. In questo modo, stai iniettando meno del tuo design nel lavoro del designer e lo influirai il meno possibile.

Lascia che il lavoro del designer sia al centro della scena e lascia che il tuo lavoro passi in secondo piano.

Il tempo ci rende tutti pazzi

Ti svelo un segreto sui designer: il 90 percento (o più) di ciò che effettivamente mettono su carta, o su una tela di Photoshop, non è eccezionale.

Scartano molto più di quanto tu abbia mai visto. Spesso ci vogliono molte revisioni e giocherellare con un progetto per arrivare al punto in cui avrebbero persino permesso al ragazzo nel cubicolo successivo di vedere il loro lavoro, non importa il cliente reale. Di solito non si passa da una tela bianca a un buon design in un solo passaggio; ci sono un sacco di iterazioni in mezzo. Le persone raramente fanno un buon lavoro finché non lo capiscono e lo consentono nel loro processo.

Quindi come lo implementi? Un metodo importante è prendere tempo tra le versioni. Lavora finché non sembra qualcosa che ti piace, quindi mettilo via. Dagli qualche ora (lasciarlo tutta la notte è ancora meglio), poi riaprilo e dai un'occhiata. Rimarrai stupito di quanto sia diverso con occhi nuovi. Sceglierai rapidamente le aree di miglioramento. Saranno così chiari che ti chiederai come potresti averli persi in primo luogo.

In effetti, uno dei migliori designer che ho conosciuto porta questa idea molto oltre. Inizierebbe realizzando tre diversi modelli. Quindi aspettava almeno 24 ore, li guardava di nuovo e li buttava via tutti e ricominciava da zero su un quarto. Successivamente, concedeva un giorno tra ogni iterazione man mano che migliorava. Solo quando l'avrebbe aperto una mattina, ed era totalmente felice, o almeno, il più vicino possibile a un designer totalmente felice, lo avrebbe inviato al cliente. Questo è stato il processo che ha utilizzato per ogni progetto che ha realizzato e gli è servito molto bene.

Non mi aspetto che tu vada così lontano, ma mette in evidenza quanto possa essere utile il tempo senza "occhi sul design". È parte integrante del processo di progettazione e può apportare miglioramenti a passi da gigante.

I pixel contano

Dovresti fare tutto ciò che è in tuo potere per abbinare il design originale nel tuo programma finito, fino all'ultimo pixel.

In alcune aree non puoi essere perfetto. Ad esempio, il tuo controllo sulla spaziatura delle lettere potrebbe non essere così preciso come quello del designer e un'ombra CSS potrebbe non corrispondere esattamente a quella di Photoshop, ma dovresti comunque cercare di avvicinarti il ​​più possibile. Per molti aspetti del design, puoi davvero ottenere una precisione perfetta per i pixel. Ciò può fare una grande differenza nel risultato finale. Un pixel fuori qua e là non sembra molto, ma si somma e influisce sull'estetica generale molto più di quanto si pensi. Quindi tienilo d'occhio.

Esistono numerosi [strumenti] che ti aiutano a confrontare i progetti originali con i risultati finali, oppure puoi semplicemente acquisire schermate e incollarle nel file di progettazione per confrontare ogni elemento il più fedelmente possibile. Posiziona lo screenshot sul design e rendilo semitrasparente in modo da poter vedere le differenze. Quindi sai quanta regolazione devi fare per farlo azzeccare.

Ottieni feedback

È difficile ottenere un "occhio per il design". È ancora più difficile farlo da soli. Dovresti cercare il contributo degli altri per vedere davvero come puoi apportare miglioramenti.

Non sto suggerendo di prendere il tuo vicino e chiedere consiglio, voglio dire che dovresti consultare veri designer e lasciare che critichino il tuo lavoro e ti diano suggerimenti.

Ci vuole un po' di coraggio per farlo, ma alla fine è una delle cose più potenti che puoi fare per migliorare il progetto a breve termine e per migliorare il tuo livello di abilità a lungo termine.

Anche se tutto ciò che devi mettere a punto è un semplice segno di spunta, ci sono molte persone disposte ad aiutarti. Che si tratti di un amico designer o di un forum online, cerca persone qualificate e ottieni il loro feedback.

Può sembrare dispendioso in termini di tempo e può causare attrito tra te e i tuoi designer, ma nel grande schema delle cose, ne vale la pena. I bravi sviluppatori front-end si affidano al prezioso contributo dei designer, anche quando non è qualcosa che gli piace ascoltare.

Pertanto, è fondamentale costruire e mantenere un rapporto costruttivo con i tuoi designer. Siete tutti sulla stessa barca, quindi per ottenere i migliori risultati possibili dovete collaborare e comunicare passo dopo passo. Vale la pena investire nella costruzione di legami con i tuoi designer, poiché aiuterà tutti a fare un lavoro migliore ed eseguire tutto in tempo.

Conclusione

Per riassumere, ecco un breve elenco di suggerimenti di progettazione per gli sviluppatori front-end:

• Progettare in un programma di grafica. Non progettare dal codice, nemmeno dalle piccole cose.
• Abbina il design. Sii consapevole del design originale e non cercare di migliorarlo, ma abbinalo.
• La tipografia è enorme. Il tempo che dedichi ad assicurarti che sia giusto dovrebbe riflettere la sua importanza.
• Evita la visione a tunnel. Assicurati che le tue aggiunte si distinguano solo quanto dovrebbero. Non sono più importanti solo perché li hai progettati tu.
• Relazioni e gerarchia: comprendi come funzionano nella progettazione in modo da poterle implementare correttamente.
• Gli spazi bianchi e l'allineamento sono importanti. Rendili precisi al pixel e rendili uniformi in tutto ciò che aggiungi.
• Se non sei sicuro delle tue capacità, fai le tue aggiunte il più minimale possibile.
• Prenditi del tempo tra le revisioni. Torna più tardi per vedere il tuo design lavorare con occhi nuovi.
• L'implementazione perfetta per i pixel è importante ove possibile.
• Sii coraggioso. Cerca designer esperti per criticare il tuo lavoro.

Non tutti gli sviluppatori front-end saranno dei designer fantastici, ma ogni sviluppatore front-end dovrebbe almeno essere competente in termini di design.

È necessario comprendere a sufficienza i concetti di design per identificare cosa sta succedendo e applicare correttamente il design al prodotto finale. A volte, puoi cavartela con la copia cieca se hai un designer completo (e se sei abbastanza orientato ai dettagli da copiarlo veramente pixel per pixel).

Tuttavia, per far risplendere progetti di grandi dimensioni su molte varianti di contenuto, è necessaria una certa comprensione di ciò che sta passando per la testa del designer. Non devi solo vedere che aspetto ha il design, devi sapere perché ha l'aspetto che ha e in questo modo puoi essere consapevole dei limiti tecnici ed estetici che influenzeranno il tuo lavoro.

Quindi, anche come sviluppatore front-end, parte del tuo normale miglioramento personale dovrebbe sempre includere l'apprendimento di più sul design.