Web Design - Connessi con il Mondo (Presentazione Estesa)

Post on 29-Jun-2015

225 views 0 download

description

Indice dei contenuti: 1) Mobile drives desktop design - Mobile Momentum; - Responsive Design: la partenza; - Adaptive Design: evoluzione; - I siti web.. sempre più minimal; - Pulldown Menu ricchi; - Spettacolari sui mobile; - Menu a comparsa da sinistra; - Menu desktop progettati per il Mobile. 2) Visual web - Viviamo in un mondo di Pinterest; - Vendita: foto ingrandite in primo piano; - Pulizia e dettagli; - I dettagli aiutano a vendere. 3) INFINITE SCROLL 4) BYE-BYE CAROUSEL - Le icone diventano più popolari. 5) COSA CI CHIEDONO I TABLET - Immagini ad Alta Risoluzione; - Alto contrasto. 6) Native advertising 7) FLAT DESIGN - colori; - Typography; - Flat Icon; - Dynamic grid. 8) L'ULTIMO SORPENDENTE TREND - La stampa è il plus.

Transcript of Web Design - Connessi con il Mondo (Presentazione Estesa)

2014

Website DesignConnessi con il mondo

Ottobre, 2014

Codebue FabioDocente Web designAccademia di Belle Arti SantaGiulia

Chi sono...P-Soft... ASG Independant researcher…

Fabio CodebueP-Soft

MOBILE DRIVES DESKTOP DESIGN

1

Fabio CodebueP-Soft

Traffico mobile è arrivato all 88%

nell'anno 2014.

—Mary Meeker’s legendary Internet trends 2014 report (out last Wednesday)

Mobile Momentum

Fabio CodebueP-Soft

1/3 delle attività online è fatto da dispositivi mobile

La conversione in vendite: 55% degli utenti effettuano almeno un acquisto

77% utenti di smartphone completano L'acquisto personalmente

Source: 2014 Ad/Telmetrics Mobile Path to Purchase Study: Understanding Mobile’s Role in the Consumer Path to Purchase - Retail Edition

Mobile Momentum

Fabio CodebueP-Soft

Le vendite tramite e-commerce cresceranno in tutto il 2014

Con la previsione di toccare i 25 miliardi € (più 10%)

Source: casaleggioassociati 2014

Mobile Momentum

Fabio CodebueP-Soft

Sapete... Cosa significa?

Fabio CodebueP-Soft

Il design responsivo, o responsive web design (RWD), indica una tecnica di web design per la realizzazione di siti in grado di adattarsi graficamente in modo automatico al dispositivo coi quali vengono visualizzati (computer con diverse risoluzioni, tablet, smartphone, cellulari, web tv), riducendo al minimo la necessità per l'utente di ridimensionamento e scorrimento dei contenuti.

Evoluzione del RWD

Responsive Design + Progressive Enhancement

Lo scopo dell’Adaptive Design è quello di fornire all’utente la miglior esperienza utente possibile su ogni schermo e device.

RESPONSIVE ADAPTIVE

Responsive Design: la partenza

Fabio CodebueP-Soft

Responsive Design

Fabio CodebueP-Soft

Adaptive Design: evoluzione

Fabio CodebueP-Soft

I siti web.. sempre più minimal

Fabio CodebueP-Soft

Troppo Minimal?

Fabio CodebueP-Soft

La strada giusta... sta nel mezzo

Fabio CodebueP-Soft

Pulldown Menu ricchi

Fabio CodebueP-Soft

17

Spettacolari sui mobile

Fabio CodebueP-Soft

Menu a comparsa da sinistra

Fabio CodebueP-Soft

E questo cosa è?

Fabio CodebueP-Soft

un hamburger ?

una torre ?

Fabio CodebueP-Soft

Menu desktop progettati per il Mobile

Fabio CodebueP-Soft

La ricerca: in alto a destra

Fabio CodebueP-Soft

Sempre più informazioni a sinistra

Fabio CodebueP-Soft

IL VISUAL WEB

2

Fabio CodebueP-Soft

Visual Web

Il paradigna si sposta dall'utilizzo di media (immagini, video, gif) per semplice supporto all'utilizzo dei media come Metodo primario per veicolare i contenuti

30 40% – della superficie del nostro cervello è dedicata all'elaborazione dell'immagine

Possiamo elaborare un immagine molto più velocementeChe qualsiasi pagina contenente testo!

Fabio CodebueP-Soft

Viviamo in un mondo di Pinterest

Fabio CodebueP-Soft

Pinterest: stile di vendita

Fabio CodebueP-Soft

