Sketchs, mockups, wireframes y prototipos

Back to top

1) Introducción

El propósito de este artículo es estudiar las etapas del diseño de una web o bien una aplicación informática y analizar cuál es el modo perfecto 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 primordiales herramientas que un diseñador puede usar para progresar la calidad de su trabajo y de su productividad.

Antes de nada, veremos 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 hallar información precisa. Esta confusión es singularmente relevante entre wireframe y mockup ya que muchos programas de ayuda en el diseño dejan hacer las dos actividades en exactamente el mismo programa. No sólo hay diferencias ideales entre unos y otros, sino también hay que tener en consideración pueden existir repercusiones económicas en un proyecto, puesto que usar uno u otro influye en la cantidad de horas de invertidas en el desarrollo/diseño y por tanto acrecentar 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 o bien aplicación, es conveniente 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 localizar cualquier problema mientras está todavía en fase inicial y afinar así su diseño, estructura o bien funcionalidad, para comunicar su mensaje con más claridad.

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

Encontrar una definición consensuada para UX o experiencia de usuario(Usuario 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 simplemente como la experiencia que consigue el usuario cuando interactúa con un producto en condiciones particulares. No obstante 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».

Back to top

2) Fases de desarrollo de un sitio o bien aplicación

En el desarrollo de productos y/o aplicaciones, ya sean para la página web , como otro tipo de aplicaciones informáticas, hay una serie de fases que resulta conveniente seguir, si bien muchos profesionales, en función del género 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 por último realizar un prototipo

Back to top

3) ¿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 en frente de un monitor, sin embargo en medio de esta era digital, los mejores aliados de un diseñador de páginas web o bien aplicaciones son herramientas mucho más fáciles y comunes, nos referimos al lápiz y papel, parte del proceso creativo que otros diseñadores «no digitales» han estado usando desde siempre y en todo momento, dibujar.

La clave para los buenos bocetos es sencillamente dejarse llevar, jugar con elementos del diseño como la manera en que los menús podrían aparecer, o bien cómo hacer que aparezca una característica para una parte en particular del contenido. Si hablamos con diferentes 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 inventiva, la experiencia y el deseo del diseñador.

El Sketch debe reflejar las ideas generales sobre el proyecto, debe de contestar entre otras cuestiones a :

• Donde vamos a poner 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

Back to top

4) 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 lograr ideas de trabajo y explorar cualquier propuesta que creas pueda llegar a más. Lo mejor que puedes hacer con el dibujo es probar, no importa cometer un error, o que algo no se vea bien, estamos en un momento inicial y no tenemos que tener temor de descartarlo y pasar al siguiente boceto. Verdaderamente, cuanto más tiempo pasemos jugando con las ideas y viendo cómo se pueden progresar, o si deben de ser mejoradas, comenzaremos a ver lo que hace que una gran idea lo sea.

Una de las mejores cosas que se puede hacer con un dibujo es documentar y redactar sobre lo que hemos hecho. Esto es tan fácil como escribir en los laterales pequeños comentarios con un tanto de información sobre 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 realmente bien. Aun es posible que estemos varios días trabajando sobre una idea, esto también nos resultara útil para rememorar porque añadimos algún elemento en un sketch.

Back to top

5) Wireframe

El siguiente paso desde la perspectiva 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 que 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 bien una aplicación que se centra específicamente en la asignación de espacio y priorización del contenido, las funcionalidades libres, y los comportamientos deseados. Por estas razones, los wireframes normalmente carecen de estilo tipográfico, color o aplicaciones gráficas, puesto que su principal objetivo radica 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 asisten a establecer relaciones entre las diferentes plantillas de un sitio o aplicación.

El wireframe conecta la estructura ideal, o bien arquitectura de la información, con el diseño visual de la página web o bien aplicación. Ayudan a establecer la funcionalidad, y las relaciones entre las distintas plantillas de pantallas.

Es por consiguiente 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, con 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 marcha asignar a un elemento dado y donde se halla ese elemento.
• Conectar arquitectura de la información del lugar para su diseño visual, mostrando las conexiones entre las páginas.
• Clarificar los espacios y formas para la visualización de ciertos tipos de información sobre la interfaz de usuario.
• Determinar la funcionalidad prevista en la interfaz, la cantidad de las funciones disponibles, o bien el efecto de los distintos escenarios en la pantalla.

