Diseño impresionante en la naturaleza: Sevenly.org
De vez en cuando me encuentro con un sitio que tiene uno o dos elementos de diseño e interfaz de usuario realmente inspiradores que son lo suficientemente buenos como para escribir sobre ellos. En casos aún más raros, encuentro un sitio completo que está tan lleno de ideas de diseño únicas que tengo que compartirlo con ustedes. Este artículo trata 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!
Explore los recursos de diseño
Conoce a Sevenly
La misión de Sevenly es simple: "Aprovechar el poder del arte y la comunidad para crear conciencia sostenible y movimientos de financiación 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 increíbles (camisetas, sudaderas, botellas de agua, etc.) y donan $ 7 de cada compra a la organización benéfica que han elegido para 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 me ganaron un clic en Twitter, pero es el diseño lo que me atrajo y me mantuvo interesado. Como puede ver en la captura de pantalla anterior, la página de inicio es bastante atractiva.
Muestra los productos maravillosamente con fotos bonitas y grandes 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 / esquema de color mínimo realmente atrae su atención hacia esas grandes fotos.
El sitio se ve genial de un vistazo, pero a medida que comienza a usarlo, hay tantas sorpresas agradables y pequeños trucos que me encontré perdido, jugando con cada página durante varios minutos. Echemos un vistazo a algunos de los toques interesantes.
Efectos de desplazamiento en abundancia
Soy un gran admirador de los efectos de desplazamiento, sé que no siempre se traducen muy bien en pantallas táctiles, pero puedes dar cuenta de eso. En un escritorio, son una de las principales formas en que interactuamos con los usuarios en un nivel básico.
Sevenly simplemente se desborda con geniales efectos de desplazamiento. Pequeñas animaciones ingeniosas te esperan a cada paso. Comienza con las vistas previas de vestimenta de la página de inicio:
De forma predeterminada, el nombre y el precio del producto están ocultos, pero tan pronto como pasa el mouse 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 larga barra horizontal al pasar el mouse.
Siguiendo el mismo tema de cambiar el tamaño de un elemento al pasar el mouse, las pequeñas barras para compartir también tienen botones que se ensanchan al pasar el mouse sobre ellos, lo que fomenta que todos hagan clic.
Voodoo 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 realmente simple, pero está tan bien pensado que no pude evitar sentirme impresionado.
Por defecto, 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. Mientras hace esto, la sección oscura que describe el sitio se acorta cada vez más hasta que es solo una pequeña barra de navegación que permanece con usted mientras se desplaza.
La gran parte es que no se detiene allí. Aunque no pienses en hacerlo, puedes desplazarte más allá de la posición inicial original. Esto hace lo contrario de lo que vimos antes y amplía la sección oscura para brindarle más información sobre la organización benéfica actual del sitio.
Es una forma tan elegante de almacenar una tonelada de información en un espacio pequeño y revelarla gradualmente a los usuarios. Está lo suficientemente oculto como para no abrumarte cuando cargas la página, pero lo suficientemente obvio como para que no te lo pierdas cuando vuelves a la parte superior de la página después de tu exploración inicial.
Números y Compartir
Dado que este sitio está tan centrado en la caridad, hay dos objetivos establecidos para el diseño. Se nota porque conducen todo el diseño. El primero es un nivel de transparencia y progreso, comunicado a través de estadísticas. Esto es lo que hemos recaudado hasta ahora, esto es lo que son nuestras cantidades objetivo, etc.
El segundo objetivo es fomentar el intercambio tanto como sea humanamente posible a través del apalancamiento de las redes sociales. Hay una gran sección de comentarios de Facebook integrada en la página de inicio y toneladas de otros botones y barras sociales en todo el sitio.
Un toque personal
Pasando la página de inicio, el increíble diseño no se detiene. El siguiente paso es la página "Equipo", donde puedes conocer a varios miembros involucrados en el proyecto.
Como antes, vemos algunos divertidos efectos de desplazamiento que se implementan aquí. Cada miembro del equipo se muestra en un círculo con solo su cabeza asomando. Sin embargo, una vez que pasas el cursor sobre el círculo, aparecen a la vista con una cara tonta.
Al mirar esta página, me di cuenta de que tenía otra sorpresa: ¡el fondo es en realidad un video! Es muy sutil y es posible que ni siquiera lo notes al principio, por lo que es tan agradable. El video está borroso y oscuro para que no distraiga demasiado.
Storygraphic
Lo último que me gustaría mostrar es la página "Nuestra historia", que le cuenta un poco sobre por qué se inició Sevenly. No contento con hacer nada de la manera que esperabas, aquí el equipo de Sevenly decidió darte una infografía increíble en lugar de una historia larga y aburrida.
Observe la forma en que esta infografía está estructurada: problema versus solución. Verá este formato utilizado en otras partes del sitio para transmitir la historia detrás de cada organización benéfica. Primero, establecen 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 dejar en claro que nunca he hablado con las personas Sevenly, no se acercaron a mí para escribir este artículo o 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 solo mire, interactúe con el sitio y obtenga una idea de todos los pequeños detalles de diseño que lo hacen sentir tan refinado. Además, si estás buscando algunas camisetas que se ajusten a tu estado de diseñador, no puedes superar los increíbles diseños de Sevenly.
