Digital design

Diseño, usabilidad y experiencia de

usuario
CONTENIDO
1. Introducción

2. Wireframes y prototipo digital

3. Axure

4. Responsive

5. Diseño de interacción

6. Resumen

7. Bibliografía
 Digital design | 3

Introducción La ventaja principal del uso de prototipos en UX o

experiencia de usuario es que ayudan a plasmar
El diseño digital es un término general que es más visualmente los objetivos de negocio y como se alinean
relevante ahora que nunca. En pocas palabras, cualquier con las expectativas y necesidades de los usuarios y si
tipo de diseño que aparezca en formato digital (en una son satisfechas a través del producto digital diseñado.
aplicación o sitio web), en lugar de impreso (en una
Los prototipos en UX también ayudan en las fases
página física), se considera diseño digital.
tempranas del proceso de diseño para ser testados con
Una definición de diseño digital concisa: "El diseño usuarios.
digital se refiere a lo que se crea y se produce para su
Hay que tener en cuenta que modificar un prototipo,
visualización en una pantalla" (figura 1).
tiene un coste menor que modificar el producto digital
En un mundo cada vez más digitalizado, es probable que, una vez subido a producción, por lo que supone también
como diseñador, se trabaje bastante con el diseño digital. una ventaja en el ahorro de costes dentro del proceso de
Ya sea que sea un diseñador de UX o un artista gráfico, desarrollo.
comprender los detalles del diseño para plataformas
El objetivo de realizar wireframes para diseñar pantallas
digitales lo ayudará a llevar su carrera al siguiente nivel.
es transmitir los conceptos clave que les dan sentido a
El diseño digital también se diferencia del diseño estas conforme a las tareas de usuario que deben de
impreso porque es interactivo. No todos los tipos de satisfacer los objetivos del proyecto.
diseño digital son interactivos. De alguna manera, una
El uso de Wireframes en el diseño de experiencia de
infografía juega el mismo papel que un póster: es una
usuario también tiene ventajas de cara al cliente. Realizar
imagen estática. Sin embargo, cuando se trata de diseño
Wireframes en papel, ayuda a que el cliente ya tenga una
web, los usuarios a menudo arrastran, sueltan y hacen
visión sobre parte del proyecto y puede proporcionar
clic en los elementos que crea.
desde las fases tempranas su feedback. También,
El diseño interactivo es más complejo que el diseño proporciona tranquilidad al cliente y lo ayuda a que se
estático. Más allá de ser estéticamente agradable, involucre en la toma de decisiones.
su diseño también tendrá que ser utilizable; este es el
enfoque de los diseñadores de UX. ¿Qué es un Wireframe?
Los wireframes son esquematizaciones de la interfaz.
Wireframes y prototipo En ellos se representa la distribución visual y la
digital jerarquización de los contenidos. A través de ellos se
comprende y representa la interacción entre el humano y
Se llamará wireframes a los planos, a los dibujos de las la máquina y cómo debería responder el sistema y cada
pantallas resultantes de la conceptualización. Planas, uno de los elementos que lo componen.
sin posibilidad de interacción. Podrán ser plasmados en
soporte papel o en soporte digital. Tipos de Wireframes y prototipos
Se llamarán prototipos a las series de wireframes Existen diferentes tipos de prototipos. Entre los más
enlazados entre sí, en los que la interacción esté definida, usados se encuentran los siguientes:
contemplada y pueda ser experimentada. Podrán ser
plasmados sólo en soporte digital. 1. Sketches: son prototipos dibujados en un papel
que se realizan en las fases tempranas del diseño
Existen tres partes diferenciadas cuando se está de producto. Son rápidos, sencillos y pueden
plasmando el trabajo de conceptualización de un ser realizados tanto por el diseñador UX, por
proyecto: desarrolladores o cualquier otro Stakeholder.
Sirven para transmitir ideas y conceptos de una
• Sketching, para dibujar todo el sitio web, los
forma fresca y barata. El Sketch se realiza antes
procesos y las relaciones entre pantallas (solo
que el Wireframe y en ellos, puede llegar a definir la
papel).
arquitectura de la web, la definición de la interacción
• Wireframing, para dibujar con un cierto nivel de y flujos de navegación en el site.
detalle las pantallas, sus esbozos de contenido,
las llamadas a la acción y en general la disposición 2. Storyboard: el Storyboarding es una metodología
física de los elementos (papel o digital). que consiste en la representación de una historia
a través de un conjunto de bocetos o Sketches. Es
• Prototipado, para diseñar y ejecutar la interacción
parecido a un prototipo, donde se recogen una serie
entre las pantallas que componen los procesos
de pantallas dibujadas para comprender los pasos
(solo digital).
que debe de seguir un usuario en la ejecución de
una tarea. Proporciona una visión general del
proyecto, el esquema de navegación y muestra
cómo se desarrolla el proceso.
 Digital design | 4

