Documento/Email Para uso compartido Público

Educación
tecnológica

Unidad 3
Diseño de interfaz de usuario

Deivys Guillermo Morales Uribe

1
Documento/Email Para uso compartido Público

Contenidos

Tema 1: Fundamentos UI
Tema 2: Herramientas para UI
Tema 3: Diseño UI
Conclusiones
Prueba tu conocimiento
Bibliografía

2
Documento/Email Para uso compartido Público

Tema 1
Fundamentos UI

El diseño de interfaz de usuario (UI, por sus siglas en inglés) se refiere a la

creación y diseño de la apariencia visual de una interfaz mediante la cual los
usuarios interactúan con un dispositivo o aplicación. Esto incluye la disposición
de elementos visuales, como botones, menús, iconos y otros elementos
gráficos, así como la organización de la información en pantalla.

El diseño de interfaz de usuario tiene un impacto significativo en el mundo

laboral, especialmente en aquellos sectores y profesiones relacionadas con la
tecnología, el desarrollo de software, la experiencia de usuario (UX) y el diseño
gráfico

3
Documento/Email Para uso compartido Público

Conceptos iniciales de UI
El objetivo principal del diseño de interfaz de usuario es facilitar la interacción
del usuario con el sistema, haciendo que la experiencia sea intuitiva, eficiente
y agradable. Para lograr esto, se deben tener en cuenta principios de
usabilidad, accesibilidad y diseño visual, asegurándose de que la interfaz sea
fácil de entender y utilizar.
Los diseñadores de interfaces de usuario suelen trabajar en colaboración con
diseñadores de experiencia de usuario (UX) para crear interfaces que no solo
sean visualmente atractivas, sino también funcionales y centradas en las
necesidades del usuario. En resumen, el diseño de interfaz de usuario busca
mejorar la experiencia del usuario al interactuar con un producto o servicio
digital

Aplicaciones en el mundo laboral

Algunas de las formas en que el diseño de interfaz de usuario influye en el
ámbito laboral incluyen:
Experiencia del Usuario (UX): La calidad del diseño de interfaz de usuario tiene
un impacto directo en la experiencia del usuario al interactuar con un producto
o servicio. Una buena UX puede mejorar la productividad, la satisfacción del
usuario y la eficiencia en el entorno laboral.

4
Documento/Email Para uso compartido Público

Desarrollo de Software: Los desarrolladores de software trabajan en

colaboración con diseñadores de interfaz de usuario para implementar la
apariencia visual y la interactividad de las aplicaciones. Un diseño de interfaz
bien pensado puede facilitar el desarrollo y el mantenimiento del software.
Accesibilidad: El diseño de interfaz de usuario también aborda la accesibilidad,
asegurando que las aplicaciones sean utilizables por personas con diversas
habilidades y discapacidades. Esto es crucial en entornos laborales donde la
diversidad es un factor importante.
Eficiencia en el Trabajo: Interfaces de usuario intuitivas y bien diseñadas
pueden aumentar la eficiencia en el trabajo al reducir la curva de aprendizaje
para nuevos empleados y al hacer que las tareas cotidianas sean más
accesibles y rápidas de realizar.
Comunicación Empresarial: En entornos corporativos, el diseño de interfaz de
usuario puede ser parte integral de la comunicación de la marca. Una interfaz
coherente y estéticamente agradable puede contribuir a la imagen de una
empresa y a la percepción que tienen los clientes y empleados.
Especialización Laboral: El diseño de interfaz de usuario ha dado lugar a roles
especializados, como diseñadores de UI/UX, cuya tarea es centrarse
específicamente en la apariencia y la experiencia del usuario en las interfaces
digitales. Esto ha creado nuevas oportunidades laborales y áreas de
especialización.

5
Documento/Email Para uso compartido Público

Pasos necesarios para el diseño de una interfaz de usuario:

Iniciar un proyecto de diseño de interfaz de usuario (UI) implica considerar
varios aspectos clave para asegurar un resultado exitoso. Aquí hay algunas
cosas que se deben tener en cuenta:
1. Comprender el Contexto del Proyecto:
• Define claramente los objetivos del
proyecto y las necesidades del usuario.
• Comprende la industria, el mercado y
la competencia para contextualizar tu
diseño.

