 

Sketchs, mockups, wireframes y prototipos

Por Carlos Salgado
Publicado en Creación, Diseño, Interfaces
15 de setembre de 2015

16 comentarios · Artículos relacionados · Compartir

Introducción
El propósito de este artículo es estudiar las etapas del diseño de una web o una aplicación
informática y analizar cuál es el modo de proceder al acometer un proyecto, teniendo en cuenta
además el momento actual en el desarrollo de webs y aplicaciones informáticas en el que hay
multitud de dispositivos, algo que previsiblemente se acentuará en el futuro. Además, realizaremos
una introducción a las principales herramientas que un diseñador puede utilizar para mejorar la
calidad de su trabajo y de su productividad.

Antes de nada, vamos a ver qué es y que no es un sketch, un wireframe , un mockup y un prototipo,
conceptos sobre los que hay bastante confusión y no deben ser confundidos unos con otros y sobre
los que es complicado encontrar información precisa. Esta confusión es especialmente relevante
entre wireframe y mockup ya que muchos programas de ayuda en el diseño permiten hacer ambas
actividades en el mismo programa. No sólo hay diferencias conceptuales entre unos y otros, sino que
también hay que tener en cuenta pueden existir repercusiones económicas en un proyecto, ya que
utilizar uno u otro influye en la cantidad de horas de invertidas en el desarrollo/diseño y por tanto
incrementar los costes asociados.

Todos estos pasos son parte integral del proceso de diseño UX, y así a cada uno hay que darle la
debida atención

Antes de pasar a la fase de desarrollo de un sitio web o aplicación, conviene pasar por estas etapas
preliminares. Estas etapas también permiten al equipo de trabajo y, a veces, para grandes proyectos,
que algunos usuarios o los denominados beta-tester pongan a prueba la apariencia, estructura y
funcionalidad antes de su lanzamiento.

Lo ideal es que estas etapas preliminares permitan encontrar cualquier problema mientras está
todavía en fase inicial y afinar así su diseño, estructura o funcionalidad, para comunicar su mensaje
con más claridad.

Antes de continuar, hay que aclarar el significado de UX, aunque es algo conocido por los
diseñadores, no lo es tanto por las personas que se están iniciando en este sector.

Encontrar una definición consensuada para UX o experiencia de usuario (User experience ), un

concepto de tan reciente aparición en el campo del diseño no resulta fácil. Para Arhippainen y Tähti
la Experiencia del Usuario es sencillamente como la experiencia que obtiene el usuario cuando
interactúa con un producto en condiciones particulares. Sin embargo Knapp Bjerén la define como
“el conjunto de ideas, sensaciones y valoraciones del usuario resultado de la interacción con un
producto; es resultado de los objetivos del usuario, las variables culturales y el diseño del interfaz”.

Fases de desarrollo de un sitio web o aplicación

En el desarrollo de productos y/o aplicaciones, ya sean para la web , como otro tipo de aplicaciones
informáticas, hay una serie de fases que conviene seguir, aunque muchos profesionales, en función
del tipo de proyecto pueden obviar alguna o pueden hacer más o menos hincapié en alguna fase. De
forma general los pasos a seguir serán:

realización de un sketch
creación de un wireframe
un mockup
y finalmente realizar un prototipo
 Estos pasos nos ayudan a poner en orden nuestras ideas, explorar diferentes caminos de concepto o diseño y detectar
posibles errores o problemas.

¿Qué es un Sketch?
Pensemos en el Sketch como un primer boceto que realizamos para un proyecto digital que
queremos crear. Son nuestros primeros trazos sobre una hoja de papel.

Actualmente pasamos buena parte de nuestro tiempo frente a un monitor, sin embargo en medio de
esta era digital, los mejores aliados de un diseñador de páginas web o aplicaciones son herramientas
mucho más sencillas y comunes, nos referimos al lápiz y papel, una parte del proceso creativo que
otros diseñadores “no digitales” han estado utilizando desde siempre, dibujar.

La clave para los buenos bocetos es simplemente dejarse llevar, jugar con elementos del diseño como
la forma en que los menús podrían aparecer, o cómo hacer que aparezca una característica para una
parte en particular del contenido. Si hablamos con distintos diseñadores, la mayoría de ellos te dirán
que una parte enorme de su flujo de trabajo es esbozar en primer lugar cualquier idea que puedan
tener. Este proceso no tiene un trabajo conceptual muy extenso, prima la creatividad, la experiencia
y el deseo del diseñador.
El Sketch tiene que reflejar las ideas generales sobre el proyecto, debe de responder entre otras
cuestiones a :

Donde pondremos los elementos más característicos como logos, etc.

Dónde estará la zona de navegación
Dónde se cargan los sistemas de ayuda para usuarios
Se agregarán servicios de redes sociales
Qué áreas de contenidos y que servicio queremos presentar en el proyecto

Ejemplo de sketch.
Algunos consejos a la hora de crear un sketch
Coge un lápiz y papel y empieza a jugar con ideas y bocetos. El objetivo principal del dibujo es
conseguir ideas de trabajo y explorar cualquier propuesta que creas pueda llegar a más. Lo mejor que
puedes hacer con el dibujo es experimentar, no importa cometer un error, o que algo no se vea bien,
estamos en un momento inicial y no tenemos que tener miedo de descartarlo y pasar al siguiente
boceto. Realmente, cuanto más tiempo pasemos jugando con las ideas y viendo cómo se pueden
mejorar, o si deben de ser mejoradas, comenzaremos a ver lo que hace que una buena idea lo sea.

