Come un unico ingegnere front-end può sostituire un team di due

Pensare con due menti

La domanda all'interno della scena del web design è cambiata negli ultimi anni: designer con competenze front-end e sviluppatori front-end con capacità di progettazione sono sempre più richiesti. Sì, si potrebbe obiettare che i lavori sono completamente diversi, e forse uno di questi non ti piace, ma a dire il vero, nei miei sei anni come sviluppatore web freelance e dodici anni come designer, ho imparato che è molto più difficile cavarsela come semplice web designer o solo sviluppatore front-end che come ingegnere front-end che conosce entrambi i ruoli.

Indossare entrambi i cappelli ha molti vantaggi: dal solo punto di vista professionale, puoi trovare lavoro più facilmente e addebitare una tariffa più alta perché stai portando di più in tavola.

Ma lavorare come ingegnere front-end ibrido presenta anche alcuni svantaggi che devi conoscere e come aggirarli. Come designer creativo, utilizzerai il tuo "cervello destro", la metà responsabile delle informazioni visive, spaziali e percettive, in altre parole, tutte le cose belle nel web design. Come sviluppatore tecnico di front-end utilizzerai il tuo "cervello sinistro", il partner logico e analitico del tuo pazzo artista sulla destra.

E, dal momento che sei solo una persona, questo significa che stai facendo due lavori completamente diversi allo stesso tempo, con lo stesso cervello, e questo può creare confusione per il tuo cervello. Se non riesci a gestirlo, non produrrai un lavoro di qualità o non raggiungerai il tuo pieno potenziale. E, se sei un libero professionista che cerca di essere all'altezza di una descrizione del lavoro di ingegneria front-end ibrida, probabilmente stai gareggiando contro un team di due (sviluppatore e designer), quindi dovrai lavorare nello stesso lasso di tempo mentre mantenendo la qualità. (Certo, puoi anche essere pagato come se fossi una squadra di due!)

Sapere quale parte del tuo cervello usare e quando usarla è la chiave per snellire i tuoi processi e produrre i migliori risultati con zero frustrazioni e molto tempo da dedicare alla tua scadenza. Indipendentemente da dove ti mancano, a sinistra oa destra, questo post ti aiuterà a capire le abilità di cui hai bisogno e i modi in cui puoi acquisirle.

Una notte con il tuo progetto

Ok PRONTO? Grande! Diciamo che ti è stato chiesto di progettare il sito per miniCloud, una startup in erba che offre soluzioni VPS personalizzate. Da dove inizi?

Prima di iniziare qualsiasi lavoro "reale" su un progetto, mi piace andare a letto con esso. Ciò significa fare ricerche approfondite sul prodotto, sui servizi, sulla concorrenza, ecc. del tuo cliente. In breve, fallo su Google. Dopodiché, pensa al progetto tutto il giorno: come sarà quando avrai finito? Portalo a cena e addormentati pensando al tuo nuovo design sexy. Durante questa fase, tieni sempre pronta una matita (o un cellulare) per annotare le idee man mano che ti vengono in mente. Questo tipo di lavoro mentale di solito aiuta a definire gli aspetti chiave del tuo processo.

Lascia che i tuoi succhi creativi scorrano: il processo di progettazione

Ora che hai alcune idee su cui costruire, è il momento di iniziare il vero processo di progettazione. Si compone di tre passaggi: 1) schizzo, 2) wireframe e 3) grafica. Questa è la parte in cui lasci che la metà artistica del cervello faccia le sue cose e impazzisca con matita, carta e Photoshop.

Durante questa fase di progettazione, è fondamentale lasciare che il tuo lato "sviluppatore" ti tenga sotto controllo in modo da non impazzire con alcuni aspetti del sito Web che sarà quasi impossibile ricreare rapidamente utilizzando HTML, CSS e jQuery. Se provi a reinventare il browser, il tuo sviluppatore front-end ti odierà per questo. E il tuo sviluppatore front-end sei tu, ricordi?

