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 Peter y James, un minorista de joyería en línea.
Si desea enviar su sitio web para que aparezca en una futura crítica de diseño, solo le llevará unos minutos. Cobramos $ 34 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 Peter y James
? Cuando se trata de joyería fina, Peter y James solo venden lo mejor. Desde las hermosas piedras preciosas engastadas en plata de ley deslumbrante y oro blanco hasta nuestra famosa y deslumbrante colección de pulseras de diamantes con malla italiana, cada pieza que encontrará en nuestro sitio web es verdaderamente excepcional. Estamos comprometidos a proporcionar a nuestros clientes el mejor valor, calidad, servicio y selección de joyas de diseñador disponibles. Seguimos los estilos y las tendencias de moda más actuales, para asegurarnos de que siempre estamos ofreciendo las últimas y más solicitadas joyas en línea.
Aquí hay una captura de pantalla de la página de inicio:
Impresión inicial
Mi impresión inicial aquí es definitivamente positiva. Peter y James es un sitio web de gran apariencia. La página de inicio es extremadamente simple, lo cual es excelente para llamar la atención sobre la foto de alto impacto de la mujer con las pulseras.
Los cambios que sugeriré hoy son bastante pequeños a la luz del diseño general. Incluso los grandes diseñadores siempre podrían usar un par de ojos adicionales para peinar y sugerir formas de refinar el diseño y la usabilidad de un proyecto.
Comencemos hurgando en el encabezado para ver qué podemos mejorar.
Alineaciones de encabezado
El primer problema que observo cuando miro la parte superior de la página es que la alineación horizontal de los objetos en los lados izquierdo y derecho se siente un poco al azar.
En verdad, veo lo que el diseñador está haciendo y en realidad es bastante intencional. Los elementos inferiores están sangrados ligeramente, lo que es una práctica común en el diseño. Sin embargo, el problema con esto aquí es que la página es tan simple que solo hay unos pocos objetos en la página. Si hubiera más con lo que alinearse a continuación, esto podría funcionar mejor, pero tal como está, casi todos los elementos parecen tener su propia posición horizontal única, lo que conduce a una sensación ligeramente desordenada.
La solución simple es usar la imagen primaria como un borde fuerte que se puede seguir en ambos lados. Los botones en la parte superior derecha probablemente se queden donde están, pero recomiendo mover la navegación hacia la izquierda y el campo de búsqueda hacia la derecha para que los elementos del encabezado se vean más o menos como la imagen de abajo.
Navegación Hover
Otro pequeño cambio posible es agregar un efecto de desplazamiento notable en los enlaces de navegación. Esto no es tanto un cambio estético como un pequeño impulso en la usabilidad. Ver que se produce un cambio significativo en una hover proporciona comentarios positivos para el usuario y les asegura que están haciendo lo correcto. Desea que se desplacen en la navegación y hagan clic en el sitio, así que agregue un pequeño efecto que refuerce esta acción.
Actualmente el cursor cambia pero no estoy seguro de que esto sea suficiente. El color siempre es otra opción, pero no estoy seguro de que sea apropiado aquí. Se puede implementar un subrayado simple con CSS mínimo y se mantendrá la integridad de clase del diseño al tiempo que se agregarán comentarios visuales claros.
Imagen primaria
El atractivo estético real en esta página se puede atribuir a la gran imagen que se ve arriba. Esto establece perfectamente el tono del sitio y le da a la página un punto focal claro. Mi único problema con esta imagen es que quiero más!
Este sitio web vende aretes, collares, pulseras y anillos. Esta imagen solo muestra las pulseras. Creo que hay mucho potencial aquí tanto para hacer que el sitio se sienta más dinámico como para enganchar algunos clics a otras secciones.
Recomiendo imitar este estilo y dividirlo en cuatro imágenes diferentes, una para cada sección. A partir de aquí tienes dos opciones. La primera es una simple presentación de diapositivas. Nada sofisticado o que distraiga, solo se disuelve lentamente en la siguiente imagen después de varios segundos. Si no eres fanático de las presentaciones de diapositivas, una posible alternativa es hacer que una de las cuatro imágenes aparezca al azar cuando se carga la página. Prefiero la primera opción, pero esta última podría hacer algunas pruebas A / B interesantes para ver qué escenario conduce a mejores resultados de compra.
Productos Destacados
La sección de productos destacados aparece directamente debajo de la imagen principal. Hay muchas cosas que me gustan de esta sección, pero también es un poco difícil en algunas áreas. En primer lugar, el efecto hover con las pulseras es grande. Cuando te pasas por encima de una pulsera, la foto se voltea para mostrarte el otro lado. Esta es una solución fantástica y divertida para mostrar un producto tridimensional en un espacio bidimensional.
Como puede ver en la imagen de arriba, al pasar el ratón también aparece esta pequeña casilla de información / precio. Me encanta esta idea, pero la ejecución se siente un poco apagada. En general, el espacio disponible se está utilizando de una manera incómoda. El precio y la descripción están muy alejados de los bordes y no tienen mucho espacio para respirar. Además, los dos botones de la parte inferior se empujan de forma extraña hacia la derecha, no del todo, lo suficiente para no estar exactamente alineados a la derecha o al centro.
Mi recomendación aquí es simplemente pasar un tiempo jugando con estos elementos para ver cómo puede utilizar mejor este espacio. Reorganice cada elemento, ajuste el tamaño de algunos elementos y vea si no puede encontrar algo un poco más atractivo y legible.
La imagen de abajo es mi intento rápido de dos minutos. No es lo mejor, pero al menos muestra una buena idea general de cómo usar el espacio un poco más eficientemente.
Fotos del producto
Mi último comentario en esta área también se traslada a las páginas de productos. No soy un gran fan de la forma en que se muestran los productos actualmente. Hay varias razones para esto. En primer lugar, las sombras de Photoshop son un poco ásperas. No estoy seguro de si son demasiado oscuros, no lo suficientemente suaves o ambos, pero podrían parecer mucho más realistas con un poco de inversión de tiempo. En este momento solo se ven un poco cursi y bajan un poco la calidad de la página.
Los gradientes también son un poco incómodos. Parece que violan el esquema visual general de la página. Es difícil precisar exactamente por qué esto es así, pero creo que es posible que sean simplemente demasiado oscuros en el lado inferior del gradiente. Intenta aliviar esto y hacer que el gradiente sea más sutil.
Además, la fotografía en todo el sitio realmente no es tan atractiva como debería ser. Estos son productos de alta gama que cuestan cientos e incluso miles de dólares, sin embargo, las fotos son un poco oscuras y feas. Afortunadamente, no creo que la sesión de fotos deba rehacerse. Estoy bastante seguro de que las imágenes simplemente necesitan un poco de amor posterior al procesamiento.
El diseño del sitio aquí requiere una alta fotografía clave, y estas imágenes simplemente no están a la altura de eso. Aunque hay una tonelada que podrías y deberías hacer para vestir cada foto, pero incluso un simple ajuste de niveles ayuda mucho al iluminar esos tonos medios y agregar un poco de contraste. Aquí hay otra vista previa rápida y sucia con gradientes más claros e imágenes iluminadas.
Ahora compare esto con lo que empezamos y puede ver claramente el efecto de los cambios que hemos realizado.
¿Ves cuánta diferencia hacen unos pequeños ajustes? Imagine cuánto mejor parecería cada producto con un esfuerzo serio para mejorar la calidad estética. Muchas de las imágenes son tan similares que podría grabar un flujo de trabajo de Photoshop en una de ellas y aplicarlas rápidamente en cuestión de segundos en lugar de jugar por horas en cada toma individual.
Conclusión
Como mencioné anteriormente, la mayoría de los cambios sugeridos son bastante mínimos. Empujando alineaciones, agregando efectos de desplazamiento, estas son simplemente posibles mejoras que no son necesariamente emergencias.
Si solo tiene el tiempo y los recursos para abordar uno de los problemas anteriores, le recomiendo ir después de la presentación de los productos. Creo firmemente que las imágenes en su estado actual están arrastrando innecesariamente la calidad del sitio muy por debajo de lo que tiene potencial para ser. En una tienda en línea, las fotos de los productos son una de las cosas más importantes para hacer las cosas bien y, sin embargo, aquí creo que son el área que más falta.
No necesariamente tiene que seguir exactamente mis cambios, solo intente comprender cuáles son los problemas principales de cómo se ven los productos y encuentre sus propias soluciones para aumentar la calidad percibida en estas áreas.
¡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.