Conceptos y características de sketch, wireframe y prototipado

Vista previa del material en texto

conceptos y caraterísticas de 
sketch, wireframe y prototipado
Documento de lectura
INDICE
¿Qué es un Scketch? .......................................................................... 1
¿Cómo funciona? ................................................................................ 1
¿Para qué sirve? ................................................................................. 2
Wireframe ........................................................................................... 7
Escala de grises ................................................................................. 7
Ventajas de los Wireframe ................................................................. 8
Arquitectura o flujo de navegación ..................................................... 10
¿Qué es el prototipado? ...................................................................... 11
¿De qué se compone? ........................................................................ 11
Recomendaciones: ............................................................................. 12
¿Cómo nos ayuda el prototipado? ...................................................... 12
¿Por qué prototipar? ........................................................................... 12
Bibliografía ......................................................................................... 14
1
¿Qué es un Scketch?
Normalmente, siempre hay una fase inicial en la que hay bastante indefinición. Aquí hacer sketching 
(diseños muy esquemáticos en papel) suele ser lo más útil, ya que permite la participación del cliente y 
ayuda a centrarlo en la jerarquización de contenidos sin entrar a otros detalles (sobre un boceto de este 
tipo no debe haber consideraciones acerca de imágenes, tipografía o colores).
• Bocetos de baja fidelidad que representan ideas e intenciones.
• Diseño inicial realizado en papel que ayuda a plasmar las ideas principales.
Importante:
Adecuado para… definir estructuras, plasmar ideas de forma rápida, iterar, transmitir
Herramientas
Papel y lápiz
Importante:
Usa colores para acentuar determinados elementos
¿Cómo funciona?
No hace falta saber dibujar.
Solo tienes que saber esbozar conceptos básicos para representar ideas.
 Los niños suelen dibujar para expresar ideas
2
¿Para qué sirve?
Para pensar
• Saltar de un concepto a otro de forma rápida
• Visualizar opciones
• Agilizar procesos
• Cometer errores sin miedo a equivocarnos.
Para conceptualizar
• Exploración de diferentes conceptos en un breve espacio de tiempo.
• Experimentación (de ideas a-priori descartables).
• Generar nuevas ideas.
• Volver a fallar.
Usa el sketching para crear pantallas que te ayuden a visualizar toda la estructura de un sitio web.
Es muy útil para ahorrar tiempo
 
 
 
3
 
4
 
5
 
 
6
 
7
Wireframe
En la fase de wireframing ya se ha definido una estructura general, y se entrega una maqueta de más 
fidelidad. Suele servir para validar y confirmar aspectos que ya se han hablado previamente, por lo que 
no debería ser necesario realizar grandes cambios aquí.
Dibujos planos de las pantallas Transmiten el diseño conceptual. Muestran las ideas/pantallas de forma 
detallada.
En la fase de wireframing ya se ha definido una estructura general, y se entrega una maqueta de más 
fidelidad. Suele servir para validar y confirmar aspectos que ya se han hablado previamente, por lo que 
no debería ser necesario realizar grandes cambios aquí.
Adecuado para… definir detalles de funcionalidades, disposición de elementos, jerarquías, tamaños 
(proporcionales)
Hay que decir que un wireframe sigue sin ser un diseño acabado, ya que en esta fase aún no hemos 
entrado con colores ni fuentes. Pueden mostrarse ya imágenes (aunque no tienen por qué ser las 
definitivas). Lo importante aquí es tener ya los textos definitivos, pero no debe haber color (todo en 
escala de grises), ni diferentes tipografías (una sans-serif para todo).
Lo importante de esta fase es que se apruebe la organización de contenidos (esto ya debe estar casi listo 
de la fase anterior), y que los textos sean los definitivos y estén en su sitio. 
Escala de grises 
 
