034 Come si realizza un mockup per il Web

Sei sicuro di aver realizzato il mockup del tuo sito o della tua app Web in modo appropriato? Ti sei assicurato che chi dovrà realizzare il codice partendo dal tuo disegno abbia tutti gli elementi necessari per produrlo?


IN PRIMO PIANO:

INSTAGRAM: @cercasiai
EMAIL: aaaicercasi @ gmail.com
TWITTER: @Aicercasi

Myfoglio.com è l’app di fatture freemium, sicura e completa già dalla versione non a pagamento. Provala qui:
https://www.myfoglio.com/

Concorso 2021: inviami un email a aaaicercasi @ gmail.com con indicato cosa fai e perché sei un ascoltatore “specialissimo” e a fine 2021, se mi avrai convinto, potrai vincere un abbonamento myfoglio premium!

Gill Sans
https://it.wikipedia.org/wiki/Gill_Sans

Font Awesome
https://fontawesome.com/plans

Figma
https://www.figma.com/

InVision
https://www.invisionapp.com/

Argomenti della puntata:

  • Ti spiego perché questo non è un mestiere “creativo”
  • La scelta del font
  • La tipografia del font
  • Le icone chi le fa e chi le aggiorna
  • Come si ottimizzano le immagini
  • Ordine e pulizia

Ascoltala qui:

Iscriviti:
iTunes | Spreaker | Spotify | CastBox (Android) | Google Podcast | Deezer | Podchaser

Trascrizione:

