Crítica de diseño web # 29: MadeFreshly
Cada semana echamos un vistazo a un nuevo sitio web y analizamos el diseño. Señalaremos ambas áreas que están bien hechas, además de aquellas que podrían necesitar algo de trabajo. Finalmente, terminaremos pidiéndole que proporcione sus propios comentarios.
El sitio de hoy es MadeFreshly.
Si desea enviar su sitio web para que aparezca en una futura Crítica de diseño, solo le llevará unos minutos. Cobramos $ 24 por criticar su diseño, ¡mucho menos de lo que pagaría si un consultor visitara su sitio! Puedes encontrar mas aqui.
Sobre MadeFreshly
“Un carrito de compras con gusto. Las tendencias cambian y tu tienda en línea también. MadeFreshly le ofrece un nuevo diseño para su carrito de compras ".
Aquí hay una captura de pantalla de la página de inicio:
Primera impresión
De buenas a primeras, puedo decir que realmente me gusta el diseño de MadeFreshly. Hay varias ideas de diseño y peculiaridades geniales de las que hablaremos a continuación. Definitivamente tengo algunas sugerencias para mejorar, pero en su mayor parte, es un sitio excelente creado por diseñadores muy talentosos.
Mi mayor reparo es probablemente desde un punto de vista conceptual. Esta es definitivamente una crítica subjetiva, así que siéntase libre de ignorarla por completo, pero me parece extraño que las imágenes del sitio contradigan la metáfora establecida por el nombre del sitio. "MadeFreshly" podría implicar una serie de cosas: alimentos en general, productos horneados recién salidos del horno (aquí es donde va mi mente), algo inspirado en la naturaleza, o incluso algo nuevo y brillante.
Sin embargo, el diseñador ha elegido un ligero aspecto grunge para el sitio. El fondo es una textura envejecida y los titulares también tienen algo de grunge aplicado. Una vez más, esto lo convierte en una página de gran apariencia, pero está en desacuerdo con el concepto de "Fresco".
El contenido siempre debe preceder y determinar el diseño. Diseñar alrededor, o al menos no en contradicción con, el nombre y la metáfora preestablecida de un sitio ayuda a que todo se una y simplemente se sienta "correcto".
Como ejemplo, vea una situación muy similar en el sitio "Formee", que ofrece "formas recién horneadas". Lo visual es un personaje de chef amigable que refuerza el eslogan.
No copie esta idea, pero podría considerar cómo también puede vincular el concepto de "fresco" a las imágenes en la página.
El logo
Creo que el logo de MadeFreshly es genial. El tipo de letra es bastante atractivo y aún así se siente único, y el elegante efecto de etiqueta adhesiva agrega una sensación de profundidad al sitio. ¡Buen trabajo!
El encabezado
El encabezado es agradable y simple con una navegación de texto sin formato y una pestaña de inicio de sesión fácil de notar. Pase y mire esta área a tamaño completo y verá que solo hay mucho espacio flotando sobre ese logotipo.
No me importa el espacio en blanco e incluso animo a los diseñadores a usarlo con bastante libertad, pero un área grande y vacía es una forma muy incómoda de comenzar el sitio. La solución aquí es simple, simplemente reduzca ese espacio a la mitad y debería verse genial. Aún conservará mucho espacio, pero no tanto como para distraerlo.
Otro problema que veo aquí es que el logotipo está en una posición horizontal extraña. El contenido en el lado derecho de la página se alinea a la derecha, lo que sugiere no un diseño centrado sino justificado. Sin embargo, el logotipo no se alinea con el contenido de la izquierda, ni está centrado sobre el elemento debajo de él (otra posición justificable). En cambio, está flotando torpemente a la derecha de estar alineado a la izquierda y a la izquierda de estar alineado al centro.
La solución simple aquí es deslizar el logotipo a la izquierda para que se alinee con el contenido debajo de él. Ya casi está allí y solo necesita un buen empujón más.
La sección destacada
La sección debajo del encabezado, a la que me refiero arbitrariamente como "la sección destacada", es la parte de la página que realmente llama su atención. Tiene más peso visual que el contenido que lo rodea, por lo que se siente más importante y sus ojos se sienten atraídos casi de inmediato (todas las cosas buenas).
El botón "crear tienda ahora" es agradable y brillante y sirve como un fuerte llamado a la acción. Después de ver el botón, si mira de nuevo, la flecha atrae sus ojos hacia él, un toque agradable que atrae aún más la atención a uno de los elementos más importantes de toda la página. Puede considerar agregar un efecto de desplazamiento al botón como un impulso de UX, pero de lo contrario es un diseño sólido.
Mi único dilema aquí es el texto del titular. Por un lado, es atractivo y aporta una buena repetición al texto utilizado en el logotipo. Por otro lado, simplemente no es una lectura rápida simplemente debido a la complejidad de la tipografía.
Esta es una de esas situaciones donde la estética y la legibilidad están en desacuerdo. Si cambió la fuente aquí, creo firmemente que el sitio sería menos atractivo para él, pero podría duplicar el número de usuarios que realmente leen el titular.
Puede considerar experimentar dejando una palabra del título en el guión y convertir el resto en algo un poco más legible. Entonces, por ejemplo, "un carrito de compras con" podría ser más pequeño y en una fuente sans-serif simple, mientras que "sabor" podría resaltarse a través de un tamaño más grande y el uso de la fuente del script.
En última instancia, es aceptable cómo es actualmente y estas son solo sugerencias a tener en cuenta. Sería genial realizar algunas pruebas AB en este elemento para ver si hacerlo más legible tiene algún efecto medible en las conversiones. Si no, entonces definitivamente mantenga el guión.
Sección tres arriba
La parte inferior de la página muestra tres capturas de pantalla con las palabras fresco, fácil y eficiente. Esto es pegadizo y memorable y la sección se ve increíble. Me encanta que la textura de fondo termine y los marcos de las miniaturas se superpongan en la nueva área. Una vez más, el diseñador está agregando un poco más de profundidad a su diseño para que se sienta mucho más real y diverso.
Todos los párrafos en negrita
Normalmente nos atenemos a la página de inicio para Design Critiques, pero esta vez busqué un poco en las otras páginas. Una cosa que creo que vale la pena señalar es el texto del párrafo en la página "Tour".
La decisión de poner los párrafos en negrita simplemente no está funcionando. Parece que las letras están apretadas una contra la otra y son bastante difíciles de leer. Además, al poner en negrita la copia del cuerpo, se reduce el impacto de un encabezado en negrita (el contraste es clave). Recomendaría darle a este texto el mismo estilo que el texto sin negrita debajo de las tres miniaturas en la página de inicio.
¡Tu turno!
Ahora que ha leído mis comentarios, participe y ayude dando al diseñador algunos consejos adicionales. Háganos saber lo que piensa 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 un consejo constructivo claro y libre de cualquier insulto.
