Tesi "Design Digitale. Il Web Design: dalla rivista al digitale"

DESIGN DIGITALE LA PRIMA RIVISTA ITALIANA DI WEB DESIGN / MARZO - APRILE 2018

2018

Tutte le tendenze del web design

WEB 4.0

Uno sguardo alla rete del domani

TIPOGRAFIA I migliori 20 font da usare sul tuo sito

CHATBOT del FUTURO La svolta della ricerca vocale e i nuovi linguaggi delle più grandi aziende

BRANDING

Guida alla creazione del tuo portfolio

CHRIS COY IER Intervista esclusiva al fondatore di CodePen

RESTYLING Come rinnovare il proprio sito internet

TUTORIAL

Le guide per rinnovare tutti i tuoi progetti online

BIMESTRALE - 5.90€

Editoriale

Il tema di questo numero, illustrato dallo svedese Björn Öberg, è incentrato sul futuro dei chatbot, come questi potrebbero apparire tra 10, 30 o anche 80 anni da oggi.

NEL PROSSIMO NUMERO DI DESIGN DIGITALE

Il Web è parte della nostra vita quotidiana. Basti pensare che spendiamo la maggior parte del nostro tempo libero a controllare lo smartphone, non solo i più giovani, ma tutte le età. Oramai ne siamo quasi dipendenti, perchè lo usiamo per tutto: navigare su internet, controllare il meteo, leggere mail, consultare le notizie, condividere foto e molto altro.

Un futuro, questo, che si presenta sempre più multimediale. Ogni volta che affrontiamo una nuova fase tecnologica, dietro le quinte c’è una meticolososa ricerca non solo di ciò che è funzionale ma anche quello che è bello, perchè anche l’occhio deve sentirsi ispirato. I siti internet si animano, si colorano, interagiscono con l’utente. Un gioco di sensazioni che apre la strada a qualcosa di sempre più innovativo.

Ecco il fascino di un bel sito, di una bella applicazione, perchè il web

Google Play Instant: prova le app senza dover installare niente.

design non è fatto solo di codici, ma di emozioni. Design Digitale esplora questo mondo, indaga sulle novità, esplora i linguaggi di programmazione. Anche noi già da giovani, quando ancora gli smartphone non erano parte della nostra vita e si utilizzavano solamente i computer a casa, ci siamo appassionati a progettare qualcosa di bello da vedere, non solo un codice da scrivere. Ecco come un noi, ragazzini di una volta, siamo stati attratti da quei codici, vere e proprie regole, ma pieni anche di significato. Sì perchè, quando abbiamo iniziato, il web era più che altro fatto solo in HTML e non c’erano strumenti, tutti questi linguaggi di programmazione e nemmeno una vera e propria grafica con i CSS. In pochi anni il web ha superato se stesso, raggiungendo dei traguardi incredibili e chissà cosa ci aspetta il futuro. Noi di Design Digitale continueremo sempre ad esplorare questo mondo sempre affascinati dalla sua bellezza.

I segreti delle web analytics per monitorare al meglio il proprio business.

Crea una versione migliorata di responsive email design.

DESIGN DIGITALE

3

SOMMARIO RUBRICHE 6 /TENDENZE DEL WEB I trend di questa primavera da seguire per rinnovare il proprio sito

11 /PWA: MOBILE FIRST Un sguardo su come l’era degli smartphone sta cambiando il mercato delle applicazioni

12 /CREA UNA PWA Una semplice mini guida su come creare la tua prima web

14 /CYBER SECURITY Come far migrare il proprio sito da http a https in tutta sicurezza

15 /RIVOLUZIONE GOOGLE Le nuove regole di internet secondo il colosso statunitense

16 /LA NUOVA ERA DI INTERNET Uno sguardo alla storia della rete e ciò che porterà al Web 4.0

SPECIALI 22 /CHRIS COYIER Intervista al fondatore di CSS-Tricks, co-fondatore di CodePen e host del podcast ShopTalk Show

42

29 /RESTYLING DEL SITO Trucchi e consigli per rinnovare il proprio progetto grafico e essere sempre di tendenza

31 /DATI STRUTTURATI Il linguaggio dei motori di ricerca e la sua semplicifazione

34 /BRANDING Guida alla creazione del nuovo portfolio personale online

38 /TIPOGRAFIA I migliori 20 font che ogni designer deve usare nel web 4

DESIGN DIGITALE

COVERSTORY 42 /CHATBOT DEL FUTURO Le nuove tecnologie di comunicazione, come cambiano

47 /DEVELOPER A CONFRONTO Una doppia intervista sul primo progetto di chatbot di due sviluppatori di Parker Software

22

TUTORIAL 48 /UNA NOTTE MAGICA Come creare e adattare in modo semplice una serie di forme vettoriali

53 /USARE IL FORMATO SVG Una guida semplice su come usare questo formato sul tuo sito e le ragioni per sceglierlo ogni volta

55 /RESPONSIVE SLIDER Le basi per una presentazione semplice per tutti i dispositivi

16

55

DESIGN DIGITALE

5

/RUBRICA

LE TENDENZE DEL WEB Negli scorsi mesi abbiamo presentato alcune novità, ecco però arrivare la primavera a portare un segnale di cambiamento e la grafica fiorisce in un vortice di colori e con codici sempre più innovativi.

1

COLORI BRILLANTI

Nel 2017 abbiamo visto un’ondata di colori e questa tendenza è qui per rimanere, rendendola uno dei trend più importanti anche di quest’anno.

Vedremo alcune combinazioni accattivanti dai colori intensi, design che possono creare delle grafiche quasi psichedeliche.

6

DESIGN DIGITALE

Il 2017 è stato un anno di rivoluzioni per il design, presentandosi con colori vibranti, tipografie in primo piano e una grafica sempre più in movimento.

Un anno ricco di ispirazioni, che ha influenzato il 2018 già dagli scorsi mesi. Abbiamo già visto, infatti, come i grandi marchi si sono adeguati al nuovo cambiamento per modificare la propria identità grafica, così come la community, che si è divertita a giocare con le immagini e i testi, andando perfino fuori dagli schemi. Il 2018 si presenta anche in questi mesi primaverili come l’anno delle grandi rivoluzioni digitali e il web design non si tira indietro a questo cambiamento. Ecco quindi che l’uso sempre maggiore degli smartphone porta alla necessità di rinnovare la propria interfaccia grafica, il proprio brand. Esploriamo, quindi, le tendenze di questa primavera.

2

TREND PRIMAVERA 2018 /

TIPOGRAFIA

Il testo è sempre il padrone di ogni sito, lo vediamo ora in una veste più fantasiosa. Al via così alla sperimentazione per ottenere risultati dal forte effetto visivo, mescolando caratteri con immagini e simboli. I risultati possono essere sorprendenti, di forte impatto e se volete rimanere negli schemi utlizzate anche caratteri con le grazie, perchè come gli altri sono sempre molto di tendenza.

3

ELEMENTI GEOMETRICI

L’utilizzo di elementi geometrici può rendere il progetto indimenticabile.

Alcune forme sono molto di tendenza in questo momento: triangoli, pentagoni, il cerchio o l’ellisse. Grazie a questo, il design prende una nuova identità, decorando la pagina con elementi semplici, molto accattivanti e giocosi. Anche il testo e le immagini così possono interagire tra loro.

DESIGN DIGITALE

7

/RUBRICA

5 8

FOTO ILLUSTRATE

Una tendenza del 2018 è la combinazione di illustrazioni con fotografie: una tecnica che conferisce un aspetto unico e molto moderno a qualsiasi progetto.

Aggiungere elementi disegnati a mano alla semplice fotografia può far risaltare il proprio progetto.

Un must del nuovo anno?

Unire video e fotografia, creando un effetto ipnotico e veramente suggestivo, una tecnica da provare.

DESIGN DIGITALE

4

ILLUSTRAZIONI

Illustrazioni grafiche e Web Design si sono finalmente incontrati in una potenziale combinazione, non è ancora completamente sfruttata. Le illustrazioni, diversamente dalla fotografia tradizionale, trasmettono personalità al sito. L’esperienza dell’utente sarà immersiva e trasmetterà autenticità come mai prima.

6

TREND PRIMAVERA 2018 /

DUOTONE

Le grafiche a due toni sono ancora molto gettonate, anche e soprattutto se collecage a dei gradienti.

Questo effetto d’altronde esiste già da qualche decennio; solo grazie a Spotify è tornato tuttavia a fare tendenza ed è sempre più usato.

7

ANIMAZIONI

Nel Web le animazioni hanno un ruolo sempre più predominante. Permettono ai navigatori di sapere cosa sta succedendo e cosa succederà. Oggi le animazioni le vediamo ovunque: loghi, icone, transizioni nella pagine web e anche nelle email.

Interessante come video e GIF offrono un vero e proprio gioco visivo, suscitano emozioni positive e attirano l’attenzione dei visitatori per un periodo di tempo sicuramente più longevo.

8

GRIGLIA

La classica griglia viene totalmente scolvolta e si cerca di infrangere le regole e liberare la creatività. Immagini e testo si sovrappongono e convergono rompendo ogni schema, creando progetti unici e sperimentali.

DESIGN DIGITALE

9

IN REGALO CON QUESTO NUMERO CHOPSEE SOFTEE

CODEPEN PRO

ICONE UNICHE

20 TUTORIALS

Il font soffice come un marshmallow. Dall’aspetto divertende. Provalo!

Un mese gratuito di codepen nella versione pro per developers.

Un set completo di semplici icone da usare per il web e per la stampa.

Solo per i lettori di Design Digitale: i migliori tutorial dagli esperti del settore.

ENTRA SUL NOSTRO SITO SU WWW.DESIGNDIGITALE.IT/RISORSE Registrati per avere un accesso esclusivo così da scaricare risorse, video, tutorial e molto altro

PROGRESSIVE WEB APP /

PWA: MOBILE FIRST

WWW WWW WWW

L’uso degli smartphone sta crescendo in maniera inarrestabile da almeno qualche anno. Come sono cambiati i comportamenti degli utenti? di Andrew Gazdecki

G

oogle ha introdotto nel 2015 l’idea di creare Progressive Web App (PWA) per dispositivi mobili. La società aveva così spiegato come l’utilizzo di questo nuovo approccio avrebbe eliminato alcune delle restrizioni sulle app native, come la difficoltà nella condivisione della app e l’accesso da locale. Problematiche che tuttora riguardano la maggior parte delle applicazioni disponibili.

Google sta cercando di soppiantare questo problema, introducendo questa nuova scoperta, che combina le qualità dei programmi nativi con la facilità e l’accessibilità del web.

Il futuro è sempre incerto, anche se siamo a conoscenza del fatto che le esperienze quotidiane stanno influenzando la progettazione di nuove esperienze multimediali e che le PWA saranno le indiscusse protagoniste nel prossimo futuro. Il vantaggio più significativo sta nel fatto che una web app è più facile

da individuare di una app nativa, dato che non c’è bisogno di andarla veramente a cercare, avendo la possibilità di scaricarla direttamente dal browser. Per non parlare del fatto che le app native devono essere pubblicate su App Store, Google Play o su un altro marketplace per essere scaricate, mentre le PWA possono essere aggiunte dirattamente alla home page senza perdita di tempo e con un semplice link. Tutto ciò rende il procedimento anche più condivisibile, perchè gli utenti possono scambiare con i propri amici il link stesso per aprire l’applicazione. La nostra cultura, soprattutto su Internet, ama condividere qualsiasi cosa ed ecco il motivo per cui ogni piattaforma social di successo consente agli utenti di condividere ogni tipo di contenuto. Senza questa funzione, è difficile per molte app native attirare l’attenzione che meritano.

Un nuovo fenomeno che affligge l’utente medio è “l’affaticamento da app”, cioè il fatto che, secondo alcune ricerche, i consumatori non scaricano nessuna o una sola app al mese. Questa specie di malattia è causata da due fattori chiave: il numero di app disponibili, con il conseguente fatto che

molte applicazioni sono vecchie e non vengono più aggiornate o scaricate; lo spazio disponibile sui nostri smartphone. Spazio di archiviazione dei dati, ma anche lo quello sulla schermata principale del nostro dispositivo. A nessuno piace scorrere pagine e pagine di app per trovare quello che vuole. Molti utenti, infatti, ritengono di avere già abbastanza o addirittura troppe app sui propri dispositivi mobili. Pertanto, convincerli ad affollare lo schermo con un’altra icona diventa una impresa sempre più difficile.

Le PWA sono molto più flessibili, permettendo di salvare un collegamento URL senza dover scaricare una applicazione. Ciò significa che sarà difficile far esaurire lo spazio disponibile, dato che la web app salverà sulla schermata home o solamente il link sullo smartphone, che potrà essere consultato in locale. Ecco perchè ogni sviluppatore dovrebbe iniziare già a pensare ad aggiornare o creare una progressive web app, perchè questo metodo offre di più e per molto meno sforzo di una app nativa.

Sì è importante rendersi conto che le PWA sono ancora nella loro prima fase, ma col passare del tempo è probabile che queste nuove app sorpasseranno o rimpiazzeranno direttamente quelle native.

DESIGN DIGITALE

11

/RUBRICA

LE TOOL PER LO SVILUPPO DI PWA I migliori strumenti da usare per costruire una web app.

Ecco come questa nuova tendenza sta modificando il mercato. Così dalle sole pagine di ispirazione a estensioni per svolgere test, come Lighthouse di Google, fino a programmi per la programmazione, ecco una lista di tool da non perdere.

Vue vuejs.org

PWA Rocks PWA.rocks

Una mini guida passo per passo su come creare facilmente una PWA, per aggiungere il vostro sito in modo instantaneo sulla schermata home e visualizzarlo offline.

Knockout knockoutjs.com

P

PWABuilder manifoldjs.com

AngularJs angularjs.org

Google Developers developers.google.com

Webpack webpack.js.org

GitHub github.com

React reactjs.org

Polymer polymer-project.org

12

CREA LA TUA PRIMA PROGRESSIVE WEB APP

DESIGN DIGITALE

er creare questo tipo di applicazioni abbiamo bisogno di un sito web, adattato bene a tutti i tipi di schermi e dispositivi, soprattutto gli smartphone e tablet.

L’aggiunta di una web app renderà l’esperienza migliore per l’utente e migliorerà la visibilità del sito, questo perchè permetterà anche di visitare il sito internet in remoto.

1. TESTARE IL PROPRIO SITO Per verificare se il tuo sito funziona come PWA puoi usare Lighthouse, un’estensione di Chrome che ti dirà se il tuo sito può supportare l’implementazione di una web app e come migliorarlo se non lo è. Una volta installato, apri il tuo sito web e fai clic sull’icona Lighthouse in alto a destra nel browser, quindi generate report. Si aprirà una nuova scheda con alcune informazioni ed è così possibile verificare la percentuale di compatibilità e cosa serve per migliorare il sito internet.

2. SERVICE WORKER Questo passaggio è fondamentale ed un requisito di un PWA, quindi ne abbiamo bisogno, perchè per ottenere il funzionamento delle