Una de las mejores cosas que se puede hacer con un dibujo es documentar y escribir sobre lo que
hemos hecho. Esto es tan fácil como escribir en los laterales pequeños comentarios con un poco de
información acerca de lo que hemos hecho.

Piensa que quizás una idea que hemos descartado para un proyecto en concreto, puede servirnos
para otro proyecto y estas anotaciones nos vendrán muy bien. Incluso es posible que estemos varios
días trabajando sobre una idea, esto también nos resultara útil para recordar porque añadimos algún
elemento en un sketch.

Wireframe
El siguiente paso desde el punto de vista del diseño gráfico y arquitectura de información en un
proyecto digital es la creación de los wireframe apoyándonos en el sketch que hemos dibujado.

¿Qué es un Wireframe?

Wireframe es una palabra inglesa que significa “alambre” lo cual ya nos da bastante pistas de a qué
nos estamos refiriendo, es por tanto; una ilustración bidimensional de la interfaz de una página o una
aplicación que se centra específicamente en la asignación de espacio y priorización del contenido, las
funcionalidades disponibles, y los comportamientos deseados. Por estas razones, los wireframes
normalmente carecen de estilo tipográfico, color o aplicaciones gráficas, ya que su principal objetivo
reside en la funcionalidad, comportamiento y jerarquía de contenidos. En otras palabras, se centra en
“qué hace la pantalla, no cómo se ve”. Los wireframes también nos ayudan a establecer relaciones
entre las distintas plantillas de un sitio web o aplicación.

El wireframe conecta la estructura conceptual, o arquitectura de la información, con el diseño visual

de la web o aplicación. Ayudan a establecer la funcionalidad, y las relaciones entre las diferentes
plantillas de pantallas.

Es por tanto un paso importante en cualquier proceso de diseño de una pantalla. Mediante este
proceso podemos sobre todo definir la jerarquía de la información de nuestro diseño, por lo que
resulta más fácil planificar el diseño de acuerdo a cómo queremos que un usuario procese la
información.

Ejemplo de wireframe.

Los wireframes sirven para múltiples propósitos, ayudando a:

Dar prioridad a los contenidos determinando la cantidad de espacio que se va asignar a un

elemento dado y donde se encuentra ese elemento.
Conectar arquitectura de la información del sitio para su diseño visual, mostrando las conexiones
entre las páginas.
Clarificar los espacios y formas para la visualización de determinados tipos de información sobre la
interfaz de usuario.
Determinar la funcionalidad prevista en la interfaz, la cantidad de las funciones disponibles, o el
efecto de los distintos escenarios en la pantalla.

Algunos consejos a la hora de crear un Wireframe

Es importante tener en cuenta que los wireframes son guías de los principales elementos de
navegación y contenido de su página o aplicación y que el objetivo no es representar el diseño visual,
por tanto;

No utilizar colores. Se recomienda usar distintos tonos de grises si queremos hacer distinciones
entre distintos elementos.
No utilizar imágenes ni iconografía. Las imágenes distraen de la tarea para la que sirve un
wireframe, por ejemplo, para indicar dónde se va a colocar una imagen y su tamaño, se suele poner
 una caja con una cruz que lo cruce con el tamaño y la posición donde queremos situar la imagen
Utilizar sólo una tipografía genérica, aunque se puede jugar con distintos tamaños para indicar
diversas cabeceras y los cambios en la jerarquía de la información de los textos de la página.
Aunque wireframes difieren de unos a otros, los siguientes elementos suelen ser habituales cuando
estamos creando un wireframe para una página web.
Logo
Campo de búsqueda
Cabeceras, incluyendo título de la página como el H1 y H2, subtítulos…
Los sistemas de navegación, incluyendo navegación global y navegación local
Contenido del cuerpo
Botones de compartir
Información de contacto
Pie de página

Wireframe y rejillas

En el contexto del diseño gráfico una retícula, grilla o rejilla es un instrumento para ordenar los
elementos gráficos como el texto y las imágenes.

Aunque a primera vista se puede pensar que diseñar con rejillas limita la creatividad esto no es así. El
maquetado mediante grids, “rejillas” es una técnica que nos puede ayudar y puede reducir
considerablemente nuestro trabajo, sí que es verdad que las primeras veces nos pueden costar un
poco entender las razones para usarlo, pero una vez que nos acostumbremos a manejarlo, el flujo de
trabajo será mucho más rápido.

Una rejilla se desarrolla a partir del tamaño de la página o de nuestro diseño, su función es subdividir
el espacio en campos e intervalos, y su objetivo es mantener una colocación correcta de los elemento
dentro de la página, dando una sensación de estructura ordenada.

En el diseño editorial, por ejemplo, la medida de la retícula se establecerá a partir de las variables
tipográficas: la familia, la fuente, el cuerpo, la medida de línea y la interlínea, sin embargo en el
diseño de páginas web o aplicaciones que se van a visualizar en un monitor es habitual usar el
número mágico de 960px . Matemáticamente es muy simple, 960 es divisible por 1, 2, 3, 4, 5, 6 y 12
permitiendo que tengas múltiples configuraciones y números de columnas en tus diseños.
 Ejemplo de wireframe con reticula o grid.

