leidypaez / BOG003-card-validation

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Tienda Geko Store

bienvenidos a geko store

1. Quienes son los principales usuarios

Es una tienda de ropa femenina y accesorios varios, siendo solo productos femeninos, la cual necesita que el usuario ingrese el numero de su tarjeta de crédito con otra información para validar su respectivo pago.


2. Cuales son los objetivos del usuario al entrar a la pagina

Estos diseños estan hechos de y por mujeres con estilos unicos vistos en muy pocas partes de latinoamerica, ya que es un estilo asiatico con diseños aesthetic y productos coreanos de calidad.

3. Diseño del primer prototipo

creacion del boceto con papel y lapiz para estructurar mejor la pagina web

PROCESO

  1. en nuestra primera pantalla mostrar una imagen grande de los productos, en la parte de header se veran 4 botones: -inicio -productos -contactos -cesta de productos a comprar en esta parte hacer que los botones funcionen y nos lleven a distintas pantallas -inicio: nos lleva a la primera pantalla -productos: nos lleva a 3 secciones las cuales son (ropa-accesorios-maquillaje) -contactos: nos lleva a la parte final, el footer
  2. en la pantalla de productos se veran 3 opciones las cuales seleccionado cada una de ellas muestra los 3 tipos de productos que hay organizado por secciones (ropa-accesorios-maquillaje)
  3. a la hora de escoger uno o varios productos se llevan a la canasta la cual se hace llenar unos datos y con ello llega la validacion de la tarjeta los cambios recibidos en el feedback fueron los siguientes:
  • En este prototipo tenia que corregir una parte donde tengo que mostrar un formulario para que no solo sea la tarjeta si no el nombre, apellido, correo electronico entre otros ya que como es una tienda de envios de ropa es mejor agregar datos mas necesarios para la pagina. Prototipo-primer-diseño

4. Prototipos realistas

  1. ENCABEZADO: El encabezado estara compuesto por una bienvenida grande la cual muestre unas imagenes de los productos de la pagina pero un poco mas estetica, tambien botones como: -inicio -productos -contactos 1- COLORES: siendo ropa femenina los tonos a usar son tonos pastel para el general de la pagina 2- FUENTE: la fuente se presentara con un tonos grises y pálidos, y con una fuente poco marcada en sus bordes. 3- IMAGENES: Se insertaran imágenes de productor a la azar para que el usuario elija 4- PIE DE PAGINA: el pie de pagina mostrara 4 columnas: 1-"productos 100% hechos en colombia. se hacen envios internacionales,derechos reservados, se reciben tarjetas de credito visa y mastercard si necesita un pedido al por mayor escribanos al correo geko_store@gmail.com". 2- una columna de soluciones. 3- una seccion de la compañia en general. 4-por ultimo nuestras redes sociales de contacto. 5- y por ultimo una seccion donde reserva los derechos de autor y copyrith. INSERTAR IMAGEN DE LOS PROTOTIPOS REALISTAS estos prototipos fueron creados en ilustrator y photoshop insertar imagen de prototipos realistas Imagen-de-prototipo

PROTOTIPO FINAL DE LA PAGINA

Imagen-de-pagina-final

Segunda-tercera-cuarta-quita pantalla

Imagen-de-ropa Imagen-de-accesorios Imagen-de-maquillaje Imagen-de-formulario Imagen-de-pagina-valida Imagen-de-paginanovalida Imagen-de-footer

  1. Diagrama

Imagen-de-diagrama

  1. Validacion de la tarjeta

Geko store es una tienda diseñada para comprar en linea con una tarjeta de credito, la cual tiene el uso del algoritmo de luhn y de el uso de maskify para la proteccion de sus datos.

Testeo

Imagen-de-testeo

  1. Autoria

Este documento y pagina es creación de leidy alexandra garavito páez

fuentes - recursos

About


Languages

Language:JavaScript 46.0%Language:HTML 35.2%Language:CSS 18.9%