5.1) Algunos consejos en el momento de crear un Wireframe

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

• No utilizar colores. Se aconseja emplear diferentes tonos de grises si queremos hacer distinciones entre diferentes elementos.
• No utilizar imágenes ni iconografía. Las imágenes distraen de la labor para la que sirve un wireframe, por ejemplo, para apuntar dónde se marcha a colocar una imagen y su tamaño, se acostumbra a poner una caja con una cruz que lo cruce con el tamaño y la posición donde deseamos situar la imagen
• Utilizar sólo una tipografía genérica, si bien se puede jugar con distintos tamaños para apuntar distintas 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 próximos elementos suelen ser habituales cuando creamos 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

• 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

5.2) Wireframe y rejillas

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

Aunque a primer aspecto se puede meditar que diseñar con rejillas limita la creatividad esto no es así. El maquetado a través de grids, «rejillas» es una técnica que nos puede asistir y puede reducir sensiblemente nuestro trabajo, sí que es verdad que las primeras veces nos pueden costar un poco comprender las razones para emplearlo, pero una vez que nos acostumbremos a manejarlo, el flujo de trabajo será mucho más rápido.

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

En el diseño editorial, por servirnos de un 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 frecuente utilizar el número mágico de 960px . Matemáticamente es muy simple, novecientos sesenta es divisible por 1, dos, tres, cuatro, 5, seis 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 reja de 960px con doce columnas se ha popularizado tanto que ciertos más importantes frameworks de desarrollo de páginas web adaptable como son Twitter Bootstrap o 960 GRID system emplean esta configuración de columnas y en muchos de los programas para crear wireframes encontrareis la opción para poder diseñar con este género de rejillas.

Back to top

6) 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 seguidamente 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 3 zonas, cabecera, cuerpo, y pie.

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

Habitualmente vamos a emplear esta estructura básica de cabecera, cuerpo y pie, aunque muy frecuentemente 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.

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

Cuando ya tenemos definida la estructura con nuestras cajas de forma perfecta posicionadas, debemos ver si tenemos adecuadamente estructurada la información. La regla básica que debemos que tomar en consideración es que la información que se quiere ofrecer al público debe ser clara, aun 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 distinguir entre los diferentes niveles de información.

6.2) wireframes y web responsive.

Como consecuencia de a la proliferación de móviles y tablets en el mercado actual, existe más diversidad que nunca de formatos de pantalla, con lo que cada vez más, nos surge la necesidad de que nuestra página web, o aplicación se adapte a los diferentes tamaños de los mismos.

El diseño web responsive o bien adaptativo es una técnica de diseño web que busca la adecuada visualización de una misma página en diferentes dispositivos. Desde ordenadores de escritorio a tablets y móviles. Se trata de redimensionar y poner los elementos de la página web de forma que se amolden al ancho de cada dispositivo permitiendo una adecuada 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 apropiadamente en el dispositivo que esté utilizando el usuario.

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

Esto presenta un nuevo reto. Si crearemos lo wireframes de los diseños de nuestras aplicaciones, entonces debemos pensar y, en consecuencia, crear los wireframes de forma polimórfica, esto es, a sabiendas de 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, pedimos a los desarrolladores que tomen un montón de resoluciones, probablemente de diseño sin que 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 marcha la navegación en pantallas más pequeñas?¿Cómo manejo el menú con un dispositivo de 320 × 480 táctil ?

Al estimar y añadir elementos para lo que es básicamente el modelo para nuestro diseño, debemos 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, usando resoluciones más extensas con más eficacia y, probablemente utilizando la omisión de algunos de los contenidos a resoluciones más bajas (un último recurso, naturalmente).

El diseño adaptable deja reducir el tiempo de desarrollo, evita los contenidos duplicados, y aumenta la viralidad de los contenidos en tanto que deja compartirlos de una manera mucho más rápida y natural.

Muchos autores apuntan a que para crear un wireframe responsive conviene comenzar por los «anchos estrechos» o «móvil primero» para asegurar 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 opositores. Sin embargo la manera 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 utilizar 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 a la vera de otra, sino que también un factor por encima o por debajo dependiendo del ancho del dispositivo. Debemos mudar muchos de los estándares comúnmente aplicados en el diseño de aplicaciones para ordenadores , por poner un ejemplo en una página web para móvil, en realidad sólo hay 2 zonas esenciales, el encabezado y el pie de página, los que tendrán que llevar las opciones de navegación más esenciales.

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