En el diseño de páginas web el uso de la rejilla de 960px con 12 columnas se ha popularizado tanto
que algunos de los más importantes frameworks de desarrollo de páginas web responsive como son
Twitter Bootstrap o 960 GRID system usan esta configuración de columnas y en muchos de los
programas para crear wireframes encontrareis la opción para poder diseñar con este tipo de rejillas.

Imagen de una rejilla 960px con las opciones y tamaños de diseño en columnas.

Diseño con Cajas

Como hemos visto, los wireframes tienen entre otras , la función de estructurar y jerarquizar los
contenidos. Pensemos entonces en el orden de la información que nos gustaría presentar a los
visitantes, de arriba abajo es lo más fácil, y en segundo lugar de izquierda a derecha. Además, en el
caso de las páginas web, una estructura básica muy común es dividir la página en tres zonas,
cabecera, cuerpo, y pie.

Diseño por bloques o cajas.

Un ejemplo de una portada de una página web que nos podemos encontrar de forma habitual podría
ser la siguiente

Habitualmente vamos a usar esta estructura básica de cabecera, cuerpo y pie, aunque muchas veces
podemos ser creativos con el diseño, dependiendo de nuestro objetivo y de aquello que estemos
diseñando, y mantener la jerarquía de la información en la mente.
Otro ejemplo , con múltiples contenedores para distintos tipos de contenidos como publicidad, distintos servicios, etc.
perfectamente ordenados.
 Otro ejemplo , con múltiples contenedores para distintos tipos de contenidos como publicidad, distintos servicios, etc.
perfectamente ordenados.

Definir la información de la jerarquía con la tipografía

Cuando ya tenemos definida la estructura con nuestras cajas perfectamente posicionadas, tenemos
que ver si tenemos correctamente estructurada la información. La regla básica que debemos que
tener en cuenta es que la información que se desea ofrecer al público tiene que ser clara, incluso en
una estructura metálica en blanco y negro.

Utilizando diferentes tamaños de fuente, negritas, y/o subrayados resulta una buena fórmula para
diferenciar entre los diferentes niveles de información.

Como en otras ocasiones, no debemos de tener miedo de experimentar en esta etapa, a veces, a medida que llenamos
con más detalles, podemos darnos cuenta de que la disposición original no está funcionando bien, y deberemos
realizar los cambios necesarios para encontrar la mejor forma de representar la información que estamos tratando de
comunicar.

wireframes y web responsive.

Como consecuencia de a la proliferación de smartphones y tablets en el mercado actual, existe más

diversidad que nunca de formatos de pantalla, por lo que cada vez más, nos surge la necesidad de
que nuestra web, o aplicación se adapte a los diferentes tamaños de los mismos.

El diseño web responsive o adaptativo es una técnica de diseño web que busca la correcta
visualización de una misma página en distintos dispositivos. Desde ordenadores de escritorio a
tablets y móviles. Se trata de redimensionar y colocar los elementos de la web de forma que se
adapten al ancho de cada dispositivo permitiendo una correcta visualización y una mejor experiencia
para el usuario.

Ahora tenemos que diseñar y pensar responsive. Nuestros diseños, nuestras páginas o aplicaciones
tienen que encajar correctamente en el dispositivo que esté usando el usuario.

Además, las estadísticas sobre la navegación móvil, indican que pronto tendrán acceso a la web y a
las distintas aplicaciones más personas desde el móvil que desde un ordenador por lo que tenemos
que pensar desde el principio en esto para cualquier nuevo sitio que diseñemos.

Esto presenta un nuevo reto. Si vamos a crear lo wireframes de los diseños de nuestras aplicaciones,
entonces tenemos que pensar y, por tanto, crear los wireframes de forma polimórfica, es decir,
sabiendo que va a cambiar la forma en diferentes situaciones.

Por ejemplo, cuando creamos un diseño de una aplicación con ancho fijo-escritorio (ordenador con
pantalla convencional) si lo entregamos a un desarrollador para crear la interface o el HTML / CSS si
es una web, estamos pidiendo a los desarrolladores que tomen un montón de decisiones,
posiblemente de diseño sin que ellos siquiera se den cuenta.

¿Cómo debe ajustarse el diseño para los dispositivos de menor tamaño? ¿cuál va a ser la jerarquía de
los elementos de la página?¿cuales son más importantes en función de su objetivo?¿Y cuál es la
jerarquía de los contenidos?¿Cómo funciona la navegación en pantallas más pequeñas?¿Cómo
manejo el menú con un dispositivo de 320 × 480 táctil ?

Al considerar y añadir elementos para lo que es básicamente el modelo para nuestro diseño, tenemos
que asegurarnos de que todo puede transformarse de forma visualmente agradable a las resoluciones
más altas y/o más bajas. Cambiando el diseño como sea necesario, haciendo uso de resoluciones más
amplias con más eficacia y, posiblemente utilizando la omisión de algunos de los contenidos a
resoluciones más bajas (un último recurso, por supuesto).

El diseño responsive permite reducir el tiempo de desarrollo, evita los contenidos duplicados, y
aumenta la viralidad de los contenidos ya que permite compartirlos de una forma mucho más rápida
y natural.

