fbpx

Quando progetti un sito web è utile aiutarsi con strumenti che permettono di facilitare il tuo lavoro. La creatività nel mondo del web design è illimitata ed ogni giorno, programmatori e designers,  sviluppano applicazioni utili per progettare un sito web.
Ne ho scoperti alcuni e li elenco qui sotto: potrebbero fare al caso tuo.

#1 – COLOR THIEF


Color Thief è un’ottimo strumento realizzato da Lokesh Dhakar, sviluppatore e designer, che permette di generare palette di colori da un’immagine grazie a Javascript. Sul sito dell’applicazione ci sono già degli esempi ma puoi anche tu caricare una tua immagine per vedere cosa succede. Si apre una sezione con il colore dominante e la palette degli altri colori. Davvero utile!

#2 – CURSOMIZER


Cursomizer è un bellissimo progetto sia nel design che nella interattività realizzato da KRIKDESIGN per stimolare i designer a creare cursori mouse custom e quindi creare nuove esperienze visuali con la possibilità di modificare forma, colore e effetto visuale, provare diverse opzioni, fare dei test e condividere con un link i lavori realizzati con i propri colleghi.

#3 – MOCKFLOW


Mockflow permette ai designer di trasformare velocemente la loro idea in un’interfaccia per gli utenti. È possibile accedere a varie opzioni sui modelli di grafica wireframe, mappa sito, specifiche del design, annotazioni su schermate e hosting sito. È possibile provarlo gratuitamente per vedere come funziona e dopo se ti piace puoi sottoscrivere un abbonamento ad un prezzo accessibile.

#4 – SIMPLE PARALLAX


Simple Parallax è una piccola libreria Javascript che ti permette di aggiungere animazioni parallasse, facilmente e velocemente alle immagini. E’ facile da utilizzare proprio perché l’effetto parallasse è applicato direttamente sul tag “img” dell’immagine.

#5 – BOORDS


Boords ti permette di creare bozzetti, elaborati e animazioni in un solo posto grazie all’animation tool che aggiunge dinamismo e grazie all’editore online permette di aggiungere del testo. È possibile aggiungere anche feedback dei clienti e narrazione fuori campo.

#6 – UX APP


Ux App è un utile strumento che aiuta i designer ad utilizzare e sperimentare prototipi interattivi per applicazioni desktop, mobile, app e siti web senza necessita di scrivere codice. Fornisce componenti html, javascript già pronti con la possibilità di modificarli, realizzando eventi custom, transizioni ed azioni o di esportare design come file png.

#7 – KEYNOTOPIA


Keynotopia rappresenta una collezione impressionante di più di 5000 immagini vettoriali libere che si basano su interfacce di siti web e componenti e più di 200 icone. Sono state create per lo più con Keynote e Power Point e possono essere modificate e custodite senza altri strumenti. Sono disponibili sia elementi singoli che pacchetti a partire da 39 dollari.

#8 – STENCIL


Questa collezione di stencil offre gadget molto belli ed unici e strumenti per designers per realizzare bozze, interfacce fatti in plastica traslucido; offre anche cornici con icone stampate al suo interno che supportano iphone, Android, Ipad e Siti web che possono essere disegnati su carta nella fase di progettazione di un sito web.
Interessante ed unico nel suo genere di prodotto offerto.

#9 – SVG FILTER


Svg Filter è un’applicazione creata dalla sviluppatrice russa Yoksel che ha pensato di creare qualcosa che permettesse di poter sperimentare i filtri SVG per l’immagine ed il testo. È possibile sperimentare gli effetti sia selezionando solo l’immagine o solo il testo che selezionando entrambi.

#10 – LUNR


Lunr è una libreria Javascript molto utile creata da Oliver Nightingale che permette di svolgere funzioni molto importanti all’interno di un testo come la ricerca del testo che può essere avanzata e personalizzata.

Ti piace la mia scelta? Sono sicura che nel tuo progetto di realizzazione del sito web troverai utile almeno uno di questi progetti che ho elencato perché ti faciliteranno il lavoro.
Buon lavoro!

Per piacere seguici e metti mi piace:

Dove può spingersi il web? Non c’è limite alla creatività e questo articolo lo dimostra. Ecco la lista di 10 incredibili siti web da cui trarre ispirazione per diversi motivi: interattività, animazione, colori, suoni ed altro ancora. Sei a mare o sei seduta su una sdraio per rilassarti? Questo è l’articolo giusto per te perché si parla di un argomento leggerlo, bello ed entusiasmante. 

#1 – KOOK

Kook

KOOX è una specie di fast-food con chef della Michelin e artigiani del caffè che propongono del buon cibo e ottime ricette. Si tratta di un sito web molto fresco e pulito nei colori e nella grafica realizzato con la tecnica del parallasse che viene fuori scrollando la sezione del sito web sia per il testo che per le immagini. Queste ultime sono illustrazioni molto belle e al tempo stesso semplici. La particolarità di questo sito web è la pagina delle ricette dove per passare da una ricetta all’altra viene utilizzata la tecnica del drag and drops.

www.koox.co.uk

#2 – LOPESCE

Lopesce

Sito web di prodotti surgelati che utilizza la stessa tecnica del sito KOOX : illustrazioni e tecnica parallasse. I colori rispecchiano l’elemento del mare. Molto belli i colori utilizzati per passare da una sezione all’altra con effetto scrolling. Si tratta di un sito web ad una pagina molto semplice. Quando clicchi sul prodotto surgelato si crea un effetto slide che sposta il surgelato nella sezione di sinistra della pagina, mentre a destra si apre un box con gli ingredienti contenuti nella busta.

lopesce.com

#3 – NUCLEAR DISSENT

Nuclear Dissent

Sito web di tipo documentaristico che parla del dissenso nucleare e del disarmo di alcune aree. Il tutto nasce da una campagna internazionale che ha lo scopo di abolire le armi nucleari e di promuovere il bando nucleare globale. Si tratta di un’esperienza visiva ed uditiva molto forte con immagini e video straordinari.

nucleardissent.com

#4 – DRIP POP

Drip Pop

Sito web che colpisce tutti i sensi creando un’esperienza visiva e di colori molto bella e vivace agli occhi degli utenti, in particolare per l’interattività poiché ad ogni azione del mouse corrisponde una reazione con colori ed animazioni molto belle. Si tratta di un’azienda sudamericana che vende gelati ed utilizza ingredienti naturali per realizzare gelati dal gusto formidabile e sono prodotti realizzati a mano. Molto bella la pagina dei prodotti con i colori e la grafica a cui segue muovendo il mouse un’interattività ed animazione ancor più bella.

drippop.com

#5 – BAIBAKOV ART PROJECT

Baibakov Art Project

Sito web molto semplice e pulito di Baibakov, curatrice, editrice e filantropica che utilizza principalmente due colori: bianco e nero. Ciò che rende accattivante il sito web è la tecnica parallasse utilizzata nella home con un contrasto tra il colore, testo e l’animazione dell’immagine in background che crea delle forme particolare che si muovono al movimento del mouse. Per altri elementi come il logo ed il menù sono state utilizzate delle piccole animazioni molto semplici e belle.

http://www.baibakovartprojects.com/

#6 – TRUNK DUNK

Trunk Dunk

Trunk dunk è una birra indiana ed è raccontata molto bene nel sito web che utilizza l’illustrazione e l’animazione abbinata alla tecnica della parallasse che insieme ai colori e allo scrolling della pagina crea un’esperienza unica. Sito web ad una pagina molto esaustivo che contiene tutte le informazioni essenziali su questo prodotto.

https://www.trunkdunk.com/

#7 – BRAND STUDIO

Brand Studio

Sito web di uno studio creativo russo che è stato premiato da Awwwards e che utilizza suoni, animazioni ed illustrazioni che ne fanno un sito unico. Vi consiglio di alzare il volume del vostro computer per poter scoprire a pieno l’esperienza interattiva del sito. Il mouse nella homepage si trasforma in una mano vera e propria e nel caricamento della pagina compaiono 4 occhi che si muovono e che, una volta caricata la pagina, si trasformano in degli orologi. Cliccando su uno di quegli orologi si apre un’altra pagina molto bella, piena di animazioni, di suoni e musica con i volti dei protagonisti dello studio. Si apre un ulteriore pagina con altre animazioni ed informazioni aggiuntive come il telefono, l’email e la mappa. Nulla è scontato ma è tutto imprevedibile. Se cliccate sull’icona del telefono vi appare qualcosa che non vi aspetterete. Sito web molto molto creativo in ogni particolare.

