Crear un Prototipo WEB

 HABLEMOS SOBRE EL DISEÑO DE UN PROTOTIO

Para empezar a diseñar tus prototipos visuales de la mejor manera puedes empezar usando cualquier software de edición de imágenes, como por ejemplo Adobe Photoshop o Gimp, que es una alternativa gratuita excelente. También puedes usar un software de dibujo vectorial, como Adobe Illustrator o Inkscape, que también es una alternativa gratuita. Puedes elegir para tu diseño el software que prefieras, dependiendo de tus posibilidades y habilidades. Te recomiendo, sin embargo, que busques uno que como mínimo, tenga la capacidad de trabajar en capas, para poder asignar a cada objeto unas dimensiones y espacios propios, también que te permita medir utilizando reglas e inspectores y de esta manera trabajar tu documento con dimensiones reales. Además, debería de permitirte editar imágenes, para poder explorar de una forma adecuada todas las posibilidades del diseño

Importancia de Prototipar

La responsabilidad de un arquitecto de información es, tal y como la explica Jesse Garrett en su conocido libro los elementos de la experiencia de usuario, identificar los objetivos del proyecto y las necesidades de los usuarios, especificar las funcionalidades y requerimientos de la aplicación web, definir y diseñar los sistemas de navegación, organización, etiquetado y búsqueda, y finalmente, realizar el prototipado de la aplicación, que es lo que vamos a tratar en este vídeo. Nuestra responsabilidad final es asegurar que los usuarios podrán encontrar y gestionar la información de manera efectiva.

De la misma manera que un arquitecto realiza los planos y la maqueta del edificio antes de que este comienza a construirse, los arquitectos de información, nos valemos de la diagramación y el prototipado para especificar cuál será la organización, estructura, navegación y funcionamiento de la aplicación web. Es decir, al igual que ellos, realizamos planos y maquetas del sitio antes de que esté comienza a construirse.

Los planos son diagramas de organización y funcionamiento y se suelen denominar Blueprint, diagramas de contenido o flujo o mapa web. Será una constante a lo largo del vídeo que os indique los diferentes nombres que recibe un mismo tipo de diagramación o maqueta, por diferentes autores los denominan de diferente manera y no es una terminología que esté claramente asentada todavía.

A la hora de realizar la diagramación de una aplicación web, lo más importante es que sea comprensible y refleje con claridad la estructura, el flujo de navegación y la relación entre los elementos.

Existen diferentes propuestas para realizar la diagramación de una aplicación web. Un vocabulario muy utilizado y que os recomiendo conocer es el vocabulario visual para describir arquitectura de información y diseño de interacción de James Garrett, uno de cuyos libros os recomendaba anteriormente. Garrett es un destacado arquitecto de información, muy conocido por acuñar el término Ajax, en el año 2005.

El diagrama que veis en pantalla es un ejemplo de diagramación de Garrett de la aplicación web Yahoo Mail. En su artículo podréis descargar librerías para aplicar su vocabulario con diferentes aplicaciones como PowerPoint o Visio, pero como he dicho, no es la única propuesta que existe. Lo más importante es que la diagramación sea clara y comprensible y por ello, es muy recomendable incluir una leyenda con los símbolos utilizados.

Además de estos libros, os recomiendo el artículo "La diagramación en la arquitectura de la información" de Ronda León, en el recopila diferentes propuestas de vocabularios, entre, ellos el suyo propio.

Las maquetas son diagramas de presentación, cuyo objetivo es crear una referencia visual de la estructura, organización e interacción a nivel de página. Vamos a ver que hay diferentes tipos y qué distinguimos entre prototipos de baja fidelidad y de alta fidelidad.

En ningún caso se debe incluir diseño gráfico en ningún prototipo, que se realiza en etapas posteriores y que es algo que es importante aclararle al cliente, cuando se le presenta el prototipo. No se deben utilizar colores, salvo los estrictamente necesarios y por ello, usamos gamas de grises. Los prototipos de baja fidelidad son dibujos estáticos, hablamos de sketching cuando realizamos bocetos de forma rápida informal en lápiz y papel para transmitir una idea o concepto con rapidez y claridad. Es una técnica muy útil en las entrevistas iniciales con el cliente para comunicar conceptos, proponerle alternativas un problema, durante un brainstorming o en las reuniones internas con un equipo de trabajo.

Antes de comenzar un prototipo más elaborado, es conveniente comenzar con este tipo de bocetos para trabajar ágilmente con varias ideas, ir esquematizando las páginas y definir las diferentes zonas de la misma.