Muchos autores apuntan a que para crear un wireframe responsive conviene empezar por los
“anchos estrechos” o “móvil primero” para garantizar que podemos servir nuestro contenido al
mínimo común denominador y ampliar este progresivamente a medida que se disponga de más
resolución para trabajar con las pantallas más amplias, aunque sobre esta forma de trabajar hay
detractores. Sin embargo la forma que parece más habitual es conocer cuál va a ser el publico objeto
de nuestra aplicación y qué tipo de dispositivos se van a usar mayoritariamente, para después
adaptar nuestro diseño al resto de tamaños.

A partir de ahora tenemos que deconstruir mentalmente nuestra aplicación a la hora de crear
nuestros wireframes, dividiéndolo mentalmente en columnas y elementos. No sólo puede existir una
columna al lado de otra, sino que también un elemento por encima o por debajo dependiendo del
ancho del dispositivo. Debemos cambiar muchos de los estándares comúnmente aplicados en el
diseño de aplicaciones para ordenadores , por ejemplo en una página web para móvil, en realidad
sólo hay 2 zonas importantes, el encabezado y el pie de página, los cuales tendrán que llevar las
opciones de navegación más importantes.

Por naturaleza, un enfoque de móvil de tamaño es estrecho y tiene más fuerza el diseño en una sola
columna. La columna única, a su vez, provoca una visualización lineal de los contenidos y
características..

A la hora de crear nuestros wireframes, como hemos visto anteriormente, el uso de rejillas, junto con
el diseño con columnas, nos va a facilitar a la hora de diseñar para lograr que nuestra aplicación sea
responsive.
 Se trata de proporcionar a todos los usuarios de una web o una aplicación los mismos contenidos y una experiencia
de usuario lo más similar posible independientemente del tamaño de la pantalla del dispositivo que utilice.

Herramientas para crear wireframes

Existen multitud de herramientas gratuitas o de pago para realizar wireframes, muchas de ellas
además permiten realizar también MockUps, en esta sección vamos a incluir las más interesantes,
aunque las que permiten ambas funciones las veremos en la siguiente parte.

Gliffi Programa de dibujo online que tiene una utilidad para hacer wireframes, tiene una ventaja y
es que permite el trabajo colaborativo online y además hace posible también realizar esquemas
para crear los mapas web
Cacoo es una herramienta de dibujo en línea fácil de usar que te permite crear una variedad de
diagramas, como mapas de sitio, wireframes y gráficos de la red.
Mockingbird También es un software basado en web para crear, y compartir wireframes un sitio
web o una aplicación. Este software está más especifico para la creación de wireframes y permite
el uso de rejillas de 960px
Lumzy También basado en edición web, tiene la posibilidad de cargar librerías, además permite
crear acciones para botones y algunos otros elementos.
Framebox Se trata también de una herramienta web muy sencilla
RWD Wireframes Interesante herramienta que permite hacer wireframes sencillos pudiendo
trabajar con ellos para crear web responsive

Como es obvio, también podemos usar cualquier programa de dibujo, ya sea vectorial como
Ilustrador o Inkscape, o programas más orientados al retoque de imágenes como Photoshop o
Fireworks. En el caso de este tipo de programas podemos encontrar múltiples plantillas que
podremos importar con estos programas y que nos servirán de ayuda (ver herramientas para realizar
MockUps)

MockUp
Algunos diseñadores sostienen la opinión de que los MockUp no son necesarios, pero son
extremadamente útiles a la hora de explorar las decisiones de diseño visual antes de comenzar con la
etapa de desarrollo del código.

¿Qué es un MockUp?
El Mockup o maqueta en castellano es una representación más avanzada del diseño gráfico y
comunicativo (desde una visión de navegación y AI) de un proyecto. Hay dos escuelas de
pensamiento que se diferencian en como conciben la forma de crear un MockUp, aquellos que creen
que la maqueta debe representar el producto final exactamente (alta fidelidad), y aquellos que ven la
fase de maqueta como más transitorio y no debe tomar demasiado tiempo (media fidelidad).

Podríamos decir que generalmente es, una composición gráfica completa que ha utilizado el
wireframe como plantilla introduciendo todos los elementos gráficos y visuales, convirtiéndose así en
un modelo a escala de un producto que se utiliza para demostrar y probar un diseño. El mockup es
un medio de representación de la apariencia del producto, y muestra los fundamentos de su
funcionalidad. Los MockUp incluyen los detalles visuales, tales como colores, tipografía, etc., y son
generalmente estáticas. Al observar un mockup, se debe tener una buena idea de cómo se verá el
producto final y una idea aproximada de cómo podría funcionar (incluso si las funciones aún no se
han desarrollado).

Es importante distinguir un Mockup de un prototipo. Un prototipo está destinado a funcionar,

aunque sea parcialmente, mientras que los Mockup no funcionan. Se componen de las imágenes en
pantallas estáticas, sólo “parecen” la interfaz de usuario real.

Se integran elementos con mayor detalle, visualizamos una aproximación de:

Contenidos (pueden ser imágenes y textos genéricos que no van a ser finalmente usados en el
desarrollo)
Paleta de colores, tomando como referente lo institucional, misional y el público objetivo del
proyecto
Declaraciones CSS
Dimensiones de áreas de contenido y servicios
Iconografía
 El mockup incluye los elementos del sketch y el wireframe, cada uno es una evolución del anterior.

Cuando presentamos un diseño para el cliente, es necesario tener un Mockup lo más parecido
posible al producto final. Los MockUps también se crean para mostrar a nuestro cliente el aspecto
general de su nueva página web o programa y es una gran manera de presentar nuestro diseño para
que lo apruebe nuestro cliente. Podríamos resumirlo en; “Los MockUp impresionan, dan un aspecto
más profesional y venden”.