https://www.brandstudio.ru/

#8 – FISH FINGER

Fishfinger

Anche Fishfinger è un’agenzia creativa che ha realizzato il sito web facendo dei suoi punti di forza i colori e le animazioni ed utilizzando la parafrasi di un pesce per realizzare delle storie incredibili. Specializzati nel branding, animazione e web design utilizzano esperienze digitali magiche e promettono di non essere noiosi e di creare qualcosa di indimenticabile.

https://www.fishfinger.me/

#9 – BUILD IN AMSTERDAM

Build In Amsterdam

Build in Amsterdam è un’agenzia creativa specializzata nella realizzazione di e-commerce. Sito web molto semplice e pulito con belle immagini fotografiche che utilizza per catturare il suo pubblico. Molto belle le animazioni e lo scrolling delle immagini. In particolare la presentazione dei casi-studio è fatta molto bene sia per l’utilizzo dei colori che per la combinazione delle immagini con il testo e lo scrolling delle varie sezioni. Anche il font è molto bello e rispecchia la pulizia e l’ordine del sito.

https://www.buildinamsterdam.com

#10 – AMAZONIA FONT

Amazonia Font

Questo sito web, Amazonia font è un font ispirato alla vita esotica della Foresta Amazzonica ed è molto bello perché vi è un alfabeto che è ispirato ad un animale dell’Amazzonia che è rappresentato da un’illustrazione ed il nome scritto con il font creato

Questo sito web è stato realizzato per pubblicizzare Amazonia font, un font ispirato alla vita esotica della Foresta Amazzonica ed è molto bello perché vi è un alfabeto che è ispirato ad un animale dell’Amazzonia che è rappresentato da un’illustrazione ed il cui nome è scritto con il font “Amazonia”.

https://www.amazoniafont.com

Hai preso spunto da uno di questi siti web? Quale ritieni più interessante? Perché? Scrivilo nei commenti.

Per piacere seguici e metti mi piace:

Quanto costa un sito web? E’ difficile rispondere a questa domanda perchè le variabili che influiscono sulla progettazione e sulla realizzazione di un sito web sono numerose.
Questo è uno dei motivi per cui pochi esperti del web osano pubblicare un listino prezzi, ma farlo può essere anche un modo per targhetizzare i propri clienti sin dall’inizio e anche per motivi di chiarezza e coerenza: “ti dico sin dall’inizio quanto ti costa il mio servizio se mi scegli.”
Non tutti i web designer sono uguali: ognuno di noi ha un proprio background ( studi, esperienza ) ha una propria capacità e creatività che influiscono anche sul costo finale del servizio offerto.

Il rapporto qualità/quantità del servizio offerto influisce notevolmente sul costo finale.

Tutti possono realizzare un sito web anche a 100€ ed in un solo giorno, ma quanto durerà questo servizio e soprattutto che utilità avrà per il cliente? Nessuna! Posso mettere la mano sul fuoco che questo cliente dopo qualche mese cercherà un professionista più serio che gli proporrà ed offrirà un prodotto che duri nel tempo. Ma intanto il cliente ha speso e perso 100€ inutilmente!
Per questo, quando si decide di investire nel web, è bene pensare che spendere qualche euro in più in un prodotto valido che ti darà dei benefici del tempo e che ti ripagheranno dell’investimento fatto!
Il sito web non ha costo fisso perchè non vendo in questo caso una scarpa di una determinata marca, ma propongo un prodotto che come ho detto dipende da moltissime variabili.
Per questi motivi ho deciso di fare una cosa che anni fa era impensabile, ma che ora si sta diffondendo sempre di più in questo settore; ho deciso di mettere in chiaro e di pubblicare il listino prezzi dei miei servizi. Tieni presente che si tratta solo che il costo vero e proprio è stabilito solo dopo aver preso contatti con il cliente che dovrà accettare il preventivo per iscritto e dopo averlo filmato. Questi sono pressi calcolati in linea di massima. I parametri che utilizzo per creare il mio listino prezzi sono:

  • tipo di design richiesto
  • numero di pagine di un sito web;
  • elementi dinamici extra;

