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 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 por un consultor para que visite su sitio! Puedes encontrar mas aqui.
Acerca de MadeFreshly
? Un carrito de compras con gusto. Las tendencias cambian y así debería hacerlo tu tienda online. MadeFreshly le ofrece un diseño fresco para su carrito de compras.
Aquí hay una captura de pantalla de la página de inicio:
Primera impresión
Desde el principio, puedo decir que realmente me gusta el diseño de MadeFreshly. Hay varias ideas y peculiaridades de diseño interesantes de las que hablaremos a continuación. Definitivamente tengo algunas sugerencias para mejorar, pero en su mayor parte, es un excelente sitio 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 completamente, 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: comida en general, productos horneados calientes del horno (aquí va mi mente), algo inspirado en la naturaleza, o incluso algo nuevo y brillante.
Sin embargo, el diseñador ha elegido un ligero look grunge para el sitio. El fondo es una textura envejecida y los titulares también tienen un poco de grunge aplicado. Nuevamente, esto hace que sea 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 vincule y simplemente se sienta "¿no?".
Como ejemplo, echa un vistazo a una situación muy similar en el sitio? Formee ,? ¿Qué entrega? Formas recién horneadas. Lo visual es un simpático personaje de chef que refuerza el eslogan.
No copie esta idea, pero podría considerar cómo también puede vincularse con el concepto de? Fresco? a los visuales en la página.
El logo
Creo que el logo de MadeFreshly es genial. El tipo de letra es bastante atractivo, a la vez que se siente único y el efecto de pegatina arrugada y nítida 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ácilmente perceptible. Pasa por aquí y observa esta área a tamaño completo y verás que hay un montón de espacio flotando sobre ese logotipo.
No me importa el espacio en blanco e incluso aliento a los diseñadores a que lo utilicen de forma bastante liberal, pero un área grande y vacía es una manera muy extraña de comenzar el sitio. La solución aquí es muy simple, simplemente reduzca ese espacio a la mitad y debería verse genial. Aún conservará mucho espacio, pero no tanto que distraiga.
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 un diseño 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 mover el logotipo a la izquierda para que se alinee con el contenido debajo de él. Ya casi está ahí 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 tu 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 casi inmediatamente atraídos hacia él (todo lo bueno).
¿El? Crear tienda ahora? El botón es bonito y brillante y sirve como un fuerte llamado a la acción. Después de ver el botón, si tiene otra mirada a su alrededor, sus ojos son atraídos por la flecha, 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. Podría considerar agregar un efecto de desplazamiento al botón solo como un poco de aumento de UX, pero de lo contrario es un diseño sólido.
Mi único dilema aquí es el texto del título. 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 del tipo de letra.
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 ella, pero podría duplicar la cantidad de usuarios que realmente leen el titular.
Podría considerar experimentar dejando una palabra del título en el guión y convertir el resto en algo un poco más legible. Así, por ejemplo,? Un carrito de compras con? ¿Podría ser más pequeño y en una fuente sans-serif simple mientras que? Se podría resaltar mediante un tamaño más grande y el uso de la fuente de script.
En última instancia, es aceptable cómo es actualmente y estas son solo sugerencias a considerar. Sería genial ejecutar 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 mantén el guión.
Tres secciones
La parte inferior de la página muestra tres capturas de pantalla con las palabras frescas, fáciles y eficientes. Esto es pegadizo y memorable y la sección parece impresionante. Me encanta que la textura de fondo termine y los marcos de miniaturas se superpongan en la nueva área.Nuevamente, 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 quedamos en la página de inicio de Design Critiques, pero esta vez me asomé un poco a las otras páginas. Una cosa que creo que vale la pena señalar es el texto del párrafo en el? Tour? página.
La decisión de hacer los párrafos en negrita simplemente no está funcionando. Las letras parecen estar abarrotadas unas contra otras 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 la clave). Recomendaría darle a este texto el mismo estilo que el texto que no está en negrita debajo de las tres miniaturas en la página de inicio.
¡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.