Por otro lado, pensemos además, que cuando más claro lo vea el cliente, menos quebraderos de
cabeza tendremos posteriormente con cambios en la fase de producción con posibles
modificaciones. En este momento aun podemos realizar ajustes y mejoras con relativo poco esfuerzo,
por todo ello es importante dedicarle el tiempo y la energía necesaria para su creación.

Un MockUp;

Permite saber qué información existe y donde va;Sabremos donde va la información antes de
empezar a escribir el análisis funcional.
Puede ser utilizado para la implementación del diseño;Lo que significa que es posible probar su
concepto de diseño y tendencia antes de que escribamos una sola línea de código. Los cambios en
el concepto de diseño son fáciles y económicamente más bajos en este paso que si lo hacemos
posteriormente.
Es más preciso para los desarrolladores. El desarrollador puede ver cómo debe de ser el producto
final, lo que significa que el MockUp de alta fidelidad puede servir como una hoja de
especificaciones visual.
 Es una herramienta flexible; Hacer cambios, eliminar o incluso añadir más espacios con nuestras
ideas y conceptos es posible más fácilmente
Es más fácil de presentar a los no diseñadores. Los clientes y partes interesadas prefieren un
MockUp de alta fidelidad porque lo que ven es lo que obtendrá.
Puede servir como parte de nuestra propuesta de presupuesto.Si se trata de un gran cliente, y el
trabajo puede resultar lucrativo, de prestigio, o interesante por otras razones, entonces quizás nos
puede compensar invertir un tiempo extra y realizar un mockup para presentar junto con el
presupuesto como valor añadido para lograr el proyecto. Es importante en este caso que el cliente
firme un acuerdo por el cual se compromete a no usar todo o en parte nuestro concepto o diseño
sin pagar por ello. No vayamos a pecar de ingenuos y luego llevarnos una sorpresa.

Hemos dedicado bastante tiempo para hablar de beneficios de los mockup para presentar el diseño al
cliente y a la importancia que tiene para las ver las relaciones visuales.

Pero hay una tercera cuestión, no menos significativa, por lo que el uso de los mockups es
importante, y es que nos ayuda a elaborar el libro de estilo. Tiene su sentido si se piensa en ello, el
MockUp es el documento visual del estilo del producto, por ello podemos usar muchos elementos y
crear una guía de estilo rápido.

Una guía de estilo es simplemente una recopilación formal de la apariencia de su sitio para que los
diseñadores y desarrolladores tengan una guía de referencia rápida y que resalta los puntos más
relevantes de nuestro diseño.

Las guías de estilo contienen información de cuál es la norma del diseño, tamaños de márgenes, las
fuentes que usamos, sus tamaños dependiendo de su posición, fondos. Debido a que estas son
opciones que generalmente incluimos mientras creamos el mockup, la relación entre ambos es fácil
de contrastar.

Algunas cosas que debemos de tener en cuenta.

Hay algunos errores que se pueden cometer cuando realizamos un diseño y que al crear nuestro
mockup debemos de tener en cuenta;

Demasiados efectos y detalles: Quizás el error más común, hay que tener en cuenta los detalles
que no agreguen valor al diseño y evitarlos, o los detalles que pueden hacer que el código sea luego
realmente difícil de crear. Un borde redondeado puede tener cierta dificultad para crearlo
mediante CSS en una web, pero si además hay un gradiente de color, o una transparencia mezclada
con otros elementos pueden hacer que la fase de desarrollo se complique innecesariamente y
aumentar los costes .
No usar rejillas y no alinear correctamente los elementos: Como comentábamos en el apartado de
wireframes, el uso de las rejillas es una de las mejores prácticas que debemos Nuestra aplicación se
verá equilibrada y el usuario no se perderá con la vista con un montón de elementos “flotando” en
 la pantalla. SI hemos creado nuestro wireframe y apoyamos nuestros MockUp en él, no deberíamos
tener problemas.
Si estás realizando una web, no realizar una maqueta para web responsive. Debemos de tener en
cuenta, como vimos en la creación de wireframes responsive, que nuestro diseño debe de ajustarse
a los distintos tamaños de pantalla, por tanto, deberemos de realizar los MockUps necesarios para
representar los distintos diseños de pantalla.
No usar un esquema de color: Uno de los aspectos más difíciles del diseño para muchos
diseñadores, es la selección del color. El esquema de colores de un sitio web o aplicación tiene un
gran impacto en el aspecto general de la aplicación y por tanto tendrá también un gran impacto en
el usuario. Hay una serie de herramientas que nos pueden ayudar a encontrar la combinación de
colores adecuada para un determinado proyecto, muchos de estos recursos los podemos
encontrar de forma gratuita en internet.

Vamos a enumerar algunas de ellas:

Kuler
Color Scheme Designer
Colour Lovers
Pictaculous
Color Spire
Daily Color Scheme
Instant Color Schemes
Color Explorer
Color Rotat
Toucan
Colour Grab
Color Jack

El cliente no entiende el concepto de diseño en los primeros momentos: Si el cliente no puede

