Diseño UI

En esta sección se describen los aspectos clave del diseño de la interfaz de usuario del proyecto AFR Impresiones, enfocados en crear una experiencia amigable, clara y accesible para los usuarios.

1. Principios de Diseño

Simplicidad: La interfaz se mantiene limpia y sin elementos innecesarios para facilitar la navegación.
Consistencia: Uso coherente de colores, tipografías y estilos en todas las páginas.
Accesibilidad: Contraste adecuado, tamaños legibles y navegación intuitiva.
Responsividad: Adaptación fluida a diferentes dispositivos y tamaños de pantalla (móvil, tablet, escritorio).

2. Paleta de Colores

Color principal: Azul oscuro (#04435F) — utilizado en encabezados y elementos importantes.
Color secundario: Verde lima (#a1db0e) — para acentos, botones y elementos interactivos.

Azul oscuro

Verde lima

3. Tipografía

El proyecto utiliza varias fuentes para distintas necesidades:

Poppins: Fuente moderna y geométrica, ideal para títulos y encabezados.
Lato: Fuente legible y neutra para textos de párrafos y cuerpo.
Raleway: Elegante y estilizada, utilizada en elementos destacados.
Harabara: Fuente llamativa para algunos botones y detalles gráficos.
Montserrat: Versátil y limpia, para menús y componentes UI.

4. Estructura y Navegación

Header fijo: Contiene el logo, menú principal con desplegables para categorías y el buscador.
Menú desplegable: Permite acceder a las diferentes secciones de productos fácilmente.
Footer: Información legal y enlaces secundarios.

5. Componentes UI

Botones: Claros, con estados visuales para hover, activo y deshabilitado, utilizando los colores principales.
Formularios: Campos con etiquetas visibles, validaciones en tiempo real y mensajes de error.
Tarjetas de producto: Diseñadas para mostrar imagen y nombre de forma atractiva.
Toast Notifications: Mensajes emergentes para confirmar acciones o mostrar errores, visibles temporalmente en la esquina superior derecha.

Toast

Tarjetas de producto

6. Diseño Responsivo

Uso de CSS Flexbox y Grid para organizar contenido adaptable.
Menú colapsable en dispositivos móviles.
Ajuste dinámico de tamaños de fuente y espacios para mantener usabilidad en pantallas pequeñas.

7. Herramientas y Tecnologías

CSS modular organizado en archivos separados para componentes y páginas.
Librerías como Splide.js para carruseles.
JavaScript para interacción dinámica, validación de formularios y llamadas a endpoints.

8. Futuras Mejoras en el Diseño

Implementar una página dedicada para listado y filtrado de productos.
Mejorar el diseño de la página Mi Perfil para gestión de pedidos y datos personales.
Integración de pasarela de pago con un diseño intuitivo y seguro.
Añadir animaciones suaves para mejorar la experiencia del usuario.

Conclusión

El diseño UI de AFR Impresiones busca un balance entre funcionalidad y estética, proporcionando a los usuarios una experiencia clara, sencilla y eficiente en todas las interacciones con la plataforma.