Browsing posts in: Design

SASS: Syntactically Awesome Style Sheets

Scrivere un foglio CSS di per sé può essere divertente, ma i siti si fanno sempre più grandi e complessi e di conseguenza i fogli di stile sempre più difficili da mantenere. Si ci comincia a chiedersi se c’è un modo per non ripetere un sacco di codice CSS nel foglio di stile. La buona notizia è che la soluzione esiste e si chiama pre-processore. Utilizzare metodi di pre-elaborazione fa risparmiare un sacco di tempo e fatica, perchè:

  • Consente di utilizzare variabili che possono essere riutilizzate nel foglio di stile
  • Linguaggio e sintassi di alto livello che offre numerose funzionalità avanzate
  • I file CSS vengono compilati e caricati sul server Web di produzione

Ci sono due metodi di pre-elaborazione: SASS e LESS. In questo articolo vedremo tuttavia il metodo SASS, Syntactically Awesome Style Sheets. Continue Reading


Ottimizzare lo scrolling web è possibile?

Lo scrolling di una pagina web non sembra essere qualcosa legato alle performance. In effetti, quando i contenuti di una pagina web sono stati caricati, perchè dovremmo mai preoccuparci di quello che accade quando avviene lo scroll della pagina? La ragione è semplice: quando si “scrolla” la pagina, il browser deve ridisegnare per intero la pagina nel monitor. Questo significa un dispendio di risorse in termini di calcolo che potremmo minimizzare riducendo il lavoro del browser nel ridisegnare la pagina e di conseguenza massimizzare la performance della pagina. Continue Reading


@font-face: font personalizzati nel proprio sito web

@font-face è un’interessate caratteristica delle specifiche CSS3 che permette di caricare e di usare all’interno delle pagine web qualsiasi font non standard in maniera dinamica e scalabile. La proprietà @font-face è una delle regole appartenenti alle @-rules (@charset, @import, @media, @page, @font-face, @namespace) del CSS.

Alcuni benefici nell’uso di @font-face sono:

  • piena compatibilità con gli strumenti di ricerca
  • accessibilità e compatibilità con gli strumenti di screen readers
  • il testo viene riconosciuto dai traduttori automatici (es. google traslate)
  • pieno supporto per le proprietà CSS relative al testo: line-height, letter-spacing, text-shadow, text-align, e i selettori quali ::first-letter e ::first-line

Continue Reading


Cropping, clipping e Masking in CSS

In computer graphics, due operazione largamente utilizzate sono il crop e il mask. Entrambe le operazioni nascondono delle porzioni di immagini e se avete lavorato con SVG o con il Canvas HTML allora la terminologia non dovrebbe essere una novità. Il clipping definisce l’area visibile di un elemento: tutto ciò che sta intorno a quest’area non viene renderizzato e quindi “ritagliato”. La maschera invece, che viene applicata all’immagine, definisce attraverso il canale alfa la porzione di immagine da rendere “trasparente” e quindi non visibile. La trasparenza ovviamente può variare a seconda della quantità di colore della maschera.

Una novità nel CSS è proprio quella di applicare queste due operazioni al mondo HTML. Continue Reading


Captology, ovvero la tecnologia persuasiva

brainwash-logo-big1

Può uno dispositivo tecnologico, come il computer o lo smartphone, farci cambiare modo di pensare o il nostro modo di comportamento? Può indurci a prendere delle importanti decisioni nella nostra vita? A quanto pare, la risposta è si.

Della propaganda e della persuasione, occulta o meno, si è parlato molto. Ma si è parlato meno di come l’interazione tra persone e macchine possa tradursi in una forma di persuasione.  Continue Reading


Alcuni strumenti per ottimizzare al meglio l’uso dei colori

Sei un grafico, un architetto, un webmaster, un web designer, un graphic designer, ti occupi di moda o di design in genere? Allora potresti aver bisogno di utilizzare uno di questi strumenti che ho recensito qui sotto.

Adobe Kuler (kuler.adobe.com)

Adobe Kuler è un’applicazione Internet sviluppata da Adobe Systems che consente ai designer di provare, creare e salvare diversi schemi di colori, ognuno dei quali è costituito da un insieme di cinque colori. Kuler vi permette in maniera istantanea di realizzare efficaci accostamenti cromatici da utilizzare per tutti i vostri progetti grafici. Che sia un logo, un layout di un sito web, una brochure o un manifesto, i colori usati dovrebbero essere usati per ottenere il risultato visivamente migliore. Kuler permette sia di usare palette di colori già pronte o creare in pochi secondi la nostra e condividerla con migliaia di altri utenti sparsi in tutto il mondo. Tutto molto social.

COLOURlovers (www.colourlovers.com)

COLOURlovers è una comunità creativa in cui le persone da tutto il mondo creano e condividono coloritavolozze e schemi, discutono sulle ultime tendenze e su tutto ciò che riguarda il colore e il suo utilizzo in modo proficuo ed efficace. COLOURSlover è realizzato con un occhio di riguardo per gli aspetti sociali e per la condivisione. La navigazione nelle varie pagine è libera ma ci si può anche iscrivere gratuitamente per commentare e votare i colori o per interagire con gli altri Colourlovers.

CheckMyColours (www.checkmycolours.com)