entender el concepto de diseño en un par de segundos, es probable que tengamos un problema.
Un diseño demasiado innovador o que rompe con muchos de “cánones” habituales en las
costumbres de los usuarios a la hora de usar el tipo de aplicación que estemos desarrollando,
puede resultar muy creativo, pero quizás poco funcional
Resulta difícil de leer: Tenemos que asegurarnos de utilizar un contraste alto entre los fondos y las
tipografías para facilitar la lectura de los textos. Por lo general, esto significa un color oscuro para
la tipografía sobre un fondo muy claro. También, tenemos que asegurarnos de que el tamaño de la
letra es adecuado.
Herramientas para realizar MockUps
Existen muchas herramientas que nos ayudan a crear nuestros MockUps, podemos usar cualquier
programa de dibujo, ya sea vectorial como Ilustrador o Inkscape, o programas más orientados al
retoque de imágenes como photoshop o fireworks. Uno de los más extendidos es Photoshop, para el
que existen gran cantidad de recursos y tutoriales. Además, existen otras herramientas
específicamente desarrolladas para el diseño de aplicaciones informáticas o web, que permiten
realizar usando una sola aplicación, todo el proceso, creación de wireframes, MockUps, y prototipos
que ampliaremos en la sección de herramientas para el prototípico.

Si queremos desarrollar nuestro MockUp mediante programas de dibujo vectorial o de retoque de

imágenes podemos encontrar múltiples plantillas o “Toolkits” (cajas de herramientas) llenos de
elementos para el diseño de la interfaz de usuario que pueden ahorrar mucho tiempo de creación de
nuevos gráficos y que podremos importar en estos programas. Estos kits vienen con botones
prefabricados, controles de navegación, patrones de diseño de interfaz de usuario, y otros elementos
de interfaz de usuario que nos simplificaran el proceso. La combinación adecuada de los kits de IU,
plantillas, fuentes y de otros elementos nos proporcionaran los materiales adecuados que
modificaremos según resulte necesario.
 Ejemplo de mockup.

Algunas webs donde podemos encontrar este tipo de recursos son:

Freebiesbug– excelente recurso de elementos de interfaz de usuario y kits gratuitos para

Photoshop e Ilustrador
com +de 60 MockUps gratuitos
La web com tiene una serie de interesantes recursos y consejos para esta herramienta.
En Uxpin.com podemos encontrar Kit de interfaz de usuarioy iOS 8 Kit de interfaz de
usuario (funciona para Photoshop y Sketch).
Línea 25– podemos encontrar una lista de los 35 sitios que ofrecen plantillas, patrones y kits de
interfaz de usuario para Photoshop
com Aunque es un recurso para la creación de wireframes, merece la pena tenerlo en cuenta si
vamos a usar una herramienta de este tipo
 com de la misma forma que el recurso anterior, en este caso nos proporcionan plantillas para
descargar que nos permiten crear rejillas para diseños 960×12 en Photoshop, ilustrador, etc.
I ♥ wireframes Página con multitud de recursos para wireframe y MockUps
Otras herramientas
https://placeit.net Web que te permite incluir la imagen de tu mockup en distintas pantallas,
móviles, tablets, etc., interesante para presentaciones

Prototipos
Mientras que los wireframes son un “esbozo” , los MockUps muestran la “sensación”, la textura del
diseño, es el prototipo el que da vida a la “experiencia” detrás “de la experiencia del usuario”.

¿Qué es un prototipo?

Un prototipo es un modelo (representación, demostración o simulación) fácilmente ampliable y

modificable de un sistema planificado, probablemente incluyendo su interfaz y su funcionalidad de
entradas y salidas.

El prototipo es una representación de alto detalle de un proyecto digital. En ella se puede identificar
y operar:

Sistemas de navegación
Paleta de colores aplicada
Iconografía
Experiencia de usuario
Servicios de ayuda, búsqueda, interacción.
Otros elementos del proyecto

La creación del prototipo debe llevarse a cabo cuando vamos a evaluar la interacción, y sirve para
definir aspectos que no quedan claramente reflejados en un boceto de papel o un wireframe no
navegable.

Los prototipos son navegables, por lo que sirven para testear elementos de interacción como estados
“encima” de botones, validación de formularios, iconos, o cualquier elemento con el que el usuario
interactúe. A través de la creación de prototipos, identificamos y solucionamos problemas UX como
pueden ser la transición desde la página principal a los resultados de búsqueda sin recargar al
usuario con demasiada información. Nos sirve como modelo del comportamiento del sistema que
puede ser usado para entenderlo completamente o ciertos aspectos de él y así clarificar los
requerimientos.
Durante la fase de creación de prototipos es cuando podemos fusionar nuestras metas conceptuales
con nuestra realidad práctica. Es cuando diseño visual y diseño de interacción entran en equilibrio.

Es una fase que puede obviarse en algunos proyectos (si vas a publicar un blog o una sencilla página
informativa, probablemente no necesites un prototipo), pero si resulta de gran utilidad en otros,
como apps, videojuegos, grandes webs, etc.

Uno de los posibles errores a la hora de lanzar un sistema online o aplicación es pensar sólo en el
diseño del modelo de negocio, el desarrollo del producto o las ventas. Antes de que nuestras
aplicaciones lleguen a manos de los clientes es importante que los hayamos probado. Invertir en
pruebas con usuarios mediante prototipos nos ayudará a ahorrar tiempo y costes y sobre todo a
conocer si el producto se adapta a las necesidades de los clientes. Es el paso previo al desarrollo y
presentación final del proyecto. Nos sirve para identificar, a partir de pruebas de usuario (beta-
tester), las dificultades del proyecto. Esto, en el caso de de la creación de aplicaciones, apps, startups
que estén comenzando su proyecto, o grandes webs , es una ventaja inestimable, ya que permite
refinar la interfaz en base a datos objetivos.

