Hola

Taller.
Wireframe
o Maquetado de
Interfaces de
Usuario
IMITEMOS WIREFRAMES
¿QUÉ ES UN
WIREFRAME?
• Un wireframe es un boceto
donde se representa
visualmente, de una forma
muy sencilla y
esquemática la estructura
de una interfaz gráfica
según el tipo de dispositivo
o plataforma: web,
escritorio, móvil,
smartwatch, etc.
¿Para qué
funcionan?
• Compartir ideas de diseño sobre el
funcionamiento de una interfaz.
• Detectar y corregir problemas antes
de que se avance en el desarrollo
del software, al recibir
retroalimentación sobre la misma.
• Ayuda a resolver problemas básicos
relacionados con la usabilidad y
funcionalidades propuestas.
• Pueden ser creados a manos
(prototipo rápido), o con
herramientas digitales. Pueden
recrearse prototipos funcionales para
obtener más información sobre
funcionalidad y usabilidad de las
interfaces.
Asignación: Teoría base
I Parte:
• Para entender más sobre porqué empezamos entendiendo wireframes, lea el
siguiente artículo: https://www.lucidchart.com/pages/es/que-es-un-wireframe-
para-un-sitio-web
• El arte de diseñar interfaces conlleva práctica, y mucha atención a los detalles.
• Independientemente de si tienen que diseñar para web o para móvil, existen
elementos de diseño de interfaces que son comunes e independiente al tipo de
sistema: Título principal (logo), menús (principal, secundarios), enlaces, botones,
formularios, caja de búsqueda, contenido, imágenes, encabezados, etc.
• Al iniciar un diseño, debemos definir la ubicación de los elementos de diseño
antes mencionados. Podemos apoyarnos de plantillas de diseño, que ya vienen
“fabricadas” por terceros, o por la plataforma de diseño que estemos usando.
I Parte:
• Para ser un buen diseñador de UI (User interface) además de práctica, hay cierta información base que
se debe manejar (lamentablemente no podemos ver todo en este curso):
• Principios de diseño (p. ej. Principios de Gestalt, Principios de Donald Norman, 8 reglas de oro de Shneiderman,
Principios de Diseño de Tognazzinni)
• Patrones de diseño: Existen patrones de diseño de interfaces (https://blog.ida.cl/diseno/que-son-los-patrones-de-
diseno-en-interfaz-de-usuario/) que ayudan a elaborar más rápidamente una interfaz gráfica. Uds. pueden
encontrar mucha literatura sobre patrones de diseño para web y para móvil. Solamente deben validar que sean
patrones cuya funcionalidad esté probada
• Arquitectura de información (ayuda a organizar diseños en función de su estructura, flujo de información, menús,
navegación, etc.) – Se ve muy por encima en este curso, pero puedes aprender por tu cuenta.
• Diseño centrado en el usuario (lo veremos luego en el curso)
• Herramienta de diseño (usaremos Figma)
• Los patrones para web difieren un poco de los patrones para móviles puesto que los sistemas web no
tienen un propietario exclusivo, mientras que los sistemas móviles se comparten entre dos grandes
firmas: Google y Apple.
• Antes de empezar con un proyecto que conlleve el diseño de Interfaz de Usuario, se recomienda
dibujar o bosquejar, en papel la idea que se quiere desarrollar. Particularmente, ese bosquejo inicial
es muy importante cuando estamos trabajando en equipo, porque nos permite compartir y mejorar la
idea.
• Ud. puede crear prototipos de su interfaz de usuario completamente en papel, sin embargo al
momento de validar si un usuario la entendería o no, sería algo complicado .
• Existen herramientas digitales que permiten la creación de interfaces de usuario y además añaden
características que permiten aparentar que la interfaz funciona (prototipos funcionales). Ejemplo de
estas herramientas están: AdobeXD, Figma, Luccidchart, Mockflow, etc. Algunos de estos productos
tienen versiones gratuitas, como lo es FIGMA.
Asignación: Sesión Práctica
• Antes de realizar esta parte debe haber completado las lecturas de los
enlaces previos.
• II Parte: Familiarización de Herramienta de diseño
• Para esta sesión de familiarización vamos a imitar el diseño de una interfaz
usando FIGMA.
• Luego, aprenderemos rápidamente un poco sobre FIGMA a través del vídeo:
https://www.youtube.com/watch?v=7fps9ILAi-8
• Regístrese en la versión gratuita de FIGMA el cual permite la creación de 3
proyectos, suficiente para este curso.
• Defina el tamaño de su lienzo considerando el tamaño de una pantalla de
celular, y añada todos los elementos de diseño. Por ahora sólo tiene que crear
una pantalla, pero luego tendrá que crear varias y enlazarlas para crear un
prototipo funcional.
• Esta es una sesión abierta de aprendizaje. Puede apoyarse con otras fuentes y/o
sus compañeros.
Asignación:
Sesión
Práctica
• II Parte: Familiarización de
Herramienta de diseño
• Considere como base la
interfaz de twitter que se
presenta a continuación.
• Usando FIGMA:
• Cree un nuevo diseño
• Utilice el frame para Android
o iPhone.
• Utilice las formas o líneas de
la herramienta para
segmentar las partes de su
interfaz.
• Represente los íconos usando
los plugins de la herramienta.
Puede usar material design
icons,
• El texto puede generarlo con
el plugin “lorem ipsum”.
Resultado
esperado

Hola

Cargado por

Copyright:

Formatos disponibles

Hola

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Hola

Cargado por

Copyright:

Formatos disponibles

Taller.

También podría gustarte