Articoli marcati con tag ‘web design’
Le basi dell’emotional design
Avete mai pensato a ciò che rendono le cose ‘buone’ o ‘cattive’? Perché alcune persone amano una cosa mentre altri la odiano? Il Director di UX a MailChimp Aarron Walter ha trovato la risposta riportandola nel suo libro “Designing for Emotions“. Per capire in pieno la questione si può guardare video di Don Norman “3 Ways Good Designs Make You Happy.
Gli elementi chiave dell’emotional design
Ci sono molti libri e guide su come creare un design accattivante per un sito web: belle immagini, buona tipografia e colori, testi interessanti e nuove tendenze. Ma nessuno vi dirà come creare un sito web che possa impressionare in tal modo i visitatori da farli ritornare sullo stesso sito. La risposta è che si dovrebbero evocare emozioni positive quali: il piacere, la gioia, la sorpresa, l’attenzione, l’aspettativa e l’esclusività. Tutti questi fattori sono alla base del design emozionale. Tuttavia, le tattiche appropriate dovrebbero essere scelte per ogni specifica marca e target di riferimento.
Ecco alcuni esempi di siti web che mettono in pratica il design emozionale:
- La Natura Umana
La maggior parte delle persone rimangono coinvolte dai bambini. Il cervello percepisce la proporzione del loro volto (occhi grandi e piccolo naso) come qualcosa di speciale, innocente e fragile. Lo sguardo esprime un senso di fiducia ed amore. La stessa logica è applicata ai fumetti. Eccone alcuni esempi:
- Il Sorriso
Se piaci ad una persona, questa facilmente ti sorride. Ad esempio il design della Maggiolino Volkswagen è riconosciuto come di maggiore impatto emotivo in quanto i fari assomigliano agli occhi ed il cofano arrotondato ad un sorriso.
Ciò funziona anche sui siti web.
- Follie
Per coinvolgere un visitatore si dovrebbe fare qualcosa di sorprendente evocando solo sentimenti positivi. Così il sito sarà ricordato e con molta probabilità potrà diventare virale.
- Interesse
Se fate qualcosa che dimostri che vi interessare realmente ai visitatori, questi l’apprezzeranno e lo ricorderanno.
La mascotte su Xixi chiede “Vuoi che io sia il tuo traduttore?”. Se si risponde affermativamente, la mascotte si metterà a disposizione.
- Attenzione ai dettagli
Se non si acquista nulla su Photojojo il un carrello vuoto risulta grigio ed infelice. In caso contrario diventa verde e sorridente.
Threadless mostra esempi di “carrello felice o infelice”.
- Trasformare i problemi di servizio in un vantaggio
via www.hongkiat.com
Pubblicato in 
Tag: 
Esempi di siti web legati al beverage
I siti web che promuovono le bevande oltre a un ruolo informativo e di socializzazione sono efficaci per la promozione e la pubblicità.
I designers sfruttano diversi stili come grunge, minimalista, scrapbooking digitale e le illustrazioni disegnate a mano. Per la parte informativa, di solito si trovano nei widget dove viene inserita la storia ed il processo di fabbricazione nonché la descrizione sulla qualità delle merci. La maggioranza dei siti hanno dei design ben strutturati e sobri. La combinazione di immagini e descrizioni in proporzioni quasi uguali rendono il sito sorprendentemente armonioso ed attraente.
Cîroc elegante e raffinato, con le manipolazioni delle immagini crea un look fresco grazie agli spruzzi d’acqua ed ai bicchieri di cocktail ghiacciati.
Myagkov Vodka utilizza la tecnica del multistrato dando la sensazione di 3d. Gli elementi grafici ricordano il tema del nightclub.
Austin ha una forte atmosfera grunge ed una tipografia ad effetto ruvido.
Moa Beer combina la foto a schermo intero di sfondo e la tagline bianca separate da una bottiglia di birra.
Michelberger Booze è interamente illustrato con disegni in bianco e nero.
Oddka France mostra graficamente il processo di creazione della vodka.
Sierra Mist Natural presenta un dispositivo di scorrimento con suggestive immagini sullo sfondo alcune delle quali con effetto sfocato.
Somersby Sidro presenta un’atmosfera naturale con immagini surreali completate con la bottiglia di sidro.
Prima emana serenità grazie alla foto che raffigura una superficie di mare calmo.
Sanson utilizza immagini multistrati per familiarizzare gli utenti col processo di fermentazione presentando le caratteristiche dei prodotti e la caldaia.
Austin Beerworks fa molto uso dell’arancione. Il design si basa su una tipografia di grande dimensione.
Stella Artois ha una grande quantità di immagini che presentano la storia del prodotto.
Miller Music Tour ha como foto di sfondo un panorama skyline notturno che ha un gradevole tocco glamour.
Denver Beer Co. ha numerosi strati sovrapposti che insieme assomigliano ad un collage digitale.
Rupert Wine semplice e pulito, mostra la linea di prodotti nella home page.
Pro Foods illustra il prodotto principale, rendendo un senso di freschezza con l’acqua e le varie tonalità dei blu.
Cocoa Heaven presenta l’intestazione con componenti ornamentali di cioccolato.
Tikves Winery il sito è minimale con diversi cursori informativi.
Budweiser utilizza la griglia al fine di rendere il tutto preciso ed organizzato.
Vinea Room sfrutta il vertical parallax e fa uso di una immagine a sfondo scuro.
Vins Rhone ha un look bizzarro. Il colore principale è il rosso, amato dai designer per la capacità di sollecitare l’appetito.
Brooklyn Gin pulito, semplice ma presentato in una grande quantità di spazio vuoto che aggiunge una nota di freschezza .
Spacho fa un grande uso di grafica vettoriale monocromatica realizzata in arancione ed in varie tonalità di giallo.
Borjomi è pagina di destinazione che offre come sfondo un paesaggio montano creando una impressione naturale e genuina.
Sobe è completamente animato con belle presentazioni per ogni linea di prodotto.
Weinhandlung Posch dalle foto si evince l’esistenza di una buona cantina. I widget descrittivi hanno un bel carattere, decorazioni sobrie e schema di colore in grigio chiaro.
Via: designmodo.com
Siti web ispirati all’arte
Numerosi tipi di arte sono entrati nel digital design. Molte forme d’arte tradizionali hanno così avuto una nuova rinascita, quale la tecnica dell’acquerello, già indicata in un nostro post. Altri esempi sono lo scrapbooking e le illustrazioni disegnate a mano. Designmodo indica alcuni esempi.
Numéro 10 ha le illustrazioni in bianco e nero disegnate a matita.
Métiers d’Art presenta un’elegante atmosfera aristocratica che si ottiene per mezzo di sfondo grigio chiaro unita ad una immagine classica.
Pracownia Olszanska provoca sentimenti contrastanti a causa dell’aspetto straordinario e non convenzionale, realizzato in stile scrapbook.
Aguru Design Studio sfrutta uno sfondo artistico scuro adattandolo alla semplice tipografia di colore bianco.
In YSD lo sfondo in scuro grunge texture e la tipografia grande ed in grassetto sono integrate da fasci di luce rettangolari.
Nochichi Arts ha il dispositivo di scorrimento a schermo intero che rivela diverse opere d’arte in acquerello.
Midea attira l’attenzione con una grande luminosa macchia di vernice usata principalmente come elemento di decorazione.
The Crab Pot ha una combinazione di effetto acquerello con carta tagliata a strati.
Muumilaakso è un buon esempio di utilizzo del cursore al fine di mostrare opere d’arte di alta qualità.
Summer opening ha una forte atmosfera grunge.
H-Psy tratta di psicologia e così ogni sua illustrazione ha lo scopo di rendere sereni gli utenti.
Ernest et Célestine ha un’atmosfera delicata ed affabile raggiunta con l’acquarello e colori pastello.
Summer closed è in stile grunge con un tocco di acquerello. Le variazioni di colore rendono un look morbido e caldo.
Sasa Foric l’illustrazione ispira la natura, il blu ed il rosa danno un aspetto sofisticato.
Bache de Yourte ha una illustrazione calda che rende un’atmosfera amichevole.
Colleen Clapp il dipinto a olio astratto presenta una forte atmosfera artistica.
Qudres utilizza illustrazioni monocromatiche in diversi colori.
Veselka Velinova utilizza la tecnica del paper-cut con l’acquerello.
Maki-san sfrutta lo schema ripetitivo del sushi trasmettendo sensazioni psichedeliche.
Passeio Pedra Branca ha immagini trasparenti colorate con l’acquarello.
Not a Cat fonde lo stile grunge con dettagliate immagini di animali.
Jacksonville Artwalk mescola perfettamente l’immagine con l’acquerello ed i graffiti.
Xilografie le illustrazioni in stile biro nero danno intenzionalmente un aspetto disordinato e trascurato grazie anche al texure cartone.
Jess e Russ enigmatica ed artistica grazie alla tipografia vintage e le illustrazioni scure.
Thomas Fersen rompe la monotonia del design convenzionale mediante un’ illustrazione oscura.
Nuovo trend nel web design: i video come sfondi
Grazie alla popolarità dell’app mobile Vine che permette ai suoi utenti di creare e inviare video di 6″ ed essere condivisi o incorporati sui social media, sta prendendo piede il trend di inserire come sfondo i video.
E’ un ottimo modo per creare un diverso tipo d’interesse visivo ed incoraggia i visitatori a trascorrere più tempo sul sito. Grazie ad esso si può creare uno stato d’animo e raccontare una storia che potrebbe essere difficile da trasmettere.
L’opzione migliore è quella di creare un proprio video. Ma a volte ciò richiede tempo e costi elevati e quindi si può prendere in considerazione un “Creative Commons” da YouTube, Vimeo, MotionShare e SitePoint ma gli svantaggi sono che possono essere limitati, di scarsa qualità ed essere utilizzati da altri siti. E’ possibile invece acquistarli su siti come VideoHive che includono una varietà di opzioni video a pagamento.
Per realizzare un buon lavoro il video deve avere un aspetto professionale, con qualità HD, facile da comprendere evitando troppa azione o velocità, abbinarlo con i contenuti del sito e di breve durata. Cercare di evitare l’audio, ma se si desidera comunque utilizzarlo è necessario lasciare l’opzione agli utenti di eliminarlo. Sono anche da considerare i tempi di caricamento e che devono comunque essere compatibili con l’iPad. Designmodo ne indica alcuni esempi.
Colori, forme e tecniche per rendere friendlier il sito web
Avere un sito troppo informativo ed asettico non sempre funziona poiché potrebbe inviare messaggi sbagliati e scoraggiare gli utenti. Ma con la giusta combinazione di testo, immagini, forme e colori, è possibile creare nel sito un senso di professionalità ma anche amichevole e persuasivo. Designfestival fornisce alcuni consigli.
Cerchi ed angoli arrotondati
L’aggiunta di elementi circolari può aiutare a rendere il sito più invitante. Se si teme per la coerenza tra i vari browser, è possibile implementare gli angoli arrotondati e cerchi anche pieni in CSS.
Colori Vivaci
Usando i colori giusti si può avere un notevole impatto sulla percezione del sito. Già ci siamo occupati in passato in altri nostri post sull’importanza del colore nel web design e su cosa si desidera trasmettere. Se i colori di un brand sono scuri, si può aggiungere un accenno di tinta forte per vivacizzare il tutto.
Ad esempio il logo aziendale Hughes combinato con il magenta, ciano, con un tocco di verde ed arancio rende una nota di leggerezza al sito.
Feedstitch rende divertente il sito con illustrazioni semplici, texture e colori chiari ed invitanti.
Cartoon ed illustrazioni
I cartoon e le illustrazioni potrebbero non funzionare per ogni azienda, ma se si vuole apparire come persona divertente ed ironica questa è la strada giusta. Ecco alcuni esempi
Carbonmade piuttosto che rendere anonimi e noiosi i curricula grazie al mix di illustrazioni divertenti sulla homepage crea immediato interesse.
N.design studio utilizza il design della carpa giapponese “Koi” (simbolo di coraggio e fortuna) per presentare un vivace e vibrante look.
Il sito Forrst, popolare tra i designer, utilizza illustrazioni simpatiche per invogliare ad iscriversi. E’ una buona strategia, perché richiedere risposte e consigli su un lavoro può essere talvolta imbarazzante.
Umanizzare la scrittura
La pagina principale del sito dovrebbe essere semplice, precisa e descrittiva. È possibile inserire le frasi tecniche nelle pagine successive.
Immagini simpatiche
Molti siti utilizzano immagini di alta qualità ma è importante cosa mostrare. Ad esempio un sito immobiliare presenta le case al meglio con tutti i dettagli della proprietà. Tuttavia se si vuole destare maggiore interesse, si dovrebbero scegliere delle foto di persone che si godono le loro case come ad esempio una serena famiglia a cena, nel salotto, in cucina. Mostrare insomma come si passa il tempo nella nuova casa. L’immaginazione può fare molto quando si tratta di collegamenti personali, infatti rende facile proiettare se stessi in quella situazione.
Space-box mostra un tramonto rilassante, ottima scelta visto che si tratta di un sito che gestisce le transizioni di pagamenti che possono comportare notevole stress.