UNIVERSIDAD JUÁREZ AUTÓNOMA

DE TABASCO

DIVISIÓN ACADEMICA DE
CIENCIAS Y TECNOLOGIAS DE LA INFORMACIÓN

LICENCIATURA
INGENIERIA EN SISTEMAS COMPUTACIONALES

DOCENTE
PROF. JULIO HUMBERTO GARCIA ALCOCER
ASIGNATURA
LABORATORIO DE APLICACIONES PARA
DISPOSITIVOS MÓVILES.

TRABAJO
WIREFRAME

ESTUDIANTE
MARCO ANTONIO ROMERO RODRÍGUEZ
172H17143

GRUPO
8A17

Contenido
Introducción..................................................................................................................................................................3

1
Contenido.......................................................................................................................................................................4
Wireframe......................................................................................................................................................................4
Concepto....................................................................................................................................................................4
Ventajas del wireframe............................................................................................................................................4
Ventajas y desventajas según el nivel de fidelidad.................................................................................................5
Wireframes de baja fidelidad..............................................................................................................................5
Wireframes de alta fidelidad...............................................................................................................................6
Tipos de wireframe...................................................................................................................................................6
Diferencias entre los wireframes de baja y alta fidelidad.....................................................................................7
Cómo se hace un wireframe, paso a paso...............................................................................................................8
Elementos estándar del Wireframe.........................................................................................................................9
Herramientas para crear wireframes...................................................................................................................10
Ejemplos de Wireframe..........................................................................................................................................13
Conclusión...................................................................................................................................................................15
Referencias..................................................................................................................................................................16

2
 Introducción

Wireframe es una de las etapas iniciales de la creación de un producto digital,

incluido el diseño estructural que tendrá cada pantalla o interfaz del producto.
En otras palabras, un wireframe es un boceto de cada pantalla de un sitio web
o aplicación. Pero uno no tiene colores, logotipos ni fuentes. Porque lo
importante en el wireframe no es el aspecto visual, sino el orden, qué tipo de
contenido aparecerá en cada bloque y la ubicación de cada botón.

Dicho lo anterior tenemos que tomar en cuenta varias etapas y el tipo de

proyecto que queremos hacer, puesto que cada proyecto es diferente,
debemos tomar alternativas disímiles, pues diferentes tipos de diseño pueden
adquirir nuestro proyecto dependiendo hacia que giro lo queremos llevar, que
colores usaremos o formato de letra introduciremos dentro de nuestro títulos,
siempre tenemos una idea en nuestra mentes pero como las plasmamos y la
tomamos como referencia es allí donde entran los wireframe, ya que es una
herramienta que nos ayudara a darle un diseño y un boceto de como ira
conformado nuestro sitio o app.

3
Contenido

Wireframe
Concepto
Un wireframe, también conocido como un esquema de página o plano de pantalla,
es una guía visual que representa la estructura esquelética de un sitio web. Los
wireframes se crean con el propósito de organizar los elementos para que estos
lleven a cabo mejor su propósito particular. El propósito generalmente es ser
informado por un objetivo de negocio y una idea creativa. El esquema de página
representa el diseño de la página o la disposición de los contenidos del sitio web,
incluyendo elementos de la interfaz y los sistemas de navegación y cómo
funcionan en conjunto.

Un wireframe es el esquema de lo que se ve en la pantalla de una web o una app.

Por ejemplo, si estás diseñando el home de un ecommerce para desktop
(escritorio), en el wireframe correspondiente dibujarías la caja donde iría la
cabecera, el menú, un bloque para productos destacados, otro para promociones y
una caja al final con los links a las redes sociales de la marca.

La clave de un buen wireframe es poner el foco en la estructura y jerarquía de los

elementos. De ahí que pueda diseñarse incluso a bolígrafo en la hoja de una libreta.
Imagina que fueras a amueblar un salón vacío. Primero decidirías dónde va el sofá
y dónde la tele y luego, una vez definida la distribución, sería el turno de elegir
esos muebles. Pues el wireframing es algo parecido. En primer lugar, se decide el
orden y el tipo de contenidos, y a continuación se definen las características
concretas de cada elemento.

Precisamente para centrarnos en la estructura, los wireframes suelen realizarse con

elementos lo más neutrales posibles. En blanco o negro o con diferentes
tonalidades de gris, sin imágenes ni textos de ejemplo, y también sin logo.

Ventajas del wireframe

A la hora de diseñar una web o app, es importante realizar un wireframing por
varias razones:
4
  El proceso gana en agilidad. Los wireframes son tan sencillos que se puede
diseñar la estructura de una web entera en muy poco tiempo.
 Se ahorran recursos, ya que estos prototipos iniciales evitan cambios cuando
el producto ya está en la fase de desarrollo.
 Al poner el foco en lo esencial, un wireframe contribuye a mejorar la
