Diseño de una página web para la personalización de tartas.

Estoy desarrollando el sitio web de una panadería donde el cliente quiere ofrecer diferentes opciones de personalización para las distintas capas de un pastel, a saber, glaseado, relleno, etc.

El diseño que se me ocurrió es:

Opciones de personalización

Aquí, la imagen del pastel de la izquierda representa el sabor de las capas elegidas por el usuario al hacer clic en las distintas opciones de la derecha.

Para una combinación diferente de opciones a la derecha, se obtiene una combinación diferente de colores a la izquierda:

Selección de opciones de publicación

Sin embargo, el diseño me parece muy poco natural y torpe y esperaba recibir algunas sugerencias sobre cómo puedo mejorar el diseño.

Respuestas (3)

Creo que lo primero que me llama la atención es ese encabezado. No estoy seguro de las dimensiones y la resolución de su pantalla, por lo que tal vez sea solo una ilusión, pero si esa fuera mi pantalla, significaría que el encabezado tiene una altura de más de 200 px. El tamaño del encabezado puede variar un poco, dependiendo de varios factores, pero lo mantendría por debajo de 100 px. GDSE (este sitio) tiene una altura de 50 px, como referencia. Me doy cuenta de que su logotipo requiere un encabezado un poco más alto, lo que me lleva al siguiente punto.

Ese logo necesita mucho trabajo. No estoy seguro de si eso cae dentro del alcance de su contrato con ellos, pero ese logotipo no se escala bien y está demasiado ocupado para leerlo/reconocerlo fácilmente.

La imagen del pastel de la izquierda parece demasiado simple y demasiado pequeña. Yo lo haría más grande. Incluso podría intentarlo al revés, mostrando un pastel al que le falta una rebanada (ejemplo a continuación). Puede colocar el pastel en una bandeja y agregar otros elementos decorativos o de mesa a su alrededor.

Si realmente quisiera volverse loco, podría usar fotografías de pasteles (suponiendo que tenga los recursos para hacerlo). Si no puede obtener fotos de sus diferentes variantes, tal vez pueda usar una foto de un pastel de vainilla y colorearlo, según las entradas de los clientes.

Es difícil dar demasiada información adicional, porque solo podemos ver una pequeña sección del diseño, pero esas son las cosas que noté de inmediato.

ingrese la descripción de la imagen aquí

Soy consciente de que el encabezado parece demasiado grande, pero se me ha proporcionado el logotipo y no tengo poder para modificarlo. Sin embargo, les transmitiré la sugerencia. Gracias por tu contribución. Intentaré implementar los cambios que me has sugerido.

Más allá del diseño, que como indican en otras respuestas necesita varios ajustes, lo más relevante que veo en tu diseño es quizás un fallo conceptual que muchos solemos cometer.

En mi opinión, estás diseñando una página web, con características de página web: menú web, cuerpo web, encabezado web... cuando en realidad lo que quieres hacer es una aplicación web con múltiples opciones para aplicar a un objeto. Visualizándolo de esta manera creo que te ayudará a crear un muy buen diseño desde cero.

Para entenderlo mejor: ¿pensaste en poner un botón "BORRAR" para comenzar el pastel desde cero, el botón "DESHACER" para retroceder pasos, el botón "GUARDAR" en caso de que el usuario quiera mantener las opciones actuales para continuar en otro? tiempo, el botón "ENVIAR" para compartir las opciones seleccionadas con otro usuario, y lo más importante, el botón "COMPRAR" una vez que el pastel esté listo... Sé que tal vez esto es demasiado para un sitio simple, pero pensar en grande hace las cosas pequeñas mejor.

Recomiendo visitar páginas web con aplicaciones web para personalizar objetos. Aquí un muy buen ejemplo: https://www.shoesofprey.com/shoe/7Vwyhq/editor?create=1

zapatosofprey.com

Muchas gracias por tu sugerencia. ¡No había considerado agregar un botón de guardar y borrar! Sin embargo, los botones de envío y compra no serían aplicables ya que no es una aplicación de comercio electrónico.

Una cosa que cambiaría para hacer la página más completa: si es posible, en lugar de una columna a la derecha con todas las opciones, coloque las opciones en un círculo alrededor de la rebanada de pastel. También agregaría una imagen en el fondo (con poca opacidad) para darle más vida a la página. Ya sea una foto de la panadería en sí o de algunos de sus pasteles.

Otra cosa: si está atascado en el logotipo, ¿ha considerado hacer el encabezado más pequeño y hacer que el logotipo sobresalga? Se vería algo como esto:

página web

Eso suena bien. Siendo un poco aficionado, no estoy seguro si podré implementar eso. ¡Gracias por tu sugerencia!