PROTOTIPOS VISUALES DE ALTA FIDELIDAD

El prototipo o diseño visual es la evolución del mockup, un documento más elaborado y detallado, donde darás estilo a los elementos generales y particulares del diseño, con elementos como: el color, la composición, la tipografía y una buena dosis de creatividad, para obtener un prototipo más ajustado a tu diseño final.

Así que, en este prototipo, definirás las dimensiones en píxeles y los atributos estéticos de la mayoría de los elementos visibles de tu web, como pueden ser: 

• Asignar el color de fondo y algunas zonas concretas de tu diseño, y probar combinaciones. 
• Delimitar y definir las áreas principales de la estructura general, donde irán colocadas las cajas contenedoras y los principales elementos de tu diseño. 
• Definir y dimensionar las cajas de contenido, así como el espacio entre ellas, alineación, y los elementos que contienen.
• Definir el espacio que ocuparán las imágenes, su forma, y su posición y alineación, simulando el contenido cuando sea necesario.
• Trabajar con las tipografías y su comportamiento, te ayudará a elegir la mejor opción, así como delimitar el espacio a las áreas de texto, el color, el tamaño de letra, o aplicar efectos.
• Definir atributos, dimensión y posición a menús de navegación, listas y enlaces.
• Diseñar y  posicionar iconos, botones, logotipos, y elementos decorativos dentro de tu diseño.

Te darás cuenta, que a diferencia de los mockups, donde trabajaste con escala de grises, y sin detallar medidas ni atributos, en esta clase de prototipos , los elementos como el color, la posición, la alineación, y la composición, son muy importantes.

Para empezar a diseñar tus prototipos visuales de la mejor manera, puedes empezar con:

• Usar cualquier software de edición de imágenes como por ejemplo, Adobe Photoshop ó GIMP, que es una alternativa gratuita excelente.
• Uar software de dibujo vectorial, como Adobe Illustrator o Inkscape, que también es una alternativa gratuita.
• 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 disensiones y espacio propio; 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.

 Ver 5 Concejos para facilitar el primer paso del proceso.

Ver 5 consejos para trabajar con tus diseños.