4. Prototipos: un prototipo interactivo es una versión

más avanzada que los Wirefames. Se suele utilizar
una aplicación para generar las interacciones
necesarias y con una fidelidad media o alta en
cuanto al diseño visual. Los prototipos interactivos
son clicables y responsive.
Este tipo de prototipos se diseña en una fase
avanzada del producto cuando se tiene claro y
bien definido la funcionalidad. Los prototipos
interactivos deben ser lo más fieles posibles al
producto final, puesto que en el testeo con usuarios
nos arrojarán datos mucho más confiables.

Figura 1. Axure
Axure RP es una de las herramientas indispensables
3. Wireframes: son dibujos planos sin ningún tipo de en formaciones en diseño UX. La propia definición de
interacción que pueden ser realizados en papel esta herramienta que se encuentre en su página web
o de forma digital. En este tipo de documentos ya aporta una visión de su enorme utilidad: “Axure RP
se incluye mayor nivel de detalle en los que ya se pone el poder del prototipado en manos de gerentes
pueden visualizar el contenido, las llamadas a la de productos, analistas de negocios y profesionales de
acción y la situación de cada uno de los elementos. la experiencia de usuario. Antes de escribir una sola
Los Wireframes son una herramienta de línea de código, las soluciones pueden ser prototipadas
comunicación transversal entre diferentes equipos: y validadas por las personas que mejor entienden su
diseño, producto y desarrollo, fundamentalmente. negocio, productos y clientes”.
Es la esquematización de la interfaz. A través de Axure RP es un software o programa informático
ellos se comprende y representa la interacción entre compatible tanto con el sistema operativo Windows de
humano y máquina y cómo debería de responder Microsoft como con macOS de Apple cuya principal
el sistema y cada uno de los elementos que lo utilidad es el diseño de sitemaps, wireframes y prototipos
componen. En ellos se deben incluir los elementos básicos o avanzados para proyectos de diseño UX.
que deberán facilitar la realización de las tareas de
usuario que son las que tienen que satisfacer los Entre las principales ventajas destaca:
objetivos del proyecto. Los Wireframes pueden ser
• En primer lugar, que se trata de una herramienta
clasificados según la herramienta con la que han
muy completa y, a la vez, fácil de utilizar. En función
sido realizados:
de los conocimientos y de la propia experiencia
- Wireframes en papel: no son lo mismo que los del diseñador, este podrá ir incorporando más
Sketches. Tienen un mayor nivel de detalle. Se y más funcionalidades que simularán todas las
realizan con plantillas de los dispositivos para los interacciones propuestas en su proyecto.
que están siendo diseñados y tienen una rejilla • Otra de sus enormes ventajas es la interactividad, pues al
base en la que se van posicionando los elementos tratarse de una herramienta de prototipado, va a simular
que lo conforman. Se usan sobre todo en el el comportamiento de las interfaces de usuario.
diseño colaborativo, donde participan diferentes • La tercera gran ventaja es que como Axure RP
roles dentro del diseño del producto digital. es HTML, los prototipos que se diseñan con ella
- Wireframes en digital: existen numerosas funcionan en cualquier navegador web /Safari,
herramientas para realizarlos como: Axure, Adobe Mozilla Firefox, Chrome, Opera…).
XD, Sketch, Omnigraffle, [Link], etc. • Axure RP cuenta con una amplia variedad de
- Wireframes en HTML: si el diseñador UX tiene widgets a partir de los cuales es posible diseñar
destreza y conocimientos suficientes en los una interfaz de usuario de manera sencilla, ágil y
lenguajes HTML y CSS, se pueden realizar rápida, ya sea para proyectos de páginas web, ya
sin ningún tipo de problema siempre que se sea para aplicaciones de dispositivos móviles.
mantenga la regla de un color, una forma y una • Además, permite generar documentos maestros
tipografía. Cabe recalcar que la herramienta Axure que más tarde el diseñador puede aplicar en las
RP8, permite realizar y exporta los wireframes en diferentes interfaces que diseñe.
HTML y CSS (figura 2).
En sus últimas versiones también ha incorporado y/o
mejorado funcionalidades. Por ejemplo, permite subir el
prototipo a un servidor para enviarlo al resto del equipo
de trabajo a los clientes, compartir y trabajar de forma
colaborativa, etc.
 Digital design | 5

