r/italy•
muiHurst

Come diventare front-end developer?

AskItaly

Sono programmatore Java backend da qualche tempo e ho maturato esperienza, competenza e qualche certificazione. Ci sono momenti in cui mi dico "Oh guarda te! Sto linguaggio/framework/libreria XYZ va tanto, che sarà mai?" Allora mi procuro il mio bel testo omnicomprensivo "The XYZ bible", o meglio ancora references ufficiali, language specification e quant'altro. E da lì in poi è tutta questione di pazienza, le informazioni le ho, vanno solo studiate e mi riesce abbastanza bene. La cosa che invece non mi è mai riuscita è produrre un sito che a guardarlo non ti procuri conati, spasmi o corse al cesso da centometrista. Sarà la mia formazione prettamente tecnica, ma sono arrivato alla conclusione di non avere il senso del "bello", almeno in questo genere di cose. Ho buttato giù un sitarello in drupal, modificato il layout base, ci ho speso giorni, settimane... esteticamente terribile, e la cosa bella è che me accorgo sempre alla fine, non sia mai che sia in grado di correggere il tiro in corso d'opera. Come si acquisiscono questo genere di capacità? Come faccio a rendermi conto che un header è più gradevole se sfumato da rosso a bianco, da sinistra a destra, con gli angoli arrotondati, staccato o meno dal body... Che tipo di preparazione ha un "frontendista"? Hanno una preparazione da accademia d'arte o simili? È semplicemente un mio difetto, una mia naturale incapacità con cui convivere?

Posted Jun 3, 2015, 10:47 PM UTC

821
-yenn-•

credo che vada fatta una differenza tra web designer e frontend developer, che non sono assolutamente la stessa cosa:
in una società civile, il frontend lavora sui mockup (o al max HTML e CSS) del webdesigner, poi integra, templatizza etc etc etc. ma capisco che spesso le due figure si fondono.

Se vuoi nozioni sul bello, sappi che cambia periodicamente e devi inseguirlo e tenerti aggiornato, è molto soggettivo e devi sempre mirare a un target, ma ha comunque dei fondamenti di base che rispettati quelli puoi giocare di fantasia.

studiati la proporzione aurea e come viene applicata nel campo del design, e la gestione degli spazi vuoti (molto importante), studiati le ultime novità in campo di webdesign (material, metro, flat etc) e fai tesoro delle cose migliori che trovi studiandole, scaricati template e smontali per capire come sono fatti, impara il CSS come la bibbia perchè ha enormi potenzialità spesso sconosciute.
Seguiti la conferenza di quando viene presentata la nuova interfaccia di questo o quel sito, e chiediti perchè abbiano fatto determinati cambiamenti, in generale leggi articoli aggiornati sull'argomento.

questo per quanto riguarda la UI, poi c'è la UX che è un altro paio di maniche, ma viaggiano sempre insieme.
per la UX ti consiglio di leggere sempre cose aggiornate, mai vecchi testi accademici che in molti ti consiglieranno, cerca di pensare da utente medio e non da sviluppatore e neanche da sviluppatore utente, se puoi fai provare il tuo sito a qualcuno che non capisce un cazzo di come viene fatto un sito e se non hanno difficoltà stai prendendo la strada giusta.

source: sono un visual designer a tutto tondo, ho iniziato 11anni fa in accademia di belle arti, fatto un master grafica pubblicitaria e advertising, ho avviato una piccola agenzia di design e comunicazione visiva, ho imparato il web design facendolo, ora sono direttore creativo di una piattaforma web.

un altro paio di link utili:
http://thenextweb.com/dd/2013/08/17/13-ux-design-practices-startups-shouldnt-overlook/
http://www.bjfogg.com/

ne avrei altri da condividere ma non sono nei preferiti, se li trovo te li linko.

13
muiHurstOP•

Devo dire che nella mia idea di frontend non distinguevo neanche le figure di webdesigner e developer, l'azienda in cui ho lavorato non è granchè strutturata, o meglio non esistono ruoli così definiti da farti un'idea di come le cose dovrebbero funzionare.

La cosa che mi proprio mi spiazza è l'approccio diverso, meno metodico, nell'imparare e nel mantenersi aggiornati, motivo per il quale prendo nota di tutte le risorse che mi hai linkato, quindi...

ne avrei altri da condividere ma non sono nei preferiti, se li trovo te li linko.

te ne sarei grato!

2
segolas•

Sei programmatore, non designer.

Prima te ne rendi conto migliori saranno i sito.

Quinda vai on line e compra un template. Per joomla/drupal si trovano a 25 euri

4
muiHurstOP•

Parole sante, me lo sono detto tante volte, soprattutto dopo aver perso tempo inutilmente dietro i template di qualsivoglia CMS cercando di produrre qualcosa di accettabile.