Os recomiendo como libro de referencia "Sketching User Experiences" de Bill Buxton. Un wireframe es más elaborado e incluye el inventariado de contenido, es decir, qué contenido debe de estar presente en cada página. Los elementos de la misma como cabeceras, enlaces, listas, formularios, etcétera. El etiquetado de los vínculos o de los títulos, el layout, es decir, la ubicación, colocación y agrupación de los elementos de la página, así como la estrategia de navegación y la priorización de los contenidos dentro de la misma. Wireframe así mismo, debería incluir el comportamiento mediante notas asociadas a los elementos para indicar cómo debe demostrarse o para definir su comportamiento funcional.

Cuando tenemos una secuencia de wireframes, hablamos de un storyboard. Los prototipos funcionales son prototipos de alta fidelidad, también llamados a menudo maquetas o mockups, que permiten detallar el proceso interactivo de una o varias tareas. Son prototipos y maquetas dinámicas normalmente en HTML que simulan o tienen implementadas partes del sistema final a desarrollar, como observamos en este ejemplo.

Nunca se debe comenzar a prototipar sin haber definido primero los objetivos del cliente, las necesidades de los usuarios, los requisitos del proyecto y la arquitectura de información de la aplicación web. Os recomiendo la lectura de mi artículo, “Arquitectura de información fundamentos” y el libro “Arquitectura de información entornos web” de Mario Pérez Montoro Gutiérrez.

La importancia de prototipar una aplicación antes de comenzar el diseño gráfico y su implementación es vital. En primer lugar, el equipo y el cliente se centran en el diseño de contenidos e interacción y no en el diseño visual. El cliente además, ve y comprende cómo será la aplicación mucho mejor que si se ofrece descrita en un documento. El prototipado evita malentendidos entre el proveedor y el cliente o incluso entre los propios miembros del equipo, ayuda especificar los requerimientos a detectar inconsistencias o falta de funcionalidad y se convierte en un complemento de gran valor en el análisis.

En segundo lugar, el prototipo se modifica con facilidad y rapidez. Se evitan así modificaciones posteriores, mucho más costosas cuando la aplicación ya se está implementando, de modo que se reducen costes y tiempos.

Y, en tercer lugar, también permite realizar pruebas de usabilidad, como test con usuarios en etapas tempranas del proyecto. De este modo, se detectan y solucionan los problemas antes de comenzar su implementación y el resultado son aplicaciones web más fáciles de entender, de usar y que se ajustan mejor a las necesidades de los usuarios.

Mi experiencia me dice que los beneficios de prototipar una aplicación web justifican con creces el tiempo que se invierte en él, pues se reducen la medida el tiempo de desarrollo posterior y aumenta considerablemente la calidad del resultado y la satisfacción del cliente y el usuario final.

Además de las referencias que os he ido dando a lo largo del vídeo, os recomiendo mi artículo “Wireframes”, donde se incluyen referencias de interés, entre las que os recomiendo el artículo, “Prototipado” de la Fundación Sidar y el blog “Wireframes”, donde encontráis ejemplos, plantillas, herramientas y otros recursos. También puede seros útil el glosario de usabilidad y accesibilidad para consultar aspectos terminológicos. Aquí tenéis también otras dos presentaciones sobre prototipado que os pueden ser de utilidad y dónde podéis ver más ejemplos.

Para terminar, me gustaría daros cinco consejos básicos para realizar un buen prototipo y que se resumen en, sencillez y claridad, hazlo en blanco y negro, representa los tamaños y proporciones de los bloques de contenido, ten en cuenta las pautas de usabilidad y accesibilidad y sobre todo diseña para tus usuarios.

En resumen, en este vídeo hemos hablado de la importancia de prototipar una aplicación web, antes de realizar su diseño gráfico o comenzar su implementación y cómo a su vez, el prototipado no debe comenzarse, sin haber definido primero los objetivos del sitio, las necesidades de los usuarios, los requisitos del proyecto y la arquitectura de información de la aplicación web.

Hemos visto que se distingue entre planos y maquetas los planos o blueprints, diagramas de contenido o flujo o mapa web sirven para mostrar la estructura de la aplicación y su flujo de navegación. Por su parte, las maquetas son diagramas de presentación, cuyo objetivo es crear una referencia visual de la estructura, organización e interacción a nivel de página.

Hemos visto también que se distingue entre prototipos de baja fidelidad, que son estáticos y prototipos de alta fidelidad, que son dinámicos.