2. Investigación de Usuario:
• Realiza investigaciones para comprender las necesidades,
comportamientos y expectativas de los usuarios.
• Crea perfiles de usuario y
escenarios para orientar el diseño
hacia las necesidades específicas de
tu audiencia.

3. Establecer Objetivos de la Interfaz:

• Define los objetivos que deseas lograr con la
interfaz, como la usabilidad, la eficiencia y la
satisfacción del usuario.

6
Documento/Email Para uso compartido Público

4. Definir la Identidad de Marca:

• Si es aplicable, integra elementos de la identidad de marca en el
diseño para mantener la coherencia con la imagen de la empresa.

5. Prototipos y Wireframes:
• Crea prototipos y wireframes para
visualizar la estructura y la disposición de
los elementos en la interfaz antes de
pasar a la implementación.

6. Jerarquía Visual:
• Diseña una jerarquía visual clara que guíe a
los usuarios a través de la interfaz de manera
lógica y efectiva.
•
7. Colores y Tipografía:
• Elige colores y tipografías que se alineen con la
marca y mejoren la legibilidad y la estética del
diseño.

7
Documento/Email Para uso compartido Público

8. Accesibilidad:
• Asegúrate de que el diseño cumpla con
principios de accesibilidad para que sea
usable por todas las personas,
independientemente de sus habilidades o
discapacidades.

9. Pruebas de Usuario:
• Realiza pruebas de usabilidad con usuarios
reales para obtener retroalimentación
valiosa y hacer ajustes antes del lanzamiento.

10.Adaptabilidad a Dispositivos:
• Diseña pensando en la adaptabilidad a
diferentes dispositivos y tamaños de
pantalla (diseño responsivo).

11.Tecnologías y Plataformas:
• Considera las tecnologías y plataformas
específicas en las que se implementará la
interfaz para asegurar la compatibilidad.

8
Documento/Email Para uso compartido Público

12.Iteración Continua:
• El diseño de interfaz de usuario es
un proceso iterativo. Está preparado
para realizar ajustes basados en la
retroalimentación y cambios en los
requisitos del proyecto.

13.Colaboración Interdisciplinaria:
• Colabora estrechamente con
otros profesionales, como
diseñadores de experiencia de
usuario (UX), desarrolladores
y partes interesadas, para garantizar una implementación exitosa.

Iniciar un proyecto de UI de manera efectiva implica equilibrar la estética con

la funcionalidad y la usabilidad, siempre manteniendo al usuario final en el
centro del proceso de diseño

En resumen, el diseño de interfaz de usuario no solo mejora la interacción con

la tecnología, sino que también tiene un impacto directo en la eficiencia, la
productividad y la comunicación en el mundo laboral actual

9
Documento/Email Para uso compartido Público

Tema 2
Herramientas para UI

La interfaz de usuario (UI) es la capa visual y de interacción que conecta a los

usuarios con productos digitales, desde aplicaciones móviles y sitios web hasta
sistemas software complejos. El diseño efectivo de la interfaz de usuario es
esencial para crear experiencias de usuario positivas y productivas. En el
mundo laboral actual, donde la tecnología desempeña un papel crucial en la
mayoría de las industrias, la UI se ha convertido en un elemento central para
el éxito y la competitividad de las empresas

10
Documento/Email Para uso compartido Público

Tecnologías y Plataformas para UI

El desarrollo de interfaces de usuario (UI) involucra una variedad de
tecnologías, plataformas y herramientas que permiten la creación de
experiencias visuales interactivas. Aquí hay algunas de las tecnologías y
herramientas comunes utilizadas en el desarrollo de UI:

Tecnologías Frontend:

11
Documento/Email Para uso compartido Público