Vogliamo un sito Web, ma i mockup sono già stati realizzati da un designer di nostra conoscenza, basta solo convertirli in codice. “Questo non è un mestiere creativo”. Lo dico sempre perché in giro sento cose del tipo “Lui/lei è bravissimo/a a disegnare, è creativo, vuole fare il designer Web” oppure l’UX o comunque i disegnini col computer. Mi spiace, non c’è niente di creativo in senso artistico in questo lavoro, al massimo è richiesta abilità nel risolvere problemi di varia natura, da chi ha una mente classificatrice tendente a mettere in ordine o a trovare una struttura. Niente arte, niente estro, niente genio. Non c’entra niente con la creatività anche se alla fine si disegna, sì, ok, ma anche il pittore che imbianca le mura di casa nostra usa il colore, ma non per questo lo chiamiamo “artista”. Questo per dire che quando si realizza un mockup grafico alla fine spesso l’occhio inesperto guarda delle sottigliezze, chiamiamole ‘artistiche’, senza accorgersi dell’elefante che sta passando in quel momento dietro a quel lavoro meraviglioso, geniale, bellissimo. Ed è dell’elefante che passa che mi occuperò in questa puntata. La scorsa puntata ho detto che bisogna lasciare che sia, che non è necessario fare i mockup per tutte le risoluzioni possibili o cercando di costringere gli elementi secondo il nostro disegno. Questa volta parrebbe un discorso del tutto opposto. In realtà, in questa puntata stabilisco le regole imprescindibili per realizzare un mockup grafico per il Web che possa essere ritenuto tale. Perché “lasciare che sia” non vuol dire fregarsene. Le regole per impostare bene un lavoro ci sono e sono determinanti, quello che va garantita è la flessibilità del prodotto finale senza per questo fare una cosa senza senso. Ti elenco gli errori da non commettere mai quando si realizza un mockup e cercherò di spiegarti il motivo per cui li considero degli errori. 2 font al massimo Utilizza solo un paio di font, uno per i titoli e uno per il body, per i testi di tutto il sito. Spesso mi arrivano questi mockup con un tripudio di font, un titolo con un font, il sottotitolo con un altro, magari è anche una svista perché sono simili e non ti sei accorto che hai iniziato con uno e proseguito con un altro. E soprattutto utilizza font di sistema Arial, Helvetica, Times, Courier oppure font di librerie online disponibili tipo i Google font che hai l’imbarazzo della scelta senza che vai a cercare il Gill Sans con un copyright grande come una casa. Qualsiasi font non di sistema e non collegato ad una libreria gratuita online, va inserito nella pagina insieme con i contenuti del sito. A parte il peso di un oggetto simile che viene inviato insieme ai contenuti del tuo sito, c’è sempre da tener conto della questione dei diritti. Sei sicuro di avere il diritto di distribuire questo font? E se sì, sei sicuro che la licenza del font non presupponga che al di sopra di una distribuzione di un tot di utenti, lo si possa distribuire solo a pagamento? La regola è: “leggi i READ ME” delle istruzioni allegate ai font, potresti avere delle sgradite sorprese. La tipografia dei font Sul web abbiamo la possibilità di utilizzare un heading che va da 1 a 6, gli heading sono oltretutto importantissimi per i motori di ricerca e quindi vanno utilizzati e nel migliore dei modi. Per cui, stabiliamo a priori una grandezza del font, associata anche al tipo di font in base agli h1, h2, h3 etc. Stabiliamo quello associato al body ovvero il font generico, tutte le micro variazioni a questi 7 formati vanno eliminate da un mockup. Tutti quegli arrangiamenti ad esempio quando sul disegno rimpicciolisco di mezzo pixel un titolo così da farlo stare tutto su una riga, sono inutili, creano solo codice sporco, fanno impazzire un Front end e francamente dimostrano una mancanza di progettazione. Le icone Stesso discorso per le icone. “Che belle le iconcine del giapponese, perché non incollarle nel nostro mockup?” Anche qui, quando prendi delle icone da Internet, conservati gli zip con le licenze che indicano chiaramente che puoi utilizzarle liberamente, perché se così non fosse e qualcuno ne rivendicasse i diritti, ti troveresti in un bel guaio. E capita. Se il sito in cui saranno pubblicate ha molte visualizzazioni, fai attenzione perché forse non tutti sanno che perfino le icone di Font Awesome possono essere utilizzate in maniera gratuita solo al di sotto di 10.000 visualizzazioni al mese dopodiché necessitano di una licenza annuale. Dirai. Nessun problema, le icone me le realizzo da solo. Come le mettiamo online le tue icone proprietarie? Se sono poche il problema non si pone, quasi. Puoi inserire una ad una singolarmente. Ma raramente le icone sono poche, il più delle volte sono abbastanza da dover realizzare delle sprites di immagini o meglio ancora un icon font. Per fare questo vanno ottimizzate, i tratti vanno ridotti ai minimi termini e fatti dei tentativi affinchè si vedano sempre in modo corretto scalandole in tutte le dimensioni necessarie. Nel font icon vanno previste tutte le icone che nessuno considera, ad esempio l’”Hamburger menu” ovvero le tre linee orizzontali del menu nelle visualizzazioni mobile, tutte le icone dei social, tutte le icone di servizio tipo frecce up e down in stile con la tua grafica. Hai previsto chi le aggiornerà e come? Il discorso vale sempre per un sito di media entità, ovviamente più è piccolo il progetto meno “paranoie” è possibile farsi. Ma metti che è un progetto in divenire, metti sia un negozio a cui hai realizzato una fantastica icona per ogni prodotto che vende e metti che periodicamente ne pubblichino di nuovi, chi e come aggiornerà le icone? Chi aggiornerà le sprites o l’icon font? Le icone suscitano entusiasmo, uno pensa che poiché è un oggetto 24×24 possiamo crearne tante e appiccicarle un po’ ovunque, ma come ogni elemento Web devono avere un senso e richiedono lavoro e manutenzione. Ottimizzazione delle immagini Chi ha avuto a che fare con il Page Speed di Google si sarà imbattuto in quella fantastica metrica del LCP Largest Contentful Paint ovvero il contenuto più grande sulla schermata visibile che spesso coincide con la prima immagine pesante che blocca il caricamento della pagina e penalizza le performance del sito Web. Ma, comunque, sul Web si è sempre lottato con il peso delle immagini e il caricamento delle stesse e anche se al giorno d’oggi guardiamo anche i film in streaming, non possiamo pensare di ignorare la pesantezza in termini di KB degli elementi che compongono il nostro sito. Una delle casistiche che vedo quando qualcuno mi fornisce i mockup sorgenti è che le immagini vettoriali non vengono ottimizzate, ripulite dei layer inutili, compattate, rese flatten e possibilmente con un singolo tracciato. Solo eseguendo una pulizia del genere si può far sì di portare il peso di un svg alla metà dello stato iniziale. La palette dei colori E’ buona norma quando ci si appresta ad iniziare un progetto Web quella di crearsi una palette di colori. Attualmente con l’uso di sistemi come Bootstrap o Material Design etc. il numero dei colori di una palette non è né casuale né fatto come vogliamo. Ci sono quei colori imprescindibili come il colore primario, il secondario, quello che indica il successo di un’azione o la richiesta di attenzione il “Warning” oppure quello dell’errore il “Danger”, poi si utilizzano almeno una decina di sfumature di un colore neutro come il grigio, il bianco e il nero immancabili, dopodiché ogni colore aggiuntivo va calibrato e valutato se strettamente necessario altrimenti, meglio farne a meno. Perché? Perché si stabiliscono delle variabili per ogni singolo colore e metti il caso, che tu voglia cambiare un colore su tutto il sito web non dovrai fare altro che cambiare il colore della variabile. Se hai fatto quattro toni differenti di verde per indicare il successo di un’azione, uno che colora un icona col thumb, uno che colora il pulsante, uno che colora un link, ti troverai a dover selezionare ogni singolo elemento e cambiare il colore a mano uno ad uno. Se il sito è realizzato metà con fondo chiaro, metà con fondo scuro, metti il caso di una personalizzazione, meglio realizzare due palette ad hoc per i singoli fondi, non farne una omnicomprensiva. In questo modo è possibile decidere che al cambio del fondo, venga caricata l’una o l’altra palette con i medesimi nomi di variabili, ma ovviamente con colori completamente differenti. Ordine e pulizia Pensavo che con l’introduzione di programmi come Invision e Figma, l’era dei livelli infiniti di Photoshop fosse finalmente terminata. E invece no. Vedo una confusione tra prototipi e mockup nominati tutti allo stesso modo, livelli ridondanti tutti con l’etichetta Gruppo che il programma mette in automatico quando uno li raggruppa col CTRL + G. In generale lavori confusi e sporchi. Come al solito pare sia una peculiarità dell’artista quella di essere un po’ bohemienne e trasandato e quindi anche nel design dei siti Web sembra che aggiungere livelli oscurati ed elementi naufragati nel mockup faccia molto “estro creativo”. In realtà come ho detto all’inizio questo non è un mestiere creativo, anzi se pretendiamo di avere anche una certa attitudine UX, dobbiamo essere portati per la classificazione e la logica, per cui…ordine e pulizia, mi raccomando, la maggior parte degli errori si evitano in questo modo.

Posted in Podcast and tagged , , , , , , , , , , , .

Rispondi