De temps en temps, je tombe sur un site qui contient un ou deux éléments de design et d'interface réellement inspirants qui me permettent d'écrire à leur sujet. Dans des cas encore plus rares, je trouve tout un site débordant d'idées de conception vraiment impressionnantes que je dois partager avec vous. Cet article concerne un tel site.
Sevenly.org est un site dédié à aider les organismes de bienfaisance par la vente de t-shirts personnalisés à édition limitée. Au-delà du fait que j'aime l'organisation et ses valeurs, je suis époustouflé par ce qu'ils ont fait avec le site et je pense qu'il sert d'outil d'apprentissage aux concepteurs de sites Web. Nous allons jeter un coup d'oeil!
Rencontrez Sevenly
La mission de Sevenly est simple: «Tirer parti du pouvoir de l'art et de la communauté pour créer des mouvements de sensibilisation et de financement durables qui soutiennent les organismes de bienfaisance dans leurs efforts pour changer le monde.
Dans la pratique, ils vendent des produits superbes (t-shirts, pulls molletonnés, bouteilles d'eau, etc.) et versent 7 $ de chaque achat à l'organisme de bienfaisance qu'ils ont choisi de soutenir cette semaine. À ce jour, ils ont recueilli près de 600 000 $ pour divers organismes de bienfaisance.
Super design
Une fois de plus, la cause et la stratégie m'ont valu un clic sur Twitter, mais c'est le design qui m'a motivé et m'a intéressé. Comme vous pouvez le voir dans la capture d'écran ci-dessus, la page d'accueil est très attrayante.
Il met en valeur les produits avec de belles et grandes photos de gens souriants et beaux, portant des vêtements très joliment conçus. La disposition en maçonnerie confère à la page une apparence organique et le design / couleurs minimal pousse vraiment votre attention vers ces grandes photos.
Le site a fière allure en un coup d'œil, mais au fur et à mesure que vous l'utilisez, il y a tellement de surprises agréables et de petits trucs géniaux que je me suis retrouvé perdu, jouant avec chaque page pendant plusieurs minutes. Jetons un coup d'oeil à quelques-unes des touches intéressantes.
Hover Effects Galore
Je suis un grand fan des effets de survol, je sais qu'ils ne traduisent pas toujours très bien en écrans tactiles, mais vous pouvez en rendre compte. Sur un ordinateur de bureau, ils constituent l’un des principaux moyens d’interagir avec les utilisateurs à un niveau élémentaire.
Sevenly déborde simplement d’effets de survol stationnaires. De petites animations glissantes vous attendent à chaque tournant. Cela commence par les aperçus des vêtements de la page d'accueil:
Par défaut, le nom du produit et le prix sont masqués, mais dès que vous passez la souris sur une image, celle-ci glisse vers le bas pour afficher ces informations. En sautant sur le côté de la page, il y a trois boutons, chacun d'eux se développant en une longue barre horizontale en survol.
Suivant le même thème, qui consiste à modifier la taille d’un élément en survol, les petites barres de partage comportent également des boutons qui s’élargissent lorsque vous les survolez, ce qui encourage tout ce qui est important.
Voodoo pur défilement
Ce que je préfère dans cette page, c’est la magie qui défile sur la page d’accueil. C'est en fait un effet très simple mais c'est tellement bien pensé que je ne pouvais m'empêcher d'être impressionné.
Par défaut, lorsque vous chargez la page, voici ce que vous voyez:
Les chances sont, votre première réaction sera de faire défiler la page. Au fur et à mesure que vous faites cela, la section sombre qui décrit le site devient de plus en plus courte jusqu'à ce que ce soit juste une petite barre de navigation qui reste avec vous lorsque vous faites défiler.
La grande partie est que cela ne s'arrête pas là. Bien que vous ne pensiez peut-être pas le faire, vous pouvez en réalité faire défiler la position de départ initiale. Cela fait l'inverse de ce que nous avons vu précédemment et étend la section sombre pour vous donner plus d'informations sur la charité actuelle du site.
C'est un moyen si élégant de stocker une tonne d'informations dans un petit espace et de les révéler progressivement aux utilisateurs. Il est juste assez caché pour ne pas vous submerger lorsque vous chargez la page, mais suffisamment évident pour que vous ne puissiez pas le manquer lorsque vous revenez en haut de la page après votre exploration initiale.
Numéros et partage
Étant donné que ce site est tellement axé sur la charité, deux objectifs ont été définis pour la conception. Vous pouvez dire parce qu'ils conduisent la mise en page entière. Le premier est un niveau de transparence et de progrès, communiqué via des statistiques. Voici combien nous avons collecté jusqu'à présent, voici quels sont nos objectifs, etc.
Le deuxième objectif est d'encourager le partage autant que possible par le biais des médias sociaux. Il existe une énorme section de commentaires sur Facebook directement dans la page d'accueil et de nombreux autres boutons et barres de réseaux sociaux sur le site.
Une touche personnelle
En passant au-delà de la page d'accueil, le design incroyable ne s'arrête pas. La prochaine est l’équipe? page, où vous pouvez rencontrer différents membres impliqués dans le projet.
Comme précédemment, nous observons certains effets de survol amusants mis en œuvre ici. Chaque membre de l’équipe est représenté dans un cercle avec seulement sa tête en haut. Une fois que vous survolez le cercle, ils apparaissent avec un visage idiot.
En regardant cette page, je me suis rendu compte que cela avait une autre surprise: le fond est en fait une vidéo! C'est très subtil et vous ne remarquerez peut-être même pas au début, c'est pourquoi il est si beau. La vidéo est floue et sombre, donc elle n’est pas trop distrayante.
Storygraphic
La dernière chose que je voudrais montrer est la "Notre histoire". page, qui vous explique un peu pourquoi Sevenly a été lancé. Non content de faire quoi que ce soit comme vous le souhaiteriez, l'équipe Sevenly a décidé de vous donner une infographie impressionnante au lieu d'une longue et ennuyeuse histoire.
Notez la structure de cette infographie: problème vs solution. Ce format est utilisé ailleurs sur le site pour transmettre l’histoire de chaque organisme de bienfaisance. Premièrement, ils énoncent un problème en termes très simples, puis expliquent comment ils contribuent à le résoudre. C'est rafraîchissant simple et direct.
Qu'est-ce que tu penses?
J'aimerais préciser que je n'ai jamais parlé aux gens de Sevenly, ils ne m'ont pas contacté pour écrire cet article ou me contacter de quelque manière que ce soit. J'apprécie simplement vraiment ce qu'ils font, en tant qu'être humain et en tant que designer.
Assurez-vous de visiter Sevenly.org la prochaine fois que vous aurez besoin d'une inspiration solide. Ne vous contentez pas de regarder, d’interagir avec le site et d’avoir une idée de toutes les petites touches de design qui le rendent si raffiné. De plus, si vous êtes à la recherche de t-shirts adaptés à votre statut de designer, vous ne pouvez pas battre les superbes designs Sevenly.