Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Why emotional websites matter

Why emotional websites matter

Come si è evoluto il web tra il 2018 e il 2019 cavalcando l’onda dell’emotional marketing, quali sono i suoi attuali punti di forza e perché si è sviluppato in questo modo.

More Decks by Margherita Gregori Ferri

Other Decks in Design

Transcript

  1. ALTEZZA 2 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
  2. 3 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 FEVR
  3. www.margheritagregoriferri.it 4 DESIGN Da cosa possiamo definire un trend specifico

    nel web? USABILITÀ CREATIVITÀ CONTENUTO RESPONSIVE METODO DI SVILUPPO FEVR
  4. www.margheritagregoriferri.it 7 PROTAGONISTI 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 FEVR
  5. ALTEZZA 10 Tactile Design Trends - 1/9 www.margheritagregoriferri.it es. https://square.geex-arts.com/

    https://www.genrod.com.ar - 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
  6. 1 1 Asimmetria Trends 2/9 www.margheritagregoriferri.it es. https://alfabank.ru/pokraslampas http://www.corvari.it https://muraflex.com/en

    https://www.danielspatzek.com/viita_titan - Rottura con il passato, spezza la monotonia del “sito già conosciuto” - Costringe a essere più attenti al contenuto Code css-tricks.com/snippets/css/complete-guide-grid/ bashooka.com/coding/25-awesome-css-grid-layout-examples/ codepen.io/andybarefoot/pen/wrXvLj codepen.io/andybarefoot/pen/MERBPx
  7. ALTEZZA 12 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://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 caricare e più leggeri - Modalità di scorrimento impreviste Code codepen.io/ig_design/pen/zXVGem greensock.com/tweenmax www.designbetter.co/animation-handbook webflow.com/ix2
  8. ALTEZZA 13 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 Library lapa.ninja/blog/free-illustrations-library-for-your-project www.humaaans.com/ absurd.design/?ref=lapaninja icons8.com/ouch
  9. 1 4 Design tipografico Trends 5/9 www.margheritagregoriferri.it es. https://ruya.digital http://thisisclimate.com

    https://apostrophe.xyz - Maximalism - Font unici - Variable Font - Le intestazioni sono elementi chiave per la SEO Library https://v-fonts.com/
  10. 15 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 Code codepen.io/machtman/pen/WWBGBw?&page=1 tympanus.net/Development/ShapeOverlays/index.html
  11. 1 6 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 Code webgradients.com/ uigradients.com/#DarkOcean www.gradient-animator.com/ www.w3.org/TR/css-images-4/#conic-gradients
  12. ALTEZZA 17 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 practices - Design Scioccante, a volte offensivo Code codepen.io/artyschein/pen/KREQQW github.com/nostalgic-css/NES.css brutalistframework.com/
  13. 22 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