Sai qual è il punto? Che una parte di me dice: "Sei un cazzo di sviluppatore, va e fatti il tuo sito, dovresti essere in grado di farli da solo, i siti, e venderli magari. Non comprarli!"

L'altra parte di me invece: "Sei un cazzo di sviluppatore, occupati della sostanza, non dell'estetica. Devi fare un blog/sito? Comprati un template discreto, perdi tempo nei contenuti."

Forse sono un po' pretenzioso a credere di poter rendere bene nel design di un sito, mi rendo conto che ci sono figure che fanno quello di mestiere, ci hanno studiato, si sono specializzate e bla bla bla.

D'altro canto a volte mi sembra una spiegazione di comodo, e penso che in realtà la mia è solo pigrizia.

Convivo con queste due anime, insomma.

2
segolas•

Nkn è pigrizia. È mancanza di conoscenza su di un certo argomento che non è di tua competenza.

Sai scegliere i font? I colori? E abbinarli? Io sto imparando ira la teoria del colore (applicata alla pittura ma è uguale) e solo a fine anno hi fstto qualcosa di decente.

Non credere che basti un week end di duro lavoro.

Poi ricorda che si tratta di lavoro. Bisogna massimizzare il profitto e minimizzare lo sforzo.

Se uno vuole un blog io gli metto wordlress, un buon template e con poca spesa e poco tempo soddisfo il cliente. Che è quello che conta.

1
tomzen•

Parlo dal punto di vista opposto, designer che fa anche frontend e altre cosette con codice: Il layout del sito va pianificato prima di cominciare a scrivere codice, parti da wireframe per la struttura, poi vedi un po' di siti che hanno soluzioni che ti piacciono e parti da li. Per le palette colori puoi guardare sul sito di adobe kuler (se esiste ancora). Ma in genere ti consiglierei di fare qualcosa sempre il più semplice possibile graficamente parlando, e poi eventualmente aggiungerci dettagli

3
muiHurstOP•

Ecco, tu ad esempio che background hai? Che tipo di studi alle spalle, se ne hai (accademici, ovviamente, non scuola dell'obbligo =) )

1
tomzen•

Sono information designer, aka grafico specializzato principalmente su contenuti data driven/ data journalism. Ho studiato disegno industriale alla triennale e specialistica in grafica, però negli ultimi tempi mi sono avvicinato parecchio al coding (principalmente frontend e d3.js nello specifico) perché mi piace parecchio!

Quindi per la progettazione di un qualsiasi contenuto web il mio punto di partenza è l'idea che ho del risultato e poi smanetto/smadonno col codice per arrivarci

1
tekanet•

Non è una tua naturale incapacità, temo sia una generalizzata normale incompatibilità di caratteristiche: banalizzando, il backend fa leva su caratteristiche tecniche, il frontend sulla creatività e il gusto estetico.

Non so se la divisione "emisfero destro - sinistro" sia supportata dalla scienza o solo una credenza popolare, fatto sta che è evidente che alcune persone siano più artistiche che tecniche e viceversa, non fosse altro per i loro percorsi formativi.

Da tecnico mi sono rassegnato in questi casi a copiare spudoratamente. Ma senza metterci del mio, perché quella virgola che ci metto fa puntualmente schifo.

Di contro: daresti in mano il backend di una tua applicazione ad un creativo? ;)

2
cancrena•

Un mio amico designer della comunicazione fa gran bei siti internet con le più moderne librerie javascript. Non sa programmare, ogni volta che vedo il suo codice una parte di me muore.

1
uomoLampione•

Non so se la divisione "emisfero destro - sinistro" sia supportata dalla scienza o solo una credenza popolare, fatto sta che è evidente che alcune persone siano più artistiche che tecniche e viceversa, non fosse altro per i loro percorsi formativi.

Da tecnico mi sono rassegnato in questi casi a copiare spudoratamente. Ma senza metterci del mio, perché quella virgola che ci metto fa puntualmente schifo.

Il discorso che fai è un parte vero, ma non ti credere che i creativi creano da zero, in realtà copiano tantissimo. Basta vedere Awwwards, i siti si somigliano un po' tutti tranne qualche eccezione, sono sempre immagini/video sparati a tutto schermo con molte animazioni css3/js.

1
canecheparla•