Il listino è stato realizzato per i 4 settori di servizi che offro: Sviluppo, Grafica, Seo & Smm e Stampa. Stai tranquillo, non sono una tuttologa, non faccio tutto io ma mi appoggio ad un team di collaboratori , oguno con le proprie competenze, che ho conosciuto durante la mia esperienza lavorativa e con cui ho mantenuto un’attività di collaborazione e di scambio.
Un’altra caratteristica dei servizi che offro che non è compresa nel costo del sito web, ed è la presenza in ogni mio progetto dell’ aroma del caffè: il gusto, il corpo ed il colore unico, un mix perfetto di elementi che rendono i miei progetti unici, seducenti ed accattivanti.
Se ritieni che il rapporto qualità/prezzo sia conveniente, contattami senza problemi per un preventivo gratuito ed un caffè. Offro io!
Ti chiedo solo di rispondermi una volta che ho definito e ti ho inviato il preventivo: “Si accetto”; “No grazie non mi interessa”. Perchè non c’è maleducazione più grande di una mancata risposta seppure negativa ma almeno una risposta educata.
Quante volte ti è successo? Non è piacevole, perchè ho comunque speso del tempo a calcolare il costo del sito web e quindi un NO grazie me lo merito! Cosa ne pensi in merito? Scrivilo nei commenti.

Per piacere seguici e metti mi piace:

Vuoi realizzare un semplice effetto parallasse? Non c’è bisogno di utilizzare Jquery ma è sufficiente conoscere qualche regola css. L’effetto è ottimo e hai il vantaggio di non appesantire la pagina con con codice ulteriore.

Il segreto sta nell’aggiungere un’immagine in background in un contenitore con una altezza specifica e ben definita. Inoltre devi utilizzare la seguente regola css:

img{
background-attachments: fixed;
}

Questo serve per creare l’effetto parallasse che lascia l’immagine in background fissa, mentre permette di far scorrere le altre sezioni e le immagini al di sopra con velocità differenti.

Le altre proprietà sono usate per centrare e scalare le immagini perfettamente.

img {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

In questo esempio usiamo le percentuali e non i pixel in modo da impostare l’immagine esattamente uguale alla larghezza dello schermo e quindi impostiamo l’altezza del contenitore parallax al 100%.
Molto importante è applicare l’altezza pari al 100% sia al tagche al tag.

Il tag “background-attachment: fixed” crea alcuni problemi ad alcuni dispositivi mobili. Si può ovviare a questo utilizzando le media queries e disattivando l’effetto parallasse con la seguente proprietà:

@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}

Per scaricare la risorsa che ho creato per te, per favore inserisci nome ed email.
Ti invierò il link nell’email che inserirai nel modulo qui sotto.

— SCARICA LA RISORSA “Come realizzare l’effetto parallasse con i Css”—

Per piacere seguici e metti mi piace:

In questo video-tutorial vediamo un’altro modo di utilizzare l’effetto parallasse per creare un effetto scrolling pagina accattivante con gli oggetti e gli sfondi che fanno un’azione particolare. In questo articolo sono elencati tutti i tipi di plug-in che possiamo trovare ed utilizzare per creare effetti particolari.

Io ho scelto il plugin MultiScroll.js, realizzato da Alvaro Trigo, poiché crea un effetto di divisione della pagina verticale nello scrolling per passare da una sezione all’altra.

Con questo plugin è possibile modificare ed impostare diverse proprietà importanti come la velocità, il tipo di easing, le opzioni di scrolling della tastiera e molte altre proprietà in modo da poter customizzare l’effetto di cui si ha bisogno.

Ecco l’esempio creato dello sviluppatore del plug-in e che ho cercato di realizzare per voi nella risorsa che ho caricato sul mio blog.

Per scaricare la risorsa che ho creato per te, per favore inserisci nome ed email.
Ti invierò il link nell’email che inserirai nel modulo qui sotto.