HTML/CSS/JavaScript:
HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), y
JavaScript son fundamentales para el desarrollo web. HTML define la
estructura, CSS maneja el diseño y la apariencia, y JavaScript
proporciona la interactividad en el lado del cliente.
React, Angular, Vue.js:
Frameworks de JavaScript que simplifican el desarrollo de interfaces de
usuario interactivas y dinámicas. React es desarrollado por Facebook,
Angular por Google, y Vue.js es una opción más ligera y flexible.
Bootstrap, Materialize:
Frameworks CSS que ofrecen componentes preestablecidos y estilos
para facilitar la creación de interfaces responsivas y atractivas.

Herramientas de Diseño:

12
Documento/Email Para uso compartido Público

Adobe XD, Sketch, Figma, Canva, Drawio:

Herramientas de diseño de interfaz de usuario que permiten a los
diseñadores crear prototipos, wireframes y diseños visuales. Facilitan la
colaboración entre diseñadores y desarrolladores.

Plataformas de Desarrollo Móvil:

Swift (iOS), Kotlin/Java (Android):

Lenguajes de programación utilizados para el desarrollo de aplicaciones
móviles nativas. Swift es utilizado para iOS, mientras que Kotlin y Java
son utilizados para Android.

13
Documento/Email Para uso compartido Público

React Native, Flutter:

Frameworks que permiten el desarrollo de aplicaciones móviles
multiplataforma utilizando JavaScript (React Native) o Dart (Flutter).

Animaciones y Gráficos:

14
Documento/Email Para uso compartido Público

CSS Animation, GSAP (GreenSock Animation Platform):

Para crear animaciones en el lado del cliente utilizando CSS o
herramientas como GSAP, que es una biblioteca JavaScript para
animaciones avanzadas.

Herramientas de Desarrollo:

Visual Studio Code, Sublime Text:

Entornos de desarrollo integrados (IDE) que ofrecen características
avanzadas para escribir y depurar código de interfaz de usuario.
Chrome DevTools, Firefox Developer Tools:
Herramientas de desarrollo del navegador que permiten la inspección y
depuración en tiempo real de aplicaciones web.

15
Documento/Email Para uso compartido Público

Control de Versiones:

Git, GitHub, GitLab:

Sistemas de control de versiones que facilitan la colaboración entre
desarrolladores y el seguimiento de cambios en el código fuente.

Testing y Automatización:

16
Documento/Email Para uso compartido Público

Jest, Selenium, Cypress:

Herramientas para realizar pruebas unitarias, de integración y pruebas
de extremo a extremo en interfaces de usuario.
Webpack, Babel:
Utilizados para la configuración y automatización del flujo de trabajo de
desarrollo, incluida la transpilación de código.

Frameworks Backend (para aplicaciones web):

Node.js, Django, Ruby on Rails:

Tecnologías backend que pueden ser utilizadas junto con tecnologías
frontend para construir aplicaciones web completas.

17
Documento/Email Para uso compartido Público

Cloud Computing:

AWS, Azure, Google Cloud Platform:

Servicios en la nube que proporcionan recursos escalables para alojar y
desplegar aplicaciones web y móviles.

En resumen, estas son solo algunas de las muchas tecnologías y herramientas

disponibles para el desarrollo de interfaces de usuario. La elección de
herramientas específicas dependerá de factores como los requisitos del
proyecto, la preferencia del equipo de desarrollo y la naturaleza del producto
final.

18
Documento/Email Para uso compartido Público

Tema 3
Diseño UI

En el mundo digital contemporáneo, el diseño de interfaz de usuario (UI) juega

un papel esencial al definir cómo interactuamos con la tecnología. La UI abarca
todo lo que un usuario ve, toca y experimenta en una aplicación, sitio web o
software. Es la clave para crear experiencias de usuario atractivas, intuitivas y
eficientes
El diseño de interfaz de usuario se centra en la estética visual y la presentación
de elementos interactivos en una interfaz digital. Incluye la disposición de
botones, iconos, colores, tipografía y otros componentes visuales para facilitar
la comunicación entre el usuario y la aplicación. El objetivo principal es crear
una experiencia que sea tanto funcional como estéticamente agradable

19
Documento/Email Para uso compartido Público

Creación de interfaces con Drawio

