Diseñar interfaz gráfica para página de inicio

[Jose-Moreno]

Tareas

• [ ] Diseñar interfaz gráfica para página de inicio como aplicación de escritorio.
  • [x] Diagramar secciones de la interfaz (botones, barras de navegación, contenedores, etc)
  • [x] Crear paleta de color orientada a la temática.
  • [ ] Maquetar wireframe funcional

Resultado esperado

Diseño de interfaz gráfica pensanda para funcionar en una aplicación de escritorio.

[Jose-Moreno]

V1

Para esta actividad se trabajaron principalmente 3 puntos

• Diseño Wireframe
• Concepto
• Paleta Colores

Wireframe

Se inició el diseño inicial orientando los requerimientos del sprint dados por el MINTIC / UPB y se dejo dos secciones principales, la sección principal donde va el contenido para explicar el proyecto y la sección de la barra de navegación que contiene el logo y el boton de registro.

Concepto

El concepto está orientado al sector productivo escogido por el formador, Delivery o Domicilios / Logística / Entregas. La orientación escogida fueron los domicilios de comida rápida.

La web app se llamará tentativamente Comensal palabra que denota a una o varias personas que se sientan a comer en una misma mesa.

Paleta de Color

Los colores base son el rojo y el amarillo, muy usados en la industria de la comida y el delivery para estimular el apetito e isntaurar un sentido de urgencia en el cliente.

[Jose-Moreno]

V2

Wireframe

A partir del diseño inicial, se evoluciono el concepto para hacerlo más funcional y estéticamente agradable cambiando la proporción y tamaño de los elementos.

Se origino la intención de disponer una barra de busqueda para buscar alimentos espécificos a pedir, así como un catalogo rápido para resaltar comidas populares o altamente solicitadas para ordenar. Se dispuso tambien unas etiquetas con precios para cada comida.

Concepto

Inicialmente se había pensado en cualquier tipo de comida rápida, pero se fue refinando para comida rápida pero de corte gourmet pero que tambien pudiera ofrecer comidas típicas o que usara ingredientes regionales o producido local como gancho opcional.

Ejemplos de este concepto se puede conocer por la comida de restaurantes como El Corral, Pizza 1969, The Pot, Wok, Dr.Raíz, entre otros.

Paleta

La paleta se mantuvó pero la proporción del uso de los colores se cambio drásticamente, buscando que los colores se convirtieran en acentos visuales para demarcar las secciones de la página.

[Jose-Moreno]

V3

Wireframe

Se continuó mejorando la relación entre elementos pero manteniendo la posición general de los elementos mientras se ajustaba la proporción y diseño de cada componente.

Se añadieron más elementos a las opciones del catalogo visual de comidas junto con elementos gráficos para resaltar el precio y categorizar las comidas tentativamente de la siguiente manera:

• Rojo: Comida compuesta principalmente por carnes (res, cerdo, pollo, etc)
• Verde: Compida vegana o compuesta por vegetables (ensaladas)
• Amarillo: Comida compuesta por harina (trigo, maiz) como pasta o repostería
• Azul: Comida marina principalmente

Tambien para dar la intención de ser añadidos a una orden de compra se les adicionaron botones de "suma" a la orden.

Por lo pronto a futuro se tendrá que decidir si es viable tener un sistema carrito u ordenes de compra, o si según los requerimientos técnicos dados por el MINTIC / UPB se deba dejar la idea de lado, esta consideración tambien aplicaría para la barra de busqueda.

Paleta

Tomando los colores base de la V2, se comenzo a diversificar la paleta con acentos a partir de colores complementarios que adicionalmente denotarán similitud a los colores de la bandera de Colombia usados en el logo.

[Jose-Moreno]

V4

A partir del diseño anterior se realizó una implementación de prueba para verificar la relevancia y necesidad de ciertos elementos visuales, así como su utilidad funcional dentro del diseño y la experiencia de usuario. Gracias a esto se optó por simplificar el diseño un poco más eliminando o fundiendo elementos visuales.

A partir de este diseño se hizo un wireframe de etiquetas para facilitar la planificación y trabajo en equipo para las próximas actividades.

[Jose-Moreno]

V4.5

Hice unos ligeros ajustes al mapa de etiquetas para ser mas claro en unos elementos.