Ejemplo de prototipo.
Prototipos, UX, usabilidad y accesibilidad.
Cuando nos dedicamos al desarrollo web o de productos interactivos, vemos lo complicado que
resulta lograr crear una web o aplicación informática que cumpla los requisitos de UX, usabilidad y
accesibilidad, y que además sea agradable estéticamente al cliente final.

Según la definición ISO, la usabilidad es “la eficacia, la eficiencia y la satisfacción con la que los
usuarios alcanzan unos objetivos concretos en un entorno particular” (ISO 9241-11). Un concepto que
está ligado a la usabilidad es el de accesibilidad, el cual no se refiere a la facilidad de uso, sino a la
posibilidad de acceso. Para algunos clientes es además un requisito el que la aplicación debe de ser
“usable” por todos los usuarios potenciales, sin excluir a aquellos con limitaciones individuales. La
importancia de ambos términos dependerá de nuestro público objetivo, un diseño accesible implica
la necesidad de tener en cuenta otras características para hacerlo más universal y heterogéneo,
mientras que el diseño usable se centra más en unos usuarios concretos. Por otro lado, como
decíamos anteriormente, la experiencia de usuario (UX) es el conjunto de ideas, sensaciones y
valoraciones del usuario resultado de la interacción con un producto; es resultado de los objetivos
del usuario, las variables culturales y el diseño del interfaz. Intenta evocar una emoción en el usuario,
es decir, intenta que el uso de un determinado objeto o página web sea satisfactorio desde otros
puntos de vista más allá de lo utilitario: estética, diversión, identificación, etc.

Estos tres conceptos van muy ligados a la utilidad de crear un prototipo y la realización de pruebas
por beta-tester. El objetivo es conseguir la mayor cantidad de información posible de la interacción
entre el usuario y el prototipo. Su evaluación asegura que los productos sean fáciles de usar y se
ajusten a nuestro público. No hay que perder de vista que el producto será utilizado por personas,
individuos que probablemente no se parezcan a nosotros y no tengan el mismo gusto, pero quieren
que nuestro producto funcione. Gracias a las pruebas de usuario con prototipos, seremos capaces de
detectar problemas y solucionarlos antes del comienzo de la fase de producción, ahorrando así
bastantes problemas y costes que habría que de intentar solucionar cuando ya está creada toda la
programación, o cuando se ha lanzado ya el producto. Ahorra horas de desarrollo, ya que son
necesarias menos versiones de la aplicación.

En esta fase conviene tener muy en cuenta los 10 principios de diseño basados en el usuario, que
definió Jakob Nielsen en 1990 , que siguen siendo un referente importantísimo para evaluar la
usabilidad de un sitio web.

Algunos consejos a la hora de crear un prototipo

No hay una formula general que podamos aplicar a la hora de crear un prototipo, ya que este
dependerá de muchos factores, pero si hay algunas cosas que podemos tener en cuenta:

Cada sección de una web tiene un objetivo y este debe quedar claro al ver el prototipo.
 Dependiendo del tipo de prototipo, si es de una web, o de una aplicación multimedia, el prototipo
deberá ser más o menos completo, en una web sencilla puede tener solo las páginas más
importantes que sean distintas, y en otro tipo de aplicaciones es posible que debamos desarrollarlo
completamente.
Es conveniente que en la creación del prototipo participe también el equipo de diseño. Aunque se
puede considerar que es un trabajo más relacionado con los equipos de desarrollo, una buena
comunicación con el resto de personas implicadas en el producto puede solventar muchos
problemas durante la fase de creación del prototipo.
Diseñar a tamaño real, respetar el tamaño de las imágenes y contenidos e incluir la estructura de
navegación.

Herramientas para la creación de prototipos.

Existen múltiples formas de crear un prototipo, como comentábamos anteriormente, dependerá

mucho del tipo de aplicación que estemos realizando, podemos desde crear una aplicación
prácticamente funcional, usando HTML, CSS, etc. si por ejemplo estamos creando una web, o
también podemos usar alguna de las aplicaciones que existen en el mercado para realizar un
prototipo.

A continuación podéis ver una lista de alguna de las aplicaciones más usadas

Justinmind: Herramienta profesional para realizar un prototipo de sitios web, aplicaciones de

software y aplicaciones móviles. Puede trabajar con Windows o con Mac.
Axure RP: Es una herramienta de realización de prototipos profesional que permite
crear wireframes para hacer el pre-diseño de una página web así como MockUps. Disponible tanto
para plataforma Windows como Mac. Puedes dibujar tanto wireframes estáticos como interactivos
que simulan una experiencia de navegación del usuario real..
Balsamiq: Con ella puedes hacer prototipos interactivos de webs. Puedes usar esta herramienta
como un servicio web o bien descargarla en tu equipo.
Protoshare Está basado en web, y tiene soporte para twitter bootstrap, además permite hacer
simulaciones sobre distinto dispositivos
Jumpchart: es una aplicación de planificación de webs basadas en el navegador la cual posibilita
esbozar el contenido de la página web. Es posible crear wireframes tanto estático como
interactivos que simulan la navegación entre las páginas web de la maqueta.
FlairBuilder: herramienta web que te permite hacer bocetos de tus webs y de tus Apps para iPhone.
No tiene posibilidad de colaborar con otras personas ni tampoco es posible exportar
características.
iPlotz: Esta herramienta permite hacer maquetas navegables de sitios web y de aplicaciones. Lo
puedes descargar en tu ordenador (Windows/ Mac) o bien puedes usar el servicio vía web.
 MockFlow: Herramienta web muy sencilla de utilizar para diseñar sitios web y aplicaciones de