experiencia del cliente, puesto que es muy fácil detectar si la web o app
ofrece lo que el usuario está buscando, además de si es sencilla e intuitiva.
 Facilita el trabajo del resto del equipo que participa en la creación del
producto. Contenidos sabe qué textos e imágenes va a necesitar, SEO puede
determinar en qué elementos centrar la estrategia de posicionamiento, Visual
puede empezar a trabajar en las posibles creatividades… y, por supuesto, los
profesionales de Desarrollo cuentan con la plantilla inicial para empezar a
escribir el código que necesite la web o app.

Ventajas y desventajas según el nivel de fidelidad

Escoger el nivel de fidelidad de un wireframe por sobre otro, dependerá siempre de
lo que puedan aportar al prototipo. Estos son algunos de sus pro y contras más
comunes:

Wireframes de baja fidelidad

Ventajas

 Se utiliza un menor tiempo de trabajo.

 Carece de elementos distractores debido a su simpleza.
 Permite correcciones rápidas.

Desventajas

 No considera las particularidades de cada plantilla.

 Al ser genérico y carecer de detalles, requiere mayor imaginación del cliente
para comprender el prototipo.

5
Wireframes de alta fidelidad
Ventajas

 Permite un mayor detalle de interacción.

 Se acerca al contenido y esboza una estructura y funcionamiento realista.
 Al presentar mayor detalle, requiere menor imaginación del cliente para
comprender el prototipo.

Desventajas

 Requiere un mayor tiempo de trabajo debido a su complejidad.

 Puede confundir al cliente y desviar la atención hacia el diseño si se utilizan
elementos de color y/o imágenes.

Ambas opciones son útiles en distintos ámbitos y cumplen distintos objetivos, por
lo que no podemos indicar que una sea o no correcta.

Sin embargo, en IDA realizamos wireframes que se inclinan más hacia la alta
fidelidad, ya que consideramos que cierto grado de detalle es beneficioso a la hora
de desarrollar proyectos, ya sean simples o complejos, porque nos permite tener
control sobre las interacciones y funcionalidades, además de entregar al equipo y a
cliente un producto más realista y detallado.

Tipos de wireframe
A veces suelen confundirse los términos wireframe y mockup. Un wireframe
representa de forma esquemática la distribución de los elementos en la pantalla y la
navegación. Un mockup, por su parte, añade contenido a ese boceto: colores,
tipografías, imágenes, textos…

Sin embargo, que existan mockups, no significa que todos los wireframes sean
bocetos dibujados en una hoja de papel. En realidad, se distinguen dos tipos de
wireframes en función de quién los va a ver:

6
  Wireframes de baja fidelidad o prototipos low-fi, que se comparten solo
con el equipo de trabajo.
 Wireframes de alta fidelidad o prototipos hi-fi, que se trasladan al cliente
o incluso a los usuarios para que den feedback.

Diferencias entre los wireframes de baja y alta fidelidad

Cuando hablamos de wireframes de baja fidelidad nos referimos a una maqueta
bastante genérica, sin imágenes, sin contenido real y sin color, entre otros. Este
tipo de wireframes se aleja del detalle y es más cercano a ser una base sobre la cual
el diseño de interfaz se apropia de ciertas decisiones.

Un wireframe de baja fidelidad sirve muchas veces para proyectos sencillos, o

también como un esquema inicial de algo que evolucionará o en lo que se
profundizará.

Por otro lado, los wireframes de alta fidelidad son una herramienta bastante potente
para prototipar proyectos complejos, ya que permiten un mayor acercamiento al
resultado final. En ellos se utiliza contenido real -dentro de lo posible- y pueden
contener imágenes o color para especificar llamados a la acción y puntos de
decisión, íconos, y otros elementos que aporten detalles.

En este tipo de wireframes, la interacción y el contenido reinan por sobre la

simpleza, lo que permite entregar un trabajo más acabado que permitirá al cliente y
al equipo multidisciplinario, realizar correcciones conscientes y aterrizadas sobre
el proyecto.

7
Cómo se hace un wireframe, paso a paso
El primer paso para diseñar los wireframes de una web o app es conocer bien el
producto: qué valor aporta, quién es el cliente, cuál es el mínimo producto viable
(MVP) que puede ser lanzado, etc. Y quien más controla todos estos detalles es el
Digital Product Manager, responsable en muchas ocasiones, también, de coordinar
el equipo y los recursos.

Cuando las ideas están claras, es hora de ponerse a diseñar. Un wireframe puede
realizarse, como decíamos más arriba, a mano. Puede hacerse en un folio en blanco
o sobre una plantilla (puedes descargarlas de internet). Cuando todas las pantallas
están ya representadas con wireframes, se suelen colocar sobre una pared o tablero
para ver de un vistazo cómo se relacionan entre sí.

Para quienes prefieren diseñar los wireframes en un dispositivo digital, existen

numerosas soluciones de software. Desde programas específicos de prototipado
como Wireframe.cc, MockFlow o Axure, hasta paquetes de diseño como Adobe.
La clave está en seleccionar aquella que mejor se adapte a cada proyecto y las
skills del profesional que diseña.