— SCARICA LA RISORSA “Utilizza MultiScroll.js per realizzare un effetto scrolling accattivante”—

Per piacere seguici e metti mi piace:

In questo video-tutorial ti spiego come realizzare un sito web più dinamico per attrarre maggiormente tuoi utenti. Con l’effetto parallasse crei maggior interesse per il tuo sito web perchè al movimento del mouse si muovono gli oggetti presenti sulla homepage. Quanto è noioso un sito web statico? Sono sufficienti alcuni semplici accorgimenti per vivacizzare e rendere più appetibile il tuo sito web. In questo primo video vi mostrerò come aggiungere movimento ad alcuni elementi della vostra home con l’effetto parallasse utilizzando un semplice plugin.
Il plugin Parallax.js che ho utilizzato nella mia risorsa e che potete scaricare nel link in fondo all’articolo, è stato realizzato da Matthew Wagerfield.

#1 – Scarica i file per il tuo progetto al seguente link e successivamente inserisci lo scrip nel foglio html:

<div id="scene”>
</div>

#2 – Crea i tuoi elementi html ed inseriscili nel codice html. Tieni conto che ogni istanza di Parallax ha bisogno di un elemento contenitore che chiamiamo scena. Puoi indicare il nome che vuoi:


<div id=""scene”"></div>

Tutti gli elementi figli della scena diventeranno oggetti in movimento e dei livelli indipendenti.

#3 – Inserisci l’opzione “data-depth” per definire il movimento e la profondità degli elementi. Questo elemento non deve mancare, altrimenti il plug-in non funziona.


<div id="scene”> <div data-depth=“0.2">Il mio primo livello</div>

<div data-depth="“0.6"">Il mio secondo livello</div>

#4 – Richiama il plugin nel foglio html:

var scene = document.getElementById('scene');
var parallaxInstance = new Parallax(scene);

Per capire come utilizzare le altre opzioni visita la pagina del produttore

Per scaricare la risorsa che ho creato per te, per favore inserisci nome ed email.
Ti invierò il link nell’email che inserirai nel modulo qui sotto.

— SCARICA LA RISORSA “Parallax.js: aggiungi un tocco di vivacità al tuo sito web”—

Per piacere seguici e metti mi piace:

La grande novità del 2018 è il rilascio di un Working Draft del W3C con nuove regole di Css4 che sono ancora in fase di discussione. Per cui prima che il Working Draft diventi Editor’s Draft, le cose potrebbero cambiare, ma credo che valga già la pena di introdurre il discorso che rivoluzionerà il codice Css ed Html. Rispetto al passato, le specifiche standard sono rilasciate in maniera più veloce e anche i browsers stessi, compreso Explorer, possono adottare più velocemente le nuove specifiche e funzionalità in modo da non dover aspettare molto a lungo per poter utilizzarle.
Prima di utilizzare puoi controllare lo stato di supporto attuale dei browser su Caniuse; noterai che molti selettori non sono ancora supportati, ma lo diventeranno ben presto.
La parte più importante dei selettori riguarda lo sviluppo dei form o moduli contatti che presentano tantissime novità.

Ecco i selettori CSS4 che possiamo utilizzare ora e che aggiungono più potere e più flessibilità al tuo lavoro e faccio un paragone tra il vecchio codice ed il nuovo.

SELETTORI CSS4

1# – Negation:
Questo selettore che si esprime con il :not è stato introdotto sin dai CSS3 ma adesso può accettare selettori multipli come un argomento, lasciando il nostro codice più leggibile e coinciso.

La sintassi attuale:

h1:not(.this-element):not (.another-element)
{
font-size: 1.2em
}

Nuova sintassi:

h1:not(.this-element, .another-element)
{
font-size:1.2em;
}

Questo elemento è supportato solo da Safari per ora.

#2 – Matches:

Questo elemento è l’opposto del precedente e può anche accettare selettori multipli come un argomento.
La nuova sintassi non cambia molto rispetto a quella precedente ma migliore in leggibilità.

La sintassi attuale:

h1.this-element,
h1.another-element
{
font-weight:bold;
}