software.
Mockingbird: Se trata de un servicio web gratuito con el que se pueden hacen prototipos de
páginas web.
Si trabajas con el entorno de programación Eclipse, puedes usar también WireframeSketcher, que
se integra dentro del entorno a la perfección.
Quartz composer Herramienta de diseño que incluye Apple en su paquete de aplicaciones para
desarrolladores.
Origami Es una herramienta gratuita similar a Quartz creada por el equipo de Facebook, que usa
Quartz Composer.
io te permite crear fácilmente prototipos totalmente interactivos muy fiables que se ven y
funcionan exactamente igual que la aplicación, no requiere saber programar
Framerjstiene la ventaja de que te deja pasar del Photoshop a Framer. Coge las capas, las exporta y
te permite hacer interacciones usando javascript.
FLINTO Es como POP pero te permite hacer más cosas, y animaciones más complejas, tanto
paraiOS como Android.
Pixate Es más potente que FLINTO. Te permite animar independientemente cada parte de la
interfaz. También tiene plantillas para diferentes dispositivos a las que les puedes variar el tamaño.

Para finalizar

En último lugar, podemos decir que la razón por la que dividimos las tareas en Sketch, wireframes,
maquetas, y prototipos es porque cada uno tiene un propósito diferente. Los Sketch nos permiten
crear una idea inicial de forma muy rápida, realizar una “tormenta de ideas”. Con los wireframes, al
centrarnos sólo en la estructuración, somos capaces de crear una estructura sólida sin distraernos
por el momento con las imágenes de un MockUp o con la funcionalidad de un prototipo. Mientras
Sketch, wireframes y MockUps se inclinan más hacia la creatividad y son más abstractos, los
prototipos requieren llevar las ideas a la vida y son necesarios para hacer pruebas de usabilidad y UX.

Bibliografía y referencias
Web UI Design Best Practices UI Design From The Experts ,
The Ultimate Guide to Prototyping
The Guide to Mockups. Mockup. Types, Methods And Best Practices
Wireframing for responsive design
A Beginner’s Guide to Wireframing
 Sketching and Your Design Workflow
Sketching: How a Simple Pen and Paper Can Transform Your Web Designs
WebDev-il
Recopilación de Métodos de Usabilidad
Design Process In The Responsive Age
How to use mockups in the UX design process
Creating Your First Mockup
All About Grid Systems
How to Design a Mobile Responsive Website
The Power of Wireframes and Mockups
A Comprehensive Guide to Mockups in Web Design
Los principios heurísticos según Nielsen
Página oficial de Twitter Bootstrap http://getbootstrap.com
Página oficial de 960 GRID system http://960.gs
Arhippainen, L., Tähti, M. (2003). Empirical Evaluation of User Experience in Two Adaptative Mobile
Application Prototypes. Proceedings of the 2nd International Conference on Mobile and
Ubiquitous Multimedia, 10–12 December, 2003, Norrköping, Sweden. Disponible en:
http://www.ep.liu.se/ecp/011/007/ecp011007.pdf
Knapp Bjerén, A. (2003). La Experiencia del Usuario. En: Knapp Bjerén, A. (coord.). La Experiencia
del Usuario. Madrid: Anaya Multimedia, 2003, ISBN 84-415-1044-X.

Otras lecturas
smashingmagazine
Responsive Design with Mockups
Creating a Website Wireframe in Illustrator
How to wireframe two web layouts in Illustrator using 960.gs
10 Mockup gratuitos que debes conocer como diseñador
USABILIDAD Y EXPERIENCIA DE USUARIO, ¿SON LO MISMO?
Designing for a Responsive Web
16 Tools for Responsive Web Design: Part 1, Grids and Wireframe
https://www.uxpin.com/knowledge.html web en la que podéis encontrar algunos libros sobre esta
temática.
Cita recomendada: SALGADO, Carlos. Sketchs, mockups, wireframes y prototipos. Mosaic [en línea], septiembre
2015, no. 131. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n131.1524.

Etiquetas: diseño mockup prototipos Wireframe

Comparte este artículo



Artículos relacionados
La experiencia de usuario/a como elemento clave para la reflexión y el diseño
12 de març de 2024
La experiencia de usuario y usuaria como motor para crear diseños más emocionales, amables,
inclusivos y enriq...

Todo lo que una persona pueda imaginar, la inteligencia artificial podrá hacerlo realidad
30 de març de 2023
Las últimas técnicas de inteligencia artificial (IA) para tareas de generación de imágenes a partir de
descrip...

Entrevista con Luca Hugo Brucculeri

28 de novembre de 2022
Entrevista con Luca Hugo Brucculeri. Luca Hugo Brucculeri se define a sí mismo como un diseñador
efímero. Se d...

16 comentarios
Deja un comentario

Enrique