A la hora de crear nuestros wireframes, como hemos visto previamente, el uso de rejas, junto con el diseño con columnas, nos va a facilitar a la hora de diseñar para lograr que nuestra aplicación sea adaptable.

Back to top

7) Herramientas para crear wireframes

Existen multitud de herramientas gratis o de pago para efectuar wireframes, muchas de ellas además dejan realizar también MockUps, en esta sección vamos a incluir las más interesantes, si bien las que dejan las dos funciones las veremos en la siguiente parte.

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

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

Back to top

8) MockUp

Algunos diseñadores sostienen la opinión de que los MockUp no son precisos, pero son extremadamente útiles en el momento de explorar las resoluciones de diseño visual ya antes de empezar con la etapa de desarrollo del código.

8.1) ¿Qué es un MockUp?

El Mockup o bien maqueta en español es una representación más avanzada del diseño gráfico y sociable (desde una visión de navegación y AI) de un proyecto. Hay 2 escuelas de pensamiento que se diferencian en como conciben la forma de crear un MockUp, aquellos que piensan 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 lealtad).

Podríamos decir que normalmente es, una composición gráfica completa que ha usado el wireframe como plantilla introduciendo todos y cada uno de los elementos gráficos y visuales, convirtiéndose así en un modelo a escala de un producto que se usa para probar 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, como colores, tipografía, etcétera, y son normalmente 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 esencial distinguir un Mockup de un prototipo. Un prototipo está destinado a funcionar, aunque sea parcialmente, al paso que los Mockup no marchan. 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 serán por último 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 del servicio, es preciso tener un Mockup lo más semejante posible al producto final. Los MockUps también se crean para enseñar a nuestro cliente el aspecto general de su nueva página web o programa y es una enorme 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 vamos a tener posteriormente con cambios en la fase de producción con posibles modificaciones. En este momento incluso podemos efectuar ajustes y mejoras con relativo poco esfuerzo, por todo ello es esencial 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 comenzar a escribir el análisis funcional.
• Puede ser usado para la implementación del diseño;Lo que quiere decir que es posible probar su concepto de diseño y tendencia antes 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 ser el producto final, lo que significa que el MockUp de alta lealtad puede servir como una hoja de especificaciones visual.
• Es una herramienta flexible;Hacer cambios, suprimir o bien 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 lealtad porque lo que ven es lo que obtendrá.
• Puede servir como parte de nuestra propuesta de presupuesto.Si se trata de un enorme usuario, y el trabajo puede resultar lucrativo, de prestigio, o interesante por otras razones, entonces quizás nos puede compensar dedicar un tiempo extra y realizar un mockup para presentar junto con el presupuesto como valor añadido para conseguir el proyecto. Es esencial en este caso que el cliente del servicio firme un pacto por el que se compromete a no emplear todo o bien en parte nuestro término o diseño sin abonar por esta razón. 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 usuario 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 esencial, y es que nos ayuda a realizar 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 emplear 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 empleamos, sus tamaños en dependencia de su posición, fondos. Debido a que estas son opciones que generalmente incluimos mientras que creamos el mockup, la relación entre ambos es fácil de contrastar.

8.2) Algunas cosas que debemos tomar en consideración.

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

• Demasiados efectos y detalles: Quizás el error más común, hay que tomar en consideración los detalles que no añadan valor al diseño y evitarlos, o bien los detalles que pueden hacer que el código sea entonces realmente difícil de crear. Un borde redondeado puede tener cierta complejidad para crearlo a través de CSS en una web, pero si además hay un gradiente de color, o una trasparencia mezclada con otros elementos pueden hacer que la fase de desarrollo se complique innecesariamente y aumentar los costos .
• No emplear rejillas y no alinear adecuadamente los elementos: Como comentábamos en el apartado de wireframes, el uso de las rejillas es 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 adaptable. Debemos tener en consideración, como vimos en la creación de wireframes adaptable, que nuestro diseño debe de ajustarse a los distintos tamaños de pantalla, por ende, deberemos de efectuar los MockUps necesarios para representar los diferentes diseños de pantalla.
• No emplear 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 bien aplicación tiene un enorme impacto en el aspecto general de la aplicación y por lo 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 conveniente para un determinado proyecto, muchos de estos recursos los podemos localizar de manera gratuita en la red.