Quindi, lasciati guidare dalle migliori pratiche del web design (e da un po' di buon senso), perché è altamente improbabile che tu possa aprire nuove strade riprogettando il sito Web dell'abito da sposa del tuo amico. Questo non vuol dire che non dovresti mirare a creare un design fantastico e impressionante. Ma piuttosto, inventa qualcosa che sai essere fattibile. I progetti che reinventano il web di solito vengono realizzati nel tuo tempo libero senza scadenze che pendono sopra la tua testa.

1. Schizzo : Comincio con un quaderno di carta a quadretti e un paio di matite. La carta a quadretti è particolarmente adatta perché puoi usarla per i disegni a griglia. Non avrai problemi in seguito quando tradurrai il tuo schizzo in wireframe e, alla fine, in un sito Web basato su griglia. Per miniCloud, il nostro schizzo potrebbe assomigliare a questo:

Tieni presente che ulteriori dettagli sullo schizzo, come neve, uccelli e nuvole, sono il prodotto della mia procrastinazione e non sono obbligatori in nessuna parte del processo di progettazione, ma hanno un bell'aspetto.

 <div class="pop_out_box is-full_width"> <b>Personal tip</b>: There are some great resources online where you can download and print sketch sheets. One of my favorites is <b><a href="http://sneakpeekit.com/wireframe-sketchsheets/">sneakPeekit</a></b>. They also have sheets for mobile and tablet design. </div>

1. Wireframe : ora che abbiamo un'idea di base di come apparirà il nostro sito, è il momento di creare wireframe che possiamo mostrare al cliente. Ci sono molti modi per farlo. In alcuni casi, puoi saltare completamente il passaggio se ritieni che non sia necessario. Personalmente, uso Photoshop per wireframe la mia idea poiché è lo strumento con cui ho più familiarità. Ci sono molti kit wireframe gratuiti in .EPS o .PSD che ti consentono di iniziare in pochi secondi, quindi non è necessario creare e disegnare tutti i tuoi elementi da zero. Ci sono anche alcune soluzioni online se vuoi evitare Photoshop, ma io sono più un tipo offline. Ad ogni modo, espandendo il nostro schizzo, potremmo eseguire il wireframe del nostro sito Web in questo modo:

1. Grafica : questa è la mia parte preferita: trasformare il nostro wireframe in un bellissimo sito web. Ma non tutti sono me. Se sei principalmente uno sviluppatore e non hai talento per il design, i colori, la tipografia, ecc., ti suggerirei di iniziare con altri siti Web per l'ispirazione del design. Ce ne sono molti e sono pieni di grandi idee: chissà, forse c'è un designer in te che aspetta solo di uscire allo scoperto? Trovo utile mantenere una cartella dei segnalibri dei siti Web che trovo particolarmente belli o ben progettati. Picasso (?) ha detto: "I bravi artisti copiano, ma i grandi artisti rubano" - questo non significa che prendi il design di qualcun altro e ci metti sopra il tuo adesivo. Invece, lasciati ispirare dal lavoro di qualcun altro e aggiungi il tuo tocco e approccio ad esso.

Faccio tutta la mia progettazione in Photoshop. Idealmente, il tuo cliente ti fornirà le materie prime con cui lavorare, come fotografie e testo da copiare che puoi utilizzare al posto dei segnaposto. Sembra molto meglio quando lo invii alle revisioni.

 So, for step three, we take our wireframe and bring it to life: 

A proposito: se finisci per usare Photoshop, ci sono molte risorse interessanti là fuori che renderanno il tuo processo molto più veloce, come plug-in e stili. Potrei scrivere un intero post su di loro da solo, quindi ne indicherò solo alcuni che uso spesso.

1. CSS3Ps : plug-in gratuito di Photoshop basato su cloud che converte i tuoi livelli in CSS3.
2. Divine Elemente : crea temi WordPress direttamente dai tuoi PSD. È ottimo per avviare rapidamente il tuo progetto WordPress. Anche se dicono "Nessuna abilità HTML richiesta", ne avrai effettivamente bisogno se vuoi ottenere risultati fantastici.
3. Motivi sottili : raccolta di motivi gratuiti da utilizzare nei tuoi progetti, di solito come sfondi. Dettagli come questi fanno la differenza quando cerchi di trasformare i tuoi progetti da buoni a fantastici.

"Slice It Up": il processo front-end

Dopo aver terminato la fase di progettazione e aver ricevuto l'ok dal cliente soddisfatto, sono pronto per trasformare le mie immagini statiche in siti Web live. Ricorda, a questo punto, il nostro design è ancora proprio questo: un design. Abbiamo ancora molta strada da fare prima che sia pronto per il web.

A questo punto, è il momento di usare la metà sinistra e più analitica del cervello.

Nel mondo del web design, ci riferiamo a questo processo come "slicing". Sebbene il termine fosse più accurato qualche tempo fa, prima che CSS diventasse il principale elemento costitutivo visivo del web e dovessi tagliare ogni piccolo pezzo del tuo PSD o PNG e metterlo in terribili tavolini, è rimasto bloccato.

Se sei un web designer e non sai ancora come 'front-end', sei fortunato, perché la programmazione può essere appresa (a differenza di avere un talento naturale per il design). Ti consiglierei di investire in alcuni tutorial video online come Lynda.com e di approfondire le basi dello sviluppo front-end. (Un elenco più definitivo delle risorse può essere trovato qui.) In poche ore, passerai da zero alla lettura del codice. E nel giro di pochi giorni lo scriverai tu stesso. E in un paio di mesi diventerai un maestro di HTML e CSS, quindi non c'è modo di fermarti quando si tratta di lavori di ingegneria front-end.

Ora, se hai creato dei fantastici wireframe (nella fase precedente) secondo una griglia con cui ti senti a tuo agio, saprai esattamente come vuoi che il tuo sito sia codificato. Il modo più rapido sarebbe utilizzare una sorta di framework front-end, come Bootstrap.

Una volta appresa la progettazione basata su griglia, inizierai a vedere ogni parte del tuo sito Web come un insieme di righe e colonne. La prima cosa che faccio quando imposti la mia struttura HTML, prima di aggiungere qualsiasi contenuto reale o CSS, è scrivere nelle righe, quindi nelle colonne, quindi elementi di base come la navigazione, seguiti da segnaposto di testo e immagini. Ciò ti consente di ottenere prima la struttura di base e di costruire da lì. Guardando questo wireframe, possiamo vedere sei righe:

1. Logo / Navigazione
2. Dispositivo di scorrimento dell'immagine
3. Testo introduttivo
4. Immagini di categoria
5. Ultime notizie/offerte
6. Piè di pagina

Dopo averli inseriti nella struttura HTML di Bootstrap, avremmo qualcosa del genere:

Molti siti Web di base utilizzano lo stesso codice (o simile) e man mano che lavori su sempre più progetti, vedrai che lo sviluppo di siti Web è in gran parte un processo iterativo e non ha senso scrivere lo stesso codice su ogni iterazione . Ecco perché i framework sono utili! Che tu ne abbia creato uno tuo o abbia deciso di utilizzare Bootstrap o Foundation, non importa. L'importante è che tu possa mantenerlo in un secondo momento ed espanderlo se necessario.

Quasi tutto ciò di cui hai bisogno per un progetto è stato realizzato prima e poi rifatto un paio di volte. Quindi, per qualsiasi compito importante, cerca in giro e chiedi agli altri se hanno suggerimenti prima di andare a capofitto attraverso un muro. La maggior parte dei grandi framework ha comunità molto attive che creano codice aggiuntivo e plug-in per semplificare il tuo lavoro. Quindi lavora in modo intelligente, non duro e impara ogni giorno. E, se hai bisogno di qualcosa che nessuno ha costruito prima, allora stai aprendo un nuovo terreno! Scrivici e condividi con la community: ti aiuterà a crescere come designer e sviluppatore.

La scelta di un CMS

Per alcuni progetti di ingegneria front-end, avrai finito non appena il tuo design sarà disponibile su una pagina web live. Di solito si tratta di siti più piccoli (ad es. per piccole imprese, avvocati, dentisti, ecc.). Ma spesso, tu o il tuo cliente vorrete avere il controllo sul contenuto del sito web. In tal caso, è necessario un Content Management System (CMS). L'obiettivo di un CMS è quello di consentirti di modificare e pubblicare contenuti su una pagina Web senza dover codificare manualmente ogni nuovo dettaglio o addirittura codificare.

Di tutti i grandi CMS, mi definirei un evangelista di WordPress: ne sono entusiasta agli altri sviluppatori, in particolare ai principianti, per la sua versatilità, facilità d'uso, documentazione completa per lo sviluppo, grande comunità, gran numero di plug-in gratuiti, E così via e così via…

Se qualcuno ti dice che Joomla! è meglio, soprattutto per i progetti più piccoli, quindi non sanno di cosa stanno parlando. Ad ogni modo, non credermi sulla parola: scarica WordPress e Joomla! temi iniziali, dai un'occhiata a ciascuna cartella e poi chiediti: quale desideri esplorare nel tuo nuovo ruolo di front-end?

Avrei bisogno di un intero articolo per scrivere su questo argomento, ma fidati di me su questo proprio come ti fideresti di Baz Luhrmann sulla crema solare.

Se il tuo progetto è particolarmente piccolo e hai solo bisogno di un semplice CMS che può essere implementato senza alcuna abilità di codifica, ti consiglio di utilizzare CouchCMS. Con solo un paio di tag XHTML, puoi farlo funzionare in pochi minuti e anche tua nonna saprà come usarlo.

Manutenzione del tuo sito web

Dopo aver consegnato il tuo sito web e hai un altro cliente soddisfatto, tutto ciò che ti resta da fare è mantenere il sito. Se hai creato un semplice sito HTML che non avrà nuovi contenuti, probabilmente hai finito.

Se hai utilizzato un CMS, dovrai assicurarti che la tecnologia sia sempre aggiornata in modo da evitare qualsiasi violazione della sicurezza. Ciò include il CMS stesso e tutti i plug-in utilizzati. Se hai seguito il mio consiglio e hai utilizzato WordPress, riceverai una notifica via e-mail per ogni aggiornamento disponibile.

Questo è il campo di battaglia del mio processo. Certo, questo non funzionerà per tutti e certamente non si applicherà a tutti i progetti. Ma spero che questo aiuti i designer là fuori ad acquisire le competenze necessarie per diventare grandi ingegneri front-end e viceversa, in modo che possiamo continuare a far crescere i nostri talenti come sviluppatori front-end.

Posso solo mostrarti la porta. Sei tu quello che deve attraversarlo. - Morfeo, la Matrice

PS: puoi trovare un PSD del modello sopra e altri fantastici design nel mio portfolio di dribbble.