Para solucionarlo, se debe tratar de utilizar librerías

que te permitan hacer una carga de página
condicional, evitando cargar recursos innecesarios
cuando la gente te visita desde móvil.

• Ojo con los tamaños de pantalla: se recomienda

diseñar con el patrón mobile-first para evitar tener
problemas de adaptación con las pantallas y evitar
sobrecargar la página de elementos inútiles. La gran
cantidad de dispositivos y pantallas que existen en
el mercado hace que se deba tener muy en cuenta
tamaños de contenido fluidos y no estáticos para
Figura 2.
evitar que haya usuarios que no vean bien nuestro
contenido.
• Evitar los efectos: algunos de los efectos que se
Es de pago, pero puede probarse gratis durante un mes usan en la web de escritorio no funcionarán en la
así que, no hay nada que perder. web responsive. Esto es vital, ya que si no se hace
una comprobación multi dispositivo-plataforma
Responsive puede que se encuentre que sorprendentemente
el tiempo por visita desde móvil es extrañamente
El diseño web responsive o adaptativo es una técnica de bajo.
diseño web que busca la correcta visualización de una
misma página en distintos dispositivos. Desde ordenadores Diseño de interacción
de escritorio a tablets y móviles.
El diseño de interacción es la rama de la TI que estudia,
Hoy en día se accede a sitios web desde todo tipo de planifica y aplica puntos de interactividad en sistemas
dispositivos; ordenador, tablet, smartphone, entre otros, por digitales y físicos. También conocido como Interaction
lo que, cada vez más, surge la necesidad de que la web se Design o IxD Design, tiene como objetivo optimizar la
adapte a los diferentes tamaños de estos (figura 3). relación entre el usuario y el producto (figura 4).
Con el diseño responsive se trata de redimensionar y El deseo de mejorar la experiencia del usuario al
colocar los elementos de la web de forma que se adapten interactuar con un determinado producto, con el fin de
al ancho de cada dispositivo permitiendo una correcta motivarlo a usarlo en mayor medida, es una preocupación
visualización y una mejor experiencia de usuario. Se de quienes crean y distribuyen contenidos, materiales y,
caracteriza porque los layouts (contenidos) e imágenes en general, productos en formatos digitales.
son fluidos y se usa código media-queries de CSS3.
Este objetivo originó algunas nuevas áreas de
El diseño responsive permite reducir el tiempo de conocimiento, como diseño de interacción y diseño
desarrollo, evita los contenidos duplicados, y aumenta la de experiencia. Muchas personas piensan que estas
viralidad de los contenidos, ya que permite compartirlos disciplinas son idénticas, ya que persiguen metas
de una forma mucho más rápida y natural. Se basa en similares, pero la realidad es que se diferencian en
proporcionar a todos los usuarios de una web los mismos ciertos puntos.
contenidos y una experiencia de usuario lo más similar
posible, frente a otras aproximaciones al desarrollo web La realidad es que diseño de interacción estudia aspectos
móvil como la creación de apps, el cambio de dominio o como la usabilidad, el diseño gráfico, la funcionalidad
webs servidas dinámicamente en función del dispositivo. y la legibilidad para ofrecer interactividad, con el fin de
atraer más atención de la gente por los productos, lo cual
En definitiva, el diseño web responsive se consolida es excelente en áreas como marketing y ventas.
como una de las mejores prácticas hoy en día en diseño
web. Aunque como todas, tiene sus pros y contras, la web Diseño de interacción es un área de TI, y también de
responsive es considerada hoy en día la mejor práctica diseño, responsable de estudiar, planificar y aplicar
posible en el diseño web. puntos de interactividad en sistemas digitales y físicos,
con el objetivo de optimizar la relación entre el usuario y
Algunos puntos que se deben tener muy en cuenta antes el producto.
de hacer la web responsive son:
La idea es que las personas tengan contacto con
• Carga de página: uno de los grandes problemas productos digitales de una manera simple, intuitiva
que se encontran cuando se hace una auditoría y objetiva. Para esto, el diseñador busca formas de
es que en los diseños responsive no se diferencia predecir cómo las personas interactuarán con el sistema
a nivel de servidor la carga de elementos. Esto es al que le está dando “forma”.
un gran problema en la carga de página, ya que al
hacer la web responsive se cargan exactamente los
mismos recursos que para tu web de escritorio.
 Digital design | 6

