Relazione "Web design per creativi, grafici, sviluppatori"
Parleremo di “Web Design per creativi,grafici, sviluppatori” un libro che ha la finalità di dare gli strumenti necessari sia a chi si “perde” nel web design, e sia a chi è un po più esperto nel campo, attraverso esempi. L’autore è Jason Beaird designer e sviluppatore che condivide con noi la sua passione per il web.
Il libro si suddivide in cinque capitoli:Layout e composizione, Il colore, La texture, La tipografia, Le immagini.
Per la creazione di un sito originale e piacevole agli occhi allo stesso tempo, bisogna innanzitutto soddisfare le esigenze del cliente, attraverso il cosiddetto “comp” di design, (una simulazione di un layout su carta) dove bisogna concentrarsi su: osservazione, analisi e implementazione.
-L’osservazione: prevede più incontri con il cliente stesso, dove la comunicazione gioca un ruolo fondamentale
-L’analisi: in questa fase le informazioni recepite in precedenza con il cliente vengono analizzate
-L’implementazione: ovvero la creazione di un layout, attenzione attenzione..su un foglio di carta!
Una pagina web può essere costituita da una serie di blocchi (a seconda delle dimensioni e dal genere di sito web che si deve realizzare). Abbiamo:
-Blocco contenitore(container) la sua presenza garantisce l’inserimento del contenuto della pagina
-Blocco del marchio(logo) si associa il termine “identità” di un’azienda con il suo marchio, ovvero il brand
-Blocco navigazione(navigation) deve essere semplice da individuare e da utilizzare
-Blocco contenuto(content) è importante che il contenuto sia sempre il punto centrale
-Blocco piè di pagina(footer) contiene copyright, info legali…
-Blocco vuoto(whitespace) aree che non contengono testo o immagini, ma che assumono la stessa importanza dei contenuti
Altri concetti sono fondamentali: l’equilibrio che può essere simmetrico(quando gli elementi di una composizione sono identici) e asimmetrico(che invece implica la presenza di oggetti di diversa forma, dimensione, colore..)
Per ottenere un’unità del layout abbiamo a disposizione la prossimità,la ripetizione,l’enfasi, il posizionamento, la continuità, l’isolamento, il contrasto e la proporzione.
Inoltre abbiamo diversi tipi di layout: navigazione a colonna sinistra, a colonna destra e a tre colonne. I layout possono essere anche a larghezza fissa(semplici da progettare e da gestire),larghezza variabile(detto anche fluido), e dinamico(che si adattano a larghezze diverse).
La scelta del colore non è facile come sembra, anzi bisognerebbe approcciarsi meglio ad essi in modo da usarli nel miglior modo possibile. Si deve sempre tener conto dell’utente in primis e della pagina web che si andrà a creare. Attributi inoltre che interessano i colori sono: la temperatura colore,i valori cromatici, e la saturazione.
Per quanto riguarda invece la visualizzazione sullo schermo, i colori sono basati su un modello RGB, mentre per la stampa su un modello CMYK. Esistono sei schemi colore usati(per trovare delle combinazioni di colori) e sono: schema monocromatico, colori analoghi, colori complementari, colori split complementari, colori triadici e colori a rettangolo.
Si intende un elemento che caratterizza l’aspetto o la sensazione provocata dalla superficie di un oggetto. Tutto ciò si ha grazie a: punti(l’unità di misura sono i pixel, la composizione di questi pixel genera l’immagine digitale visualizzata dal computer), linee (la linea è l’elemento più comune e uno dei più espressivi), forme(due estremità di una linea generano una forma), volume e profondità (attraverso la prospettiva, le proporzioni, luci e ombre) pattern(che grazie al CSS possono essere applicati a qualsiasi elemento)
L’obiettivo principale sta nel comunicare qualcosa, e la tipografia ha proprio questa finalità: saper comunicare attraverso la scelta corretta dei font.
Si è giunti al momento di portare il testo nel Web, e di scegliere i font da visualizzare in un browser. I font comuni a tutti sono un po limitati, infatti l’aspetto negativo della cosiddetta “safe list” è proprio questo. Per visualizzare un testo nel Web abbiamo diversi metodi: il metodo Phark che serve a sostituire il testo con un’immagine, e successivamente il metodo ideato da Jason Cranford Teague ovvero il @font-face(permette di visualizzare testo in un sito web utilizzando font che non sono installati nel computer). Esistono diversi metodi per modificare un testo e sono:
-Kerming: modifica lo spazio tra le singole lettere
-Tracking: modifica la spaziatura orizzontale tra i caratteri, ma aumenta lo spazio tra una lettera e quella vicina
-Interlinea: la spaziatura verticale tra le righe di testo
-Giustificazione: la spaziatura tra lettere e parole
Ogni famiglia di font ha delle proprie caratteristiche, abbiamo: il Font serif(con grazie), il Font sans serif(le grazie vengono eliminate),il Font di scrittura a mano(aspetto negativo: non vi era uniformità nei caratteri, aspetto positivo: la personalità del testo scritto), il Font a larghezza fissa(spaziatura proporzionale), Font novelty(decorativi o fantasy), Font dingbat(caratteri ornamentali)
Anche le immagini possono presentare dei problemi: dalla scelta dei file alle fonti. Prima di scegliere delle immagini bisogna rispondere alle seguenti domande.
Immagini pertinenti aggiungono interesse al design e arricchiscono il contenuto di una pagina web.
Si può evitare di considerarla come priorità.
Immagini piacevoli esteticamente possono essere efficaci per catturare l’attenzione.
Bisogna però fare attenzione alle fonti delle immagini, abbiamo tre opzioni:
-Fotografare per conto proprio
-Acquistare immagini da archivi fotografici
-Ingaggiare un fotografo professionista.
Vi sono anche dei metodi non consigliati, ovvero: prelevare immagini da Google, e l’utilizzo delle clipart. Mentre invece i “ritagli creativi” sono consentiti.
Per quanto riguarda i formati sono tre supportati dai browser:
-JPEG: formato di piccole dimensioni a 24 bit
-GIF: formato a 8 bit, che supporta fino a 256 colori
-PNG: formato a 8 e 24 bit
Appunti sul design per dispositivi mobile
Oggi gli utenti accedono al Web da tablet, smartphone.. Aumentano le possibilità, ma anche i problemi da affrontare, bisogna risolvere questo problema cercando quindi di adattare le pagine web a ogni tipo di schermo e a ogni tipo di esigenza.
vaporwave
janainaart
kaledo-art
romaincrisis
izzy806
jacobvanloon
dededos