Una vez validada la estructura y las funcionalidades de los distintos elementos, ya

sea con el resto del equipo, el Digital Product Manager o el cliente, es el momento
de pasar a la siguiente fase: diseñar el mockup. De nuevo, este será un prototipo
que hará el proceso más ágil, evitará gastos innecesarios y ayudará a que todo el
equipo esté coordinado.

A la hora de diseñar cualquier producto digital, el wireframing es una fase clave.

Y, por lo que has podido comprobar, ¡además es sencillo llevarla a cabo!

8
Elementos estándar del Wireframe
Un wireframe suele incluir los siguientes elementos estándar.

1. Logo
2. Barra de búsqueda
3. Breadcrumb o migas de pan
4. Encabezados, incluyendo el título de la página como H1 y los subtítulos H2-
Hx
5. Sistemas de navegación, incluyendo la navegación global y la navegación
local
6. Contenido del cuerpo
7. Botones de compartir
8. Información de contacto
9. Pie de página

9
Herramientas para crear wireframes

 Wireframes creados a mano

Es la forma más sencilla y económica de crear

wireframes. Solo necesitas papel y lápiz y un
poco de imaginación. No hace falta ser un
Picasso, ni siquiera parecerlo de lejos. Cualquiera
sabe dibujar cuatro líneas y dibujar un esquema
sencillo como el que hemos visto un poco más
arriba.

Puedes utilizar diferentes tamaños de papel para

representar los distintos dispositivos en los que se
verá la web y crear así diferentes estructuras para
planear un diseño responsive.

 Utilizar plantillas imprimibles para wireframes

La segunda opción, también barata y muy sencilla es imprimirse algunas

plantillas predeterminadas para crear los wireframes.

Hay multitud de ellas en la web. Por ejemplo:

https://www.flickr.com/photos/88005207@N00/3884016462/in/photostream/

10
  Utilizar un programa o aplicación

Por desgracia algunas de las mejores aplicaciones son de pago. Aunque no muy
caras y funcionan de maravilla. Podrás crear unos wireframes para tus páginas web
muy profesionales y son muy sencillos de usar. Para que te hagas una idea,
Balsamiq, por ejemplo, tiene aplicación para iPad, con lo que solo necesitarás una
pantalla táctil para crear prototipos de muy buena calidad.

Incluyen ademas infinidad de elementos predeterminados, con lo que crear un

elemento será tan fácil como arrastrarlo hasta su posición, seleccionar el tamaño y
editar los detalles si es necesario.

Mockflow

Mockflow es una aplicación para crear

wireframes en la nube. Sólo necesitas un
navegador y una cuenta para empezar a crear tus
prototipos. Tiene una versión gratuita, que,
aunque con limitaciones, te permitirá empezar a
sumergirte en el mundo del diseño de prototipos.
Sus versiones de pago empiezan desde 14$ al
mes, así que, si vas a utilizarla con frecuencia,
puede ser una buena opción.

11
Balsamiq Mockups

Balsamiq Mockups es otra gran aplicación

para crear tus wireframes o prototipos. Me
atrevería a decir que casi casi es la
aplicación por excelencia. Dispone de
versión de escritorio, para Windows y Mac
con un coste único de 89$, una versión
para tablets al mismo precio y una version
web como Mockflow a partir de 12$ al
mes.

12
Ejemplos de Wireframe
Aquí hay 2 ejemplos para referencia.

Esquema del sitio web

13
Wireframe de usuario de iPhone

14
 Conclusión

En conclusión, el wireframe, es un papel importante dentro del diseño de un

sitio web o una aplicación, ya que nos ayuda con la estructura, distribución,
definición de colores, tipografía, etc.
La usabilidad de nuestro proyecto dependerá siempre de como distribuíamos
los procesos del sitio y como se verán reflejados todos nuestros diseños
dentro de la funcionalidad que se le entrega al usuario, puesto que todos estos
antecedentes que incluimos dentro de nuestro wireframe es el que vera el
usuario final y el que disfrutara de este contenido, y el será el mismo que se
sentirá atraído por lo intuitivo que es el sitio o lo dejara por lo mal distribuido
que puede estar el sitio dentro de nuestro wireframe.

15
Referencias

Edrawsoft. (2021). Comprende los Wireframe - Características, elementos y tipos.

https://www.edrawsoft.com/es/understand-wireframe.html

Savoy, S. (2016, 14 marzo). Características de los wireframes de baja y alta fidelidad. Blog IDA

Chile | Estrategia para el éxito de tu negocio. https://blog.ida.cl/diseno/caracteristicas-de-

los-wireframes-de-baja-y-alta-fidelidad/

Unir, V. (2021, 7 enero). Qué es wireframing y qué características tienen estos prototipos.

UNIR. https://www.unir.net/ingenieria/revista/que-es-wireframing/

16