Draw.io (ahora llamado "diagrams.net") es una herramienta de creación de

diagramas en línea que permite a los usuarios diseñar y dibujar diversos tipos
de diagramas de forma colaborativa. La herramienta se destaca por ser
gratuita y de código abierto, y es ampliamente utilizada en entornos
profesionales y educativos. Aquí hay algunas características clave de Draw.io:

Diagramas Versátiles:
Draw.io admite la creación de una amplia variedad de diagramas, como
diagramas de flujo, organigramas, mapas mentales, diagramas de red,
diagramas UML y más.

20
Documento/Email Para uso compartido Público

Colaboración en Tiempo Real:

La plataforma permite la colaboración en tiempo real, lo que facilita a varios
usuarios trabajar juntos en un mismo diagrama, lo cual es ideal para entornos
de trabajo colaborativo.

Integración con Plataformas:

Draw.io se puede utilizar directamente en línea a través de su plataforma web,
y también se integra con diversas plataformas, como Google Drive, Dropbox y
GitHub. Además, es posible utilizarlo sin conexión descargando la aplicación
de escritorio.

Interfaz de Usuario Intuitiva:

La interfaz de usuario de Draw.io es intuitiva y fácil de usar, con una variedad
de herramientas de dibujo y formas predefinidas que facilitan la creación de
diagramas.

Exportación e Importación:
Los usuarios pueden exportar sus diagramas en varios formatos, como
imágenes, archivos PDF y documentos editables en formatos populares.
También es posible importar diagramas desde otras aplicaciones.

21
Documento/Email Para uso compartido Público

Seguridad y Privacidad:
Draw.io ofrece opciones para trabajar de manera segura y privada, incluyendo
la capacidad de almacenar los archivos de diagramas en servicios en la nube
seguros y utilizar enlaces protegidos con contraseña.

Personalización:
Los usuarios pueden personalizar la apariencia de los diagramas, cambiar
colores, agregar texto y ajustar la disposición de los elementos según sea
necesario.

Uso Común:
Diseño de Diagramas Profesionales:
Se utiliza comúnmente en entornos profesionales para la creación de
diagramas técnicos, organigramas empresariales, diagramas de procesos y
más.

Proyectos Académicos:
En entornos educativos, Draw.io es una opción popular para proyectos
académicos que requieren la creación de diagramas visuales.

22
Documento/Email Para uso compartido Público

Desarrollo de Software:
Los equipos de desarrollo de software utilizan Draw.io para diseñar diagramas
de arquitectura, diagramas de flujo y otros diagramas relacionados con el
desarrollo de software.

Planificación y Estrategia:
Es utilizado en la planificación estratégica para visualizar ideas y conceptos,
facilitando la comunicación visual en equipos.

Creación de interfaces con CANVA

Una de las herramientas que se puede usar para la realización de interfaces

graficas es Canva, se puede utilizar para crear maquetas de interfaz de usuario,
especialmente si estás buscando una opción más accesible y fácil de usar, y no
necesitas características avanzadas de diseño de software especializado.

23
Documento/Email Para uso compartido Público

Canva es conocida por su interfaz amigable y su enfoque intuitivo, lo que la

hace popular entre aquellos que buscan crear diseños rápidos y visuales.

Descripción:
Canva es una plataforma en línea que permite a los usuarios crear una
variedad de diseños, incluyendo presentaciones, publicaciones en redes
sociales, tarjetas y también maquetas de interfaz de usuario.

Características:
• Biblioteca de elementos visuales, como iconos y fotos.
• Herramientas de diseño fáciles de usar.
• Plantillas prediseñadas para facilitar la creación.
• Colaboración en línea con otros usuarios.

Cómo usar Canva para maquetas de interfaz de usuario:

• Inicia sesión en Canva o regístrate para obtener una cuenta.
• Selecciona el tipo de diseño "Personalizado" y establece las dimensiones
de tu maqueta.
• Utiliza las herramientas de diseño, como formas y texto, para crear
elementos visuales.
• Explora la biblioteca de Canva para encontrar iconos, imágenes y otros
elementos que puedas incorporar.
• Guarda y descarga tu maqueta cuando hayas finalizado.