Progressive Web Apps vengono richiesti i Service Workers. Utilizziamo nel nostro progetto i codici della tool sw-toolbox di Google (bit. ly/2ngpSct), per consentire al sito di funzionare offline, inserendolo nella <head> in index.html: <script> if (‘serviceWorker’ in navigator) { window.addEventListener(‘load’, function() { navigator.serviceWorker. register(‘/ sw.js’).then( function(registration) { // Registration was successful console.log(‘ServiceWorker registration successful with scope: ‘, registration.scope); }, function(err) { // registration failed :( console.log(‘ServiceWorker registration failed: ‘, err); }); }); } </script>

Aggiungi sw-toolbox al progetto copiando il file di GitHub (bit. ly/2rJDp1V) nella tua cartella principale. Creiamo un file sw.js ed inseriamo all’interno questo codice:

PROGRESSIVE WEB APP / ‘use strict’; importScripts(‘sw-toolbox. js’); toolbox.precache([“index. html”,”style/style.css”]); toolbox. router.get(‘/images/*’, toolbox. cacheFirst); toolbox.router. get(‘/*’, toolbox.networkFirst, { networkTimeoutSeconds: 5});

Dovrai controllare che tutti i percorsi dei file siano corretti e modificarli per fare in modo che si possano archiviare quando sono offline.

Se vuoi però che il service worker faccia qualcosa di leggermente diverso rispetto solo al salvataggio di alcune pagine, come mostrare una pagina offline specifica quando non hai accesso a Internet, puoi provare ad implementare il proprio elaborato con diversi script. Adesso non ci resta che testare di nuovo il sito con Lighthouse per vedere se è aumentata la compatibità con le web app, notando come è notevolmente salita la percentuale nel report.

3. CREARE UNA ICONA PER LA APP Dato che il tuo sito verrà visualizzato sulla schermata home di uno smartphone, hai bisogno di una icona. Non è necessario essere un designer per creare un bel logo, ci sono anche molti siti dedicati alla creazione di icone oppure

puoi considerare di farti fare il logo. Assicurati solamente che l’icona possa rimanere all’interno di un quadrato, usando anche le trasparenze quando richiesto.

Molto importante è l’uso sempre maggiore di icone ed immagini in SVG (Scalable Vector Graphics), cioè quegli oggetti grafici che possono essere scalati senza perdere qualità.

Tra le applicazioni da poter utilizzare per creare una icona di questo genere è consigliato usare Sketch, Inkspace oppure Adobe Illustrator.

Dopo aver creato l’icona, è ora di inserirla, salvando i file in una cartella accanto a tutti gli altri elementi del sito. Aggiungiamo il codice a <head> del tuo file index.html, assicurandosi di non avere errori.

4. WEB APP MANIFEST La prossima cosa da fare è creare un manifest, cioè un file che contiene dati su un sito web, come il suo nome, lo sfondo, il font e quali icone vengono utilizzate. In realtà ne abbiamo già creato uno, quando abbiamo già specificato l’icona utlizzata. Possiamo comunque utilizzare un generatore di manifest (bit.ly/2ngUnz7) per inserire le informazioni essenziali del tuo sito.

Copiamo così il codice ottenuto

dal generatore, inserendolo nel file manifest.json, assicurando che il codice non si interrompa, dato che potrebbe essere stata aggiunta una virgola o eliminata una parentesi.

Ecco come si presenta un tipico codice manifest: { “short_name”: “EVE Milano”, “name”: “EVE Milano Consulenza SEO”, “icons”: [ { “src”: “/wp-content/uploads/ apple-icons/apple-touch-icon-48x48. png”, “type”: “image/png”, “sizes”: “48x48” }, ], “start_url”: “/?utm_ source=homescreen”, “display”: “fullscreen”, “lang”: “it-IT”, “background_color”: “#fff”, “theme_color”: “#5bb1f9”, “orientation”: “portraitprimary” }

Ricordandosi di aggiungere anche le altre grandezze dell’icona (non presenti in questo codice), facciamo un ultimo test su Lighthouse, notando come la compatibilità abbia raggiunto il massimo o quasi.

Siamo pronti per finire il progetto e pubblicarlo sul web.

ANALIZZARE UN SITO INTERNET CON LIGHTHOUSE

Google Lighthouse è una estensione disponibile per Chrome. Con questo strumento è possibile effettuare test per verificare criteri che definiscono un buon sito web, per aggiornare e semplificare il codice e rendere

migliore l’esperienza. Le quattro categorie di test fanno riferimento alle prestazioni, alle progressive web app, all’accessibilità, all’esperienza e infine al SEO. Il programma non farà altro che osservare il comportamento

del sito, riferendo suggerimenti o errori da evitare. Se infatti colui che progetta il sito volesse fruire di una web app, lo strumento verifica la compatibilità e indica ciò che deve essere fatto per poter abilitare questa specifica applicazione.

Nel caso in cui il programmatore ha bisogno di osservare il comportamento del proprio sito e migliorarlo, Lighthouse dà la possibilità di consultare le prestazioni e l’esperienza, nonchè quanto il sito stesso sia accessibile ad un maggior numero di utenti. Infine, secondo l’ultima categoria, con lo studio dei parametri di indicizzazione, lo strumento determina quanto il sito è codificato per essere visuallizzato nelle piattaforme di ricerca.

DESIGN DIGITALE

13

/RUBRICA

CYBER SECURITY: DA HTTP A HTTPS Dallo scorso anno Google ha deciso di imporre a tutti i siti di adottare il protocollo cifrato https al posto del normale http. Ecco come migrare verso questo nuovo standard. di Flavio Sapochetti

D

allo scorso anno Google ha deciso di imporre a tutti i siti di adottare il protocollo cifrato https al posto del normale htpps. Se da un lato le ragioni di sicurezza dei dati sono a favore della decisione presa dal più importante motore di ricerca del mondo, dall’altro questa forzatura, costringe i titolare dei siti web a sostenere una nuova spesa per adeguarsi e passare al nuovo standard.

Prima di iniziare l’operazione di passaggio, cerchiamo di capire questo nuovo tipo di protocollo.

HTTPS, ovvero “Hypertext Transport Protocol over Secure Socket Layer”, permette il trasferimento dei dati in maniera sicura grazie all’adozione del protocollo SSL, che riesce a criptare i dati e a permette l’autenticazione della richiesta durante le comunicazioni tra browser e webserver. Oltre al vantaggio della protezione dei dati e la diminuzione del rischio che questi cadano in mano a malintenzionati, si

beneficia anche nell’indicizzazione di Google, perchè l’utilizzo dell’https viene considerato da Google come fattore di ranking. L’adozione del protocollo https, permette anche di poter usufruire dell’http/2, una nuova tecnologia progettata per caricare più velocemente le pagine web.

Ecco allora come migrare il sito:

1. RICHIEDERE UN CERTIFICATO SSL Se il sito si appoggia ad un servizio di hosting, potete fare richiesta direttamente al vostro fornitore.

Un passaggio che però prima comportava delle spese, anche se il prezzo dipende dal fornitore del

vostro spazio Web. Ormai però tutti gli hosting forniscono il certificato SSL gratis, dunque fate richiesta al vostro fornitore, altrimenti valutatene i costi o cercate tra le offerte di altri.

2.1 REINDERIZZAMENTO A HTTPS Una volta che avete completato il passaggio del sito a https, dovrete fare in modo che tutte le pagine rispondono al nuovo protocollo, altrimenti avrete problemi con l’indicizzazione nei motori di ricerca.

Per fare questo bisogna scrivere una semplice istruzione sul file .htaccess presente nella root del vostro sito.

Molti hosting comunque offro il

L’IMPORTANZA DELLA NAVIGAZIONE SICURA SU INTERNET sicuro, soprattutto all’inserimento di dati personali.

La sicurezza su internet è sempre stata una delle principali discussioni e per molto tempo internet non è stato altro che un selvaggio west digitale, dove ognuno doveva badare a sè e c’erano pochissime opzioni che garantivano un accesso sicuro. Nel corso degli anni, 14

DESIGN DIGITALE

però, gli utenti sono diventati più consapevoli dell’importanza della sicurezza durante la loro navigazione e pian piano si è discusso come superare questo problema. Solo grazie all’utilizzo di un protocollo si è riuscito a garantire che il traffico web, sia in entrata che in uscita, fosse

Il Secure Sockets Layer è un protocollo di sicurezza che utilizza la moderna crittografia per inviare e ricevere informazioni sensibili su Internet. Qualsiasi dato che passa attraverso un canale viene crittografato a una estremità e decifrato solo alla ricezione. Il browser può rilevare l’utilizzo di questo protocollo, segnalando il sito come sicuro per gli utenti. Si può capire se un sito utilizza questa nuova forma di sicurezza, osservando l’url della pagina: se il sito viene indicato come sicuro al posto di http si legge https e accanto all’indirizzo si trova un lucchetto.

CIBER SECURITY / reindirizzamento automatico e in alcuni basta attivare questa opzione.

Nel caso però se ne abbia bisogno, dopo aver scaricato il file .htaccess ed averlo aperto con un editor di testo, scrivete il codice che segue direttamente all’inizio del file: RewriteEngine on RewriteCond %{HTTPS} off RewriteRule ^(.*)$ https://%{HTTP_ HOST}%{REQUEST_URI} [L,R=301]

In questa maniera non arrechiamo danni al posizionamento raggiunto su Google e sugli altri motori di ricerca e, nel caso qualcuno avesse messo il nostro sito tra i preferiti salvandolo con il vecchio indirizzo http, potrà raggiungerlo ugualmente.

Illustrazioni di Björn Öberg

2.2 REINDIRIZZARE WORDPRESS In WordPress tutto è più facilitato grazie ad un plugin “Really Simple SSL“. Una volta attivato fa tutto da solo. Ovviamente, però, il certificato SSL/TLS dovrete averlo richiesto al vostro hosting in precedenza altrimenti non funzionerà. Attivato il plugin, l’unica cosa da fare è andare su Impostazioni > Generali nella bacheca di Worpdress e sostituire http con https nei campi: Indirizzo WordPress e Indirizzo Sito e salvare.

3. RISOLVERE L'ERRORE 404 Per verificare che non ci siano errori di visualizzazione, si potrebbe farlo a mano se il sito contiene poche pagine, controllando pagina per pagina. Con un CMS (WordPress, Blogger, Drupal) potrete invece utilizzare un plugin che trova l’errore e lo risolve. In questo modo si dovrà solo sostituire le url da http a https.

4. VERIFICARE I MOTORI DI RICERCA Adesso non resta che controllare la nuova versione del sito sulla Search Console di Google (bit. ly/2C5CUPy) e su Bing Webmaster Tools, verificando sia la versione con www che quella senza. Se il vostro browser vi segnala ancora come sito non sicuro, potete utilizzare un comodo tool che controlla tutti gli url, segnalando i problemi. È molto probabile che vi possano essere degli script ad impedire al browser di contrassegnare il vostro sito come sicuro.

LA RIVOLUZIONE WEB DI GOOGLE Google cambia i criteri di valutazione delle pagine dei siti web: dopo l’attuazione dei protocolli https per rendere più sicura la navigazione e l’implementazione di un ad-blocker nativo, la società si prepara a penalizzare le pagine lente su mobile.

N

ell’arco dello scorso anno Google ha cambiato già la visione del web in modo radicale, segnalando le pagine che non utilizzano https come non sicure.

Una evoluzione che era stata annunciata già all’inizio del 2017, ma che era stata adottata in maniera definitiva solo da ottobre scorso. Non solo, anche altri browser hanno seguito l’esempio ed il famoso lucchetto di sicurezza è arrivato anche su Firefox. Dal 15 febbraio scorso Google ha deciso di cambiare anche la visione delle pubblicità, bloccando quelle ritenute invasive sia su desktop sia su mobile. Meccanismo che non ha facilitato molti proprietari di siti, ma che ha contribuito alla navigazione degli utenti, che non

sono più incappati in pop-up, pubblicità a pagina intera, video che partono in automatico e molti alti annunci invasivi. Se in questo caso l’obbiettivo del colosso è di limitare l’uso di altri ad-blocker per incentivare non solo i propri guadagni, ma anche quelli dei siti internet, dove le pubblicità sono interamente bloccate, il discorso cambia parlando delle future riforme che Google vuole adottare. Dal prossimo luglio Google Search intende penalizzare coloro che hanno un sito lento, quando questo viene visualizzato su mobile. Non c’è da preoccuparsi però, perchè l’aggiornamento interesserà solo le pagine che solo una piccola percentuale di ricerche.

GOOGLE WEB DEVELOPERS Per essere sempre aggiornati su tutte le novità di Google si può consultare il sito ufficiale del colosso per gli sviluppari: developers.google.com. Sul sito si possono trovare tutte le novità del web, nonchè tutti gli eventi futuri da segnare sul calendario per incontrare esperti del settore.

DESIGN DIGITALE

15

/RUBRICA Gli Spectacles, gli occhiali da sole per registrare Snap! da codividere su Snapchat.

LA NUOVA ERA DI INTERNET Internet si sta trasformando e presto la nostra vita online diventerà sempre più attiva. di Alberto Dominguez

D

alle sue origini la rete è stata arricchita e si è evoluta, arrivando fino nelle nostre case, ed è diventata ciò che ora conosciamo.

Un processo continuo verso un futuro ancora da decidere e sempre più rivolto all’Internet delle cose.

Alcune persone tuttavia pensano, già da anni, che la rete “scomparirà”, poiché sarà così integrata nelle nostre vite e nel nostro ambiente che non la noteremo nemmeno.

LA STORIA DEL WEB DAI PRIMI ANNI A OGGI L’Italia sì è collegata per la prima volta ad internet il 30 aprile 1986 grazie ad Arpanet, ma il World Wide Web non era ancora nato. Per capire meglio cosa ci serba il futuro, puntiamo un occhio sul passato della rete come la conosciamo adesso. Un cambiamento continuo.

1987

1991

Al CERN, Tim Berners-Lee crea il World Wide Web. In seguito, Cailliau insieme a Nicola Pellow sviluppa il primo browser Web per il sistema operativo Mac.

Il World Wide Web è reso disponibile al pubblico per la prima volta.

--------------------

--------------------

--------------------

1999

Eric Bina e Mark Andreess creano Mosaic, il browser che favorisce la diffusione del World Wide Web per tutti.

1996 Brewster Kahle fonda l’Internet Archive, una enciclopedia gratuita con la missione di

DESIGN DIGITALE

web per tutti gli utenti inesperti stimola l’ascesa dei blog.

1993

--------------------

16

fornire “accesso universale a tutta la conoscenza”.

Craig Newmark fonda Craigslist, sito che cambia il modo in cui le persone usano gli annunci.

Mitchell Baker viene coinvolta nel progetto Mozilla e ne diventa il presidente.

--------------------

--------------------

2000

L’avvento degli strumenti di pubblicazione

Aaron Swartz contribuisce a costruire RSS e,

LA NUOVA ERA DI INTERNET / Non ci resta altro che attendere e scoprire cosa succederà con l’avvento del Web 4.0, chiedendosi se questa fase non sarà altro che un appuntamento obbligatorio nella nostra vita quotidiana, così come le precedenti fasi lo erano state.

Internet, infatti, come già accennato, ha superato degli importanti scalini nel corso degli ultimi anni, siamo passati ad usare il World Wide Web da piattaforma di ricerca a un modo per connettersi e tenersi sempre aggiornati con gli altri. Non sono lontanti i tempi in cui per creare un sito internet ci doveva essere la supervisione di un webmaster, eppure oggi chiunque può aprire un proprio sito oppure si possono scambiare facilmente idee all’interno di un forum o di un social network.

La rete è diventata nel tempo un fenomeno globale ed oggi se ne fa un grande uso attraverso i telefoni.

Un web però anche più intelligente, fatto di grandi motori di ricerca,

che cercano di capire il linguaggio umano e sfruttarlo nel proprio futuro.

Ecco le basi della nuova era di internet, basato sulla connessione tra macchina e uomo. Potremmo essere in grado di chiamare il Web 4.0 il “Web attivo”, in grado di fornire un elenco dettagliato di informazioni in tempo reale costruito sulle nostre abitudini quotidiane. Alcuni esempi sono già riscontrabili con gli smartwatch, gli smart speakers, i Google Glasses, ma anche gadget come gli Spectacles di Snapchat.

In che cosa si basa il futuro di internet? La risposta non è semplice, ma è quasi sicuro i motori di ricerca tradizionali non dovrebbero scomparire e saranno solo integrati da assistenti virtuali, in grado di comprendere il linguaggio naturale, sia parlato che scritto. Questa semplificazione non sarà l’unica modifica inclusa nella trasformazione di internet, perchè sarà proprio la rete, attraverso i suggerimenti, a

sotto la guida del professor Lawrence Lessig, Creative Commons.

2007

indicare luoghi, eventi, film e molto altro di interessante per i nostri gusti. Addiritturà sarà possibile che l’assistente elettronico potrà prenotare da solo e con il tuo nome i biglietti del cinema, per vedere il nuovo film del tuo regista preferito o cercare l’itinerario per raggiungere un certo luogo. L’assistente avrà solo bisogno di una conferma da te per effettuare la richiesta.

Siamo già vicini alla nuova era di internet e le tecnologie che la renderanno possibile sono già in fase di sviluppo. Gli assistenti virtuali, come Siri o Google Now, stanno raggiungendo una maggiore comprensione del linguaggio naturale, gli smart speaker e gli smartwatch (compresi i fitness tracker) sono già compresi nei nostri mercati e i “Big Data” vengono elaborati in modo più efficace, collegando le informazioni ottenute attraverso più fonti. Non ci resta quindi che attendere l’inevitabile.

connessione da Apple, Microsoft e Mozilla.

--------------------

--------------------

2009

2001

Viene creata WhatsApp da Jan Koum e da Brian Acton .

Un’applicazione basata sulla messaggistica istantanea multipiattaforma per smartphone.

Jimmy Wales e Larry Sanger lanciano il sito Wikipedia.

--------------------

2003 Wordpress, creato da Matt Mullenweg e Mike Little, viene lanciato nel web.

-------------------Nascono anche Flickr, l’Itunes Music Store e Skype, colossi del web attuale.

2004 Lo studente di Harvard, Mark Zuckerberg crea Facebook (allora noto come TheFacebook).

Il sito è il primo social network della storia.

il web mette a disposizione degli utenti.

In questi incontri viene coniato e ufficializzato il concetto di “Web 2.0”.

--------------------

--------------------

2006

Tra la fine del 2004 e l’inizio del 2005, Tim O’Reilly pianifica una serie di conferenze per far capire le novità che

Evan Williams e Jack Dorsey lanciano Twitter.

Per la prima volta si parla di “Web 3.0”, in un articolo di Jeffrey Zeidman.

Steve Jobs, inventore di Apple, lancia un’esperienza di navigazione completa sul cellulare con l’uscita del primo iPhone.

--------------------

2008 Google lancia il browser Chrome per evitare la

--------------------

2010 A San Francisco Instagram, app di fotografia focalizzata su smartphone, viene lanciata da Kevin Systrom e Mike Krieger.

2012 Anche se introdotto in precedenza nel 2006, si stabilizza il “Web 3.0”: social, attivo e insieme a noi ovunque siamo.

--------------------

2014 Nell’ottobre di quell’anno viene pubblicato il linguaggio di markup HTML5.

-------------------Come sarà il Web 4.0?

Non è difficile immaginarsi qualcosa, ma c’è ancora molto da scoprire.

DESIGN DIGITALE

17

TRE FANTASTICHE OFFERTE!

ABBONATI A DESIGN DIGITALE Leggi DD dove e quando vuoi. Scegli una tra le tre opzioni ed abbonati subito per un anno!

SCONTO DEL 25%

SCONTO DEL 30%

SOLO CARTA

SOLO DIGITALE

Le meravigliose cover stampate con materiali sempre più innovativi, una collezione di edizioni che già ispirano i più grandi designer

Ogni esclusiva edizione digitale è accompagnata da video inediti, gallerie di immagini sempre aggiornate e molto altro

26,50 €

19,30 €

invece di 35,40 €

invece di 27,60 €

I prezzi sono stabiliti secondo l’intero importo della edizione cartacea o digitale. Riceverà 6 edizioni ogni anno. Se non sei soddisfatto puoi disdire l’abbonamento in ogni momento, proseguiremo al rimborso dei rimanenti numeri. Il costo dei singoli numeri è soggetto a cambiamento in qualunque momento. Per tutti i dettagli, condizioni dell’offerta e per altre informazioni puoi consultare il nostro sito a www.designdigitale.it/abbonamento

OFFERTA MIGLIORE! CARTA E DIGITALE Ammira le bellissive cover stampate e interagisci con le versioni digitali in un solo pacchetto. Avrai accesso anche al dietro le quinte dei migliori designer all’opera e rimarrai sempre aggiornato sulle ultime news dal web

PERCHÈ ABBONARSI: • Prezzo della rivista bloccato per un anno • Sicurezza di ricevere tutti i numeri • Contenuti esclusivi per gli abbonati

SCONTO DEL 40%

29,50 € invece di 49,20 € PER ABBONARTI VISITA: WWW.DESIGNDIGITALE.IT/ABBONAMENTO

/SPECIALE

Chris Coyier Intervista al co-fondatore di CodePen, creatore di CSS-Tricks e co-host di ShopTalk Show. di Preethi Kasireddy

B

en noto per il suo sito CSS-Tricks e per il podcast ShopTalk con Dave Rupert, Chris Coyier è un ragazzo coinvolgente e divertente.

Cresciuto in una piccola cittadina del Wisconsis, dopo aver proseguito gli studi artistici si è fatto coinvolgere nel mondo della programmazione.

Raccontaci un po’ di te.

“Vengo da una famiglia della classe media di una piccola città, che mi ha permesso di seguire le mie passioni e ho avuto così l’opportunità di ottenere una buona istruzione.

Al liceo ho fatto un corso di programmazione, che mi ha colpito, e alla fine sono andato al college per continuare quegli studi. Uno dei miei insegnanti, Mr. Scott, ha avuto un’influenza positiva sul mio futuro: nella sua classe ci ha insegnato le basi di programmazione, incoraggiandoci ad entrare subito in progetti reali. Uno tra questi,

su cui ho lavorato, era solo una versione Turbo Pascal del Gioco della Vita. Il gioco, però, è stato pubblicato su una rivista e sono stato completamente conquistato da un possibile futuro in questo campo.”

Nel tuo podcast hai menzionato una laurea in informatica e la specializzazione in arte. Come si sono evoluti i tuoi interessi?

“Dopo tutte le esperienze positive che ho avuto al liceo, quando sono andato al college ho subito capito che volevo laurearmi in informatica.

Ho frequentato un corso che si chiamava Management Computer Systems e già dal nome sapevo di aver sbagliato, perché rilevatosi essere più sul lato economico che sulla programmazione. Stavo imparando linguaggi a cui non ero minimamente interessato e gli insegnanti non erano accattivanti. È stato un fiasco. Tuttavia ero ancora un nerd in piena regola,

e la decisione non ha massacrato il mio sogno di diventare un programmatore. Nel frattempo, vivevo con un ceramista e passavo molto tempo con lui a festival d’arte e nel uno studio. Pensavo davvero che la sua vita universitaria fosse molto più fantastica della mia e ero piuttosto geloso. Alla fine ho preso la decisione di cambiare indirizzo di studi, passando dall’informatica all’arte. Quando lo rivelai ai miei genitori, loro erano preoccupati che stavo buttando via la mia carriera universitaria, ma è andato tutto bene, soprattutto perché amavo quel corso. E’ stata la cosa migliore che ho fatto per il mio futuro.”

Dopo il diploma in arte, cosa hai fatto tra la laurea e CodePen? “Quando ho lasciato il college non avevo idea di cosa avrei fatto realmente. Ero motivato a trovare subito un lavoro e ho fatto domanda in molti posti, ma non avevo alcuna DESIGN DIGITALE

21

/SPECIALE

esperienza. Fortunatamente mia madre era nel settore della stampa e conosceva un sacco di gente in giro per la città, così sono stato preso in una tipografia. Era un lavoro piuttosto tecnico: prendevo i disegni e li trasformavo in lastre di metallo per andare in stampa. Non era così interessante e non ero del tutto felice a farlo.

Nel frattempo mi piaceva un sacco la musica e suonavo in una band.

Un giorno ho deciso che il gruppo aveva bisogno di un sito web e questa è diventata una scusa per crearne uno. È stato allora che ho iniziato a capire quanto è bello il web. Grazie ad una piccola opportunità in un piccolo negozio, ho iniziato la mia carriera.”

”Una delle parti più interessanti di CodePen è che si tratta di una comunità. Ci sono un milione di membri che si parlano e si incontrano ogni giorno. Abbiamo persino avuto un fidanzamento!“

Hai lavorato in una società, acquisita da SurveyMonkey. È stato quello il momento in cui hai deciso di trasferirti dal Wisconsin?

“Certo. Dopo aver lavorato per la 22

DESIGN DIGITALE

società a Madison, sono passato a lavorare per una società chiamata Wufoo a Tampa, in Florida. È una delle migliori decisioni che abbia mai preso. Alla fine la società è stata acquisita da SurveyMonkey, ed è stata davvero una cosa positiva, perché perchè proprio lì ho incontrato i due co-fondatori di CodePen, Alex Vazquez e Tim Sabat e siamo diventati amici.”

Ti sei dedicato da subito però a CSS-Tricks. Qual è stato il principale motivo che ti ha portato alla creazione di questo sito?

“In realtà volevo iniziare un blog per ogni singolo programma di Adobe e fornire aiuto, suggerimenti e trucchi. È diventato evidente, però, che non era molto interessato alla grafica, dato che la mia attenzione era rivolta soprattutto a siti di web design ed allo studio di linguaggi di programmazione. Nel 2007, ho deciso perciò di chiudere tutti i blog sulla grafica e mi sono dedicato solamente a CSS-Trick. Sono davvero entusiasta di aver preso quella decisione. Sono contento che il sito sia ancora in circolazione oggi, scrivo lì quando posso e proprio stamattina ho pubblicato un articolo.”

INTERVISTA A CHRIS COYIER / Da che cosa è invece venuta l’idea di creare CodePen? “Nella maggioranza dei casi, il mio lavoro su CSS-Tricks era quello di creare una versione demo, inserire il codice in una cartella e collegare il FTP (protocollo di trasferimento file) al server del sito. Il meccanismo funzionava bene, ma richiedeva al lettore di visualizzare la fonte o di usare gli strumenti per lo sviluppo del browser per scoprire cosa stava succedendo nel codice. In seguito, strumenti come JSbin e JSFiddle hanno permesso di vedere la demo, guardare il codice e poterlo modificare. Una idea davvero geniale, che, a un certo punto, ho pensato di poter fare anch’io, creandone la mia versione. Questa è stata l’idea e la scintilla di CodePen.” Come sei riuscito a guadagnare qualcosa e quanto ci è voluto?

“CSS-Tricks stava facendo un po’ di soldi e avevo scritto un libro su WordPress che andava bene, quindi è stato più facile per me iniziare.

Anche Tim e Alex, i co-fondatori, hanno avuto qualche risparmio su cui appoggiarsi. Perciò abbiamo lanciato CodePen, dato che le nostre uniche spese erano i costi del server.

L’idea era di avere un profitto ad un certo punto e abbiamo lanciato il sito nella versione beta a giugno 2012. Abbiamo inserito anche qualche pubblicità, grazie al numero di visualizzazioni ottenute sul sito.

Intendiamo continuare a monetizzare CodePen, ma speriamo che rimarrà un prodotto gratuito interessante, per il quale la gente paga la versione pro per ottenere qualcosa di maggior valore.”

Come decidi le funzionalità gratuite rispetto alle pro?

“La monetizzazione è la cosa più difficile a cui pensare. Ricevi molti consigli contrastanti. È pazzesco.

Le versione pro, che abbiamo deciso di offrire, ha funzionalità che ritenevamo necessarie agli utenti. Una tra queste funzioni è la modalità di collaborazione, simile a

Google Docs, in cui un massimo di sei persone può programmare tutto nello stesso momento. Le persone lo usano per lavorare insieme, per insegnare, ecc. Ci sono voluti molti sforzi per costruire questa opzione e sembrava una cosa molto ovvia da far pagare. Tuttavia, ci guardiamo intorno e vediamo il lavoro degli altri e abbiamo notato che, per esempio, in GitHub ti fanno pagare dal momento in cui vuoi che qualcosa sia privato. Loro hanno capito che la privacy è importante per alcune persone, quindi questa è una funzione che abbiamo deciso di aggiungere alla versione pro di CodePen. Abbiamo parlato con alcuni VC (Venture Capitalist, cioè un investitore) e uno di questi aveva un sacco di consigli e ci ha detto di rendere tutte le funzionalità pro gratuite. Ci ha detto che ciò che conta di più è fare in modo che CodePen sia il prodotto migliore in quello che fa. Alla fine, come faccio a sapere con certezza che abbiamo fatto la scelta giusta? Non lo so.

Chris Coyer, durante la registrazione di uno degli episodi del suo podcast ShopTalk Show.

A sinistra. Il team di CodePen.

DESIGN DIGITALE

23

/SPECIALE Sono sicuro che ci saranno scelte più appropriate per essere più efficaci di quanto lo siamo ora. Probabilmente ce ne sono altre che potrebbero aver rovinato tutto o che possono distruggere il futuro del sito.”

Il business è difficile, soprattutto per le società che offrono tutto o quasi gratuitamente. Bisogna capire che cosa interessa al cliente.

“Sì Esattamente. Una delle parti più interessanti di CodePen è che si tratta di una comunità. Ci sono un milione di membri che si parlano e si incontrano ogni giorno. Abbiamo persino avuto un fidanzamento! Ci sono gruppi freelance che hanno iniziato sul sito e hanno team che lavorano insieme. Se qualcuno crea qualcosa di veramente interessante e lo inserisce su CodePen, è fondamentalmente pubblicità gratuita per noi. Gli utenti sono orgogliosi del loro lavoro e lo condividono e sono proprio loro a farci pubblicità. Tuttavia, ci sono funzionalità su cui lavoriamo molto ed è giusto farle pagare.”

Come si presenta un tipico giorno di lavoro per CodePen? “Dobbiamo assicurarci di ascoltare i nostri clienti, quindi segnalare bug, correggerli e lavorare sempre più per migliorare l’esperienza.

Dobbiamo bilanciare il nostro tempo tra la costruzione di cose nuove e il mantenimento di ciò che è già presente. Le persone che abbiamo assunto, però, probabilmente passano molto più tempo sul codice rispetto a me, perchè alla fin fine non sono un grande esperto come sono loro. Siamo una piccola società e non ci sono manager, quindi tutti lavorano un po’ su tutto: scrivere email, pubblicare post sul blog, programmare, lavorare come supporto e molto altro.”

Qual è un errore che hai commesso nella progettazione di CSS-Tricks e CodePen che speri di non fare di nuovo in futuro? “È difficile sapere se le decisioni che hai preso sono quelle giuste.

Forse c’è stato qualcosa che ho fatto che era completamente sbagliato e ancora non lo so. Fortunatamente per noi ci siamo finanziati con i

INTERVISTA A CHRIS COYIER /

Sopra. L’ufficio di CodePen in Oregon. A sinistra. Chris Coyer mentre suona il banjo, una delle sue passioni.

soldi dei due fondatori originali di Wufoo. Una delle nostre prime battaglie è stata proprio quella di decidere se creare questo sito.

Alcuni di noi avevano già messo su famiglia, ma tutti avevamo anche altre responsabilità. Ad essere totalmente onesto, stiamo attraversando un momento difficile pure in questo momento. Non sono un manager, ma sto cercando di fare del mio meglio, così che ogni dipendente ha tutto quello di cui ha bisogno. Devi costruire un prodotto interessante. Penso che sia importante per le persone con cui lavoriamo non timbrare un semplice cartellino ogni giorno e non avere solo una promessa vaga. Non stiamo fallendo e nessuno finora ha abbandonato il progetto, ma non posso negare la difficoltà di questo periodo. Sono comunque positivo che tutto andrà per il meglio. Mi immagino di lavorare ancora qui tra un decennio e abbiamo una lista di idee interessanti per il futuro. Se è l’ultimo lavoro che io abbia mai fatto,

per me va bene. Questo è quello che considererei un successo. Mi piace parlare del team come una squadra.

Incoraggio anche le persone a prestare attenzione alle notizie del settore e a commentarle. Il gruppo lavora sodo e la positività è molto

guardare i progetti di altri e esserne impressionato, ma non mi ispiro così, perché quelle persone non mi sembrano reali, non come coloro con cui lavoro ogni giorno.

Su ShopTalk riesco ad intervistare persone veramente interessanti.

Parlando di CodePen, Tim Holman, che viene da Tumblr, dove ha fatto cose incredibili mentre era lì, è un ragazzo davvero intelligente. A lui non interessa la tecnologia e gli importa solo che ciò che costruisce funzioni bene.

Rachel Smith, un’altra assunzione recente, era in un’incredibile agenzia pubblicitaria. Lei è davvero un genio ed è incredibile le difficoltà che può affrontare. Un altro ragazzo che abbiamo assunto, Jake Albaugh, è impressionante. A volte mi sento come la persona meno utile a CodePen, perchè non ho seguito dei veri e propri studi come loro.

Mi sforzo davvero per sentirmi alla pari di tutto il team. I miei eroi sono loro, le persone con cui lavoro direttamente, ogni giorno.“

”Eroico è lavorare direttamente con qualcuno e collezionare la sua esperienza giorno per giorno.“ importante a CodePen e il nostro team la abbraccia. Qui ci si sente al sicuro, a proprio agio, ed è così che nascono buone comunità.”

Concludiamo chiedendoti chi sono i tuoi eroi. C’è qualcuno che ispira il tuo lavoro o che ammiri?

“Eroico è lavorare direttamente con qualcuno e collezionare la sua esperienza giorno per giorno.

Questo è ciò che si definisce il migliore programmatore del mondo per me. Sì, riesco a

DESIGN DIGITALE

25

RINNOVARE UN SITO /

RESTYLING

Il dilemma del web: rinnovare il proprio sito internet

P

rima o poi arriva il momento di affrontare la problematica questione del restyling del sito web aziendale. Ti starai domandando perché tu debba rifare il tuo sito internet, d’altronde ti è costato parecchio e quel dannato investimento speravi che ti mettesse al riparo da nuovi esborsi almeno per i prossimi 8 anni. Dopo un lungo parto il sito ha visto la luce proprio come tu volevi, senza troppi fronzoli. Non perdevi occasione per mostrare il sito a tutti e finalmente non avevi nulla da invidiare alla concorrenza. Il resto è storia. Le aspettative però vanno scemando e pian piano il sito non ti porta nessun nuovo cliente, non riescendo nemmeno a aggiornarlo.

La polvere sulle tue pagine web copre ogni possibile sogno di gloria e di riscatto economico.

Questo accadeva qualche anno fa, una versione un po’ romanzata tragicomica della gestazione di un sito web e del braccio di ferro per portarlo a termine. Non sono certo che situazioni del genere non si

verifichino ancora, ma sono molti coloro che hanno un sito che non rende giustizia al loro nome.

Ristrutturare il tuo sito web: come, quando e perchè Ci sono segnali evidenti che aiutano a comprendere se il tuo sito ha bisogno di una ventata di aria fresca. Verifica la presenza di malfunzionamenti, ma non focalizzare l’attenzione solo sugli aspetti tecnici.

Valuta le pagine nel loro insieme e quali contenuti e informazioni devono essere aggiornate. Adotta un approccio distaccato pensando che non sia il tuo sito. Il sito non è solo uno strumento di comunicazione che deve trasmettere un messaggio, ma anche una vetrina, dove le persone, passeggiando, ci passano

davanti e in base al loro intuito e alla disponibilità di tempo entrano a dare un’occhiata. A distanza di anni è normale che la tua immagine subisca dei cambiamenti e le persone devono essere le prime a saperlo se vuoi che si trasformino in potenziali clienti. Metti mano ai contenuti e parla del tuo “negozio”.

I servizi e i prodotti che offri si trovano nei risultati di Google?

Un altro elemento fondamentale che ti fa capire se il tuo sito è arrivato al capolinea e necessita di un restyling è la visibilità su Google.

Ormai quando abbiamo bisogno di un professionista o di acquistare un prodotto il vecchio passaparola è stato affiancato dai risultati di un motore di ricerca. Avere il

“A distanza di anni è normale che la tua immagine subisca dei cambiamenti e le persone devono essere le prime a saperlo se vuoi che si trasformino in potenziali clienti.” sito posizionato in prima pagina, soprattutto su Google, comporta un notevole flusso di visitatori che si possono trasformare in potenziali clienti. Se il tuo sito non ha visibilità sarà alquanto difficile che generi nuovi contatti che incrementino il tuo business o ne risollevino le sorti.

Le tecniche di ottimizzazione che si adottano per facilitare il posizionamento del sito prendono il nome di SEO, Search Engine Optimization. Questo metodo non può garantirti tuttavia che il tuo sito sarà tra i primi risultati su Google.

Le forze misteriose che regolano DESIGN DIGITALE

27

/SPECIALE Un confronto tra due interfacce per la progettazione di layout per il mobile. A sinistra Adobe XD, sotto Sketch.

l’algoritmo di un motore di ricerca sono moltissime, sono segrete, cambiano di volta in volta e le linee guida che si hanno a disposizione sono criptiche. Per questo motivo il tuo sito deve essere strutturato secondo dei criteri ben precisi che tengono conto da una parte dei contenuti e dall’altra delle raccomandazioni di Google e di altri competitor. Confronta i risultati del motore di ricerca per il tuo settore, analizza i comportamenti della tua ricerca e fatti un’idea della distanza che ti separa dagli altri.

dispositivi. I vantaggi di avere un sito del tutto mobile-friendly sono molteplici, la tua presenza nel web ne uscirà nettamente rinforzata e Google insieme a molti altri motori di ricerca premieranno il tuo sito, rendendoti più appetibile rispetto alla concorrenza.

Come si vede il tuo sito su smartphone e tablet?

I dispositivi tascabili oramai sono alla portata di tutti e la maggior parte delle scelte di consumo vengono prese proprio navigando da smartphone e tablet. Anche molte aziende di software si stanno rivolgendo a questo nuovo standard, progettando programmi, come Adobe Experience Design (XD) o Sketch, ottimizzati anche per i designers proprio per creare layout web o applicazioni per dispositivi mobili senza il bisogno di sapere nessun linguaggio informatico.

Se il tuo sito necessita di continui zoom per essere leggibile o risulta impossibile nella navigazione significa che non è responsive.

Ottimizza tutto anche per i dispositivi mobili per permettere l’accesso ai contenuti con più facilità. Metti solamente in risalto le informazioni di contatto, il menu e altri componenti importanti del sito per mantenere una coerenza di design tra i vari

Un dettaglio del codice CSS del sito di Design Digitale su Brackets.

28

DESIGN DIGITALE

Rivolgiti a una Web Agency.

Uno programma di grafica puo’ aiutare nel testare visivamente il sito. Se non hai competenze su questo argomento rivolgiti ad una Web Agency, lì non solo potrai essere seguito nel percorso di costruzione del nuovo sito, ma verranno considerati tutti i parametri, dalla “Quando tutti gli aspetti grafica alla costruzione del sito. Se, invece, te la vengono considerati cavi anche nell’aspetto grafico, ricorca che hai il nuovo sito diventa più bisogno che il nuovo inclusivo, mantenendo design soddisfi tutti gli standard di accessibilità e l’usabilità per tutti” che ci sia coerenza tra tutte

RINNOVARE UN SITO / le pagine. Ciò significa che dovrai utilizzare lo stesso layout, gli stessi colori e così via. Inoltre, le pagine di tutto il sito web non dovrebbero essere totalmente indipendenti l’una dall’altra, anche se tutte contengono informazioni chiaramente diverse, quindi annota il colore di sfondo, le immagini, la dimensione del carattere e altri particolari che dovranno rimanere invariati in tutto il sito. Tutte le scelte estetiche rimaranno così coerenti l’una dall’altra, senza perdere la propria identità. Per rendere un sito web più accessibile poi si devono seguire certi parametri. Pensa per prima cosa a ciò che potrebbe rendere il sito più facile. Le pagine possono essere programmate in modo che un sito internet puo’ essere navigato solamente da una tastiera; i video con la possibilità di aggiungere dei sottotitoli andranno a vantaggio degli utenti non udenti o con problemi di udito; dei costrasti più forti aiuteranno coloro che hanno problemi di daltonismo; pensa a non includere effetti lampeggianti, che possono mettere a rischio coloro che sono inclini a convulsioni.

Quando tutti gli aspetti vengono considerati, il tuo nuovo sito diventa più inclusivo, mantenendo l’usabilità.

La fase di progettazione non è facile e se non sei un esperto, devi

DAFONT: IL RESTYLE DEL FUTURO Un progetto universitario per osservare come una nuova grafica possa giovare anche ad un prodotto molto apprezzato al pubblico di tutto il mondo, senza perdere la sua importanza.

In questo progetto il designer tedesco Philip Trautmann ha cercato di rendere il sito più moderno, con caratteristiche che rispecchiano le nuove tecnologiche, guardando anche al futuro del web design. Il rinnovamento si è focalizzato a creare uno strumento interattivo, che possa comunicare anche con i più importanti software

di grafica, per primo Adobe Photoshop. Non solo, il designer tedesco ha considerato di modificare una caratteristica importante del sito, facendo in modo di aprire il maggior numero di finestre senza dover cambiare pagina. Un progetto molto interessante che noi di Design Digitale speriamo di vedere all’opera in futuro.

DESIGN DIGITALE

29

/SPECIALE rivolgerti a un designer. Certamente già nella fase precedente puoi aver richiesto già una consulenza o esserti rivolto a qualcuno. Organizza degli incontri per vertificare il risultato del nuovo sito internet. Se, invece, hai delle conoscenze nel settore puoi lavorare tu stesso al contenuto finale, aiutandoti con le linee guida del progetto grafico. Dovrai comunque saper sfruttare al meglio gli strumenti SEO per garantire che il nuovo sito web sia SEO friendly. Dopo aver programmato il layout, aver inserito i contenuti e controllato tutti gli errori, fai un test per verificare che anche tutte le funzioni operano senza problemi. Adesso il sito è stato effettivamente creato e può essere offerto al pubblico.

Fai un test finale. È necessario utilizzare vari strumenti per garantire che la qualità del sito venga mantenuta man mano che vengono aggiunti o aggiornati più contenuti. Dopo il lancio del nuovo sito, i visitatori abituali potrebbero reagire negativamente o positivamente. In modo negativo, perché il loro normale flusso di interazione è cambiato, diversamente in modo del tutto positivo perché potrebbero ritenere che il cambiamento sia stato rinfrescante e necessario. Attendi il

Uno dei moltissimi strumenti per testare un sito. Crossbrowsertesting è una tool completa, dove puoi provare anche a controllare le versioni mobile del tuo sito.

periodo iniziale e le reazioni degli utenti, non c’è motivo di festeggiare o di farsi prendere dal panico. Una volta che gli stessi utenti hanno avuto il tempo di imparare la loro strada, ora è il momento di fare un quadro sulla differenza di utilizzo del tuo nuovo sito. I test in questa fase sono molto importanti. Ci dovrebbe essere un gruppo di partecipanti al test che rappresentano la popolazione generale, assicurandoti proprio loro sappiano che è il sito web che viene testato, non le proprie capacità. Dopotutto, il nuovo sito

“Utilizza il metodo gamification, in grado di integrare il divertimento di un gioco a componenti meno interattive del tuo sito”

Un esperimento di gamification, sfruttando la condivisione social

30

DESIGN DIGITALE

dovrebbe essere accessibile a tutti. I risultati della fase di test riporteranno delle conclusioni interessanti, che dovrebbero più o meno aiutare nel risolvere alcuni problemi. Adesso il tuo nuovo sito è veramente finito.

Che cosa puoi migliorare?

Molte sono i dettagli per rendere il tuo nuovo sito unico. Il 2018 apre una varietà di nuove funzionalità che possono rendere già rompere le frontiere verso un web più intuitivo.

Puoi seguire l’attuale trend delle intelligenze artificiali nella tecnologia, includendo un chatbot per aiutare gli utenti a navigare, rispondere a semplici domande o indirizzare l’attenzione a determinate sezioni del sito. Crea un layout solo per i dispositivi mobili, perchè proprio questo mezzo sta scavalcando l’uso dei personal computer. Utilizza il metodo gamification, in grado di integrare il divertimento di un gioco a componenti meno interattive del sito. Puoi per esempio suggerire ai tuoi clienti di condividere con gli amici il tuo sito per ricevere dei contenuti speciali, uno sconto sulla tua merce oppure puoi creare direttamente un mini gioco. Quando si tratta di progettazione di siti web, puoi pensare in grande e provare nuove esperienze per tutti gli utenti, ma non dimenticare di lasciare il sito funzionale, in grado di essere capito da chiunque, facile da comprendere ma visivamente appetibile ai clienti che stai cercando di attirare.

L'IMPORTANZA DEI DATI STRUTTURATI PER MIGLIORARE LA SEO I motori di ricerca non riescono a capire il linguaggio come fanno gli umani. Gli Structured Data possono aiutare a far comprendere ai motori di ricerca meglio il sito. di Yauhen Khutarniuk con illustrazione di Carlotta Castellani

G

li uomini possono capire il significato di lettere come “lavolpevivenellaforesta”, dividendo facilmente la sequenza di lettere nelle frase “la volpe vive nella foresta”. I robot dei motori di ricerca non sono invece così intelligenti.

Quando qualcuno cerca sul web quella sequenza di lettere, i motori di ricerca restituiscono con entusiasmo la pagina web in cui appare questa stringa esatta di lettere, ma non il vero significato. Grazie al SEO, però, si può riuscire nel miglior modo ad aiutare il robot a capire ed è qui che arrivano i dati strutturati.

IL WEB SEMANTICO E LA RICERCA In quasi ogni conferenza, dedicata al SEO nel 2017, si è menzionato il web semantico e la ricerca semantica.

Se proprio la semantica è lo studio del significato delle parole, il web semantico non si differenzia molto dal significato originario di questa scienza, parlando però grazie a parole chiave. Anche il motore di ricerca ha un suo vocabolario, molto simile a quello usato nel linguaggio umano. Le parole usate, però, devono formare dichiarazioni logiche per essere raccolte, analizzate ed elaborate dai robot dei motori di ricerca. Una sorta di regola che, tuttavia, facilita la ricerca quando vengono utilizzati dei concetti simili o che logicamente si accordano tra loro. Ciò comporta che un motore di ricerca possa trovare nel risultato

di un sito la dichiarazione logica “la volpe vive nella foresta” anche se cerchiamo “Quali animali vivono nella foresta?”. In questo caso, la ricerca ci farà sapere che la volpe è considerato un animale che vive nella foresta, anche se nel sito non ci sarà la presenza della parola “volpe”.

I DATI STRUTTURATI SU UN SITO Nel corso degli anni, le pagine dei risultati dei motori di ricerca si sono evolute da una noiosa lista di collegamenti a una pagina abbastanza informativa che abbonda di informazioni utili. Di fatto, lo stesso SERP (Search Engine Result Page, ovvero la pagina dei risultati di ricerca) può soddisfare le richieste degli utenti, senza che questi debbano fare clic sui risultati di ricerca effettivi, grazie a widget e schede che presentano per esempio le informazioni di un personaggio famoso, la risposta ad una specifica domanda, il prezzo di un oggetto o la recenzione di un film che ti piace e la pagella che ha ricevuto. Queste nuove caratteristiche di ricerca fanno parte del web semantico e si basano sui dati strutturati (le informazioni extra di un sito internet) che ogni motore di ricerca, specialmente Google, può comprendere e interpretare. L’uso di questi nuovi accorgimenti può migliorare fino ad un guadagnano di circa il 30% in CTR (Click-Through Rate ovvero “Percentuale di clic” in italiano)

rispetto alle controparti che non sfruttano queste nuove funzionalità nel proprio sito. I dati strutturati, quindi, aprono un nuovo mondo di funzionalità per l’utente, che potrà visualizzare direttamente dall pagina di ricerca dei contenuti interni di un sito. Un’esperienza utente avanzata, che pian piano si sta facendo strada nel nuovo web, sempre più interattivo, anche da mobile.

LE TOOL PER LA STRUCTURED DATA La comunità di internet sta migliorando sempre più gli strumenti che utilizzano i dati strutturati, facendo nascere nel tempo nuove terminologie, tra cui RDF, RDFa, Microformats, Microdata e Schema.

Fondamentalmente, se vuoi trasmettere informazioni, sia in linguaggio naturale che tecnologico, hai bisogno di due cose: un vocabolario (un insieme di parole di una lingua) e la grammatica (un insieme di regole che indicano come usare il vocabolario per trasmettere il significato). Schema.org dovrebbe essere il tuo vocabolario di scelta. È supportato dai principali motori di ricerca, è ben documentato e sempre in sviluppo. Per quanto riguarda la grammatica, non c’è una risposta breve. I principali strumenti sono: RDFa e Microdata. RDFa e Microdata sono concettualmente molto simili e consentono di riscrivere i dati in HTML. Inizia la ricerca e affidati ai dati strutturati.

DESIGN DIGITALE

31

/SPECIALE

CREA IL TUO BRAND COME

FREELANCER È importante vedere il branding come qualcosa di più di

un’icona, un logo, un tema visivo o un prodotto. Il brand è il tuo marchio, uno strumento e la definizione di ciò che sei o dell’identità di una agenzia. Include elementi visivi, ma anche i valori fondamentali di chi viene rappresentato. Keith Shields

I

l branding sembra un gergo di marketing, ma in realtà è una parte estremamente importante dell’identità di un marchio. Viviamo in un’epoca in cui il branding è cruciale per il successo di un libero professionista o di un’azienda. È importante infatti vedere il marchio come qualcosa di più di un’icona, un logo o solamente un qualcosa di bello da vedere. Un marchio è uno strumento che definisce l’identità di un’azienda, includendo nella sua forma non solo un elemento visivo, ma anche un messaggio. Il branding, in un certo senso, è come si definisce quel messaggio a un pubblico. lndica che tipo di servizio verrà offerto al cliente, comunica il tuo stile, la tua professionalità e molto altro ancora che deve risultare interessante e diverso dagli altri.

Aiuta anche a far percepire la tua forza come professionista. Il tuo marchio non è l’unica cosa che è importante da considerare, perchè è altrettanto importante capire il gusto di quello che rende il tuo

32

DESIGN DIGITALE

cliente unico, le sue scelte, gli ideali e ciò che deve essere assolutamente studiato alla base di un determinato marchio. Ecco cosa significa avere un brand personale, crearsi una propria identità e farsi valere. La tua unicità sarà ripagata e i clienti sapranno di potersi fidare, lavorando insieme a te nello sviluppare passo per passo la loro nuova faccia grafica.

PENSA A COSA TI RENDE UNICO Chiediti qual è la tua personalità e come ti distingue dalla massa.

Come sai già, il freelance sta diventando un lavoro estremamente competitivo e devi metterti alla prova non solo come sviluppatore o grafico, ma nel saper vendere le tue idee ed essere davvero creativo e unico nel tuo stile. Chiediti come

Il sito internet di Anton & Irene. Il loro brand è rimasto invariato dal 2015.

BRANDING /

riuscire a riflettere questo aspetto a controllare il tuo sito se l’url non è al tuo processo lavorativo. Ti adatto o poco professionale. Cerca piace essere divertente? Hai dei di avere nomecognome.it. Il tuo valori fondamentali? Devi essere sito, in definitiva è una specie di interessante agli occhi degli altri per colloquio, rappresentando la tua ciò che ti rende una persona diversa identità online. Una presentazione da loro. Controlla, però, anche la concorrenza e attingi a qualche loro idea. Cosa LA TUA UNICITÀ SARÀ RIPAGATA E c’è sul loro sito web?

Quanti progetti hanno I CLIENTI SAPRANNO DI POTERSI nel loro portfolio? Come FIDARE, LAVORANDO INSIEME A TE vengono presentati?

Crea una biografia NELLO SVILUPPARE PASSO PER PASSO completa, corredandola della tua personalità LA LORO NUOVA FACCIA GRAFICA e spiega perché un cliente dovrebbe assumerti rispetto agli altri. Valorizza fatta male però non ti aiuterà in il tuo portfolio con progetti e lavori futuro a ritrovare quel cliente, anche personali. Controlla cosa il pubblico se tu nel frattermpo sei cambiato, guarda sul tuo sito per valutare perchè hai dato un’impressione come implementare il tuo brand in negativa di te stesso ed è quasi modo che ciò che fai, chi sei, cosa sicuro che in pochi torneranno a rappresenti e cosa offri sia sempre visitare il tuo sito. dietro alle necessità del maggior numero di persone. Investi sul tuo MOSTRA LE TUE ABILITÀ brand, perchè nessuno è interessato Scopri cosa ti rende forte e aumenta

la tua esperienza in quel settore.

Non pensare al fatto che il brand che hai inventato quando hai iniziato sia quello che devi rispettare per sempre. È importante assicurarsi di rimanere coerenti col proprio stile e che il tuo sito venga aggiornato in base ai tuoi nuovi progetti, creando un tuo nome. Sviluppa un sito internet, un portfolio o un blog, a seconda del tipo di lavoro che svolgi. Se non sei un programmatore, quindi, assicurati di curare l’aspetto grafico e non tentare qualcosa in cui non ti senti a proprio agio.

Ogni errore potrebbe costarti un cliente. Qualunque sia il tuo servizio, devi essere in grado di mostrare al cliente la tua esperienza. Non caricare necessariamente l’intero portafoglio in una sola volta se non disponi di molti lavoro. Fai degli aggiornamenti costati, creandoti una timeline sul momento migliore per aggiungere un nuovo progetto al DESIGN DIGITALE

33

/SPECIALE

portfolio. Aggiungi un box apposito e cosa fai. Sii consapevole della per specificare i nuovi lavori, ma tua presenza sui social media e non concentrarti su quell’aspetto, assicurati che tutto quello che viene perchè potrebbe risultare troppo pubblicato sul sito sia un lavoro di ripetitivo in un sito vetrina come un cui sei fiero, perchè se non vuoi portfolio. Crea un curriculum che investire neanche tu in te stesso, rifletta ciò che fai e fai interagire allora non lo faranno di certo gli altri. il cliente in modo da non essere Puoi comunque inserire alcuni post lasciato fuori dal contesto, per farti conoscere meglio in modo un poco più informale.

Non esagerare, perchè ASSICURATI CHE TUTTO QUELLO CHE questo non è un gioco e non sarà talvolta VIENE PUBBLICATO SUL SITO SIA UN utile usare il metodo LAVORO DI CUI SEI FIERO, PERCHÈ gamification per questo tipo di siti.

SE NON VUOI INVESTIRE NEANCHE

PROFESSIONALITÀ

TU SU TE STESSO, ALLORA NON LO

Gestisci la tua presenza FARANNO DI CERTO GLI ALTRI visiva. Crea un logo di qualità che comunica efficacemente il tuo brand. Pensa a quali colori, quali non inerenti al tuo lavoro, come dei immagini, che stile dovrà avere il commenti ad un determinato evento, tuo marchio per comunicare chi sei delle conversazioni e quant’altro.

34

DESIGN DIGITALE

Devi essere consapevole che tutti i clienti vedranno queste cose, indipendentemente dal fatto che le inseriate nel portfolio. Ricorda che tutto ciò che è pubblico è completamente accessibile a tutti e che quando qualcosa è stato inserito su internet, è difficile che sia cancellato. Quindi, rimani attento a seguire i tuoi interessi e rappresentarli al meglio sul tuo sito, oltre che ad investire su biglietti da visita, che potrai distribuire con facilità a possibili futuri clienti.

LA TUA PROPOSTA Come abbiamo già detto, è importante dare un’occhiata al lavoro della concorrenza, soprendo i loro punti di forza. Se, per esempio, in un sito viene offerto di fare una grafica specifica per l’email del loro cliente, vedi se ti potrebbe

BRANDING /

MOSTRA AL CLIENTE LA TUA SERIETÀ, COSA DEVE ESSERE FATTO SUL SITO E TUTTO QUELLO CHE È NECESSARIO MODIFICARE PER LA RIUSCITA DEL PROGETTO, CREANDO UN CONTRATTO DA FAR FIRMARE

interessare aggiungere questo servizio anche sul tuo sito. Non solo gli altri, puoi direttamente osservare il tuo cliente così che prima di elaborare una proposta per essere assunti, puoi offrire suggerimenti sui loro interessi, cosa potrebbero migliorare, quali cambiamenti apporteresti e quale tipo di progetto

realizzeresti per loro. Trovarsi già preparato in questo caso può fare la differenza. Tuttavia, noi ti consigliato (anzi obblighiamo) a non utilizzare la stessa proposta per ogni cliente, perchè nessun cliente vuole il suo progetto sia trattato come ogni altro lavoro. Il cliente vuole sapere che hai dedicato particolare attenzione al suo specifico progetto, che hai pensato, elaborato e presentato.

Cerca di fare il maggior numero di domande per capire al meglio il messaggio, lo studio della grafica

e le linee generali del branding che stai facendo. Meglio ancora, crea un documento dove scrivere le domande, così che ti troverai preparato all’incontro col cliente.

Ciò comunica la tua professionalità e mostra loro che hai un approccio affidabile al completamento di quello specifico progetto, senza lasciare un lavoro a metà. In sostanza, mostra al cliente la tua serietà, cosa deve essere fatto sul sito e tutto quello che è necessario modificare alla riuscita del progetto, creando un contratto da far firmare.

COMUNICARE COSTANTEMENTE Assicurati, infine, una comunicazione continua col cliente per assicurarlo sul progetto e che ciò che stai facendo si allinei con quello che era stato scelto nel precedente incontro o nel contratto. Non vuoi spendere 10 ore per qualcosa che il cliente disprezza, nè spenderne molte di più se non serve un lavoro molto complicato. Verrà così solamente sprecato il tuo tempo che quello del tuo cliente e a nessuno piace perdere soldi e tempo, soprattutto sotto un contratto firmato.

DESIGN DIGITALE

35

/SPECIALE

20 FONT GRATUITI DA SCARICARE SUBITO! La tipografia è un’arte, una delle parti più importanti di un progetto e ha la capacità di salvare o distruggere un design. Ci sono migliaia di font disponibili su internet e molti di questi sono gratuiti. Design Digitale stila una lista dei 20 font gratuiti assolutamente da scaricare e salvare per qualunque progetto grafico futuro.

LOVELO Carattere geometrico sans-serif, disponibile gratuitamente su Fontfabric. Lovelo è un restyle di Lovelo Inline, progettato da Renzler Design. Un bel carattere sì, ma la mancanza di diversi pesi e stili gli conferisce un’utilità limitata.

NEXA La famiglia Nexa include 16 stili di carattere e pesi unici. Nexa è caratterizzata da un’eccellente leggibilità sia nell’uso digitale sia nella stampa, grazie ai disegni geometrici ben definiti, kerning ottimizzati e molti altri dettagli che lo rendono completo ed unico. Il carattere, tuttavia, è particolarmente adatto per i titoli di tutte le dimensioni, così come per i blocchi di solo testo, consentendo una vasta scelta di variazioni. Nexa è perfetto anche su t-shirt, poster e loghi. Sono solamente 2 gli stili gratuiti da poter sfruttare, ma sono adatti a quasi tutte le tipologie di utilizzo quindi noi lo consideriamo uno dei migliori font gratuiti in circolazione in questo ultimo periodo, è stato infatti uno dei caratteri più usati nel 2017 e rimane ancora adesso molto popolare.

36

DESIGN DIGITALE

TIPOGRAFIA /

SIGNIKA

PRIME

Signika è un sans-serif sviluppato inizialmente per la segnaletica e per loghi. Ha un basso contrasto per migliorare la leggibilità dei testi in piccole dimensioni. Nonostante sia stato creato come un semplice

testo per la segnaletica, è ispirato a caratteri tipografici come Ronnia, Meta e Tahoma. Tutti i pesi del carattere hanno versioni alternative negative, ottimizzate per risolvere dei problemi tecnici.

Prime è un carattere semplice con dettagli tecnici rigorosi e geometrici.

Il carattere offre una buona leggibilità in varie dimensioni e può essere utilizzato in vari modi, dai titoli al testo del corpo.

CABIN Questo carattere si ispira ai font di Edward Johnston ed Eric Gill, con un tocco però di modernismo.

Cabin incorpora qualità di un font moderno, regolazioni ottiche e alcuni elementi geometrici. Il font rappresenta un’ottima alternativa ai alle famiglie di caratteri più diffusi come Lato e Open Sans.

DESIGN DIGITALE

37

/SPECIALE KELSON SANS Il carattere è il restyle della famiglia Kelson, progettato da Bruno Mello, in Brasile. Il design del font è condensato con importanti altezze e presenta anche eleganti curve.

ZAG Il suo design contemporaneo lo rende utilizzabile in una vasta gamma di progetti grafici. Il carattere senza grazie si ispira al passato, con forme che rimandano all’art deco. Il font è perfetto per ogni tipo di design: web, stampa, grafica animata.

Perfetto anche per t-shirt, loghi, pittogrammi e poster.

LINTEL Un carattere tipografico sans serif moderno. L’idea è stata quella di progettare un font con una struttura proporzionata ed equilibrata applicabile a un’ampia varietà di utilizzi. Lintel include un set completo di pesi e un interessante simbolo dell’euro.

MYRA Creato da Sergiy Tkachenko, il carattere Myra regala una sensazione unica in “stile decò”, con una forma perfetta sia per le grafiche moderne sia quelle retrò. Myra è comunque applicabile in qualsiasi tipo di design: dal web alla stampa, dai video alla grafica animata.

38

DESIGN DIGITALE

TIPOGRAFIA / MUSEO SLAB Questo carattere è una versione rivisitata di Museo Sans. Progettato da Jos Buivenga, è il font perfetto per aggiungere personalità alla famiglia Museo, grazie alla facilità di poter essere combinato con la con le altre versioni. La storia di Museo Slab parte proprio dal concetto di sperimentare nuovi stili, partendo dal carattere di base, senza dover aggiornare proprio il prodotto originale (Museo Sans).

I font contiene 6 diversi pesi e 12 stili. Ogni stile ha più di 400 glifi.

Le legature, le maiuscole, tutto è proporzionato con rigore. Il carattere è soprattutto adatto per le titolazioni, ma si presta bene anche nell’uso su blocchi di testo.

Adatto per la stampa e per il web.

Sfortunatamente, solo Museo Slab 500 è gratuito, ma lo ritroviamo sia nella forma regolare, sia in italico.

SAVU Un font, disegnato a mano da Ossi Gustafsson, in quattro diversi stili: regolare, grassetto, condensato e grassetto condensato. È consigliato per le titolazioni e i loghi, ma soprattutto nelle grafiche più serie che non vogliono esserlo affatto.

SOURCE CODE PRO Questo carattere è stato progettato da Paul D. Hunt come versione per la programmazione di Source Sans. Il font è stato completamente rivisitato per creare una versione monospazio della famiglia. Source Code Pro conserva tutte le caratteristiche di Source Sans, alterando però le grandezze delle grazie in modo che siano uniformi su tutte le lettere e ogni peso. Il font è soprattutto adatto all’uso su computer, ma è una buona versione alternativa della famiglia originale anche da usare nei progetti stampati.

DESIGN DIGITALE

39

/SPECIALE

SCADA La personalità e la flessibilità ne fanno un vero carattere tipografico multiuso. Le forme delle lettere si distinguono per una ampia altezza.

LEDGER REGULAR La personalità e la flessibilità ne fanno un vero carattere tipografico multiuso. Le forme delle lettere si distinguono per una ampia altezza, il contrasto, grazie alle robuste ma eleganti grazie.

POLY Grazie al suo attento bilanciamento tra sua larghezza e la dimensione delle grazie, consente una maggiore leggibilità, anche in piccole dimensioni. L’obiettivo era sviluppare un carattere tipografico

che avrebbe aumentato il numero di lettere su una singola riga.

Poly è una famiglia di caratteri che supporta un vasto numero di funzionalità. Si può trovare in diverse varianti di grandezza e peso.

COLLATOR Collator è un carattere progettato per ottenere una maggiore armonia tra i caratteri cinesi e latini.

Traendo ispirazione da queste due tradizioni del type design, Collator vuole essere un’espressione contemporanea e equilibrata delle culture sia occidentali che asiatiche.

40

DESIGN DIGITALE

INCONSOLATA Font monospazio, progettato per la programmazione, attento ai dettagli è adatto anche per la stampa e per altri progetti grafici.

TIPOGRAFIA / SINTONY Il carattere Sintony ha uno stile moderno, ma anche contrassegnato da una forma leggermente quadrata e moduli ben costruiti. Ottimo per lunghi passaggi di testo, conferendo al paragrafo una sensazione di calma. Soprattutto utilizzato per la stampa, date le sue alte potenzialità anche in dimensioni più ridotte, Sintony può essere usato come una buona alternativa sul web. Il carattere viene fornito in due stili: regolare e grassetto.

UBUNTU La famiglia tipografica di Ubuntu è stata appositamente creata per completare lo stile del software di origine. Il font si presenta moderno e contiene caratteristiche uniche. Ubuntu Mono è il carattere monospazio della famiglia, che per le sue linee morbide si adatta con facilità a qualunque testo.

ECONOMICA Il carattere tipografico Economica è stata progettato per soprattutto per la stampa a getto d’inchiostro. È molto usato nel web, per la facile lettura anche a dimensioni più piccole. È stato ispirato dal concetto di risparmiare spazio nei paragrafi di testo, senza perdere in altezza, grazie alla sua impostazione di carattere condensato. La famiglia Economica ha quattro stili: regolare, grassetto, italico e grassetto in italico.

DESIGN DIGITALE

41

/COVERSTORY

42

DESIGN DIGITALE

CHATBOT DEL FUTURO Coloro che seguono i trend avranno notato la parola chatbot comparire in un numero sempre maggiore di articoli negli ultimi mesi. Questi aiutanti artificiali oramai fanno parte della nostra vita di tutti i giorni e sono proprio loro che ci forniscono la maggior parte delle informazioni e sono oramai in circolazione dal 1960.

Con il recente aumento di utilizzo delle app di messaggistica, i chatbot hanno raggiunto un nuovo status, ma in molti continuano a chiedersi il motivo di questa tendenza e come mai le aziende si affannano a crearne una propria versione.

di Carlotta Castellani con illustrazioni di BjĂśrn Ă&#x2013;berg

DESIGN DIGITALE

43

/COVERSTORY

I

Chatbot sono gli indiscussi protagonisti delle discussioni nella Silicon Valley. I progressi delle applicazioni fornite dalle più aggiornate tecnologie hanno creato un nuovo modo di pensare sull’interazione tra persona e informazioni, incoraggiando gli sviluppatori a realizzare una nuova generazione di chatbot. Molte aziende già usano questa scappatoia per il servizio clienti, ma anche per inviare notizie, facilitare gli ordini commerciali. Si può utilizzare quindi questo servizio per comprare un oggetto, per conoscere le previsioni del meteo oppure anche solo per giocare. Dal 2016, infatti, è possibile svagarsi su Facebook Messenger con Streak Trivia, un quiz vero/falso dove l’utente è invitato a rispondere in pochissimo tempo. La persona che ha il maggior numero di risposte esatte vince.

Una delle prime esperienze di programmi simili alle chat erano quelle dei videogioco, come Adventure, basati su una sorta di navigazione a chat dove al giocatore veniva chiesto che tipo di percorso voleva seguire, in una continua interazione di domande e risposte.

Questo gioco in particolare, era uno dei primi modelli disponibile al pubblico di comunicazione tra

“

Sono soprattutto i giovani a usare maggiormente queste nuove piattaforme social, indiscusse protagoniste odierne

macchina e utente. Non c’erano immagini e tutte le azioni dovevano essere inserite come testo. Se il sistema non riconosceva le tue parole, dovevi ripetere il comando in modo diverso o trovare un nuovo set di parole chiave per far capire al sistema cosa volevi fare. Ci sono molti chatbot che sono stati creati nei recenti anni, altri che ne vengono creati ogni settimana. Nulla di nuovo, perché questa è una tecnologia in circolazione dal 1960, solo tornata di moda recentemente. Il suo odierno

44

DESIGN DIGITALE

successo sta nella diffusione degli smartphone e delle applicazioni di messaggistica. Sono soprattutto i giovani a usare maggiormente queste nuove piattaforme social, che nel tempo sono diventate indiscusse protagoniste della nostra vita quotidiana. In molti si stanno chiedendo come è possibile migliorare l’utilizzo di questi software per invogliare all’apprendimento, dato che ancora le risposte fornite da questa tecnologia sono programmate e non sono in grado

di interagire e parlare come un essere umano. La storia dei chatbot ci mostra che questo cambiamento non è facile da ottenere, perché come nel passato altri hanno cercato di rendere milgiore questo prodotto senza alcun vero miglioramento, così anche se le più grandi aziende si stanno adoperando per sperimentare nuove tecniche il software soffre sempre della mancanza di una sua vera intelligenza. Nel corso degli anni, tuttavia, le cose hanno cominciato a migliorare.

Gli sviluppatori hanno cercato di imitare meglio la conversazione umana e la programmazione è diventata più sofisticata. Ogni anno vengono inventati nuovi approcci e ne vengono perfezionati altri precedenti. Oggi questi bot

CHATBOT DEL FUTURO /

Sopra. L’assistente di Google, arrivato in Italia sulle piattaforme Android lo scorso novembre.

sono sempre più utilizzati nelle chat avanzate per consentire al sistema di imparare dalle interazioni, dando risposte sempre più migliorate.

Indipendentemente dall’approccio la premessa rimane la stessa: un utente pone una domanda e il chatbot risponde con una risposta adeguata.

Se il bot non ha capito, dirà che non ha capito e chiederà all’utente di ripetere o provare a formulare la domanda in un modo diverso.

Tuttavia, molti bot moderni non sanno ancora molto. In un recente gioco, per esempio, in Streak Trivia si è provato ad inserire i comandi in un modo per cui il chatbot non avrebbe capito, perchè la domanda non era stata digitata in modo esatto. In questo caso il bot ha spinto l’utente a comunicare con esso in un modo più produttivo e lo ha fatto con un tocco di umorismo, altre volte invece il bot richiederà solamente di ripetere la domanda o risponderà di non aver compreso la richiesta.

I chatbot sono la prima forma di intelligenza usata quotidianamente.

Vengono perennemente usati in

Facebook, WhatsApp e moltre altre chat. Non solo, anche durante la ricerca su Google, veniamo aiutati da un assistente virtuale.

La società di ricerca TMA Associates crede che questi sistemi di conversazione saranno un mercato da 600 miliardi di dollari entro il 2020. E non sono così difficili da codificare. Esistono tutorial su tutto il Web per la codifica di un semplice chatbot in C++, Node.js, ecc. Alcuni sviluppatori stanno già creando dei modelli per principianti per dargli la possibilità

di implementare i chatbot nei loro servizi. Ci sono già chatbot utilizzati anche per l’e-commerce, anche se un po’ in tutti i settori si stanno adottando queste applicazioni. Amir Shevat, il capo degli sviluppatori di Slack, afferma che i suoi bot superano il test di Turing. Vuole semplicemente che questi siano in grado di superare il test della birra.

In altre parole, andresti a bere una birra con un chatbot apparentemente umano? Mentre il test di Turing richiede abilità linguistiche complesse e programmazione del linguaggio, mentre il test di Amir

“ “

Anche durante la ricerca su Google veniamo aiutati da un assistente virtuale DESIGN DIGITALE

45

come Alexa e Google Home stanno diventando sempre più popolari, aiutando a svolgere le attività quotidiane e rendendo la vita “più facile” grazie ad una moltitudine di altre attività. Secondo dati ufficiali di Amazon, sono stati venduti più di 20 milioni di dispositivi Echo.

Secondo alcuni rapporti, più della metà dei consumatori si aspettano di aumentare l’utilizzo delle loro applicazioni di messaggistica nei prossimi due anni, un trend iniziato da quando Facebook aveva annunciato i bot su Messenger.

La decisione di Facebook di consentire alle applicazioni di terze parti di costruire chatbot nella loro piattaforma ha drasticamente abbassato i costi nella creazione di nuovi bot. Aziende come Kore, riescono a sviluppare singoli richiede semplicemente che il suo bot sia delizioso. E lo è. Slack è caratterizzato da un aspetto piacevole e istruzioni amichevoli che sembrano quasi umane con un linguaggio colloquiale. Tuttavia, di per se il software non è umano.

Programmato sì da persone, ma del tutto autonomo. Nella società odiera ci ritroviamo a conversare tutto il giorno su app di chat. Riceviamo innumerevoli notifiche sui nostri dispositivi e corriamo a controllare subito il contenuto di ogni notifica. È facile capire se la conversazione avviene con un altro umano o una macchina, perchè le macchine non possono sostituirci.

Lo smartphone e i social media hanno cambiato sì il modo in cui comunichiamo, ma non sono riusciti a sostutuire l’interazione umana e di sicuro non lo faranno neanche in futuro. Secondo Business Insider, le app di chat sono molto più utilizzate rispetto alle altre, inclusi i social. Tutti ci vogliamo sentire in contatto con gli altri e queste app ci aiutano a farlo. Gli psicologi, però, sostengono che sempre più persone soffrono di solitudine e depressione e stanno studiando di migliorare l’integrazione della tecnologia con i veri bisogni sociali. Il direttore del laboratorio Human Dynamics del MIT, Alex

46

DESIGN DIGITALE

“

Le app di chat sono molto più utilizzate perchè aiutano molto più di altre a rimanere in contatto con le persone

Pentland, ha condotto uno studio con il suo team, concludendo che la produttività sul posto di lavoro è aumentata quando ai colleghi è stato dato ampio spazio per comunicare in modo informale. In questo studio si è scoperto che le persone impegnate nella comunicazione faccia a faccia hanno fatto un lavoro migliore di quelli che si affidavano quasi esclusivamente alla tecnologia. Per fortuna, il cervello umano è ancora più intelligente delle macchine, ma questo sembra destinato a cambiare.

Questa tecnologia tuttavia potrà sì simulare un vero umano, ma non lo sostituirà affatto.Cambierà il modo in cui conduciamo il nostro lavoro, perchè niente può competere con l’interazione tra uomo e uomo.

L’intelligenza artificiale potrebbe perciò fare da monito per rafforzare i rapporti tra umani. Tutte le indicazioni sono tuttavia chiare, c’è uno studio che suggerisce la tendenza dei consumatori a preferire una interazione veloce, anche tramite una macchina. Gli assistenti digitali

programmi semplici da creare, senza molta programmazione, per soddisfare le esigenze dei clienti attraverso opzioni di menu predeterminate, che consentono di navigare più facilmente, interagire tra gli altri utenti o effettuare un acquisto. Un cambiamento che porterà ad una enorme crescita nella creazione di bot sempre più reattivi, più semplici da usare e con grafiche al passo coi tempi.

La crescita accelerata della app combinata all’inserimento di chatbot, anche di terze parti, ha contribuito a rendere la messaggistica il primo canale di conversazione in tutto il mondo. Circa 100.000 bot sono disponibili sulla app di Messenger e quasi 20 milioni di questi rispondono attivamente ai messaggi su base mensile. I chatbot sono un mezzo più veloce per comunicare, sia che si utilizzino figure umane, bot automatizzati o una combinazione dei due, con le app di messaggistica possiamo porre uno sguardo alla società del futuro.

CHATBOT DEL FUTURO /

SVILUPPATORI A CONFRONTO: CREARE UNA CHATBOT Dietro ogni chatbot c’è uno sviluppatore con una storia da raccontare. Ho parlato con due programmatori di Parker Software per capire quale è stato il processo di creazione della loro prima chatbot. Ecco le loro storie.

JAMIE MASCALL Sviluppatore di software alla società tecnologica Parker Software.

Ha studiato in precedenza alla Staffordshire University, laureandosi nel 2015 a pieni voti.

PAUL JOHNSON Senior Developer e direttore del team di Parker Software, ha lavorato in precedenza con Calrom e Vodafone anche come analista. Si autodefinisce un artigiano del codice e un nerd di alta tecnologia.

Quale era l’obiettivo fin dall’inizio?

JM: Dovevamo creare un prototipo di chatbot per simulare conversazioni standard tra operatore e visitatore.

Per questo progetto, l’obiettivo era abbastanza semplice e non aveva bisogno di essere ottimizzato.

PJ: Un cliente desiderava un bot di Facebook in grado di salvare le chat perse. Dovevamo semplicemente evitare che le chat venissero eliminate e che si potesse entrare anche da remoto, senza internet.

Quale processo hai usato per costruire il chatbot?

JM: Sapevo che non avrei avuto bisogno di incorporare elementi di apprendimento, così mi sono concentrato sull’identificazione delle parole chiave, la mappatura dei flussi di conversazione e l’aggiunta di un contesto. Ho costruito il chatbot in Node.js e ho utilizzato il framework Bot di Microsoft. Il chatbot ha richiesto 3 giorni per essere completato. Non è un processo così difficile come molti pensano.

PJ: Ho costruito il bot da zero in Node.js. Ho utilizzato processi simili alla programmazione di chat standard in termini di monitoraggio delle parole chiave e restituzione della risposta corretta, ma per un chatbot di Messenger è stato più immediato e intuitivo.

Cosa cambieresti ora che hai più esperienza in questo campo?

JM: Sono rimasto molto contento dalla creazione di quel primo chatbot, era più una ricerca per permettermi di organizzare al meglio i progetti futuri. Mi piacerebbe molto costruire dialoghi più sofisticati e non vedo l’ora di iniziare a farlo.

PJ: Rifarei tutto da capo, ma fortunatamente il chatbot era accurato al 98% nelle sue risposte e abbiamo ricevuto un feedback eccellente dal cliente. È stata una

bella esperienza e vorrei poter lavorare su modelli più avanzati.

Penso che le possibilità siano enormi in questo settore.

Come hai mappato il flusso conversazionale e il percorso di risposta automatica?

JM: Per il prototipo, ho solo creato un campione di dialoghi comuni, basati sulle domande più frequenti.

Ho esaminato i dati della chat esistenti per vedere degli esempi e li ho usati come base per il nostro bot. In totale, c’erano circa 50 input di conversazione e se non risultava alcuna risposta, il chatbot affermava semplicemente che non poteva essere d’aiuto.

PJ: Ho esaminato le FAQ dell’azienda per farmi un’idea delle esigenze dei loro clienti. Il chatbot è stato programmato per analizzare le parole chiave come I am o I’d like to. Da lì, ha preso viene scelta una risposta accurata. Per ogni input che non era incluso, il bot non riteneva giusto rispondere e avrebbe dichiarato di non aver capito con l’opzione lascia un messaggio.

Quale sarà secondo il tuo punto di vista il futuro dei chatbot?

JM: Penso che vedremo sicuramente sempre più chat nel contesto di e-commerce, ma non credo che questa tecnologia sarà così importante come tutti immaginano.

Non credo che i chatbot potranno mai sostituire completamente la figura umana e sembra prematuro prevederne il futuro.

PJ: Sicuramente aumenterà l’uso dei chatbot. Considerando il tempo necessario per crearne uno, si riuscirà difatti a risparmiare un sacco di soldi.

Indipendentemente da quanto possano essere cool e innovativi questi bot non supereranno il bisogno di un individuo di parlare con altri compagni di lavoro.

DESIGN DIGITALE

47

/TUTORIAL

UNA NOTTE MAGICA

48

DESIGN DIGITALE

ADOBE ILLUSTRATOR /

Ai non esperti, Illustrator può apparire un po’ complicato, con tutti i suoi strumenti di precisione e le sue metodologie apparentemente complesse.

Diversamente da Photoshop, in cui entro certi limiti è possibile operare con una certa libertà, in Illustrator spesso esiste un unico metodo per ottenere un determinato risultato. Non si puo’ costringere Illustrator a fare ciò che si vuole. Dalle nozioni di base relative ai vari strumenti forma, fino alla creazione di figure, troverete qui alcuni trucchi utili agli utenti di Illustrator di qualsiasi livello.

1 NUOVO DOCUMENTO Imposta Unità su Pixel, colore su RGB, Video (72 ppi) e spunta l’opzione per allineare nuovi oggetti a griglia pixel. Attiva la griglia (Visualizza > Mostra griglia), vai nelle Preferenze e, nel pannello Guide e grilia, cambia le Righe Griglia ogni 10 px e le Suddivisioni in 5 e, nel pannello Unità, tutto su Pixel.

2 COME CREARE UNA SCRIVANIA Crea due rettangoli, da posizionare uno sopra l’altro, il primo 536 x 16 px e usa il colore #61627C, il secondo 460 x 52 px e usa il colore #484E69. Inserisci le due gambe, applicando un gradiente e fai in modo che la parte inferiore abbia una Opacità di 0%.

Tutorial di Hector Heredia

COSA USERAI Adobe Illustrator

RISORSE Scarica le risorse su www.designdigitale.it

3 I CASSETTI DELLA SCRIVANIA

4 LE BASI DEL PORTATILE

Fai un rettangolo di grandezza 208 x 32 px e colore #61627C e posizionalo sopra i livelli precedenti.

Utilizza lo Strumento selezione diretta per modificare gli angoli del rettangolo, impostando un raggio di 6 px. Usando lo Strumento ellisse, crea i pomelli e scegli il colore #8C8398. Raggruppa tutto e duplica per fare l’altro cassetto.

Per creare il Macbook usiamo un rettangolo 184 x 10 px, riempi con il colore #7CEECE e usa un raggio di 4 px. Con gli stessi pixel di raggio, aggiungi sopra l’altro rettangolo uno di un altro colore, ma di dimensione 48 x 8 px e sottrai la parte con il Filtro Togli nell’Elaborazione tracciati dall’altra per rimuovere la parte centrale della base.

5 LA PARTE SUPERIORE DEL PORTATILE

6 SEMPLICI RIFLESSI DI LUCE

Ricrea la parte superiore del portatile di colore #7CD5C2 con un rettangolo 164 x 116 px di raggio 6 px e aggiungi una barra più scura (#7CBDA7) per la parte della base centrale. In seguito, posiziona sotto la base del portatile lo schermo di dimensione 152 x 98 px, di colore #7566A6 e la camera con lo Strumento ellisse di diametro 2 px con un colore #7CBDA7.

Due sono i rettangoli bianchi da utilizzare per i riflessi dello schermo.

Dopo averli raggruppati, ruota il livello di 45° e scegli un’opacità di 50%. Seleziona il livello dello schermo e il gruppo. Utilizza lo Strumento crea forme per rimuovere le parti dei rettangoli bianchi fuori dallo schermo. Raggruppa tutti i livelli del portatile e allineandoli al gruppo della scrivania.

DESIGN DIGITALE

49

/TUTORIAL

7 CREA IL MAC DA TAVOLO

8 UN DETTAGLIO DI TRASPARENZA

Fai la base con un rettangolo di raggio 4 px e grandezza 74 x 8 px.

L’altro rettangolo di 50 x 44 px e modifica gli angoli in alto con lo Strumento trasformazione libera.

Per ottenere una trasparenza della base, costruisci un rettangolo di 10 x 20 px, con un raggio di 6 px.

Usa l’Elaborazione Tracciati per togliere l’immagine sottostante.

9 IL MONITOR DEL MAC La base, con un raggio di 12 px e lo schermo hanno una dimensione di 222 x 130 px e di 204 x 106 px.

Ricorda di fare l’ellisse per la camera.

10 AGGIUNGI IL MAC ALL’ILLUSTRAZIONE

11 ILLUMINA L’ILLUSTRAZIONE CON UNA LAMPADA

Con lo stesso procedimento usato per il punto 6, crea i riflessi del monitor, raggruppa i livelli e riposiziona il Mac sulla scrivania. Fai attenzione alla posizione dei livelli.

Costruisci un rettangolo di grandezza 72 x 12 px e metti il raggio degli angoli superiori a 12 px. Ora puoi inserire il primo braccio, grande 12 x 90 px, e ruotarlo.

12 LA FONTE DI LUCE Dopo aver aggiunto un altro braccio, prepariamo due rettangoli per creare la parte finale della lampada. Le forme avranno misure di 16 x 20 px e 70 x 44 px. Aggiungi un raggio di 8 px alla prima e con lo Strumento trasformazione libera, modifica l’altro rettangolo e cambia il raggio anche di quest’ultimo.

14 COME TERMINARE UNA ILLUSTRAZIONE ED AGGIUNGERE DETTAGLI 13 COMPLETA LA LAMPADA Ruota i livelli appena completati e unisci tutto in un unico gruppo.

Sposta la lampada sulla scrivania.

50

DESIGN DIGITALE

L’illustrazione si può dire terminata, ma manca qualcosa, dei particolari che la rendono unica. Il nostro consiglio è di non aggiungere molto, ma inserire degli oggetti specifici come un bicchiere del caffè, un contenitore con delle penne. Ricordati, però, di restare coerente con l’immagine di base e usare la stessa tecnina e gli stessi colori utilizzati in precedenza. Uno dei dettagli che vi spiegeremo è l’orologio, oggetto fondamentale in ufficio.

ADOBE ILLUSTRATOR /

15 AGGIUNGI UN DETTAGLIO NELL’ILLUSTRAZIONE: L’OROLOGIO Crea un’ellisse di 112 px di diametro. Duplica il livello e cambia la grandezza a 94 px e inserisci un colore più chiaro. Inserisci le aste delle ore, generando un rettangolo 4 x 14 px di colore #818196. Duplica e ruota di 90% questo livello e posiziona le aste vicino ai lati.

16 CHE ORE SONO ADESSO? Per inserire le lancette dell’orologio, crea due rettangoli di 4 x 46 px e di 8 x 46 px, cambia il raggio e ruota a piacere. Aggiungi, in seguito, un’ellisse di diametro 14 px al centro dell’orologio e riempi il livello con un colore più chiaro. Ricorda di usare colori simili agli oggetti già fatti.

17 RIORGANIZZARE IL SET Riposiziona a piacere tutti gli oggetti creati. Puoi usare i livelli in modo intelligente per muovere degli elementi sopra ad altri. Importante, tuttavia, è avere una coerenza di colori tra le varie parti. Puoi usare una palette, come esempio.

Uno dei vantaggi chiave delle grafiche vettoriali è quello di poter essere ridimensionati e modificati, senza perdere qualità.

Importante è mantenere integra questa natura anche nel passaggio ad altri programmi della stessa famiglia, come Photoshop o After Effects. Data l’intesa tra i due programmi, puoi semplicemente fare Copia e Incolla da un programma all’altro. Molti, però, sono i segreti di Illustrator.

CREA FORME

Lo Shape Builder permette di creare in modo facile e veloce semplici figure, senza ricorrere al pannello di Elaborazione Tracciati. Basta sottrarre una parte di area sovrapposta, premendo Alt e cliccando su di essa. In questo modo si riesce a creare altre forme.

ELABORA TRACCIATI

Molti utenti di Illustrator creano la maggior parte delle forme mediante il pannello Pathfinder.

A questo si potrebbero dedicare interi tutorial, perchè permette di modifica le figure in modi diversi e originali.

SELETTORI PATTERN

18 DELLE PARTICOLARI STELLE

19 UNO SFONDO ALL’ILLUSTRAZIONE

Abbellisci e rendi interessante l’illustrazione con altri elementi creativi. Usiamo delle piccole stelle in questo tutorial. Crea un rettangolo di grandezza 4 x 14 px e aggiungi un raggio a piacere agli angoli. Duplica e ruota di 90° il livello appena creato. Utilizza i colori già presenti nell’illustrazione e posiziona le stelle a piacere. Gioca con i colori, ma anche con le dimensioni.

Adesso non rimane altro che aggiungere uno sfondo al nostro lavoro. Noi abbiamo scelto un colore più scuro (#333656) rispetto a tutti gli altri elementi, per aumentare l’effetto fluo dell’illustrazione.

Crea un rettangolo della stessa dimensione del documento e, dopo aver impostato un colore, spostalo sotto a tutti gli altri livelli. La nostra illustrazione però non è finita.

Una volta create alcune semplici forme, è facile usarle per riempire un progetto mediante selettori Pattern. L’obiettivo è distanziare gli oggetti che daranno vita al pattern. Basterà trascinare l’oggetto nel pannello Campioni, tracciare una nuova forma e riempirla col pattern.

BOMBOLETTA SIMBOLI

Uno strumento per distribuire delle forme all’interno di un progetto. Basta “spruzzare” la bomboletta nel documento.

Puoi modificare anche le dimensioni del simbolo grazie alle opzioni del pannello.

DESIGN DIGITALE

51

/TUTORIAL

CREARE UNA GIF 1. Dopo aver creato l’illustrazione vettoriale in Illustrator, realizza l’animazione di essa in After Effects. Esporta come un file video e importalo in Photoshop usando File > Importa > Fotogrammi video in Livelli per avere ciascun fotogramma in un livello separato.

20 UNA LUCE ALLA LAMPADA

21 AGGIUNGI TRASPARENZA ALLA LUCE

Aggiungi una illuminazione per rendere l’illustrazione più interessante e reale. Con lo Strumento Penna crea una forma e modificala a piacimento per avere il risultato preferito. Usa sempre colori della palette dell’illustrazione.

Usa lo Strumento sfumatura e scegli un angolo per dare un effetto più reale. Fai in modo che il colore rimanga nella parte superiore per poi diventare trasparente man mano che ci si allontana dalla lampada.

Modifica la sfumatura a piacere.

2. Cancella i fotogrammi che non ti servono, copia e incolla dopo i fotogrammi esistenti e girali al contrario per creare un movimento fluido. Correggi i colori con i livelli di regolazione per cambiare tutti i fotogrammi in un solo colpo.

22 IL RISULTATO FINALE L’illustrazione è terminata. Puoi salvarla in tutti i formati che vuoi, anche modificare il colore, convertendo il documento in CMYK, cambiare la dimensione e adattare l’immagine alla stampa.

23 AGGIUNGERE UNA TEXTURE

24 RITOCCA I PARTICOLARI

25 SALVARE IL DOCUMENTO

Se vuoi aggiungere invece un effetto “vintage”, duplica uno dei livelli e usa lo Strumento sfumatura per creare un gradiente bianco/nero. Imposta il bianco su una Opacità di 0% e altera l’inclinazione. Tieni selezionato il livello con la sfumatura e vai ad aggiungere la texture dal menu Effetto > Texture > Granulosità e modifica l’Intensità e il Contrasto, scegliendo come Tipo tra Spruzzi o A punti.

Controlla il risultato ottenuto, se non ti piace puoi modificare ulteriormente la sfumatura tornando nel pannello Sfumatura. Gioca con i parametri del bianco/nero e manipola l’immagine per avere l’effetto desiderato. Puoi cambiare anche gli altri livelli, ripeti i passaggi appena fatti. Ricorda però di avere una sfumatura simile su tutti i livelli per non avere troppe differenze.

Se non sei soddisfatto del tuo lavoro gioca con i colori, le dimensioni, i dettagli e molto altro. Quando hai finito, salva il documento. Uno dei formati che iniziano ad essere più usati per le immagini sul web è SVG. Per salvare con questo formato vai su File > Salva con nome > SVG (svg).

Nell’ultima versione di Illustrator puoi anche salvare con File > Esporta > Esporta per schermi.

52

DESIGN DIGITALE

ADOBE ILLUSTRATOR /

USARE IL FORMATO SVG IN UNA PAGINA WEB Attualmente il formato SVG ricopre un ruolo fondamentale nel web design. Viene utilizzato all’interno di pagine web in sostituzione di immagini GIF, JPEG o PNG perché, essendo un formato di grafica vettoriale, può adattarsi al meglio alla dimensione di ogni browser o dispositivo. Viene visualizzato correttamente su tutti i browser tranne in IE8 e nelle sue versioni precedenti e in alcuni vecchi browser su Android. Usare SVG è fondamentale. Stai inviando le istruzioni su come disegnare qualcosa invece dell’immagine stessa disegnata.

M

olte sono le possibilità da scegliere per inserire una SVG. La più semplice è sicuramente inserirla come una immagine.

Vediamo tutte le opzioni.

IL TAG IMMAGINE Puoi inserirla come qualunque altra immagine nel codice HTML. <img src=”lamiaSVG.svg”>

In questo modo, tuttavia, l’immagine precedentemente salvata sul programma di grafica sarà della stessa dimensione del documento di partenza. Usare il tag immagine può invece essere utile quando hai bisogno di un maggiore supporto.

SFONDO DELLA PAGINA Inserirla sul codice CSS come immagine di fondo. body { background-image: url(“lamiaSVG. svg”); background-image: url(“lamiaSVGfallback.png”); }

In questa maniera puoi sfruttare al massimo le proprietà degli sfondi: la ripetizione, la posizione, etc.

Inoltre sarà possibile fornire anche un’immagine di riserva (fallback) in PNG, quando la SVG non è supportata nel browser.

INLINE SVG Il metodo migliore è aggiungere il codice direttamente sul documento. <svg width=“100px” height=“100px” viewBox=“0 0 100 100” version=“1.1”

xmlns=“...”> <title>Il mio SVG</title <circle class=“circle” cx=“50” cy=“50” r=“50” fill=“#FFFF00”> </circle> </svg>

Poiché il formato SVG è scalabile, se forniamo il tag senza gli attributi width e height, l’immagine verrà replicata nella dimensione originale.

Oltre a sceglierne una grandezza, devi inserire un riempimento e modificarlo in CSS. .circle { fill: #FFFF00; }

Anche in questo caso, però, c’è bisogno di avere un percorso alternativo con la stessa immagine in formato PNG, per essere supportata su tutti i browser.

COME UN OGGETTO Se l’inline SVG non è la tua arma di battaglia (ricorda che ha alcuni svantaggi come essere difficile da memorizzare nella cache), puoi inserie il file SVG e mantenere la possibilità di modificare le sue parti in CSS, usando il tag <object>. <object type=“image/svg+xml” data=“lamiaSVG.svg” class=“logo”> L’immagine SVG <!-- fallback image in CSS --> </object>

Come noti dal codice, inserisci anche il supporto PNG nel CSS. L’importante è provare fino a che non si è raggiunto il risultato voluto.

Molte sono le modalità, basta sfruttarle al massimo.

LE 8 RAGIONI PER UTILIZZARE SVG La grafica vettoriale scalabile è ora supportata su tutti i browser (desktop e mobile).

Ecco le ragioni per sceglierli sempre nel proprio sito.

1. VERSATILITÀ

Il formato SVG ha una serie di caratteristiche: filtri, pattern, sfumature, la proprietà viewBox e rimane sempre nitido.

2. DOM

SVG ha il suo DOM (Document Object Model), trattato come documento separato dal browser. Questo è importante proprio per il viewBox.

3. ACCESSIBILITÀ

SVG ha tag costruiti per l’accessibilità, il principale è il tag <title>, soprattutto per fornire i fallback per tutti i browser non supportati.

4. RISOLUZIONE

L’immagine è indipendente dalla risoluzione. Sempre nitida in qualsiasi risoluzione.

5. HA UNO STILE

Puoi modificare elementi usando particolari proprietà.

6. ANIMAZIONE

Gli elementi all’interno di SVG possono essere animati, utilizzando i CSS, Javascript o il tag <animate>.

7. INTERATTIVITÀ

Usando Javascript possiamo interagire con gli elementi all’interno di SVG, grazie al DOM navigabile.

8. FILE LEGGERO

A causa della natura vettoriale, le dimensioni del file SVG sono più piccole rispetto a quasi tutti gli altri tipi di file di immagine.

Adatto da usare per tutti i siti.

DESIGN DIGITALE

53

CONCORSO DESIGN DIGITALE

PARTECIPA AL CONCORSO Desideri vedere il tuo progetto nel prossimo numero di Design Digitale?

Invia il progetto in alta risoluzone allâ&#x20AC;&#x2122;indirizzo redazione@designdigitale.it Se non sarai estratto tra i finalisti, il tuo lavoro potrĂ sempre essere scelto per essere pubblicato sui social!

PROGRAMMAZIONE /

COSA USERAI HTML - CSS JQuery

ANTEPRIMA Vedi la demo o vai su www.designdigitale.it

M

olti designer hanno opinioni forti sugli slider nella progettazione di siti web. Alcuni li amano, altri li odiano. Una presentazione con tempi sbagliati o una galleria automatica può distrarre gli utenti da aspetti più importanti del sito. D’altra parte, uno slider manuale consente agli utenti di navigare rapidamente e di passare più tempo all’interno del sito. Quando è, quindi, necessario utilizzare una presentazione? Inizia analizzando ciò che il tuo utente sta

PRESENTAZIONE RESPONSIVE Il tutorial di questo numero è offerto da Codyhouse. Uno slider semplice e reattivo con un effetto movimento interessante e dal design accattivante. Ogni nuova diapositiva copre, dopo lo scorrimento, il vecchio blocco e svela una nuova immagine.

cercando e in che modo ciascuna pagina del tuo sito può aiutarlo a raggiungere tale obiettivo. Se uno slider crea solamente distrazione e confusione, avranno un impatto negativo sul sito. Ciò che funziona in modo impeccabile per alcuni potrebbe avere un effetto negativo sugli altri. Se usati correttamente gli slider creano un’esperienza di navigazione ancora più coinvolgente.

Segui passo passo questo tutorial e i nostri consigli per creare uno slider adatto al tuo sito internet.

1 PREPARA LA STRUTTURA La struttura HTML è composta da due elementi principali: ul.cd-slider per le slide e ol.cd-slider-navigation per la navigazione. Entrambi sono racchiusi in un box, chiamato div.cdslider-wrapper. Ecco il risultato: <body> <div class=“cd-slider-wrapper”> <ul class=“cd-slider”> *** STEP 2 QUI </ul></div> </body>

DESIGN DIGITALE

55

/TUTORIAL

PERCHÈ USARE UNO SLIDER Una presentazione ben fatta talvolta è fondamente nel proprio sito. Ecco alcuni esempi dove è possibile sfruttarla al massimo.

TOUR DEL PRODOTTO

Se offri qualcosa, usa uno slider per mostrare il prodotto in una serie di immagini e creare un elemento visivo per l’utente.

NUOVI CONTENUTI

La home page fornisce una breve panoramica e consente ai visitatori di capire il contenuto del sito. Se aggiorni regolarmente il tuo sito, uno slider può sottolineare gli aggiornamenti. Sui siti web di notizie, il materiale più recente e più sensazionale è solitamente al centro della presentazione.

GALLERIE DI FOTO

Una raccolta di immagini o di foto fornisce prove convincenti della qualità e del valore di un’organizzazione. Uno slider va però oltre la semplice visualizzazione delle foto.

PORTFOLIO ONLINE

Artisti, grafici e sviluppatori spesso cercano di dimostrare i loro prodotti e le loro abilità.

Uno slider consente agli utenti (o clienti) di visualizzare il lavoro in un formato più flessibile. I visitatori, anche quando non restano a lungo, possono vedere anche quel poco che desiderao e se ne vanno con un’impressione generale.

E-COMMERCE

Un negozio online può mostrare alcuni dei prodotti più noti o riconoscibili dell’azienda per attirare i clienti. Una buona presentazione enfatizza questi prodotti o mostra le categorie dello shop per rendere più facile fare acquisti.

56

DESIGN DIGITALE

Nota che l’elemento ol.cd-slidernavigation non è direttamente inserito nel codice HTML ma creato in seguito usando jQuery.

2 INSERISCI GLI ELEMENTI Abbiamo scritto in precedenza l’attributo <ul> per aggiungere un elenco, ma non è stato aggiunto il codice per inserire ogni elemento.

Inserisci i tag <li> . <li class=“is-visible”> <div class=“cd-half-block image”>< div><div class=“cd-half-block content”> <div> <h2>Slide Numbero 1</h2> <p><!-- contenuto qui --></p> </div> </div> </li> <!-- .cd-half-block.content --> <li><!-- contenuto qui --></li> <!-- altri elementi lista qui -->

Nell’esempio è stato inserito solamente una delle slide, le altre sono state posizionate sotto, senza riscrivere il codice. Ricorda di dover inserire JQuery in fondo alla codice HTML, ma prima della chiusura del box, in questo modo: <div class=“cd-slider-wrapper”> <ul class=“cd-slider”> *** STEP 2 QUI </ul> <!-- .cd-slider --> <!-- Qui JQuery dell’elemento ol.cd-slider-navigation --> </div> <!-- .cd-slider-wrapper -->

3 AGGIUNGI UNO STILE Adesso devi dare un aspetto alla presentazione. Modifica il file CSS del tuo sito. .cd-slider { position: relative; height: 100%; overflow: hidden; } .cd-slider li { position: absolute; top: 0; left: 0; height: 100%; width: 100%; transform: translateX(100%); transition: transform 0.6s; } .cd-slider li.is-visible { transform: translateX(0); }

Nota che su dispositivi di piccole dimensioni (con larghezza inferiore

a 900px), la struttura dello slider è piuttosto semplice: l’elemento .cd-slider ha una posizione relativa (position: relative) mentre i tag <li> hanno una posizione assoluta (position: absolute; top: 0; left: 0).

Tutti gli elementi della lista sono a destra (translateX (100%)) al di fuori del box. La classe .is-visible viene aggiunta a quella visibile quando spostata nel box (translateX (0)).

Su dispositivi più grandi, gli elementi dell’elenco vengono spostati all’interno del box (translateX(0)), mentre gli altri elementi .cd-halfblock.content e .cd-half-block. image, vengono spostati a destra translateX (200%) e translateX (100%) rispettivamente. In questo modo, entrambi gli elementi sono al di fuori del box, sovrapposti.

Quando la classe .is-visible viene aggiunta alla voce dell’elenco selezionata, i due elementi .cd-halfblock vengono spostati all’interno del box (translateX (0)).

4 L’ANIMAZIONE DELLO SLIDER Come hai notato dal codice CSS, è già stato inserito un movimento alla presentazione. Prendi in considerazione queste due parti dello stile appena scritto: .cd-slider li { transform: translateX(100%); transition: transform 0.6s; } .cd-slider li.is-visible { transform: translateX(0); }

Abbiamo usato le transizioni CSS3 per animare entrambi gli elementi: per il .cd-half-block.content imposta una durata di transizione di 0,6 secondi e un ritardo di transizione di 0 secondi, mentre per il file .cd-half-block.image imposta un durata della transizione di 0 secondi e un ritardo di transizione di 0,3 secondi. In questo modo, quando l’elemento .cd-half-block.content si è spostato per la metà del valore della traslazione (quella a 100%), il file .cd-half-block.image viene spostato di nuovo all’interno del box (translateX (0)) istantaneamente, con un tempo di 0 secondi (transitionduration: 0s). Questo crea un incredibile, ma semplice effetto.

PROGRAMMAZIONE /

In senso orario da sinistra.

Le varie fasi dell’animazione, mentra una delle due slide si spostano sopra l’altra.

5 RESPONSIVE: CSS MEDIA QUERIES Abbiamo già spiegato il procedimento, adesso basta scrivere il codice con precisione. @media only screen and (min-width: 900px) { .cd-slider li { transform: translateX(0); } .cd-slider .cd-half-block { height: 100%; width: 50%; float: right; } .cd-slider .cd-half-block.content { transform: translateX(200%); transition: transform 0.6s 0s ease-in-out; } .cd-slider .cd-half-block.image { transform: translateX(100%); transition: transform 0s 0.3s; } .cd-slider li.is-visible .cd-halfblock.content, .cd-slider li.isvisible .cd-half-block.image { transform: translateX(0%); } .cd-slider li.is-visible .cd-halfblock.content { transition: transform 0.6s 0s ease-in-out; } }

In questa maniera avremo il supporto con i device di larghezza maggiore di 900 px ed il codice dedicato solamente agli schermi più grandi, come quelli dei computer.

Una cosa da notare: imposta un ritardo di transizione a .cd-half-block. image per essere uguale alla metà della durata della transizione di .cdhalf-block.content. Questo perché nel codice è stato usato l’easy-inout come funzione per il tempo,

assicurando che dopo la metà della durata della transizione (nel nostro caso .3s), il .cd-half-block.content si è effettivamente spostato di metà del suo valore totale.

6 ULTIMI RITOCCHI FINALI Usa JQuery per creare e inserire nel DOM lo slider. Ricorda che devi aggiungere questo codice nel documento HTML (vedi Step 2). .var sliderPagination = createSliderPagination (sliderContainer); // sliderContainer = $(‘.cd-sliderwrapper’) function createSliderPagination (container){ var wrapper = $(‘<ol class=”cdslider-navigation”></ol>’); container.children(‘. cd-slider’).find(‘li’). each(function(index){ var dotWrapper = (index == 0)

? $(‘<li class=”selected”></li>’) : $(‘<li></li>’), dot = $(‘<a href=”#0”></ a>’).appendTo(dotWrapper); dotWrapper.appendTo(wrapper); var dotText = ( index+1 < 10 ) ? ‘0’+ (index+1) : index+1; dot.text(dotText); }); wrapper.appendTo(container); return wrapper.children(‘li’); }

Il codice servirà per eseguire correttamente il movimento e le funzionalità dello slider, soprattutto per fare in modo che i due contenitori siano su piani differenti. Adesso puoi provare a cambiare qualche stile dello slider, giocando con colori, foto e molto altro. Ricorda di non cancellare delle parti importanti di codice che potrebbero pregiudicare il corretto funzionamento della presentazione.

DESIGN DIGITALE

57

ISCRIVITI ADESSO!

ISCRIVITI SU DESIGN DIGITALE Per te dei contenuti esclusivi, una community sempre più grande e il dietro le quinte delle migliori Web Agency d’Italia. Iscriviti ora!

ISCRIVITI SUL NOSTRO SITO: WWW.DESIGNDIGITALE.IT/ISCRIZIONE