Nel nostro percorso tra le varie competenze che un Full Stack Designer deve possedere siamo arrivati nel campo del web design. Il web design è influenzato dai principi del Graphic Design con cui condivide alcune regole fondamentali; ma vi sono alcune differenze sostanziali. Il mezzo con cui navighiamo su internet è uno schermo di forma rettangolare, mentre la navigazione vera e propria avviene grazie ad un software che tutti noi abbiamo installato sui PC che si chiama browser.
Web Design: gli aspetti principali
Questi due aspetti definiscono sostanzialmente il modo con cui possiamo utilizzare i siti web e di conseguenza costituiscono il concetto stesso di web design.
Questa è la ragione per cui vi sono delle regole chiare in questo mondo.
1)Navighiamo nei siti attraverso uno scrolling verticale, dall’alto verso il basso e questo avviene tramite uno schermo formato da pixel.
2)Il browser è un software che fa da ponte tra il nostro e un altro pc che può essere ubicato in qualsiasi parte del mondo, che in termini tecnici si chiama server. Il suo compito è quello sia di permettere il collegamento tra client (lo stesso browser) e server e di tradurre in modo visivo i linguaggi HTML, CSS e Javascript.
Perché non sono partito subito parlandovi dei vari linguaggi e di come questi vengono renderizzati dal browser?
Secondo me è fondamentale capire che il mezzo con cui fruiamo dei contenuti web permette subito di definire quali siano i limiti stessi del web design.
Non esploriamo un sito in diagonale o in orizzontale se non raramente. Lo fruiamo sempre in verticale all’interno di un rettangolo (lo schermo). Questa semplice considerazione è la base da cui partire.
Dobbiamo sempre pensare al sito web come ad una sorta di contenitore di blocchi rettangolari posti uno dopo l’altro verticalmente. In realtà un web designer è un costruttore di blocchi rettangolari.
Creiamo rettangoli che per quanto belli e fighi rimangono sempre rettangoli 😀
Ci sarà sempre una parte di ricerca e di studio riguardo il mercato di riferimento del cliente e dei suoi utenti, ma la creatività sarà sempre limitata dal medium in cui sarà fruito il sito.
Un ipotetico Graphic Designer che si approccia a questo mondo vedrà subito le differenze tra il suo mondo e quello del web.
Web Design: che cosa bisogna conoscere?
Dopo questo punto fondamentale possiamo passare alla parte tecnica che ogni web designer deve sapere per considerarsi tale. Qui entrano in gioco diversi termini tecnici che ad un primo impatto possono spaventare, ma che in realtà sono molto semplici.
Partiamo dai linguaggi.
1) HTML (hyper text markup language) è il linguaggio base con cui si viene in contatto per la prima volta. Linguaggio di marcatura che permette di strutturare il sito web nelle sue fondamenta. Possiamo pensarlo come allo scheletro del nostro sito, così importante da essere preso come riferimento per l’indicizzazione sui motori di ricerca dai bot di Google.
2)CSS è l’acronimo di cascading style sheet ed è il linguaggio usato per rendere visivamente gradevole il nostro sito. Senza il css tutti i siti sarebbero uguali… con buona pace del marketing 😀
Per farvi un esempio questo è il primo sito della storia. Notate una certa somiglianza con Wikipedia? Infatti Wikipedia non brilla certo per la sua grafica all’avanguardia che però è sicuramente funzionale al suo scopo.
Se volete rifarvi gli occhi i siti su Awwwards e Siteinspire vengono usati come riferimenti estetici nell’industria del web design.
3)Javascript è un linguaggio di programmazione. Questo linguaggio in realtà è prerogativa del Front End Developer, ma l’ho voluto inserire tra le competenze del Web Designer perché almeno la base bisognerebbe saperla.
L’apprendimento di Javascript comporta lo studio di tutta una serie di principi legati alla programmazione che devono essere fatti propri per poter sfruttare al meglio questo linguaggio.
Come detto, al Web Designer non spetta la parte vera e propria di programmazione del sito, ma sapere la base aiuterà sicuramente la comunicazione tra lui e il Front End Developer.
Se volete iniziare a studiarla vi consiglio di partire approcciandovi nel modo giusto, focalizzando la vostra attenzione sugli aspetti principali del nostro ambito come, per esempio, la modifica del DOM (document object model). Dunque bisognerà studiare le fondamenta di Javascript come variabili, operatori, tipi di dati, funzioni, loops per essere in grado di modificare il front end del nostro sito.
A riguardo vi comunico due siti molto utili per apprendere questo linguaggio: https://javascript.info/ e https://watchandcode.com/
Quest’ ultimo punto è sicuramente il più difficile da padroneggiare. La programmazione richiede ore e ore di studio e applicazione e non si finisce mai di apprendere.
Il mercato richiede sempre più figure in grado di sviluppare applicazioni con codice Javascript e infatti vi troverete molto spesso ad incrociare il termine tecnico Front End Developer.
Ma chi è il Front End Developer?
É uno sviluppatore che traduce in codice l’aspetto grafico e le funzionalità ideate e creata dall’UI designer.
A questo punto vi starete chiedendo: “Ma non è la stessa cosa che fa il web designer?”
No, non sono la stessa cosa.
Generalizzando, il web designer è sempre un designer, ovvero un progettista, che con le sue competenze è in grado di definire l’architettura e l’aspetto grafico di un sito per un determinato buyer persona. Inoltre ha a cuore anche gli aspetti di accessibilità di un sito. (https://www.w3.org/WAI/fundamentals/accessibility-intro/)
Possiamo affermare che il suo compito è quello di comunicare con l’UX e l’UI designer nel processo che lo porterà a tradurre il mockup definitivo in html e css. Per quanto riguarda le sue competenze in fatto di programmazione possiamo dire che esse siano limitate al solo inserimento di script Javascript per attivare determinate funzioni come un lightbox o un carosello.
Un front-end developer invece non è un progettista ed è un esecutore che traduce un mockup e specifiche funzionalità in codice. Una figura che deve solo tradurre e a cui tutta la logica di mercato che è stata fatta a monte non interessa. In poche parole a lui non interessa se esce un popup viola o verde, lui creerà il migliore codice possibile per ottenere ciò.
Sono dunque due figure diverse che però non sempre vengono chiamate in causa.
Se il progetto è grosso ed importante sia il Web Designer che il Front End Developer saranno chiamati a cooperare, mentre se si tratta di progetti locali a basso budget verrà richiesta molto probabilmente la professionalità del Web Designer.
Per questo motivo la figura ibrida del Full Stack Designer è e sarà la figura del futuro, un designer capace di tradurre l’aspetto di ricerca/creativo di un progetto in codice perfettamente chiaro e funzionante.