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
Figma es una herramienta para:
-
Diseñar interfaces de usuario (UI) Mockups
-
Crear prototipos navegables
-
Colaborar con diseñadores y desarrolladores
-
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 (teniendo en cuenta los wideframes diseñados en el tp anterior)
Ejemplo de secciones de un sitio web sobre turismo serián: restaurantes, museos, con
No hay comentarios:
Publicar un comentario