Emotional Web Design - Trends 2018/2019

Study of web trends in 2018, with a focus also on 2019.
Trends exist because because we are constantly tending to search for beauty, something that thrills us, that affects us and this drives us to keep going, so it's nice to study trends, because we can continue to research and improve.

Transcript

1. www.margheritagregoriferri.it BOLOGNA FRONT END 1 Emotional Web Design Trends 2018-2019
2. 2 www.margheritagregoriferri.it BOLOGNA FRONT END gregoriferrimargherita@gmail.com
3. 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. 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.it BOLOGNA FRONT END
5. 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. 6 Perché Emotional? Felicità. Benessere. Soddisfazione. Trends. www.margheritagregoriferri.it
7. 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. 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. 9 Un esempio. www.margheritagregoriferri.it BOLOGNA FRONT END
10. 1 0 Trends 2018 www.margheritagregoriferri.it
11. ALTEZZA 1 1 Tactile Design Trends - 1/9 www.margheritagregoriferri.it 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
12. 1 2 Asimmetria Trends 2/9 www.margheritagregoriferri.it 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
13. ALTEZZA 1 3 Animazioni e micro interazioni Trends 3/9 www.margheritagregoriferri.it 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
14. www.margheritagregoriferri.it 1 4 webflow.com/ix2 BOLOGNA FRONT END Gift
15. ALTEZZA 1 5 Illustrazioni personalizzate Trends 4/9 www.margheritagregoriferri.it 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
16. 1 6 Design tipografico Trends 5/9 www.margheritagregoriferri.it es. https://ruya.digital http://thisisclimate.com https://apostrophe.xyz - Maximalism - Font unici - Le intestazioni sono elementi chiave per la SEO
17. 1 7 Forme Fluide Trends 6/9 www.margheritagregoriferri.it 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
18. 1 8 Gradient & Flashing color Trends 7/9 www.margheritagregoriferri.it 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
19. ALTEZZA 1 9 Brutalism Trends 8/9 www.margheritagregoriferri.it 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
20. 2 0 Mobile First Trends 9/9 www.margheritagregoriferri.it es. https://deanbradshaw.com https://www.mad.studio https://ifthisthendominos.com
21. www.margheritagregoriferri.it 2 1 This is a web page BOLOGNA FRONT END Esperimento
22. 2 2 Possibili Trends 2019 www.margheritagregoriferri.it
23. www.margheritagregoriferri.it 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
24. 24 www.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