Galerías Fotográficas - Guía de Estilo UI/UX

Relacionado

Materiales

Usaremos fluent ui como base de iconos.
Usaremos Tailwind CSS como framework de diseño.
Crearemos 2 temas: claro y oscuro.

Paleta de colores

Se definirán 2 paletas de colores base: una para el modo claro y otra para el modo oscuro. Cada paleta incluirá colores primarios, secundarios, de fondo y colores de acento para los estados de la interfaz y los resaltos de la misma.

Tipografías

Se seleccionarán tipografías que sean legibles y que se alineen con la estética de la marca. Se establecerán jerarquías tipográficas claras para títulos, subtítulos y texto de cuerpo.

Componentes reutilizables de Angular

Se crearán diferentes componentes reutilizables en Angular para garantizar la consistencia y facilitar el desarrollo. Los principales componentes serán:

Inputs de texto: Los labels aparecerán dentro del campo. El campo tendrá un borde inferior resaltado en un color neutro al tema (gris suave para el modo claro y gris oscuro para el modo oscuro). Al clicar en el campo, el label se desplazará hacia arriba y se reducirá de tamaño y aparecerán los bordes faltantes. Si el campo tiene validación, al terminar de validarse, el color del borde cambiará al color de acento en caso de que sea correcto; rojo en caso contrario. Los errores de validación de mostrarán a continuación del input.
Los botones: Borde, texto e iconos del color de boton; fondo trasparente al 90%. Al hacer hover, incremento de opacidad al 100% e invertir el color del texto y los iconos por el fondo primario.
- Login: mismo funcionamiento que los botones pero con color de acento login.
- Registro: mismo funcionamiento que los botones pero con color de acento registro.
- Cerrar sesión: mismo funcionamiento que los botones pero con color de acento cerrar sesión.
- Recuperar contraseña: mismo funcionamiento que los botones pero con color de acento recuperar contraseña.
- Comprar: mismo funcionamiento que los botones pero con color de acento comprar.
- Añadir al carrito: mismo funcionamiento que los botones pero con color de acento comprar oscurecido un 20%.
- Eliminar del carrito: mismo funcionamiento que los botones pero con color de acento eliminar.
- Confirmar compra: mismo funcionamiento que los botones pero con color de acento comprar.
Tarjetas de imagen: tendrán los bordes ligeramente redondeados, al estilo windows 11. Como tamaño máximo tendrán un alto de 360p. Como máximo ocuparán un 1/4 del ancho de la pantalla y un máximo de 1/4 del alto de la pantalla. En pantallas pequeñas, se adaptarán para ocupar un 100% del ancho disponible para crear un feed infinito de imágenes. Se mantendrá siempre la relación de aspecto de la imágen original.
Galería de tarjetas: se organizarán en cuadrícula. Las imágenes se ajustarán automáticamente al espacio disponible, manteniendo siempre su proporción original. El espacio entre las imágenes será consistente y se adaptará al tamaño de la pantalla. Las imágenes muy largas o muy anchas desplazarán a todas las demás imágenes hacía arriba o abajo. Las imágenes mas altas, ocuparán más espacio vertical, empujando las imágenes de su columna hacia arriba o abajo. En tablets, al estar en vertical, se mostrarán en el mismo formato que en móviles, ocupando todo el ancho de la pantalla; en horizontal, se mostrará una cuadrícula. lo más pequeña posible respetando el tamaño mínimo de cada imagen.

Patrones de diseño UX/UI

Nos basaremos en principios de diseño centrados en el usuario. Usaremos ejemplos de UI Patterns para inspirar nuestras decisiones de diseño.

Todas las galerías menos la del portfolio, seguirán el mismo diseño, basado en un scroll infinito, hasta alcanzar el total de imágenes disponibles.

Cada imagen se podrá ampliar y ver en detalle, accediendo a una página detalle donde se podrá descargar, comprar, compartir, votar y comentar la imagen.

Cuando se sube una nueva imagen o se inicie un proceso que llame al back, se cargará una animación de carga.

Siempre habrá un header horizontal presente, que muestre el logo de la aplicación, un botón de eventos, un botón de colecciones, un botón de búsqueda y un botón de login. Para usuarios autenticados, se mostrará un botón de menú que expondrá opciones adicionales como el historial de compra, edición de perfil, etc. Al autenticarse, el botón de login se convertirá en el botón de logout. Para usuarios profesionales, en el menú se incluirán opciones adicionales como la gestión del portfolio o la configuración del aplicativo. El menú se mostrará como un menu de hamburguesa.

Habrán imágenes agrupadas por colecciones que corresponden a agrupaciones de categorias y fechas. Habrán eventos, que serán colecciones definidas con una fecha de inicio/fin y una agrupación de categorias repetidas en la colección. Al ver las colecciones, se podrá filtrar por fecha, categoría y otros metadatos relevantes. Al ver los eventos, se podrá filtrar por fecha, categoría y localización. En la vista de colecciones, aparecerán todas las colecciones en una cuadrícula que se adaptará al tamaño de la pantalla. Sobre el grid, aparecerán los diferentes filtros (fecha y categorías) y un cuadro de búsqueda para buscar palabras relevantes. En la vista de eventos, aparecerán listados los eventos en una cuadrícula similar a la de colecciones, con filtros para la localización, la fecha de inicio y fin del evento, y categoría del evento y un cuadro de búsqueda para buscar palabras clave de cada evento. Además, habrá una vista con todas las imágenes subidas y que sean públicas, ordenadas por fecha. Al lateral aparecerán los filtros de evento, colección y categorías. Esta vista será un scroll infinito hasta el fin del contenido.

Responsive design guidelines

Como unidad base usaremos svw y svh. Para tamaños relativos usaremos rem y porcentajes. Usaremos flexbox para la disposición de los elementos. Las cuadrículas usarán grid para organizar las imágenes de manera eficiente.

Nos aseguraremos que la aplicación sea usable en dispositivos de diferentes tamaños. Usaremos media queries para adaptar el diseño a diferentes resoluciones de pantalla. Como referencia de dispositivos usaremos: Móvil: Oppo A94 Tablet: Samsung Galaxy Tab S6 Lite Escritorio: Monitor 1920x1080

Nos basaremos en componentes Tailwind CSS para la creación de la interfaz de usuario y adaptar las interfaces.

Accesibilidad

Se implementarán prácticas de accesibilidad para garantizar que la aplicación sea usable por personas con discapacidades. Esto incluirá el uso de etiquetas ARIA y la navegación por teclado.

6.9 KiB Raw Permalink Blame History