La complessità di una professione come quella del web designer è paragonabile al famoso racconto di Poe una discesa di maelstrom dove turbinose correnti d’acqua si intersecano per formare gorghi terrificanti antidiluviani. Si potrebbe semplificare tutto con il “web design è quando ti occupi del front-end” oppure “quando sei in grado di di progettare interfacce user friendly e quando faciliti con il tuo lavoro la user-experience per conversioni e gorghi altrettanti insidiosi a quelli di Poe basati sul funnel marketing”. E sulla responsività come la mettiamo? Non puoi definirti un web designer se non conosci la responsività su tutti i dispositivi laptop, desktop mobile e chi più ne ha più ne metta. Non puoi definirti un web designer se non sei in grado di produrre grafica ottimizzata per il web o in grado di mettere in piedi video o script che servono per l’interattività con l’utente. E gli strumenti? Devi conoscere css, html, bootstrap, jquery, javascript per definirti un professionista front-end e oggi neanche basta più perchè sempre più aziende richiedono react, angular, viu e librerie varie e assortite che lavorano anche su righe di comando e che pressuppongono quindi tutta una serie di strumenti aggiuntivi lato server o di gestione della condivisione come GIT per esempio. Sempre facendo attenzione ai capisaldi di accessibilità e di usabilità, dall’ uso dei colori all’ uso funzionale degli elementi da usare nella pagina. Il lay-out è responsivo? E gli spazi hosting e gli ftp li sai usare? Sai gestire un tuo sito? E quale editor di codice devo usare? Brackets? Notepod++? Sublime text? Atom o Visual studio code? Blocco note? E devo imparare tutti i tag e i codici a memoria? O è meglio sperimentare, cercare le informazioni che servono usando i criteri di flessibilità proposti dalle reference della tecnologia che stiamo usando per essere indipendenti? E’ un mondo difficile quello che stiamo sviscerando, senza la pratica non puoi fare questo lavoro o meglio senza tanto tanto tanto lavoro sul codice puoi solo miagolare nel buio. Il mestiere si impara facendo come dicono i maestri! Concentriamoci quindi sulla logica strutturale piuttosto che sulle rigide implementazioni di codice basate sul copia e incolla! Chiariamo subito un punto sull’ editor di codice, i maestri consigliano l’uso di ATOM, indirizzo web per il download https://atom.io/ . Qui è possibile installare numerosi plug-in funzionali, come emmet che facilita la scrittura di blocchi di codice, oppure i pacchetti per i colori o quelli per la preview. Poi per l’ispezione di una pagina web dobbiamo usufruire degli strumenti per sviluppatori che tutti i browser hanno con l’opzione tasto destro scegliendo la voce ISPEZIONA. Anche visualizza sorgente pagina raggiungibile da tasto destro serve molto come strumento allo sviluppatore front-end. Per Chrome si consiglia l’installazione del pacchetto color-picker per la gestione dei colori nella sezione estensioni. Sulla creazione di grafica gli esperti consigliano la registrazione al superpotentissimo sito https://www.canva.com che permette la personalizzazione di varie grafiche in vari formati per diverse tipologie e categorie con opzioni per lavorare in team e caricare le proprie immagini dal pc. Dopo aver creato il nostro account possiamo avere a disposizione la nostra dashboard personalizzata, un sito ricco di funzionalità e di risorse! Un altri sito per generare grafica funzionale performante è https://gravit.io/ ; rispetto alla web app precedente qui ci sono meno opzioni preconfigurate ma la libertà creativa è più ampia; anche https://editor.method.ac/ è da menzionare con degli elementi di base da personalizzare per la creazione di grafica decente. Ok questo per la parte on-line. E se volessi solo ritagliare o fare un fotoritocco, cambiare formati e ottimizzazione? Allora se non vuoi utilizzare strumenti come http://editor.pho.to/it/ puoi scaricare GIMP all’ indirizzo https://www.gimp.org/downloads/ se Photoshop costa troppo! Ricordiamoci che dobbiamo mantenere una buona qualità con risoluzioni mediamente leggere, 350 kb per una immagine non è l’ideale, l’idea é che deve stare sotto i cento, anche se per immagini grandi l’ottimazzazione deve raggiungere un compromesso. In rete esistono strumenti di compressione per ottimizzare le immagini come per esempio https://imagecompressor.com/it/ , optimizilla! Attenzione alle degenerazioni! Le immaginim sono una grande risorsa, ma dove recuperarle senza incorrere in problemi di privacy? Ad esempio https://unsplash.com/ è gratuito in creative commons, la rete offre soluzioni performanti con molte frecce al tuo arco: https://pixabay.com/it/ libero da copyright e free con opzione del vettoriale e risorse variegate come video e animazioni; https://www.pexels.com/ con caratteristiche simili a quelle descritte precedentemente; idem per https://isorepublic.com/ con divisione in categorie per la ricerca; e via dicendo come http://stokpic.com/ anche questo free per uso commerciale e infine https://it.freepik.com/ che certo non esaurisce il ventaglio delle possibilità che offre la rete per risolvere tutte le questione dei contenuti da proporre nei nostri progetti senza incappare in violazione di copyright. Il web ci mette a disposizione anche strumenti per la generazione del favicon, l’immaginina presente sul title della slide del browser. Per esempio https://www.favicon-generator.org/ che ha un set di icone già pronte individuabili con una semplice ricerca per contrassegnare il nostro logo e il nostro brand con estensione .ico e dimensioni 16*16 pixel! Oppure puoi anche disegnare il tuo favicon da zero scegliendo i colori e le tue profilature su una tela di minuscole dimensioni riadattata a tutto schermo con strumenti messi a disposizione gratuitamente comprensivi di anteprime, come quello di one-to-one, un provider che offre questo servizio! E il wireframe e il mockup?! Parliamo di bozze di progettazione che portano poi al modello reale. In rete possiamo avere strumenti come https://balsamiq.com/ o https://mockflow.com/ e soprattutto https://cacoo.com/ dove creando mun account avrai la tua sezione dashboard con piani free e pagine di composizione limitate e condivisione e possibilità di fare abbonamenti annuali con più fogli da utilizzare. E le risorse per i CSS? Guide, manuali per iniziare? Abbiamo molto tipo https://css-tricks.com/ che mette a disposizione un almanacco per ordine alfabetico o https://developer.mozilla.org/it/ o https://www.w3schools.com/ . A questo punto esaurito un elenco ideale di risorse cui attingere per i nostri progetti da web designer, non ci resta che parlare di forme, linee, colori, background, tipografia, font, icone e immagine ossia addentrarci dentro la parte tecnica della costruzione progettuale impregnata nella filosofia del mestiere: learn by doing che risponde all’ esigenza primaria, ossia ci dà indicazione su come fare per. Per l’approfondimento di tutte queste tematiche sulla complessa dimensione della professione in oggetto, consigliamo i corsi https://www.udemy.com tenuti da https://simonatocci.com/ che semplificano con chiarezza il cammino dell’ aspirante professionista!