Ogni tanto mi imbatto in un sito che ha uno o due pezzi di design e un'interfaccia utente davvero interessanti che sono abbastanza buoni per me da scrivere su di loro. In casi ancora più rari, trovo un intero sito che è così traboccante di idee progettuali uniche e straordinarie che devo condividere con voi. Questo articolo riguarda uno di questi siti.
Sevenly.org è un sito dedicato ad aiutare gli enti benefici attraverso la vendita di t-shirt personalizzate in edizione limitata. Oltre al fatto che adoro l'organizzazione e ciò che rappresentano, sono stupefatta da quello che hanno fatto con il sito e penso che serva da strumento di apprendimento per i web designer. Diamo un'occhiata!
Soddisfare Sevenly
La missione di Sevenly è semplice:? Sfruttare il potere dell'arte e della comunità per costruire una consapevolezza sostenibile e finanziare movimenti che sostengano gli enti di beneficenza nei loro sforzi per cambiare il mondo?
In pratica, l'aspetto è che vendono prodotti super-impressionanti (magliette, felpe, bottiglie d'acqua, ecc.) E donano $ 7 da ogni acquisto all'associazione benefica che hanno scelto per sostenere quella settimana. Ad oggi hanno raccolto quasi $ 600.000 per varie organizzazioni di beneficenza.
Grande design
Ancora una volta, la causa e la strategia mi hanno guadagnato un clic su Twitter, ma è il design che mi ha attirato e mi ha fatto interessare. Come puoi vedere nello screenshot qui sopra, la home page è piuttosto attraente.
Mette in mostra i prodotti magnificamente con belle foto di persone belle e sorridenti che indossano abiti dal design molto attraente. Il layout in muratura conferisce alla pagina un aspetto organico e il design minimale / combinazione di colori spinge davvero la tua attenzione verso quelle grandi foto.
Il sito ha un bell'aspetto, ma appena inizi ad usarlo, ci sono così tante piacevoli sorprese e piccoli trucchetti che mi sono perso, giocando con ogni pagina per diversi minuti. Diamo un'occhiata ad alcuni dei tocchi interessanti.
Effetti Hover a bizzeffe
Sono un grande fan degli effetti al passaggio del mouse, so che non si traducono sempre in touch screen molto bene, ma puoi tenerne conto. Su un desktop, sono uno dei principali modi in cui interagiamo con gli utenti a livello base.
Sevenly è semplicemente traboccante di effetti cool hover. Slick piccole animazioni ti aspettano ad ogni turno. Inizia con le anteprime dell'abbigliamento della home page:
Per impostazione predefinita, il nome e il prezzo del prodotto sono nascosti, ma non appena si passa con il mouse su un'immagine, viene fatto scorrere verso il basso per rivelare queste informazioni. Saltando sul lato della pagina, ci sono tre pulsanti qui, ognuno dei quali si espande in una lunga barra orizzontale al passaggio del mouse.
Seguendo lo stesso tema di modificare la dimensione di un elemento al passaggio del mouse, le barre di condivisione ridotte hanno anche pulsanti che diventano più ampi quando si passa sopra di essi, incoraggiando tutti i clic importanti.
Voodoo di scorrimento puro
La mia cosa preferita in assoluto di questa pagina è la magia di scorrimento che si verifica sulla home page. In realtà è un effetto davvero semplice, ma è così ben pensato che non ho potuto fare a meno di essere colpito.
Per impostazione predefinita, quando carichi la pagina, questo è ciò che vedi:
Le probabilità sono, la tua prima reazione sarà quella di scorrere la pagina verso il basso. Mentre lo fai, la sezione scura che descrive il sito si accorcia e si accorcia fino a quando rimane solo una piccola barra di navigazione che rimane con te mentre scorri.
La grande parte è che non si ferma qui. Sebbene tu non possa pensare di farlo, puoi effettivamente scorrere oltre la posizione iniziale originale. Questo fa l'opposto di ciò che abbiamo visto prima e espande la sezione oscurata per darti maggiori informazioni sulla carità attuale del sito.
È un modo così elegante di memorizzare una tonnellata di informazioni in un piccolo spazio e gradualmente rivelarlo agli utenti. È solo abbastanza nascosto da non sovraccaricarti quando carichi la pagina, ma è abbastanza ovvio che non puoi perderlo quando torni indietro nella parte superiore della pagina dopo l'esplorazione iniziale.
Numeri e condivisione
Dato che questo sito è così focalizzato sulla beneficenza, ci sono due obiettivi che sono stati stabiliti per il design. Si può dire perché guidano l'intero layout. Il primo è un livello di trasparenza e progresso, comunicato tramite statistiche. Ecco quanto abbiamo raccolto finora, ecco quali sono i nostri importi target, ecc.
Il secondo obiettivo è incoraggiare la condivisione quanto più umanamente possibile sfruttando i social media. C'è un'enorme sezione di commenti su Facebook direttamente nella home page e tantissimi altri pulsanti e barre social attorno al sito.
Un tocco personale
Passando oltre la home page, il fantastico design non si ferma. Il prossimo è il? Team? pagina, dove è possibile incontrare vari membri coinvolti nel progetto.
Come prima, vediamo alcuni divertenti effetti al passaggio del mouse che vengono implementati qui. Ogni membro della squadra viene mostrato in un cerchio con solo la sua testa a picco. Una volta che si passa sopra il cerchio, però, appaiono con una faccia stupida.
Mentre guardavo questa pagina mi sono reso conto che c'era un'altra sorpresa: lo sfondo è in realtà un video! È molto sottile e all'inizio potresti anche non notarlo, motivo per cui è così carino. Il video è sfocato e scuro, quindi non è troppo distratto.
Storygraphic
L'ultima cosa che mi piacerebbe mostrare è la? Our Story? pagina, che ti dice un po 'sul perché è stato avviato Sevenly. Non contento di fare nulla nel modo in cui ti aspetteresti, qui il team Sevenly ha deciso di darti una fantastica infografica invece di una lunga e noiosa storia.
Nota il modo in cui è strutturata questa infografica: problema contro soluzione. Vedete questo formato utilizzato altrove nel sito per trasmettere la storia dietro ogni beneficenza. Innanzitutto, indicano un problema in termini molto semplici, quindi comunicano in che modo stanno contribuendo a risolverlo. È piacevolmente semplice e diretto.
Cosa pensi?
Vorrei chiarire che non ho mai parlato con le persone di Sevenly, che non mi hanno contattato per scrivere questo articolo o per contattarmi in alcun modo. Semplicemente apprezzo molto quello che stanno facendo, sia come essere umano che come designer.
Assicurati di visitare Sevenly.org la prossima volta che hai bisogno di qualche solida ispirazione. Non basta guardare, interagire con il sito e avere un'idea di tutti i piccoli tocchi di design che lo fanno sentire così raffinato. Inoltre, se sei nel mercato per alcune t-shirt che si adattano al tuo status di designer, non puoi battere i fantastici disegni di Sevenly.