Vendita: foto ingrandite in primo piano

Fabio CodebueP-Soft

Pulizia e dettagli

Fabio CodebueP-Soft

I dettagli aiutano a vendere

Fabio CodebueP-Soft

Foto + Dettagli articolo = Vendite

Fabio CodebueP-Soft

INFINITE SCROLL

3

Fabio CodebueP-Soft

Facebook l'ha inventato e reso famoso

Fabio CodebueP-Soft

Ora anche nelle vendite

Fabio CodebueP-Soft

Possiamo andare oltre....

Fabio CodebueP-Soft

E guidare il consumatore

Fabio CodebueP-Soft

BYE-BYE CAROUSEL

4

Fabio CodebueP-Soft

Le icone diventano più popolari

Fabio CodebueP-Soft

...e video (senza Autoplay)

Fabio CodebueP-Soft

COSA CI CHIEDONO I TABLET

5

Fabio CodebueP-Soft

Immagini ad Alta Risoluzione

Fabio CodebueP-Soft

Alto contrasto: bianco, bianco, bianco...

Fabio CodebueP-Soft

Alto contrasto: nero, nero, nero...

Fabio CodebueP-Soft

… e tutto deve funzionare sul telefono

Fabio CodebueP-Soft

NATIVE ADVERTISING

6

Fabio CodebueP-Soft

Native Advertising

Definizione:

Native advertising è una forma di advertising online che assume l'aspetto dei contenuti del sito sul quale è ospitata, cercando di generare interesse negli utenti.

L'obiettivo è riprodurre l'esperienza utente del contesto in cui è posizionata, sia nell'aspetto che nel contenuto.

Fabio CodebueP-Soft

Source: wikipedia

Essendo nativo: ci porta al contenuto

Preferisce conoscere una società tramite articoli piuttostoche pubblicità

Si fida di contenuti editoriali

Si sente piùsicuro di unasocietà dopo aver letto contenutipersonalizzati sul sito

Agiràsecondo il contenutomolto di piùdi ogni altra formadi pubblicità

60 % 70 %

56% 67%

Fabio CodebueP-Soft

Cosa porta il Native Advertising

POSITIVO

§  Adeguato§  Creato a mano

§  Mette in primo piano i lettori

NEGATIVO

§  Publiredazionale vecchio stampo§  Programmatico, automatico

§  Il brand al centro

Fabio CodebueP-Soft

Cosa porta il Native Advertising

FUNZIONA PER...

§  Più facile da condividere (32% versus 19%)

§  18% in più di interesse all'acquisto

§  73% degli editori online offrono native adv.

§  Il trend lo vede raddoppiareil 2017

Fabio CodebueP-Soft

Native Advertising

Cosa è realmente

§  Addio ai banner ads?

§  Progettato per il web

§  Parla univocamente al mobile

§  Supremazia dei contenuti e del contesto

Fabio CodebueP-Soft

FLAT DESIGN

7

Fabio CodebueP-Soft

Fabio CodebueP-Soft

COLORI

Creare contrasto

Rainbow color matching

Psicologia dei colori

Colori pastello, vivaci

Elementi chiari e leggibili

§ § 

§ § 

Fabio CodebueP-Soft

Typography

COSA E'

§  Elemento essenziale del Flat design

§ 

Diventano il centro focaleDel design

§

Espressione minimal

Fabio CodebueP-Soft

Flat Icon

Icone rappresentative

§  Assieme ai colori

§  Assieme agli spazi colorati

§  Identifica univocamentele sezioni e i contenuti

Fabio CodebueP-Soft

Dynamic grid

Disegno schematico

§  Eredità Microsoft Metro

§  Facilmente responsive

§  Facilmente adaptive

§  Contenuto separatoIn modo univoco

§  Lettura facilitata

L'ULTIMO SORPENDENTE TREND

8

Fabio CodebueP-Soft

La stampa è morta vero?

Fabio CodebueP-Soft

La stampa è il plus

Non è morta ma è in ascesa

§   La stampa è usata per approfondimenti

§   Ora è l'estensione ottimaledi una piattaforma digitale

§   Può avere ancora un impatto altoSu settori specifici

La stampa è il nuovo plus

Best Practices

§  La stampa si deve ispirare al digitale

§  Editoriali: forma breve e lunga

§  Cosa fa meglio: visual GRANDI,di alta qualità

§  Progetto per una stimolazione Progressiva e continua

§  Sensibilità alle infografiche

Fabio CodebueP-Soft

Grazie....

http://www.p-soft.biz

Fabio Codebue

f.codebue@p-soft.biz