Vamos a enumerar ciertas de ellas:

• El cliente no comprende el concepto de diseño en los primeros momentos: Si el usuario no puede comprender el concepto de diseño en un par de segundos, probablemente tengamos un inconveniente. Un diseño demasiado renovador o que rompe con muchos de «cánones» frecuentes en las costumbres de los usuarios en el momento de emplear el tipo de aplicación que estemos desarrollando, puede resultar muy creativo, mas quizás poco funcional
• Resulta difícil de leer: Tenemos que asegurarnos de usar un contraste alto entre los fondos y las tipografías para facilitar la lectura de los textos. Generalmente, esto significa un color oscuro para la tipografía sobre un fondo muy claro. También, debemos asegurarnos de que el tamaño de la letra es conveniente.

Back to top

9) Herramientas para realizar MockUps

Existen muchas herramientas que nos asisten a crear nuestros MockUps, podemos utilizar cualquier programa de dibujo, así sea vectorial como Ilustrador o Inkscape, o bien 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, hay otras herramientas específicamente desarrolladas para el diseño de aplicaciones informáticas o bien web, que permiten realizar utilizando 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 bien de retoque de imágenes podemos encontrar múltiples plantillas o bien «Toolkits» (cajas de herramientas) llenos de elementos para el diseño de la interfaz de usuario que pueden ahorrar un buen tiempo de creación de nuevos gráficos y que vamos a poder 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 conveniente de los kits de IU, plantillas, fuentes y de otros elementos nos dieran los materiales convenientes que modificaremos según resulte necesario.

Algunas webs donde podemos localizar esta clase de recursos son:

• – genial recurso de elementos de interfaz de usuario y kits gratis para Photoshop y también Ilustrador
• +de 60 MockUps gratuitos
• La webtiene una serie de interesantes recursos y consejos para esta herramienta.
• En Uxpin.com podemos encontrary(funciona para Photoshop y Sketch).
• – podemos localizar una lista de los treinta y cinco sitios que ofrecen plantillas, patrones y kits de interfaz de usuario para Photoshop
• Aunque es un recurso para la creación de wireframes, vale la pena tenerlo en consideración si vamos a utilizar una herramienta de este tipo
• de la misma forma que el recurso precedente, en un caso así nos dan plantillas para descargar que nos dejan crear rejas para diseños 960×12 en Photoshop, ilustrador, etc.
• Página con multitud de recursos para wireframe y MockUps

Back to top

10) 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».

10.1) ¿Qué es un prototipo?

Un prototipo es un modelo (representación, demostración o simulación) fácilmente extensible y modificable de un sistema planeado, 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 valorar la interacción, y sirve para acotar aspectos que no quedan claramente reflejados en un boceto de papel o bien un wireframe no navegable.

Los prototipos son navegables, por lo que sirven para probar elementos de interacción como estados «encima» de botones, validación de formularios, iconos, o bien 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 primordial 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 totalmente o bien ciertos aspectos de él y así aclarar los requerimientos.

Durante la fase de creación de prototipos es cuando podemos fusionar nuestras metas ideales 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 weblog o bien una sencilla página informativa, probablemente no precises un prototipo), mas si resulta de gran utilidad en otros, como apps, juegos, grandes webs, etc.

Uno de los posibles errores en el momento de lanzar un sistema on-line o aplicación es pensar sólo en el diseño del modelo de negocio, el desarrollo del producto o bien las ventas. Antes que nuestras aplicaciones lleguen a manos de los clientes es importante que los hayamos probado. Invertir en pruebas con usuarios a través de prototipos nos ayudará a ahorrar tiempo y costos y sobre todo a conocer si el producto se adapta a las necesidades de los clientes del servicio. Es el paso anterior 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, start-ups que estén empezando su proyecto, o bien grandes webs , es una ventaja inestimable, puesto que permite refinar la interfaz basándonos en datos objetivos.

Back to top

11) Prototipos, UX, usabilidad y accesibilidad.

