web design umbria

Fondamenti di web design: introduzione

Dopo esserci procurati un hosting, magari qualcosa di gratuito come https://umbriawaynoir.wordpress.com/2020/12/28/un-sottodominio-dove-pubblicare-le-tue-web-app-gratis-consigliato-https-infinityfree-net/ ci procuriamo anche un editor gratuito come visual studio code per esempio indirizzo internet https://code.visualstudio.com/ e siamo pronti per iniziare la nostra brillante carriera di frontend developer o anche di web designer a costo zero visto che la rete internet é condivisione di risorse gratuite.
La prima cosa da fare dopo aver indagato sugli strumenti e sulle risorse necessarie per intraprendere i passi successivi é quella di avere chiaro come funziona la partita a tennis tra client e server e anche come un nodo (URL) traduce un indirizzo ip in qualcosa di semanticamente sensato per i nostri schemi mentali tramite un protocollo http che consente appunto che la pallina viaggi da una parte all’ altra della rete.
La data da tenere presente é il 20 dicembre del 1990. Quel giorno Tim Barners Lee ufficializzò in via privata ai suoi colleghi del CERN il protocollo www, world wide web, ossia un protocollo che consente la condivisione di informazione tramite nodi o url che vengono tradotti in linguistica a partire da numeri. Internet é un insieme di nodi appunto una ragnatela mondiale di informazioni e i contenuti di primo livello vengono portati dall’ HTML, ossia un linguaggio di formattazione, tradotto linguaggio di marcatura degli ipertesti (che non é un linguaggio di programmazione), che modella la pagina per le nostre rappresentazioni visive.
Quindi tornando all’ architettura client server siamo di fronte a un meccanismo dove c’è un richiedente che salta la rete simbolica della richiesta per vedersela soddisfatta quando giunge al server che la rimanda indietro. Un browser locale come Mozilla è un client e un server lo possiamo trovare da chi offre hosting come nell’ apertura dell’ articolo. Questo sistema non è cambiato nel corso degli anni, se mai siamo di fronte a una evoluzione accellerata di tecnologie che sono sempore dinamiche e in fermento e questo rende il mare sempre mosso e ricco di insidie per la nastro imbarcazione che cerca un passaggio a nord – ovest! Un utente che chiede qualcosa ad Internet lo fa per soddisfare un bisogno e cerca le informazioni con un obiettivo al di là di come si presenta la pagina.
Non a caso si parla di UI e di UX ma che differenze ci sono tra i due acronimi? Quando si accenna a UI, ossia alla user interface abbiamo un riferimento più à alla figura di un grafico che a quella di un frontend developer mentre nel secondo caso con la UX, ossia con l’esperienza utente siamo di fronte a una grande responsabilità come web designer in quanto UX di fatto si pone al centro di una mediazione e funziona da ponte tra l’utente che cerca delle informazioni e che soddisfa un bisogno e che ha in testa un obiettivo con la creazione di valore da restituire come risposta.
La ricerca della migliore esperienza utente ha premiato l’avvento di nnuovi framework responsive che permettono alle pagine di adattarsi automaticamente in base alle dimensioni degli schermi in base alla tipologia (desktop/tablet/mondo mobile) mentre l’approccio in precedenza (ma mai abbandonato) era quello di modellare le pagine in base alla risoluzione degli schermi tramite le media query con i CSS e in questo caso si parla di una scienza definita come DESIGN ADATTIVO e non RESPONSIVO. L’arte di fidelizzare gli utenti per ottenere delle conversioni non è semplice, spesso si procede per tentativi per capire quale sia la migliore risposta in termini di visibilità e di conversione per il nostro sito che magari ha come obiettivo finale quello di vendere qualcosa. Quindi mentre la UI è in più in sintonia con l’estetica in generale delle pagine e sulla loro composizione con la UX si cerca di attrarre il più possibile il nostro utente per farlo ritornare al nostro indirizzo sempre tenendo presente che ogni utente ha obiettivi diversi e non ha mai gli stessi bisogni da soddisfare.
Per questo le nostre pagine devono a loro volta avere uno scopo e un obiettivo che seguendo il MILTON MODEL per cercare di appagare il maggior numero di utenti vada a scontentare il meno possibile i nostri visitatori. A questo punto per migliorare la nostra UX dovremmo anche lavorare molto sulla tipografia e gli schemi di colore.
Se lo scopo è fare in modo che l’utente si senta suo agio, allora lavoriamo fondamentalmente sulla tipografia e due grandi famiglie di caratteri: SERIF e SANS SERIF. Agli albori di internet l’unità di musura principale era il punto con il classico 12 pt ma con la tecnologia in progresso e l’avvento di numerodi dispositivi con diversa risoluzione lo standar di leggibilità sul testo oggi viaggia intorno aqi 16 px. Più aumenta la risoluzione e impercettibilmente minore dovrebbe essere questo valore. Quando abbiamo da gestire unb blog, una fonte di notizie on line e simili il carattere tipografico consigliato é il SERIF, in quanto presenta in prossimità delle zone di confine degli allungamenti ortogonali al contrario del SANS SERIF che una forme di impatto lineari che sembrano più rudi e meno aggraziate. Ovviamente sono considerazioni generali che non valgono come regole assolute. Lo scopo di un carattere tipografico è quello di attrarre e fare in modo quello che vede l’utente, unito a tutto il resto tipo spaziatura , allineamento e colori, non costituisca una aggressione ma sia dentro un range di tollerabilità che non disturba sulla visione dei contenuti. Certo che sui testi le dimensioni contano e oggi con il mondo mobile, i tablet e i computer laptop e desktop occorre fare scelte difficili. La cosa meno peggio conviene rispetto a un potenziale danno, ossia é meglio magari fare un carattere leggermente più grande, rispetto invece a qualcosa che corre il rischio di non leggersi. Dobbiamo cercare una sorta di uniformità di lettura per tutti idispositivi, un ideale compromesso. Grazie ai css anche le spaziature, i margini, le interlinee, gli spazi interni degli elementi sono regolabili e questo ci consente di mettere in piedi lay-out flessibili. L’importante é che ci sia un minimo di equilibrio e di armonia rispetto al quadro generale. Quindi tipografia e caratteristiche del lay-out cfome spaziatura e allineamento devono entrare in sintonia con i colori e il contrasto. Per questo come riferimento i designer utilizzano una regola dell’ interior design che é quella del 60, 30, 10 per cento. Ossia nella palette scelta ci deve essere un colore predominante, uno secondario e uno minimale.
Ogni colore ha poi un significato specifico. Il nero associato a uno stile minimalista diventa molto elegante, ovviamente da usare con colore bianco come testo. Ma nella maggior parte dei casi il Bianco è predominante perchè valorizza tutte le altre frequenze e gli oggetti multicolore. Il Giallo è sinonimo di energia e di felicità ma usato con molta parsimonia, può risultare un colore complicato sul web. Il Blue è il colore social dei primordi di FB ed é rimasto a sottolineare amicizia e quindi parliamo di un colore caldo molto gradito dalla maggior parte degli utenti. What’up ad esempio predilige il verde che non è solo associato alla fertilità del denaro o della natura, ma viene considerato un cromatisco fresco e rilassante. Il rosso è sinonimo di freschezza giovanile. Il grigio è un colore molto professionale e istituzionale. Poi ci sono le combinazioni di colore.
Ad esempio la combinazione monocromatica può prendere un grigio base e sfumarlo per farlo degradare in alcune varianti.Per contro la combinazione triadica è la più difficile da gestire, perchè rischia di distogliere l’utente dai contenuti, parliamo di combinazione di colori forti come rosso giallo e blue. Anche 4 colori sulla combinazione complementare richiede attenzione perchè ci sono due colori simili e gli altri due opposti da usare come contrasto. Poi ci sono le combinazioni opposte di colori, il contrario di quella monocromatica. L’importante é usare combinazioni di colori che lavorano bene tra loro senza creare un effetto noioso o di disordine che partano dall’ osservazione naturale per esempio, tipo visioni in preferenza sul verde dalla parte di entità come paesaggi per esempio o situazioni più complesse come i tramonti, materiali dai quali trarre ispirazione per integrarle le palette all’ interno di codice css e html.
Per gestire il codice abbiamo bisogno di visual studio code ma se non ci piace possiamo recuperare dalla rete, Brackets, Notepad, Atom o Sublime Text, abbiamo solo l’imbarazzo della scelta. Notepad non ha ad esempio l’anteprima browser e nemmeno la finestra terminale. Inoltre con Visual Studio Code posso scegliere un tema stilistico per il mio editor, posso integrare plug-in esterni, posso collegarmi a Git Hub tramite Git per caricare i miei file in uno spazio professionale condiviso con altri professionisti, posso aumentare o diminuire la visibilità del codice con CTRL + o CTRL – oppure anche da barra dei menù in alto. Poi con Emmet posso disporre delle funzioni di autocompletamento e velocizzare la scrittura di codice HTML o altro. A questo punto non ci resta che sporcarci le mani con il codice, la parte di preparazione filosofica è completata!