Sketchs, mockups, wireframes y prototipos

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

¿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

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.