Emotional Web Design - Trends 2018/2019

www.margheritagregoriferri.itBOLOGNA FRONT END 1
Emotional
Web Design
Trends 2018-2019

2www.margheritagregoriferri.itBOLOGNA FRONT END
gregoriferrimargherita@gmail.com

ALTEZZA 3
Awwwards
www.awwwards.com
CssDesignAwards
https://www.cssdesignawards.com
FWA
https://thefwa.com
Newsletter
www.webdesignernews.com
www.invisionapp.com/inside-design
Web extension Muzli
https://muz.li
La mia esperienza
dello studio dei trend
Introduzione
www.margheritagregoriferri.it

4
Che cos’è un trend?
Un trend è una qualunque forma, stile o tecnica che diventa popolare in un gruppo.
È il risultato della percezione di un’idea originale.
L'implementazione degli ultimi stili e tecniche nel design del web consente alle aziende di rimanere
competitive e di avere benefici in termini di marketing e SEO.
Stare al passo con le tendenze e utilizzarle nei propri progetti web può aiutare a mantenere un sito
web pertinente.
www.margheritagregoriferri.itBOLOGNA FRONT END

www.margheritagregoriferri.it 5
DESIGN
BOLOGNA FRONT END
Da cosa possiamo definire un trend specifico nel web?
USABILITÀ
CREATIVITÀ
CONTENUTO
RESPONSIVE
METODO DI SVILUPPO

6
Perché
Emotional? Felicità. Benessere. Soddisfazione. Trends.

ALTEZZA 7
Storia
https://www.w3.org/Style/CSS20/history.html
Twitter
https://twitter.com/wiumlie
Se siete coraggiosi
http://www.wiumlie.no/en
Håkon Wium Lie
Na chicca, mi caricava

www.margheritagregoriferri.it 8
PROTAGONISTI
BOLOGNA FRONT END
Come possiamo suscitare emozioni
attraverso un sito, o un app?
UNICI
PRESENTI
Per riuscirci dobbiamo stare attenti
ai bisogni concreti delle persone,
dobbiamo studiare la realtà
e scoprire cosa ci dice

9
Un esempio.
www.margheritagregoriferri.itBOLOGNA FRONT END

1
0
Trends
2018

ALTEZZA
1
1
Tactile Design
Trends - 1/9
es. https://www.genrod.com.ar
https://scale.ai/ocr-transcription
- Figlio del Material Design e del Flat Design
- Unito al parallax rende nuovo un concetto
conosciuto
- Aiuta a far interagire l’utente
- L’interazione aiuta ad aumentare il tempo di
permanenza sul sito, quindi migliora la SEO

1
2
Asimmetria
Trends 2/9
es. https://alfabank.ru/pokraslampas
http://www.corvari.it
https://www.danielspatzek.com/viita_titan
- Rottura con il passato, spezza la monotonia del
“sito già conosciuto” e costringe a essere più
attenti al contenuto

ALTEZZA
1
3
Animazioni e
micro interazioni
Trends 3/9
es. https://www.aquest.it
http://annaeshwood.com
http://heystack.is
http://experience.mausoleodiaugusto.it
https://base54.com.ar
https://orano.group
- Sono animazioni, per questo attraggono subito
l’utente e lo fanno permanere di più sul sito
- Spesso sono SVG, il che li rende più veloci da essere
caricati e più leggeri
- Modalità di scorrimento impreviste

1
4
webflow.com/ix2
BOLOGNA FRONT END
Gift

ALTEZZA
1
5
Illustrazioni
personalizzate
Trends 4/9
es. https://www.fishfinger.me/graphic-design
https://interview.ueno.co
https://ester.co
https://hf.roninamsterdam.com/xhmHTsnSHV
https://cocaineroutes.com
- Le immagini vengono elaborate 60.000 volte più
velocemente del testo
- La diffusione sui social delle foto prese da banche
dati ha reso più “esperti” gli utenti su quali possano
essere contenuti finti o prodotti ad hoc
- Storytelling

1
6
Design tipografico
Trends 5/9
es. https://ruya.digital
http://thisisclimate.com
https://apostrophe.xyz
- Maximalism
- Font unici
- Le intestazioni sono elementi chiave per la SEO

1
7
Forme Fluide
Trends 6/9
es. https://siliconvalley.baunfire.com
https://affinity.pt/en
https://www.oeufkicetou.fr
- Le forme fluide risultano più amichevoli,
migliorando la UX
- Tutte le forme geometriche trasmettono emozioni
Rettangolo → Stabilità
Cerchio → Unità
Forme Fluide → Dinamismo

1
8
Gradient & Flashing color
Trends 7/9
es. https://www.engine.xyz
http://usatoday.geex-arts.com
https://elje-group.com
- Sfondi e dettagli
- Attenzione all’usabilità per soggetti disabili o
daltonici

ALTEZZA
1
9
Brutalism
Trends 8/9
es. https://www.balenciaga.com
https://studio-push.com
http://gift.gucci.com
http://brutalistwebsites.com
- Totale rottura degli schemi e delle best practise
- Design Scioccante, a volte offensivo

2
0
Mobile First
Trends 9/9
es. https://deanbradshaw.com
https://www.mad.studio
https://ifthisthendominos.com

2
1
This is a web page
BOLOGNA FRONT END
Esperimento

2
2
Possibili
Trends
2019

2
3
CHATBOT
BOLOGNA FRONT END
Da cosa possiamo definire un trend specifico nel web?
VIRTUAL E-COMMERCE UX
VARIABLE FONT
AMP
FLUID SHAPE
SOFT NATURAL COLOR

24www.margheritagregoriferri.it
I used to be embarrassed because I was just a comic-book writer
while other people were building bridges or going on to medical
careers.
And then I began to realize: Entertainment is one of the most
important things in people’s lives.
Without it, they might go off the deep end. I feel that if you’re able to
entertain people, you’re doing a good thing.
[...] I realize: It’s a great thing to entertain people.
Stan Lee
Thanks

Emotional Web Design - Trends 2018/2019

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Emotional Web Design - Trends 2018/2019