Figura 3. Figura 4.

Si bien es un área relativamente nueva, aquellos De hecho, se utilizan para definir los conceptos que
que desean invertir profesionalmente en diseño de deben insertarse en el diseño del proyecto y no para
interacción necesitan conocer varios campos de estudio, mostrar cómo se verá el diseño final.
que van desde el conocimiento en diseño y programación
hasta el procesamiento de datos. Los mockups son versiones más realistas del proyecto.
Es una foto o imagen de cómo se verá el proyecto una
Para ello, la interactividad, que es la principal vez que esté listo.
preocupación del diseño de interacción, debe hacerse
de una manera que deje en claro al usuario lo que debe En cuanto a los prototipos, tienen el mismo objetivo que
hacer. los mockups, con la diferencia de que son una versión de
prueba del proyecto, en el que puede haber interacciones.
Y dado que esto implica estudiar la experiencia de las
personas con el sistema, es común relacionar esta área Sin embargo, en este caso no hay compromiso con la
con el Diseño de Experiencia o User Experience Design. verdad, es decir, los datos utilizados no son reales. Al
contrario, la idea es probar los límites del proyecto.
La relación entre estos dos campos no es exactamente
clara, sobre todo porque son áreas nuevas y están Los mayores beneficios de invertir en diseño de
comúnmente involucradas. interacción están en los atributos que aporta al proyecto.
En otras palabras, un diseñador de interacción garantiza
Algunos expertos afirman que son iguales, mientras un proyecto hermoso, fácil de usar, útil y efectivo.
que otros aseguran que Diseño de Interacción es una
subdivisión del diseño de la experiencia del usuario. Además, la adopción de IxD en un proyecto da como
resultado la mejor comunicación posible entre la interfaz,
Esto se debe a que la interacción del usuario con el la usabilidad y la idea del producto, lo que aumenta las
sistema también es responsabilidad del diseño de UX, posibilidades de que los usuarios se involucren.
pero también se ocupa de otras áreas, como el diseño
de información, que es responsable de diseñar cómo se Al tener un equipo o un profesional enfocado en brindar
debe almacenar y organizar la información generada en interactividad al usuario, es importante evitar crear
los sistemas. proyectos que, aunque efectivos, sean feos o difíciles de
entender para los clientes.
Entonces se puede decir que el diseño UX es un área de
estudio más amplia para entregar sistemas “utilizables”
a los usuarios. Resumen
En casos prácticos, hablando de grandes proyectos, El diseño digital se ha convertido en uno de los medios de
diseño de interacción es responsable de crear comunicación más poderoso e importante gracias a su
wireframes, maquetas o prototipos para sitios web, eficacia, pues vivimos en un mundo tecnológico que se
mientras que otros profesionales son responsables de basa en lo visual y en la multimedia y ambos conceptos
hacer una planificación general y crear la estructura, son la base del Diseño Digital.
como el Product Manager.
Con el diseño digital es posible lograr un alto nivel de
Los wireframes son una representación gráfica de la producción en vídeo, animación, desarrollar aplicaciones
disposición de los elementos en el sistema. Como es solo digitales interactivas e innovadoras en diferentes áreas
un borrador, no existe necesariamente un compromiso (web, Internet, cine, vídeo, animación, arte digital,
para que se vean como la versión final del producto. multimedia, entre otras).
 Digital design | 7

Bibliografía
1. Morris Mano, M. (2003). Diseño Digital. Pearson 3. Pérez, L. (2020). Guía del diseño de interacción.
Educación. Google.
2. Wakerly, JF. (2001). Diseño digital. Pearson 4. Aubry, Ch. (2014). HTML5 y CSS3: para sitios con
educación. diseño web responsive. Ediciones EN.