24
Documento/Email Para uso compartido Público

Teoría del color

En el diseño de interfaces gráficas, el uso efectivo del color es fundamental

para transmitir información, guiar la interacción del usuario y establecer una
identidad visual distintiva. La teoría del color desentraña las complejidades de
cómo los colores interactúan, permitiendo a los diseñadores seleccionar
paletas que no solo sean estéticamente agradables, sino también coherentes
y significativas. La paleta de colores, cuidadosamente elegida, no solo afecta
la estética general, sino que también juega un papel esencial en la accesibilidad
y legibilidad de la interfaz, contribuyendo a una experiencia de usuario más
efectiva.
El contraste, tanto en luminosidad como en saturación, desempeña un papel
crucial en la usabilidad y visibilidad. Se utiliza para garantizar que los
elementos cruciales destaquen y sean fácilmente identificables. La psicología
del color entra en juego al considerar cómo los usuarios perciben y responden

25
Documento/Email Para uso compartido Público

emocionalmente a diferentes colores, influyendo en la percepción de la marca

y en la creación de una experiencia más atractiva. La elección entre temas
oscuros y claros tiene implicaciones directas en la comodidad visual y la
eficacia de la interfaz en diferentes contextos de uso. La jerarquía visual y la
retroalimentación visual, a través de cambios de color en respuesta a acciones
del usuario, contribuyen a una navegación más intuitiva y a una interacción
más fluida. En última instancia, la consistencia en el uso de colores es esencial
para establecer una identidad visual coherente y asegurar una experiencia
unificada en toda la interfaz gráfica.

Los colores pueden identificarse y representarse de varias maneras, y la

elección de un sistema de identificación depende del contexto y la aplicación.
Aquí hay algunas de las formas más comunes de identificar colores:
1. Nombres de Colores:
Algunos colores tienen nombres específicos asociados, como "rojo", "azul" o
"verde". Estos nombres son utilizados en HTML y CSS para especificar colores
directamente.

2. Valores Hexadecimales (Hex):

En el sistema hexadecimal, los colores se representan mediante
combinaciones de seis dígitos hexadecimales. Por ejemplo, #FF0000

26
Documento/Email Para uso compartido Público

representa el rojo puro. Cada par de dígitos hexadecimales representa la

intensidad de los componentes rojo, verde y azul.

3. Valores RGB (Red, Green, Blue):

Los colores también pueden expresarse mediante valores numéricos que
indican la intensidad de los componentes rojo, verde y azul en un rango de 0 a
255. Por ejemplo, el rojo puro se representaría como RGB(255, 0, 0).

4. Valores RGBA:
Similar a RGB, pero con un componente adicional para la opacidad. RGBA
representa Red, Green, Blue y Alpha (opacidad). Por ejemplo, RGBA(255, 0, 0,
0.5) sería rojo con una opacidad del 50%.

5. HSL (Hue, Saturation, Lightness):

En el sistema HSL, los colores se representan mediante el tono (Hue), la
saturación (Saturation) y la luminosidad (Lightness). Este sistema ofrece una
forma más intuitiva de describir colores en términos de su apariencia visual.

27
Documento/Email Para uso compartido Público

6. Nombres de Colores Extendidos:

CSS3 introduce nombres de colores extendidos, como "rebeccapurple" o
"darkorange", que son más descriptivos y permiten una identificación más
intuitiva de los colores.

7. Pipetas y Herramientas de Selección de Color:

En herramientas de diseño gráfico y desarrollo web, las pipetas o herramientas
de selección de color permiten a los usuarios elegir un color directamente de
una interfaz visual, como una imagen o un diseño.
8. Sistemas de Color Específicos:
Para aplicaciones más especializadas, como diseño de impresión o edición de
imágenes, se utilizan sistemas de color específicos, como CMYK (Cyan,
Magenta, Yellow, Black) para impresión

La psicología del color

