Cada semana echamos un vistazo a un nuevo sitio web y analizamos el diseño. Señalaremos las áreas que se realizan bien además de las que podrían ser útiles. Finalmente, terminaremos pidiéndole que proporcione sus propios comentarios.
El sitio de hoy es Prezzybox, un minorista en línea. ¡Saltemos y veamos lo que pensamos!
Si desea enviar su sitio web para que aparezca en una futura crítica de diseño, solo le llevará unos minutos. Cobramos $ 49 por criticar su diseño, ¡mucho menos de lo que pagaría por un consultor para que visite su sitio! Puedes encontrar mas aqui.
Acerca de Prezzybox
? Prezzybox.com es la solución completa de regalos en línea. Si está buscando un regalo único o emocionante para su mamá, papá, hermana, amigo, medio primo o usted mismo (seamos sinceros, todos merecemos algo bueno), entonces Prezzybox es el lugar. Desde el cigarrillo electrónico hasta la pizza de chocolate, Retro Slush Maker hasta nuestro funky Silly Bandz. Prezzybox tiene una verdadera cornucopia de golosinas extrañas y maravillosas que esperan tu lectura.
Aquí hay una captura de pantalla de la página de inicio:
Primera impresión
Comprensiblemente, Prezzybox tiene muchas cosas en este diseño. No tienen la ventaja de ser un minorista especializado que puede mostrar un solo producto. Están tratando de vender todo tipo de productos diferentes y están en el proceso de buscar la mejor manera de mostrarlos.
Obviamente lo han pensado bastante, y hay muchas cosas que hacen bien. Sin embargo, también hay mucho espacio para mejorar. La página es una mezcla extraña de buenas ideas y ejecuciones que son un poco descuidadas. Veamos si podemos ayudar a refinar la estructura y señalar las áreas que deben abordarse para ayudar a dar una mano al éxito de este diseño.
Problemas de tipografía
Una de las primeras cosas que noté sobre este sitio es que parece haber una comprensión muy pobre de la tipografía que maneja este diseño. Por todas partes que veo, veo algunas implementaciones realmente aproximadas de tipo personalizado.
Para empezar, la mezcla de pesos de fuente en el logotipo es bastante incómoda:
A veces, las fuentes de la misma palabra no parecen coincidir. Por ejemplo, el? 0? en el? 50%? En la imagen de abajo tiene un peso y aspecto completamente diferente al del? 5 ?.
También hay algunos problemas importantes de kerning en el sitio. El texto del ejemplo a continuación es una imagen, por lo que no se aplican los argumentos relacionados con los obstáculos del kerning en línea. Esto fue simplemente el resultado de saltarse un paso en el proceso de diseño de Photoshop.
Además, las nubes de etiquetas casi nunca son la mejor manera de dirigir el tráfico a destinos populares. Este sufre por la falta de separación clara entre las etiquetas. Por ejemplo,? Nadadores de aire? y? Regalos para niños? son dos etiquetas separadas, pero los pesos de las fuentes son tan similares que ni siquiera se puede decir.
Como arreglarlo
Mi recomendación para el tipo en esta página es comenzar de nuevo. Deseche todos los diversos estilos de texto y fuentes en esta página y haga otra corrida, esta vez siendo muy intencional para cada uno de los caracteres.
"Ponga algo de consideración sobre qué concepto está tratando de comunicar y qué tipo de letra transmite mejor esa idea".El lugar para comenzar es invertir en algunas fuentes de calidad. Las fuentes premium pueden ser bastante caras, pero usar algo barato y feo no puede tener otro efecto que hacer que su sitio se vea barato y feo. Si simplemente no tiene el presupuesto, hay muchas opciones en línea que son gratuitas y / o baratas a la vez que siguen siendo atractivas y con clase. FontSquirrel y Lost Type Co-op son buenos lugares para comenzar.
Tómese su tiempo y elija las fuentes con esmero. No tengas la tentación de tomar solo tipos de letra de la pantalla porque se ven divertidos. En vez de eso, considere seriamente qué concepto está tratando de comunicar y qué tipo de letra transmite mejor esa idea. Durante este proceso, limítate a unas cuantas fuentes buenas que funcionen realmente bien juntas e implementa estas en todo el sitio.
Puede y probablemente debería usar fuentes estándar para cualquier tipo de web en vivo, pero asegúrese de que todo esté bien equilibrado entre el tamaño de la fuente, la altura de la línea y el ancho del cuadro de texto para garantizar la máxima legibilidad. Pearsonified acaba de publicar una excelente reseña sobre el uso de la proporción áurea para lograr un tipo bien equilibrado. Léalo y use la calculadora de tipografía Golden Ratio como una buena regla general para descubrir tratamientos de tipo.
Un lugar donde este consejo mejoraría su tipo es en la sección que se muestra a continuación. Aquí, el ancho del contenido y el tamaño de la fuente merecen una mayor altura de línea.
Navegación
Vayamos al área de navegación. La impresión que tengo aquí es que todo es muy pesado. Cada objeto y elemento tiene mucho peso visual y hay cierta competencia por la atención:
Además, en algunas partes, parece que el espacio vertical es demasiado estrecho, lo que lleva a un aspecto abarrotado y abarrotado.
Una cosa que me gusta es la categorización del producto que se está utilizando. Cada sección está claramente segmentada y es muy fácil encontrar regalos para la persona que busca comprar. Esto se duplica de una manera agradable y simplificada más abajo en la página:
Como arreglarlo
Creo que el área de navegación es decente, solo necesita algunos ajustes. Una buena fuente de inspiración para ver es Threadless, que utiliza un menú de navegación muy similar que es un poco más refinado.
Observe cómo se utiliza una segmentación similar aquí, pero todo parece más ligero y mucho mejor espaciado. Los menús desplegables iniciales son simplemente texto coloreado sobre un fondo blanco, con el aspecto pesado del botón aplicado selectivamente solo a elementos importantes.
Organización de contenidos
Otro problema que veo en este sitio es que las tácticas de la organización podrían usar algún trabajo.Para empezar, hay un montón de bits de información aleatorios que parecen estar atrapados en lugares aleatorios en el último minuto.
El sitio utiliza barras horizontales para separar las distintas secciones, pero las áreas no están claramente definidas desde un punto de vista visual o conceptual. La sección que se muestra a continuación está etiquetada como? Prezzybox en la prensa? ¿Y parece abarcar dos grandes? ¿Quiénes somos? párrafos de estilo, búsquedas de regalos populares, comentarios de clientes, etc., ninguno de los cuales pertenece realmente a esta sección.
Estos problemas se extienden al pie de página, que podría utilizar alguna reorganización visual importante. Tampoco soy fanático del incómodo corte que lo separa del área principal. Si se repitiera en otra parte de la página, no se vería tan fuera de lugar, pero como característica de diseño independiente se siente mal.
Como arreglarlo
Cada sección debe definirse más claramente con gráficos y contenido. Una fuente de buena inspiración para este tipo de diseño es Themes Kingdom. En la captura de pantalla a continuación, esta área del sitio tiene un montón de cosas sucediendo. Sin embargo, los diseñadores han utilizado algunos métodos de separación de contenido realmente claros y modernos.
Clavando la organización de contenido ayudará a que esta página entera gane más efectivo. Puede significar reorganizar y restyling muchos de los elementos en el sitio e incluso eliminar mucha grasa de la página de inicio, pero al final valdrá la pena.
Conclusión
El comercio electrónico es una bestia interesante para los diseñadores. La razón de esto es que la estética no se correlaciona tan estrechamente con el éxito como a los tipos como yo les gustaría. Por ejemplo, Amazon es un desorden desordenado que me da vueltas en la cabeza, pero es el minorista en línea más exitoso. Sin embargo, eso no significa que podamos descartar imágenes atractivas como algo importante para las tiendas web. No todos pueden ser Amazon y una forma clara de diferenciarse de la competencia es con un diseño sólido.
Aparte de la identidad visual es el área aún más crítica de la usabilidad, que entra en juego en gran medida en las tiendas en línea. Muchos de los cambios que he sugerido anteriormente están dirigidos a ayudar a que la página fluya mejor para que los usuarios puedan echar un vistazo más fácilmente a esta página y encontrar lo que están buscando. Las imágenes atractivas simplemente apoyan esta actividad y ayudan a mantener a los espectadores interesados.
¡Tu turno!
Ahora que ha leído mis comentarios, contribuya y ayude, dando al diseñador algunos consejos adicionales. Háganos saber lo que cree que es genial sobre el diseño y lo que cree que podría ser más fuerte. Como siempre, le pedimos que también sea respetuoso con el diseñador del sitio y que ofrezca consejos constructivos claros y sin insultos severos.