Cuando nos dedicamos al desarrollo web o bien de productos interactivos, vemos lo complicado que resulta conseguir 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 del servicio 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 ambiente particular» (ISO ). Un término que está ligado a la usabilidad es el de accesibilidad, el cual no se refiere a la sencillez de uso, sino más bien a la posibilidad de acceso. Para ciertos clientes del servicio es además un requisito el que la aplicación debe ser «usable» por todos y cada uno de los usuarios potenciales, sin excluir a aquellos con limitaciones individuales. La relevancia de ambos términos dependerá de nuestro público objetivo, un diseño alcanzable implica la necesidad de tomar en consideración otras características para hacerlo más universal y heterogéneo, mientras que el diseño usable se centra más en unos usuarios específicos. 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. Procura evocar una emoción en el usuario, es decir, procura que el empleo 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. La meta 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 utilizar y se ajusten a nuestro público. No hay que perder de vista que el producto será empleado por personas, individuos que probablemente no se parezcan a nosotros y no tengan el mismo gusto, mas quieren que nuestro producto funcione. Merced a las pruebas de usuario con prototipos, vamos a ser capaces de advertir problemas y solventarlos antes del comienzo de la fase de producción, ahorrando así bastantes problemas y costes que habría que de procurar solventar cuando ya está creada toda la programación, o cuando se ha lanzado ya el producto. Ahorra horas de desarrollo, puesto que son precisas menos versiones de la aplicación.

En esta fase es conveniente tener muy en consideración 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.

Back to top

12) Algunos consejos en el momento de crear un prototipo

No hay una formula general que podamos aplicar a la hora de crear un prototipo, puesto que este dependerá de muchos factores, pero si existen 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 género de prototipo, si es de una web, o bien 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 esenciales que sean diferentes, y en otro género de aplicaciones posiblemente debamos desarrollarlo absolutamente.
• Es conveniente que en la creación del prototipo participe también el equipo de diseño. Si bien se puede estimar 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 solucionar muchos inconvenientes a lo largo de la fase de creación del prototipo.
• Diseñar a tamaño real, respetar el tamaño de las imágenes y contenidos y también incluir la estructura de navegación.

12.1) Herramientas para la creación de prototipos.

Existen múltiples formas de crear un prototipo, como comentábamos anteriormente, dependerá mucho del género de aplicación que estemos efectuando, podemos desde crear una aplicación prácticamente funcional, usando HTML, CSS, etc. si por poner un ejemplo estamos creando una web, o también podemos utilizar 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

• : Herramienta profesional para efectuar un prototipo de sitios web, aplicaciones de software y aplicaciones móviles. Puede trabajar con Windows o bien con Mac.
• : 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. Libre tanto para plataforma Windows como Mac. Puedes dibujar tanto wireframes estáticos como interactivos que simulan una experiencia de navegación del usuario real..
• : Con ella puedes hacer prototipos interactivos de webs. Puedes usar esta herramienta como un servicio web o descargarla en tu equipo.
• Está basado en web, y tiene soporte para twitter bootstrap, además deja hacer simulaciones sobre distinto dispositivos
• : es una aplicación de planificación de webs basadas en el navegador la que permite 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.
• : 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.
• : Esta herramienta deja hacer maquetas navegables de sitios web y de aplicaciones. Lo puedes descargar en tu PC (Windows/ Mac) o bien puedes utilizar el servicio vía web.
• : Herramienta web muy sencilla de usar para diseñar sitios y aplicaciones de software.
• : Se trata de un servicio web gratis con el que se pueden hacen prototipos de páginas web.
• Si trabajas con el ambiente de programación, puedes usar también, que se integra en el entorno a la perfección.
• Quartz composer Herramienta de diseño que incluye Apple en su bulto de aplicaciones para desarrolladores.
• Es una herramienta gratis similar a Quartz creada por el equipo de Fb, que usa Quartz Composer.
• te deja crear fácilmente prototipos plenamente interactivos muy fiables que se ven y funcionan precisamente igual que la aplicación, no requiere saber programar
• tiene la ventaja de que te deja pasar del Photoshop a Framer. Coge las capas, las exporta y te permite hacer interactúes utilizando javascript.
• Es como POP mas te deja hacer más cosas, y animaciones más complejas, tanto paraiOS como Android.
• 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 cambiar el tamaño.

12.2) Para finalizar

En último lugar, podemos decir que la razón por la que dividimos las tareas en Sketch, wireframes, maquetas, y prototipos es pues cada uno de ellos 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 de momento con las imágenes de un MockUp o con la funcionalidad de un prototipo. Mientras Sketch, wireframes y MockUps se inclinan más cara 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.

Back to top