Ero (e sono costantemente) nella stessa barca, per me è stato utile:

  • Esercitati copiando i siti o i temi che che ti piacciono di più, puoi trovare ottimi spunti su Awwwards, Bootstrap Expo,
  • Analizza i siti che ti fanno più schifo e capisci perchè fanno cagare
  • Utilizza schemi di colori già fatti (ne trovi a vagonate su Adobe Color (ex Kuler)
  • Be minimal, non utilizzare troppi font e colori diversi
2
tomzen•

Su bootstrap expo c'è il mio sito, lol

1
MonsieurCellophane•

Il senso estetico si sviluppa. Il gusto si affina. Le tecniche compositive si studiano - con impegno dedicandoci tempo e fatica. E alla fine 7/10 il tuo tentativo farà cagare lo stesso, ma avrai un'idea del perché e qualche indizio su come migliorarlo. Ars longa, vita brevis

2
absBB•

Credo che il gusto sia una cosa che si sviluppi col tempo, il mio consiglio è di assimilare più materiale possibile, così da allenare l'occhio al "bello", parti dai lavori degli anni 60/70 per capire le origini della materia e in seguito documentati sulle nuove tendenze (cosa essenziale nello sviluppo web).

Per capire a grosso modo cosa va al momento dai una lettura (anche approssimativa) alle guidelines di Google per il Material Design, sono ottime e se ben applicate forniscono dei risultati esteticamente belli e allo stesso tempo intuitivi. " Less is more", niente di più vero oggi giorno.

Per capire cosa va invece tra i designer utilizza Dribbble, è aggiornato al minuto e si trova parecchio materiale da cui prendere spunto.

Un altro sito che potrebbe interessarti è Grafigata, trovi molti articoli sulle basi della grafica. (In particolare l'abbinamento dei font e in genere tutti gli articoli sul branding attirano la mia attenzione)

Parlando di lato pratico, utilizza un framework tipo Bootstrap o Foundation, integrano dei stylesheet precompilati che, oltre a velocizzare di molto lo sviluppo, restituiscono delle pagine con una controparte visiva "accettabile".

Poi se vuoi andare ancora di più sul tecnico chiedi pure, per quanto io mi possa definire uno sviluppatore client-side mi interesso anche di Front-End e col passare degli anni ho accumulato qualche conoscenza sul argomento.

1
muiHurstOP•

Giusto una curiosità, hai qualche idea di quant'è usato Bootstrap nel panorama italiano? Credi che valga la pena passare del tempo a giocarci un po', che dia un valore aggiunto al mio bagaglio, insomma?

1
absBB•

Parecchi grafici che conosco lo usano come base di partenza per i loro progetti, utilizzando i fogli di stile e gli script JS forniti nel framework si possono ricavare risultati "accettabili", ma sicuramente non per un grafico degno di questo nome. Con il materiale che il framework fornisce di base si può ottenere un sito responsive (Cosa decisamente importante al giorno d'oggi) con una grafica diciamo poco accattivante ma che comunque fa la sua sporca figura. Ovviamente per ottenere buoni risultati vanno riscritti i fogli di stile, implementati nuovi script, volendo anche altri framework e così via. Comunque dopo qualche tempo che ci fai caso si notano da subito i siti realizzati con questo tipo di framework, condividono tutti un layout simile.

0
_samux_•

allora,butta via drupal che è sicuro come un preservativo bucato e prova a fare due pagine due di html puro e semplice. buttaci dentro bootstrap e impara ad usarlo partendo da consigli semplici che trovi in giro e lui è un ottimo punto di partenza.

in alternativa passa a fare <table> innestate in <table>, spedisci il tuo sito ad amici designer / frontendisti e guardali schiumare dopo che han fatto ctrl+u
:-)

1
muiHurstOP•

Su Drupal mi ci ero lanciato perchè si fa un gran parlare di CMS vari, volevo sbirciare un po' e Wordpress mi sta troppo sulle balle.

Bootstrap me lo state nominando in tanti, ne ho sentito parlare anche all'estero, da aziende intendo, magari è arrivato il momento di prendere qualche libro in mano.

1
poolastar•

La cosa che invece non mi è mai riuscita è produrre un sito che a guardarlo non ti procuri conati, spasmi o corse al cesso da centometrista. Sarà la mia formazione prettamente tecnica, ma sono arrivato alla conclusione di non avere il senso del "bello", almeno in questo genere di cose.

Se tu fossi privo di senso del bello non saresti in grado di capire che il tuo layout fa cagare, no?

0
muiHurstOP•

Se tu fossi privo di senso del bello non saresti in grado di capire che il tuo layout fa cagare, no?

Hai presente quando ascolti una canzone di merda, lo capisci, lo riconosci e la eviti? E però allo stesso tempo (magari da musicista dilettante) non sapresti produrre nulla di meglio?

Ecco, aggiungici frustrazione, e il quadro è completo.

Magari ho gusto nel giudizio ma non nella realizzazione... magari sono la stessa cosa ed è solo la tecnica a fare la differenza. Non saprei...

1