Nuova sintassi:

h1:matches (.this-element, another-element)
{
font-weight:bold;
}

Questo elemento è supportato solo da tutti i Browsers

#3 – Relational

È possibile che questo elemento potrebbe non essere sviluppato a causa della sua complessità ad essere implementato.Questo elemento potrebbe permettere di dare uno stile ad un elemento in base ai suoi contenuti.

.container:has(.this-element)
{
background:green:
}

 

#4 – Drop

Questo selettore permette di aggiungere lo stile agli obiettivi di HTML5 drop. Lo stile può essere applicato se la parte da trascinare è valida, invalida o attiva.

.element:drop
{
border: 3px solid, background:grey
}
.element:drop(active)
{
border-color:blue;
}
.element:drop(valid)
{
border-color:green;
}
.element:drop(invalid)
{
border-color:red
}

#5 – Indeterminate

Associa elementi che sono in uno stato indeterminato. Checkboxes, radio button e progress bars possono essere in questo stato. Per esempio un checkbox genitore con 2 checkbox figli selezionati, può essere indeterminato. Questo può essere fatto solo in Javascript e non in HTML

input[type=“checkbox”]: indeterminate
{
opacity: 0.75
}

Questo selettore è supportato solo dai browser: Firefox, Chrome e Safari

#6 – Default

Associa elementi in default tra una serie di elementi simili, come per esempio l’evento selezionato in un elemento:

option:default
{
font-weight:bold;
}

Questo selettore è abbastanza supportato da tutti i Browsers.

#7 – Validity

Il selettore validity è utilizzato per gli elementi cha hanno uno stato di valido o invalido.

input:invalid
{
border:1px solid red;
}

input:valid
{
border:1px solid green;
}

Questo selettore è supportato da tutti i Browsers

#8 – Range

Il selettore Range applica agli elementi che hanno un limite di raggio come uno slide o un numero di input con valore massimo o minimo.

input: in-range.
{
background:green;
}
input:out-of-range
{
background:red:
}

Questo selettore è supportato da tutti i Browsers tranne Opera mini.

#9- Optionality

Questo selettore serve a chiarire quali elementi sono opzionali e quali invece sono richiesti in un form.

:required
{
border: 2px solid black
}
:optional
{
border:1px dashed grey;
}

#10 – User interaction

Questo selettore serve a creare lo stile ad un elemento invalido solo dopo che un elemento ha interagito con un’altro e non quando la pagina si carica. Questo è il caso di un campo di un modulo contatti che viene compilato in modo errato:

input: user-error
{
border:1px solid red;
}

#11 – Mutability

Questo elemento attribuisce uno stile al campo input o textarea che si basa solo sulla lettura o sulla scrittura:

textarea:read-only
{
color:grey;
}
tetarea: read-write
{
color: black;
}

#12 – Placeholder Shown

Questo selettore è abbastanza supportato dai Browser. Di solito gli elementi input di un form possono mostrare il testo segnaposto tramite click sul campo input. Ora invece possiamo dare lo stile a questi elementi che mostrano il testo segnaposto.

input:placeholder-shown {
border-color:blue;
}

#13 – Local Link

