Web Design - Connessi con il Mondo (Presentazione Estesa)
59
2014 Website Design Connessi con il mondo Ottobre, 2014
-
Upload
p-soft-di-codebue-fabio -
Category
Internet
-
view
225 -
download
0
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
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
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
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
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
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
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