La psicología del color explora cómo los colores impactan las emociones y
percepciones humanas, influyendo en comportamientos y respuestas
psicológicas. En el diseño gráfico y la publicidad, los colores se seleccionan

28
Documento/Email Para uso compartido Público

estratégicamente para transmitir mensajes específicos; por ejemplo, el azul

evoca calma, mientras que el rojo puede estimular la urgencia. En el diseño de
interfaces y sitios web, se considera la legibilidad, el contraste y la jerarquía
visual para crear experiencias visuales efectivas. Las preferencias de color son
subjetivas y pueden variar, pero factores culturales, personales y contextuales
juegan un papel clave en la interpretación y la aplicación de colores para lograr
objetivos comunicativos y emocionales.

En resumen, Tanto Canva como Drawio entre otras herramientas existentes

son excelentes opciones para aquellos que buscan una herramienta fácil de
usar, especialmente si estás diseñando maquetas de manera ocasional o si
estás creando diseños para proyectos menos complejos. Sin embargo, si estás
trabajando en proyectos más avanzados o necesitas características específicas
de diseño de interfaz de usuario, las herramientas como Sketch o Adobe XD
podrían ser más adecuadas.

29
Documento/Email Para uso compartido Público

Conclusiones

• El diseño de interfaz de usuario (UI) desempeña un papel crucial en la

creación de experiencias digitales efectivas. No se trata solo de estética
visual, sino de la forma en que los usuarios interactúan con aplicaciones
y sitios web. Una interfaz bien diseñada mejora la usabilidad y la
satisfacción del usuario
• En cuanto a las herramientas de diseño UI, opciones como Sketch,
Adobe XD y Canva ofrecen soluciones específicas para crear maquetas
de interfaz de usuario. La elección entre ellas dependerá de las
necesidades del proyecto, la preferencia del diseñador y las
características particulares que cada herramienta ofrece.
• Por otro lado, Draw.io, ahora conocido como diagrams.net, es una
herramienta versátil de creación de diagramas en línea de código
abierto. Destaca por su capacidad de colaboración en tiempo real,
versatilidad para diversos tipos de diagramas y su uso común en
entornos profesionales y educativos

30
Documento/Email Para uso compartido Público

• En conclusión, el diseño de interfaz de usuario es esencial para el éxito

digital, y la elección de herramientas como Sketch, Adobe XD, Canva o
Draw.io dependerá de los requisitos específicos del proyecto y las
preferencias individuales del diseñador. Cada herramienta tiene sus
fortalezas, pero todas comparten el objetivo de facilitar la creación de
experiencias visuales y funcionales atractivas.

31
Documento/Email Para uso compartido Público

Prueba tus conocimientos

A continuación, encontrarás 3 preguntas sobre los temas vistos, estas no son

calificables, tienen como fin que puedas verificar tu aprendizaje.

Discute las respuestas con tus compañeros y docente durante el encuentro

sincrónico.

1. ¿Cuál es el principal objetivo del diseño de interfaz de usuario (UI)?

• Mejorar la eficiencia de codificación.
• Resaltar la complejidad visual.
• Crear experiencias de usuario efectivas y atractivas.

2. Draw.io, ahora denominado diagrams.net, es especialmente

reconocido por:
• Su interfaz de usuario complicada.
• Su capacidad de colaboración en tiempo real.
• Ser exclusivo para sistemas operativos macOS.

32
Documento/Email Para uso compartido Público

3. ¿Cuál de las siguientes herramientas es adecuada para la creación de

maquetas de interfaz de usuario de forma colaborativa en línea?
• Adobe XD.
• diagrams.net (Draw.io).
• Canva.

33
Documento/Email Para uso compartido Público

Bibliografía

• Nielsen, J. y Loranger, H. L. (2006). Diseño de interfaces de usuario:

principios y prácticas. Pearson Educación. España.
• Shneiderman, B. y Plaisant, C. (2010). Interfaz de usuario: diseño,
implementación y evaluación. Addison-Wesley. España.
• Domínguez, P. (2018). Diseño de interfaces de usuario para la web. RA-
MA. España.

34
Documento/Email Para uso compartido Público

35