Questo selettore non è supportato da nessun browser. Il selettore Local link ti permette di creare stili diversi a link ( per esempio in un menù di navigazione

:local-link(0)
{
color: red;
}
:local-link(1)
{
color: green;
}

:local-link(2)
{
color: yellow;
}

#14 – Time Dimensional

Il funzionamento di questo selettore è simile a Matches( ) con la differenza che può selezionare l’elemento riferito ad un tempo che può essere corrente, passato e futuro. Questo selettore può risultare utile durante la visualizzazione di sottotitoli di un video HTML5.

:current(p, span) {
background-color: yellow;
}

:past(p, span),
:future(p, span) {
background-color: gray;
}

#15 – Hiperlink

Questo selettore associa tutti i link e sostituisce a:link e a:visited

:any-link{
text-decoration:underline;
}

Hai utilizzato questi selettori per i tuoi progetti? Se non l’hai ancora fatto, scarica gratuitamente la risorsa che ho creato per te ed utilizzala per i tuoi progetti.
Ti consiglio di visitare anche questo sito web per chiarire ulteriormente le tue idee e le possibilità di utilizzo dei selettori Css4.
Per scaricare la risorsa che ho creato per te, per favore inserisci nome ed email.
Ti invierò il link nell’email che inserirai nel modulo qui sotto.

— SCARICA LA RISORSA “15 nuovi selettori CSS4 per creare form d’impatto”—

Per piacere seguici e metti mi piace:

Il material design è una tecnica di design ideata da Google che pian piano ha rinnovato tutti i suoi prodotti  trasformandoli in design digitale innovativo, un linguaggio a metà tra flat design e skeumorfismo di Apple.
La parola chiave del material design è proprio “material” che vuol dire materiale cioè oggetto. L ’obiettivo del design materiale è di fare in modo che le interfacce si comportino come degli oggetti reali cercando di adeguarsi ad ogni situazione. L’ideatore di questo progetto Matias Duarte ha affermato che:

Come la carta il nostro materiale digitale si può espandere o restringere riformandosi in modo intelligente. I materiali hanno superfici fisiche e bordi. Cose come ombre e cucitore danno il loro significato di qualcosa che tocchi.

In realtà il material design è un’evoluzione del flat design perché utilizza alcune sue caratteristiche come le palette di colori forti, le forme geometriche primarie e lo spazio largo tra testi.

Il material design è nato qualche anno fà come nuovo strumento per creare esperienze ed emozioni differenti nella progettazione di siti web. Il Design è un modo di pensare, un’esplorazione per capire cosa funziona, richiede collaborazione di diverse figure nel web e persone che lavorano per costruire il material design. Design è un linguaggio di condivisione, una serie di elementi che parlano tra loro in modo chiaro, elementi flessibili tra loro grazie ad ogni dettaglio. Design è “Niente è mai fatto” perché siamo in un mondo di continua evoluzione e continui bisogni.
Material design è un sistema unificato, attraverso la combinazione di materie, risorse, e uomini che collaborano insieme per trovare soluzioni nuovi insieme.

Material.io  è un luogo virtuale dove sono inseriti tutti i lavori realizzati con il material design, con lo scopo di condividerlo e di farlo crescere. Il material Design ti permette di ridefinire gli aspetti della tua interfaccia, dai colori alle animazioni e di realizzarle in modo corretto su ogni dispositivo. Grazie a strumenti come REMIXER puoi fare modifiche in tempo reale grazie alla possibilità di ridefinire il design attraverso il cambiamento di colore, animazione e visibilità senza necessità di modificare il codice o di far ripartire la applicazione.

OBIETTIVI

Il material design ha l’obiettivo di far condividere una serie di principi che vanno dal buon design a quelli di innovazione, di scienza e tecnologia; Questo viene raggiunto attraverso sistemi che realizzano un’esperienza unica per diverse piattaforme e differenti dimensioni di ogni dispositivo. Le regole per i dispositivi mobili sono importanti, ma lo sono anche quelle riguardanti i touch, la voce, il mouse e la tastiera sono input fondamentali.

PRINCIPI

  1. Superfici tattili: le superfici digitali devono essere reali, tangibili, toccabili con uno spessore di 1 dpi (dot per inch). Utilizzando questo spessore unitario vi è la definizione utilizzata di quantum paper. In questo modo gli elementi acquisiscono ombre realistiche perché sono strutturali in modo gerarchico. La suddivisione in livelli migliora l’esperienza utente e fa spostare la sua attenzione su elementi importanti della pagina come i pulsanti o menù di navigazione. Questa è la differenza più importante con il flat design che come dice il nome stesso vuol dire piatto. Il design materiale invece introduce il concetto di profondità e tridimensionale delle superfici delle interfacce ma che rimane sempre semplice con le linee e le forme.
    A seconda della importanza i quantum paper sono disposti ad una diversa altezza facendone cambiare l’ombra generata. Per esempio i pulsanti di navigazione principali vengono messi in primo piano, mentre le strutture a blocchi dell’interfaccia sono posti  più in basso con un’ombra meno consistente.
  2. Animazioni intelligenti: le interfacce non sono statiche e devono però essere sensate e coerenti con l’esperienza dell’utente. Un’animazione deve essere una conseguenza di un gesto e di una intenzione dell’utente quindi devono essere intelligenti. Molto importante è anche che le animazioni partano dal punto in cui l’input è stato dato. Il movimento è significativo ed appropriato, e serve a focalizzare l’attenzione e mantenere continuità. Le transizioni sono efficienti e coerenti.
  3.  Adattabilità: le interfacce grafiche devono essere responsive e cioè adattarsi in modo dinamico ad ogni dispositivo, computer, tablet o cellulare. Un modo per strutturare un’interfaccia di un applicazione utilizzata da ogni dispositivo è creare diverse dimensioni per i blocchi, cioè le card che compongono la grafica. Per esempio al di sotto dei 700 pixel di larghezza dello schermo questo contenuto verrà mostrato in modo diverso rispetto agli schermi più grandi.
  4.  Inchiostro digitale: è la necessità della stampa alle superfici digitali delle interfacce. Tutto quello che viene applicato alle superfici digitali, diventa inchiostro digitale e prende forma reale. Così come avviene nel design stampato, la tipografia svolge un ruolo importante. Google utilizza solo un font di Roboto che ha 8 diversi pesi che ne garantiscono un ampio utilizzo ma non per questo è stato criticato. Dell’inchiostro digitale fanno parte anche i colori e le immagini utilizzate. Google consiglia di non scegliere più di 3 colori o di non utilizzare immagini che non spiegano bene il contesto oppure che non sono di alta qualità.

 

Gli elementi fondamentali di tipografia, griglie, spazio, scala, colore e uso di immagini sono la guida visuale del material design. Questi elementi sono elementi gerarchici. La scelta di colori particolari  hanno lo scopo di creare una superficie in bold che immergo l’utente nella loro esperienza.

LIBRERIA ICONE
Le icone materiali sono belle, deliziose, e facile da usare nei progetti web. Il modo migliore per usarle è quello di utilizzarle come icon-font poiché pesano poco, sono facili da usare, e sono ospitate da google web font.
Una varietà di icone di varie dimensioni e densità possono essere scaricate da questa libreria. Le icone sono disponibili anche

COMPONENTI MATERIALI
I componenti sono precisi, aggiornati periodicamente e open-sources e creano bellissime applicazioni con componenti UI modulari e customizzabili. I componenti sono aggiornati ogni volta e man mano che il Material design si evolve assicurando una programmazione ed implementazione con pixel perfetti. Sono disponibili anche i widget del material design.

STRUMENTI UTILIZZABILI
Ci sono diversi strumenti da poter utilizzare:

  • Gallery: facilitano l’utilizzo ripetitivo del design e ti permettono di catturare feedback sia visuali che di movimento. È possibile annotare e commentare su ogni immagine o video frame, per questo i progetti progrediscono a velocità incredibile;
  • Color tool: si possono creare e condividere palette di colori e misurare il livello di accessibilità  di ogni combinazione di colore;
  • Remixer: aiuta gli sviluppatori ed i designer a configurare e aggiustare il design delle apps in modo collaborativo. Permette facilmente di affinare il design cambiando il colore, le animazioni e la visibilità senza il bisogno di modificare il codice o di far ripartire l’applicazione;
  • Resizer: Vista interattiva che aiuta i designer a provare i breakpoint del design materiale attraverso i dispositivi desktop, mobile e tablet;
  • Device metric: È un esauriente risorsa per dimensioni, e risoluzioni e più dispositivi mobili;
  • Stage: definisce interfacce dinamiche con movimenti interattivi. Ti permette di cambiare il modo di fare design e di costruire esperienze interattive. Stage è uno strumento di design che supera i processi statici di design facilitando un flusso di lavoro più dinamico e sistematico per creare esperienze digitali;

Il material design sta diventando una tendenza molto di moda sia per le forme che per la struttura ed i colori. Google ha saputo creare un unico linguaggio nel mondo del design creando qualcosa di innovativo grazie alla metafora del materiale. Conosci altri siti web realizzati con la tecnica del Material Design? Segnalalo nei commenti.

Per piacere seguici e metti mi piace: