De vez en cuando, me encuentro con un sitio que tiene uno o dos fragmentos de diseño e interfaz de usuario que son lo suficientemente buenos como para que pueda escribir sobre ellos. En casos aún más raros, encuentro un sitio completo que está tan lleno de ideas de diseño increíbles que tengo que compartir con ustedes. Este artículo es sobre uno de esos sitios.
Sevenly.org es un sitio dedicado a ayudar a organizaciones benéficas a través de la venta de camisetas personalizadas de edición limitada. Más allá del hecho de que amo a la organización y lo que representan, estoy impresionado por lo que han hecho con el sitio y creo que sirve como una herramienta de aprendizaje para los diseñadores web. ¡Vamos a ver!
Cumplir con Sevenly
La misión de Sevenly es simple: "Aprovechar el poder del arte y la comunidad para crear conciencia sostenible y financiar movimientos que apoyen a las organizaciones benéficas en sus esfuerzos por cambiar el mundo".
En la práctica, cómo se ve esto es que venden productos súper impresionantes (camisetas, sudaderas, botellas de agua, etc.) y donan $ 7 de cada compra a la organización benéfica que han elegido apoyar esa semana. Hasta la fecha, han recaudado casi $ 600,000 para varias organizaciones benéficas.
Buen diseño
Una vez más, la causa y la estrategia ganaron un clic de mi parte en Twitter, pero es el diseño el que me hizo entrar y me mantuvo interesado. Como se puede ver en la captura de pantalla anterior, la página de inicio es bastante atractiva.
Muestra los productos maravillosamente con bonitas y grandes fotos de personas atractivas y sonrientes que usan ropa muy atractiva. El diseño de mampostería le da a la página una sensación orgánica y el diseño mínimo / combinación de colores realmente atrae su atención hacia esas grandes fotos.
El sitio se ve genial de un vistazo, pero cuando empiezas a usarlo, hay tantas sorpresas agradables y pequeños trucos que me he perdido, jugando con cada página durante varios minutos. Echemos un vistazo a algunos de los toques interesantes.
Hover Effects Galore
Soy un gran fanático de los efectos de desplazamiento, sé que no siempre se traducen muy bien en las pantallas táctiles, pero puede explicarlo. En un escritorio, son una de las principales formas en que interactuamos con los usuarios en un nivel básico.
Sevenly simplemente está rebosante de efectos de enfriamiento. Animaciones pequeñas y elegantes te esperan a cada paso. Comienza con las vistas previas de la ropa de inicio:
De forma predeterminada, el nombre y el precio del producto están ocultos, pero tan pronto como se desplaza sobre una imagen, se desliza hacia abajo para revelar esta información. Saltando al lado de la página, hay tres botones aquí, cada uno de los cuales se expande en una barra horizontal larga al pasar el cursor.
Siguiendo el mismo tema de cambiar el tamaño de un elemento al pasar el mouse, las pequeñas barras de uso compartido también tienen botones que se vuelven más anchos cuando se pasa sobre ellos, lo que fomenta el clic importante.
Vudú de desplazamiento puro
Lo que más me gusta de esta página es la magia de desplazamiento que ocurre en la página de inicio. En realidad, es un efecto muy simple, pero está tan bien pensado que no pude evitar quedarme impresionado.
De forma predeterminada, cuando carga la página, esto es lo que ve:
Lo más probable es que su primera reacción sea desplazarse hacia abajo en la página. Al hacer esto, la sección oscura que describe el sitio se acorta cada vez más, hasta que solo queda una pequeña barra de navegación que permanece a medida que se desplaza.
La gran parte es que no se detiene ahí. Aunque puede que no pienses hacerlo, puedes desplazarte hacia arriba más allá de la posición inicial original. Esto hace lo contrario de lo que vimos antes y expande la sección oscura para brindarle más información sobre la caridad actual del sitio.
Es una forma elegante de almacenar una tonelada de información en un espacio pequeño y revelarla gradualmente a los usuarios. Simplemente está lo suficientemente oculto como para no abrumarlo cuando carga la página, pero es lo suficientemente obvio para que no se lo pierda cuando se desplaza de nuevo a la parte superior de la página después de su exploración inicial.
Números y compartir
Dado que este sitio está tan enfocado en la caridad, hay dos objetivos que se diseñaron para el diseño. Se puede decir porque conducen todo el diseño. El primero es un nivel de transparencia y progreso, comunicado mediante estadísticas. Aquí es cuánto hemos recaudado hasta ahora, aquí están cuáles son nuestras cantidades objetivo, etc.
El segundo objetivo es fomentar el compartir lo más humanamente posible mediante el aprovechamiento de las redes sociales. Hay una gran sección de comentarios de Facebook integrada en la página de inicio y un montón de otros botones y barras sociales alrededor del sitio.
Un toque personal
Pasando de la página de inicio, el increíble diseño no se detiene. El siguiente es el equipo? página, donde puedes conocer a varios miembros involucrados con el proyecto.
Como antes, vemos algunos efectos divertidos de hover implementados aquí. Cada miembro del equipo se muestra en un círculo con solo su cabeza en su punto máximo. Sin embargo, una vez que pasas el ratón sobre el círculo, aparecen con una cara tonta.
Cuando miré esta página, me di cuenta de que tenía otra sorpresa: ¡el fondo es en realidad un video! Es muy sutil y puede que ni siquiera lo note al principio, por lo que es tan lindo. El video está borroso y oscuro, así que no distrae demasiado.
Storygraphic
Lo último que me gustaría presumir es el? ¿Nuestra historia? página, que le dice un poco sobre por qué se inició Sevenly. No contento con hacer cualquier cosa de la manera que usted esperaría, aquí el equipo de Sevenly decidió darle una infografía impresionante en lugar de una historia larga y aburrida.
Observe la forma en que está estructurada esta infografía: problema vs. solución. Usted ve este formato utilizado en otras partes del sitio para transmitir la historia detrás de cada organización benéfica. Primero, plantean un problema en términos muy simples, luego transmiten cómo están ayudando a resolverlo. Es refrescantemente simple y directo.
¿Qué piensas?
Me gustaría aclarar que nunca he hablado con las personas de Sevenly, no se me acercaron para escribir este artículo ni para contactarme de ninguna manera. Simplemente aprecio mucho lo que están haciendo, tanto como ser humano como diseñador.
Asegúrese de visitar Sevenly.org la próxima vez que necesite una inspiración sólida. No se limite a mirar, interactúe con el sitio y sienta todos los pequeños detalles de diseño que lo hacen sentir tan refinado. Además, si estás en el mercado para algunas camisetas que se ajustan a tu estatus de diseñador, no puedes superar los increíbles diseños de Sevenly.