permette di verificare e valutare la correttezza dei colori, tonalità e luminosità, impiegati nelle pagine di un qualunque sito web, digitando semplicemente il suo indirizzo nel campo preposto. Indicando la url di interesse, CheckMyColours, restituisce un report di analisi molto analitico: il sistema analizza l’HTML della pagina con tutti gli elementi che la compongono, fornendo valutazioni (in termini soggettivi) in merito ai colori utilizzati ed i corretti rapporti di luminosità e contrasto per ogni elemento.

Color Scheme Designer (www.colorschemedesigner.com)

Color Scheme Designer è un’applicazione web gratuita per produrre rapidamente e facilmente delle combinazioni colori basate su uno, due, tre o quattro colori di base: ciò dipende se si sceglie la modalità monocromatica, complementare, triade, etc… Dopo aver scelto il colore o i colori di base, l’applicazione calcola istantaneamente una palette di colori efficace e fornisce anche un’anteprima dei colori scelti applicati ad un template web. 

Lista dei colori (Wikipedia)

Una tabella parziale di colori e dei loro codici identificativi, sia mnemonici che esadecimali per il web. Sempre utile.


Teoria del colore: concetti e terminologia

Il metodo più semplice per definire un colore è dargli un nome. E cosi nascono straordinari nomi evocativi per le variazioni di rosso (cremisi, vermiglio, mattone, corallo, valentino, scarlatto), giallo (ocra, canarino, oro, limone) e cosi via… Ma c’è un modo per definire il colore in modo preciso e matematico. Ciascuno di noi ha una sua concezione personale di ogni colore, per cui è necessaria una definizione standard per stabilire una volta per tutte un colore.

In questo articolo vedremo quindi alcune delle dimensioni di un colore, quali: Tonalità, Luminosità, Chiarezza, Policromia/Intensità, Saturazione come definiti dal CIE (Commissione internazionale  elettrotecnica).

Continue Reading


Teoria del colore: sistemi di rappresentazione del colore

Se avete intenzione di utilizzare il colore in modo efficace nei vostri progetti, è necessario conoscere i concetti e la terminologia appropriata sul colore. Una conoscenza approfondita su concetti come croma, valore e saturazione è la chiave per creare degli schemi di colori attraenti e professionali. Ma prima di approfondire questo discorso, occorre capire cos’è il colore da un punto di vista tecnico/scientifico.

Nozioni di base: ma la mela è davvero rossa?

Quando mangiamo una gustosa mela rossa, ci appare del tutto scontato che il colore è una caratteristica naturale del frutto che stiamo gustando. Trattiamo il colore come se fosse un “ingrediente”, o meglio un componente, della nostra mela, cosi come lo sono i semi interni o la polpa. Tuttavia, non è cosi. Al giorno d’oggi sappiamo con certezza che il colore non è una caratteristica del mondo fisico o degli oggetti fisici, ma il risultato dell’effetto della luce sull’apparato percettivo umano (la vista). Dunque non è corretto dire che la mela è rossa, mentre è corretto dire che ci appare rossa.

Continue Reading


L’uso dei colori nell’instructional design

Nel precedente articolo, Teoria del colore per il web design, abbiamo iniziato a parlare di come il colore influenzi la nostra percezione delle cose e renda alcuni design più invitanti rispetto ad altri. In questo articolo vedremo come applicare la teoria dei colori per migliorare i processi cognitivi, come ad esempio, la memoria.

Gli psicologi cognitivi hanno scoperto diversi principi di progettazione per migliorare le prestazioni della memoria. Il processo di recupero delle informazioni dipende da molte variabili e uno di questi è il colore. Il colore è lo stimolo più potente per il cervello e consente un maggiore e più facile apprendimento e memorizzazione.

Continue Reading


Teoria del colore: il significato dei colori e il loro uso

Lo studio del colore è un campo che mi ha sempre affascinato e molto volentieri spendo del tempo libero per approfondire gli argomenti sulla teoria e la psicologia del colore. 

In questo articolo vedremo i significati dietro le diverse famiglie di colore e del loro possibile utilizzo in ambito web. Parleremo successivamente della tonalità, delle variazioni cromatiche, della saturazione, delle tinte e delle sfumature e di come queste variazioni influenzano il nostro modo di percepire i colori. Spenderemo successivamente qualche parola di come i colori possono migliorare le prestazioni della nostra memoria.

La scelta del colore nel design è molto soggettiva. La reazione che il colore evoca potrebbe cambiare da persona a persona. Questo è dovuto a volte a gusti e preferenze personali ma altre volte a causa del background culturale. La teoria del colore può essere considerata una scienza. Studiare come i diversi colori influenzano le persone, individualmente o come gruppo, è diventata una vera e propria professione. Basta cambiare semplicemente la tonalità del colore o la saturazione per evocare sensazioni completamente diverse. Inoltre le differenze culturali fanno sì che qualcosa che rappresenta felicità in un paese, può rappresentare qualcosa di deprimente in un altro.

Continue Reading


Pagine:123

Utilizzando il sito, accetti l'utilizzo dei cookie da parte nostra. maggiori informazioni

Questo sito utilizza i cookie per fornire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o cliccando su "Accetta" permetti il loro utilizzo.

Chiudi