Comments (5)
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 Comen_sal_ 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.
from upb-scrum-sprints.
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.
from upb-scrum-sprints.
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.
from upb-scrum-sprints.
#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.
from upb-scrum-sprints.
V4.5
Hice unos ligeros ajustes al mapa de etiquetas para ser mas claro en unos elementos.
from upb-scrum-sprints.
Related Issues (20)
- Diseñar logo de proyecto HOT 4
- Punto 2. Añadir barra de navegación vertical HOT 1
- Punto 10. Agregar Boton para enviar formulario HOT 1
- Diseñar interfaz de pagina de registro HOT 1
- Crear archivo de estilo css temporal para el archivo index.html HOT 1
- Crear un archivo de estilo css temporal para el archivo registro.html HOT 1
- Escribir documentación de usuario para uso de la aplicación
- Unificar archivos css de las páginas en archivo único estilos.css
- Implementar validación de campos para formulario de registro HOT 1
- Implementar funcion para agregar registros
- Implementar función para ordenar registros
- Implementar consultas SQL para registros
- Crear base de datos del proyecto
- Punto 3. Incluir logo en la barra de navegación HOT 1
- Punto 4. Agregar botón para ir a página de registro HOT 2
- Punto 9. Agregar un input para confirmar la contraseña HOT 1
- Punto 6. Crear formulario de registro de usuarios HOT 1
- Punto 8. Agregar un input para ingresar la contraseña HOT 1
- Punto 7. Agregar un campo input para ingresar el nombre de usuario HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from upb-scrum-sprints.