Hemos recomendado comenzar con un Sketch, es decir, un boceto rápido informal con lápiz y papel y después, un Wireframe representará con más detalle la aplicación, incluyendo notas asociadas a los elementos, sobre cómo se deben mostrar y su comportamiento funcional.

Por último, los prototipos funcionales son maquetas dinámicas, normalmente en HTML, que simulan o tienen implementadas partes del sistema final a desarrollar. Hemos visto que la terminología es muy variada y no siempre unívoca, pues todavía no está claramente asentada y por ello, al consultar la bibliografía y las referencias os recomiendo que nos centréis en aspectos terminológicos, sino en las recomendaciones para realizar buenos diagramas y prototipos de vuestras aplicaciones web.

CONSEJOS 

Mi primer consejo es que busques inspiración antes de empezar, esto forma parte de la investigación y además es muy importante para preparar un diseño, conceptualizarlo y después marcar las pautas de estilo de todos sus elementos. A continuación, verás algunos enlaces, donde podrás empezar a buscar inspiración, encontrar ideas o explorar tendencias. Una idea puede venir de cualquier parte y mi consejo es que te tomes un tiempo para buscar la inspiración y encontrar así el carácter y el mensaje que quieres dar a tu diseño, te daré a continuación algunas pautas que te pueden servir.

Procuro investigar en distintas corrientes creativas, buscando así, referencias diferentes a los habituales, desarrolla tu idea y conceptualizada, probando todas las opciones y eligiendo la más adecuada, toma siempre en cuenta la temática de tu web, las tendencias del mercado y tu público, intenta beber de todas las fuentes posibles sin prejuicios y potencia tu creatividad para conseguir los mejores resultados.

Mi segundo consejo es que establezcas una paleta básica de colores para tu diseño, es importante, para dar consistencia y estilo al prototipo. Te recomiendo usar una paleta básica de tres colores y después crear gamas y combinaciones a partir de ella, buscando la armonía y la consistencia en tu diseño.

A continuación, verás algunos enlaces donde podrás encontrar más información sobre el color su significado y sus propiedades. También verás referencias con herramientas específicas para crear colores, combinaciones gamas y paletas.

Para tu diseño vas a necesitar también una serie de elementos que serán tu principal material de trabajo. Imágenes y elementos gráficos, tipografías para el contenido, también iconos que puedes crear tú mismo y además tendrás el material proporcionado por tu cliente. Todos estos elementos, al igual que el establecer una gama de color, son tus herramientas creativas para dar forma y concepto a tu diseño.

Para obtener los recursos necesarios en tu diseño, puedes comprarlos en los proveedores que mejor se ajusten a tu presupuesto. Otra opción es buscarlos en bancos de imagen con licencias más amplias o de uso gratuito o puedes generarlos tú mismo, ya sea con una cámara fotográfica o creándolos con ayuda de un software. También contarás con el material gráfico de tu cliente.

Es importante que tengas en cuenta cuando diseñes las imposiciones creativas, como puede ser la imagen corporativa de tu cliente.

Los siguientes enlaces listan algunas webs, dónde encontrar recursos gráficos de todo tipo y con distintas licencias de uso, la mayoría son gratuitos y te serán de utilidad para componer tus diseños.

Al igual que el color con los elementos gráficos, la tipografía o tipo de letra aportará carácter identidad a tu diseño. Mi cuarto consejo es que definas las tipografías cuidadosamente. Cuando escojas un tipo de letra toma en cuenta siempre la legibilidad y su capacidad de adaptación, así como su significado y la relación que tiene con tu idea, escoger un tipo de letra con carácter, enriquecerá tu diseño.

En los siguientes enlaces encontrarás información más detallada, sobre el uso de la tipografía y sus características, así como referencias para encontrar tipos de letra para tus diseños.

Mi último consejo es que recopiles y organices adecuadamente todo tu material de trabajo para empezar a diseñar. Este material de trabajo puede ser, por ejemplo, los Mockups, los cuales te servirán de base para iniciar tu diseño. También tendrás la información de tu cliente, que tendrás organizada y clasificada y contarás también con los recursos y el material gráfico recopilados previamente. Tendrás también elementos específicos de imagen como pueden ser los logos.

Para empezar a diseñar el aspecto visual de tu web es mucho más fácil si tienes parte del camino recorrido con éxito, si has trabajado el Mockup, tienes una idea conceptualizada y tienes los recursos necesarios para desarrollar esa idea, puedes empezar a diseñar libremente con tu software de edición preferida. Te doy cinco consejos para trabajar con tus diseños.

