# data[].attributes.body
Jerarquía visual

Contraste y balance

Espaciado y alineación

Tipografía y color

# data[].attributes.body
Es el diseño de todos los elementos visuales con los que el usuario interactúa en una página web, app o sistema digital.

# data[].attributes.body
UX = User Experience (Experiencia de Usuario)

Es el proceso de diseñar productos (como sitios web o apps) para que sean fáciles de usar, útiles, agradables y efectivos para el usuario.

Entienda rápidamente cómo funciona la página o app.

No se frustre mientras navega.

Encuentre lo que busca sin perder tiempo.

Tenga una experiencia satisfactoria.

# data[].attributes.body
Figma

Adobe XD

Sketch

Canva (para principiantes)

# data[].attributes.body
HTML: contenido

CSS: estilo

JS: comportamiento

# data[].attributes.body
El Responsive Design (Diseño Responsivo) es un enfoque de diseño web que asegura que un sitio web se vea bien y funcione correctamente en cualquier dispositivo, ya sea una computadora de escritorio, tablet o teléfono móvil.

Media queries en CSS

Frameworks: Bootstrap, Tailwind CSS

# data[].attributes.body
1. Prototipado

El prototipado es el proceso de crear una versión interactiva de una página web o app antes de que se desarrolle completamente. Este prototipo permite probar y visualizar la experiencia del usuario.

2. Wireframes

Los wireframes son bocetos o esquemas básicos de una página o pantalla, usados para representar el diseño de alto nivel de la interfaz. Son como un mapa de lo que va a estar en la página, pero sin detalles visuales.

Herramientas para prototipar: Balsamiq, Figma

Ejemplo de wireframe de una landing page