UI (User Interface)
La UI es la interfaz visual del sistema: todo lo que el usuario ve y con lo que interactúa.
Incluye:
-
botones
-
formularios
-
menús
-
colores
-
tipografía
-
íconos
-
tablas
-
tarjetas
Ejemplo en un sistema:
Pantalla de login con:
-
campo email
-
campo contraseña
-
botón "Iniciar sesión"
Todo eso es UI.
-
UX (User Experience)
La UX es la experiencia del usuario al usar el sistema.
No se trata tanto de lo visual, sino de:
-
qué tan fácil es usarlo
-
si el usuario entiende qué hacer
-
cuántos pasos necesita
-
si el flujo es lógico
Ejemplo:
Sistema A:
5 pantallas para registrar un cliente.
Sistema B:
1 pantalla simple para registrar cliente.
El sistema B tiene mejor UX.
-
Mockup
El mockup es el diseño visual final de la pantalla.
Incluye:
-
colores
-
tipografía
-
iconos
-
espaciados
-
estilos
Photo by Mariia Shalabaieva on Unsplash
Diseño en Figma
Una vez definidos los bocetos, se pasa al diseño digital usando Figma una herramienta gratuita que permite crear los respectivos mockups.
Con Figma se puede:
Diseñar la estructura visual de un sitio web o aplicación.
Prototipar: crear una versión de prueba que simula cómo funcionaría el sitio real.
Colaborar en equipo: varios usuarios pueden trabajar al mismo tiempo en el mismo proyecto.
-
Conceptos básicos
Los 5 conceptos principales de Figma son:
-
Frame
Es como una pantalla.
Ejemplo:
-
pantalla de login
-
pantalla de dashboard
-
Shapes (formas)
Rectángulos, círculos, líneas.
-
Text
Para agregar textos a la interfaz. -
Components
Elementos reutilizables.
Ejemplo:
-
botón
-
navbar
-
input
-
Auto Layout
Sirve para que los elementos se acomoden automáticamente, parecido a Flexbox en CSS.Ejercicio
Diseñar los mackup de su sitio web en Figma (minimo 12 secciones/páginas) (teniendo en cuenta los wideframes diseñados en el tp anterior)
En su repositorio de github subir las imagenes diseñadas y el enlace a figma
Ejemplo de secciones de un sitio web sobre turismo serián: restaurantes, museos
No hay comentarios:
Publicar un comentario