8
Ventajas de los Wireframe
1. El equipo y el cliente se centran en el diseño de contenidos e interacción y no en el diseño visual. 
2. El cliente ve y comprende cómo será la aplicación, mucho mejor que si se ofrece descrita en un 
documento. 
3. Evita malentendidos entre el proveedor y el cliente e incluso entre los propios miembros del equipo. 
4. Es un complemento de gran valor en el análisis.
5. El prototipo se modifica con facilidad y rapidez. 
6. Se evitan modificaciones posteriores mucho más costosas cuando la aplicación ya se está 
implementando. 
7. Se reducen costes y tiempos.
8. Permite realizar pruebas de usabilidad, como test con usuarios, en etapas tempranas del proyecto.
9. Se detectan y solucionan los problemas antes de comenzar su implementación. 
10. El resultado son aplicación web más fáciles de entender, de usar y que se ajustan mejor a las 
necesidades de los usuarios.
 
9
Ejemplo:
 
 
10
Arquitectura o flujo de navegación
• Organizar información
• Estructurar y priorizar contenidos
• Crear flujos de navegación
 
11
¿Qué es el prototipado?
El prototipado 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 
hover de botones, validación de formularios, iconos, o cualquier elemento con el que el usuario cuando 
interactúe.
Diseño de las pantallas conectadas entre sí.
Transmiten y muestran la interacción de las pantallas y los detalles de la misma.
Adecuado para… transmitir cómo funcionan los clicks, taps, slideshows, menús desplegables, alertas, 
ventanas emergentes, etc.
Una simulación de un modelo que nos ofrece información sobre algo que no existe. Una visualización 
del futuro conforme a unas necesidades o enfoques.
* Una forma de comprobar la viabilidad de un producto, a través de una proyección que realizamos.
¿De qué se compone?
3 partes fundamentales…
1. Parte visual
2. Parte funcional
3. Parte especificaciones
 
12
NOTA: Es importante contemplar estas tres partes (visual, funcional y especificaciones) en todas las 
modalidades o fases del prototipado.
Recomendaciones:
• Enlaza y define los elementos importantes y que necesitan más detalle.
• Deja los elementos menos importantes para el final.
* Hay quien se refiere a prototipos como pantallas finales de diseño enlazadas. 
¿Cómo nos ayuda el prototipado?
Nos permite adelantarnos a los hechos, con una rápida proyección de los mismos a través de la exploración 
rápida de distintos escenarios y situaciones.
¿Por qué prototipar?
Mejora la velocidad de desarrollo: Da mucho menos trabajo hacer cambios sobre un boceto en 
papel o un wireframe en Axure que sobre un PSD con un montón de detalles. Si lo primero que ve el 
cliente es un diseño con todo el detalle, lo habitual es que se pierda en cosas como colores o tipografía, 
y en esta fase se trata de cerrar el diseño desde un punto de vista funcional. Sólo hay que saber dónde 
irá cada cosa, y la jerarquía de cada tipo de contenido. El colorín, más adelante.
13
Involucra al cliente: La aprobación de un prototipo la tiene que dar el cliente. Como es mucho más 
cómodo hacer cambios sobre un esquema con poco detalle que sobre un diseño ya acabado, es fácil 
involucrar al cliente en esta fase de diseño. Y no es algo que puedas hacer, es algo que debe hacerse. 
Conocerás mejor al cliente y su proyecto, y el valorará más tu trabajo, porque empezará también a ser 
suyo.
Puede haber desventajas si no lo haces correctamente. Es necesario que expliques que lo que vas a 
entregar no es un diseño acabado, sino un documento de trabajo que se utilizará para definir 
posición y jerarquía de elementos en página. De este modo,evitarás decepciones si esperaban encontrar 
un pantallazo con todos los detalles.
 
14
Bibliografía
Muruaga, L. (Febrero de 2019). Prototipado. Obtenido de Escuela superior de diseño de Barcelona: 
https://campus.esdesignbarcelona.com/webapps/blackboard/execute/displayLearningUnit?course_
id=_59740_1&content_id=_1719136_1&framesetWrapped=true
Suárez, E. (26 de Noviembre de 2013). Dispersium. Obtenido de Dispersium: https://dispersium.es/
prototipos-para-diseno-web/