En primer lugar, te aconsejo que trabajes tus documentos utilizando capas. En un diseño es muy importante la organización, ya que se trabaja con muchos objetos y áreas distintas. Para poder trabajar cada elemento de tu diseño adecuadamente, debes organizarlo en capas que te permitirán editarlos o sustituirlos con facilidad. Trabajar en capas te facilitará el trabajo de organización dentro de tu diseño permitiendo darle a cada elemento un espacio y dimensiones propias y te facilitará la futura exportación al entorno HTML. Además, te permitirá probar varias opciones de una misma idea.

Al trabajar en tu documento, te recomiendo que le asignes una capa a cada elemento de tu diseño, dándole así un espacio propio. También te recomiendo que agrupes en carpetas, los diferentes objetos comunes a una misma zona para poder facilitar futuros cambios. Recuerda guardar siempre una copia de tu documento maestro para futuras ediciones.

Mi segunda recomendación es que trabajes en tu documento diseñando de general a particular, esto te facilitará el proceso creativo y de edición. Con ayuda de las capas podrás trabajar por niveles de jerarquía, comenzando así con elementos generales como el fondo y a continuación definiendo y delimitando las áreas de la estructura del prototipo. En estas áreas trabajarás las cajas principales, donde se mostrará el contenido de tu web, ya sean imágenes o texto. Podrás seguir trabajando en los elementos que están dentro de las cajas contenedoras y de esta manera y trabajando el diseño dentro de las áreas y cajas que ya has definido, le aportarás una apariencia más ordenada a todo tu diseño.

En tercer lugar, te recomiendo que vigiles el abuso de ciertos recursos y herramientas. Estos abusos pueden ser, por ejemplo, no vigilar el espacio entre elementos, utilizar demasiados colores en tu diseño o abusar del uso de la tipografía. También debéis intentar no utilizar una decoración excesiva, no abusar de efectos complejos que no aporten nada a tu diseño y evitar colocar demasiados elementos en un mismo espacio.

Mi consejo número 4 es que optimices tu tiempo adecuadamente, cuando diseñes centrándote en las tareas prioritarias y dedicándoles el tiempo necesario a cada una de ellas. Para optimizar el tiempo y tu flujo de trabajo, puedes seguir algunas pautas. En primer lugar, define las prioridades de tu diseño estableciendo los plazos según las necesidades del proyecto. No pierdas tiempo diseñando elementos irrelevantes o innecesarios. Elige un diseño que se adapte a tus posibilidades y a tus habilidades con las herramientas de diseño, ten siempre en cuenta la visión de conjunto y la coherencia en tu diseño, pensando siempre en las necesidades de tu cliente.

En quinto y último lugar te aconsejo que mantengas la organización en todo el proceso de diseño. Te recomiendo que prepares una carpeta organizada con todos los documentos del diseño, en los que estás trabajando, así como el material gráfico que vayas a utilizar para diseñar. Es importante que tu trabajo tenga una carpeta propia, donde guardes todos tus prototipos ordenados. Intenta mantener original y copias de tu documento maestro y registra los cambios relevantes en tus diseños en un documento, trabaja siempre con las versiones editables de tus documentos y reserva una carpeta para documentos finales listos para exportar a tu web.

¿Qué es un mockup?

Un mockup, traducido del inglés como bosquejo, es un fotomontaje a través del cual los diseñadores gráficos pueden presentar sus propuestas a los clientes.

Los mockups cuentan con muchos uso. No sólo sirven para presentar las propuestas del diseño de logos. Se utilizan también con mucha frecuencia en el diseño web y el diseño de apps. Por ejemplo, podemos encontrar mockups para lucir diseños de camisetas o incluso calcetines en tiendas online o e-commerce que aún no han llegado a fabricar este producto.

Gracias a los mockups podemos presentar nuestro trabajo de una forma profesional, pero ahorrándonos los costes de impresión y montaje. Podremos mostrarle al cliente, cómo lucirá el diseño del proyecto gráfico en muchos formatos diferentes. De hecho, para el caso del diseño de logos, contamos con mockups para todo tipo de aplicaciones: papelería, vinilos, cartelería, artículos de merchandising.

Estos fotomontajes se encuentran alojados bajo un fichero, normalmente de Adobe Photoshop y nos permiten situar nuestros diseños en un entorno determinado. Podremos valorar “cómo funcionan” o cómo lucen bajo un contexto particular. Al mismo tiempo gracias a ellos, podremos estudiar también la capacidad de nuestra propuesta y el cliente podrá obtener una visión mucho más acertada y realista de ella.