All’ indirizzo https://umbriawaydesign.wordpress.com/2018/12/21/web-designer-una-discesa-nel-maelstrom-risorse-per-iniziare/ abbiamo visto tramite udemy i primi passi per iniziare con il web design, adesso dobbiamo addentrarci nella PRATICA e lo facciamo sempre facendo riferimenti a https://www.udemy.com e al corso di web design della Tocci. La comprensione contenuto contenitore e l’uso di come presentare i vestiti implica la conoscenza di html e di css. Efficace, efficiente, senso estetico, colori, forme, usabilità: il tutto per non aggravare il senso estetico e che non risulti non invadente per chi ha deciso con la interattività del nostro sito. Le forme contenitori si delegano ai div così come si delegano ai css l’uso degli stili in modo da dedicarci completamente agli elementi del contenuto che risulteranno separati. Del resto se prendiamo un sito come https://www.apple.com/ che risponde a standard qualitativi alti, nel senso che abbiamo a che fare con tecnologie che rispettano le ultime tendenze tecnologiche, ci accorgiamo a come questo usi colori e forme che focalizzano il visitatore verso una esperienza piacevole che sia cromaticamente gradevole per il ritorno e future conversioni, nel caso che l’obiettivo sia magari una vendita ON-LINE. Nel web niente avviene per caso e il colore degli sfondi, i background, gli oggetti sovrastanti sono funzionali a richiamare l’attenzione su elementi specifici del nostro sito che ha come obiettivo una CALL TO ACTION. Un sito troppo pacchiano, fatto con colori vivaci e aggressivi porterebbe lontano dall’ obiettivo che ci siamo preposti. Gli stessi criteri di scelta sono usati per i font in modo da produrre risultati di leggibilità con spaziatura e tipologia di font appropriati anche per il tema trattato e l’interlocutore che ascolta. Scomposta una pagina risponde a delle schematizzazioni composte da linee, colori, background, elementi di contenimento, immagini etc. Quando si sente parlare di sito user friendly si intende proprio un sito equilibrato e bilanciato, che ha una sua gerarchia e una sua coerenza stilisatica, una sua omogeneità e unità e che gestisca spazio e proporzione sintetizzandolo in un ritmo accattivante. Non dimentichiamo la praticità: se sono un utente che cerca una informazione specifica, devo fare in modo che questo dato sia facile da individuare proprio perchè il web non è un giornale e il media risponde con una attenzione limitata rispetto alla carta e noi non vogliamo aumentare gli insuccessi statistici sulla variabile frequenza di rimbalzo, ossia quel fenomeno che ci indica che l’utente scappa velocemente dalla nostra pagina se non c’è una armonia generale che tenga incollato l’occhio del visitatore. Un buon bilanciamento non vede un testo giallo su sfondo viola, ma piuttosto soluzioni equilibrate dove il testo nero o bianco spicca sulla controparte duale per guidare lo sguardo dell’ interlocutore verso il centro nevralgico della nostra call to action, cosa che non sarebbe possibile se non rispetto le proprzioni tra gli oggetti presenti nella pagina per esempio. Poi le informazioni contenute nel nostro sito devono essere credibili ed esatte, nessuno consulta fonti impregnate di fuffa. Il vuoto della pagina va evitato, ma non dobbiamo neanche caricare troppo la nostra pagina di elementi che sovraccaricano l’attenzione dell’ utente. L’attenzione viene calamitata anche dai colori, quindi usiamoli in maniera pertinente per il marketing senza usare le malizie di una nota casa automobilistica che usa nomenclature stravaganti come come color aragosta o scocca al succo di mirtillo. Attenzione anche alla comprensione: una immagine deve essere accompagnata da descrizioni pertinenti e sottotitoli altrettanto chiari ed esaustivi legati gerarchicamente al prodotto che l’occhio sta analizzando. La precisione prima di tutto e anche il senso della misura va esercitato in maniera coerente, non posso mettere un font 30 su una pagina, non siamo mica festeggiando il carnevale! O meglio non posso usare un font 30 con un testo vicino che parla di un prodotto analogo che usa un font 12. Uniformità! I titoli saranno uguali per tutte le sezioni, troppa democrazia fa male nel web design! Usare i fumetti va bene se stai parlando di un sito per fumetti che promuove Tex Willer, ma se voglio vendere uno smartphone, usero dei testi professionali per comunicare con il mio potenziale cliente. Attenzione poi a queste 4 parole magiche: contrasto, ripetizione, allineamento e prossimità senza dimenticare l’obiettivo primario, che è quello di comunicare in modo efficace. Un sito di un comune non può essere troppo cromaticamente frizzante dal punto di vista della comunicazione, dovrà piuttosto rispettare quelle specifiche istituzionali per essere credibile con il cittadino che vuole usufruire di un servizio online per esempio. Il modello prevalente vede le sezioni disposte verticalmente con i singoli contenuti per ogni riquadro stesi orizzontalmente. Sfondi chiari e scritte scure che si capiscono esaltano il messaggio comunicativo che voglio veicolare. La pienezza di una immagine su un lay-out verticale serve su stratificazioni sull’ asse y a esaltare il testo che viene racchiuso tra il loro intercalare. Il concetto di prossimità a che che fare con l’accostamento di contenuti coerenti sulle singole sezioni. Per l’integrazione dei fonts e la ricerca di quello più idoneo per i nostri progetti consultare https://fonts.google.com/, tenendo presente che quando ci rivolgiamo a un cliente dobbiamo avere una gamma da proporre. Il font ha una sua dimensione, pesantezza, una sua famiglia di appartenenza e una sua carenatura. E’ palese che la scelta di un font non deve essere un criterio casuale ma va ponderata con estrema attenzione, il sito web non deve essere appesantito nel suo caricamento, quindi troppa sovrabbondanza sui font e non solo sulle immagini non porta sollievo ai tempi di reazione del server! Non si può non citare la libreria gratuita https://fontawesome.com/ , che ospita una miriade di icone facili da usare e leggere da sopportare! I colori sono elementi determinanti e Newton ci ha costruito una scienza con il suo famoso prisma sperimentale nel 1600! Esistono colori primari, secondari e terziari, mentre Newton ne individuò solo sette (i colori dell’ arcobaleno) ma sappiamo che le sfumature sono infinite anche se rosso, giallo e blue sono i primari da cui scaturisce tutto il resto. Il bianco non ha frequenze interne perchè ha in sè tutta la somma dei colori integrata. Il nero è la negazione di tutti i colori, non ha al suo interno nessuna frequenza. I colori complementari hanno coppia di valori che si combattono, che stanno all’ opposto come collocazione nello schema generale. Poi valutiamo anche la saturazione: quanto colore ho in quel colore? Per il web posso utilizzare due criteri-codici validi: RGB e l’esadecimale. Il primo risponde ai criteri di un valore sui tre colori come red, green, blue mentre nel secondo caso possiamo apportare modificazioni di valore sul codice composto da 0 a 9 con le lettere da A fino a F. Come al solito il consiglio è quello di non esagerare, come per i font del resto, con colori diversi per i titoli per esempio, l’uniformità va tenuta come capisaldo normativo. Per creare una palette di colori posso anche usufruire della rete con siti come http://paletton.com/, ricordando che poi sia gli editor, sia i browser contemplano al loro interno la possibilità di implementare dei plug-in funzionali per poter disporre dei valori RGB o esadecimali dei colori. Anche Adobe mette a disposizione tool dedicati come https://color.adobe.com/it/create/color-wheel/ per esempio, la famosa ruota dei colori, dove posso scegliere primari o complementari a mio piacimento. Ad esempio nero, arancio e grigio sono una triade fantastica per costruire siti web! E il flat design? E il material design? Qui deve entrare in gioco wikipedia e la parolaccia da circo “scheumorfismo”: https://it.wikipedia.org/wiki/Scheumorfismo. Avere di fronte un sito che ti ricorda la superficie di un metallo oppure oggetti che ti ricordano la piattezza bidimensionale della carta. Oppure la scienza che vede l’uso delle icone che devono parlare da sole sulla funzionalità che devono sopportare: se clicco su una icona dove c’è una fotocamera difficilmente posso aprire l’applicazione che mi fa conoscere la temperatura. Il web è una questione di stile. Flat, piatto, da sola come parole dice molto! Vuol dire uno stile che non mostra nessuna profondità, ricordiamoci l’inaugurazione dei famosi riquadri Microsoft con Windows otto! Ombre e tridimensionalità? Anche qui non facciamo altro che scegliere il nostro modello di stile! Il material design è lo stile tipico di Google! Nel material design, gli oggetti hanno uno spessore, di flat non c’è nulla. Oggetti sovrapposti hanno delle ombre, perché nel mondo reale le due dimensioni sono inibite. Una guida di riferimento la possiamo consultare all’ indirizzo https://material.io/ ; nei nostri progetti dobbiamo farci ispirare dall’ uso degli stili a seconda di quello che vogliamo armonizzare e comunicare senza fare minestroni. A questo punto il passo successivo è saltare verso l’HTML prima e poi dopo verso i CSS! Attezione a definire l’HTML un linguaggio di programmazione, perché non è così!

Annunci