Fase de diseño

INTRODUCCIÓN
Hoy nos toca hablar sobre la parte del proyecto que involucra la parte de diseño de alta fidelidad y sus añadidos, como recorremos el proceso desde que nos ponemos manos a la obra con la que será la versión final gráfica de nuestro producto.
Esta fase aglutina todo el contenido que se ha venido trabajando desde el inicio, testeo, análisis, cuestionarios, todo ello se materializa en una serie de pantallas de la web que han sido fruto de todas esas decisiones y análisis.

OBJETIVO DEL MÓDULO
El objetivo es evidente, tenemos que dar cara y ojos a nuestro producto, hemos cogido una web con necesidades, y a través del trabajo previo le hemos intentado dar un nuevo look & feel, pero sobretodo unos nuevos contenidos que puedes ayudar a hacer la web mucho más interesante de cómo era al principio.

EVOLUCIÓN
Después del proceso de sketching (crear nuestras pantallas con boli y papel), wireframes en baja fidelidad y pasar retocar y retocar cada uno de ellos miles de veces, se pasa a decidir que herramienta será la elegida para darle forma. Existen multitud de ellas, pero cuando se piensa en diseño seguramente todos caemos en la suite de Adobe como nuestra principal herramienta de trabajo, tanto Photoshop como illustrator han demostrado con el paso de los años que siguen en la cumbre en cuanto a potencia se refiere, aunque creo que cabría mencionar otras, y una en especial que se ha ganado el corazón de muchos diseñadores UI estos últimos 3-4 años, y es Sketch, un programa dedicado exclusivamente por y para el diseño de interfaces, dejando al lado miles de herramientas y opciones que solo añaden ruido y entorpecen, pero sin olvidar los requisitos de los usuarios, dando pie a una herramienta, que a día de hoy, me parece mucho más interesante de usar que Photoshop (para este propósito claro) y Adobe lo ha visto claro, y ha dado pie a una nueva aplicación que pretende cubrir esas necesidades que Photoshop no hace tan bien, lanzando su app Adobe XD.

El problema de sketch, es que solo está en ordenadores Mac y para OSX, así que lamentablemente por necesidad tuvimos que usar Photoshop (que aunque siendo un gran fan) se ha quedado anticuado, pesado y lento para esos menesteres.

CONCLUSIONES
Como conclusiones tenemos varios puntos interesantes.

Después de los primeros diseños, teníamos claro el tipo de diseño que queríamos plasmar, algo bastante plano donde el contenido fuera el protagonista, más detallado, mejor lectura y más multimedia era la idea, así que no tuvimos muchos problemas para ponernos de acuerdo.
Además, vimos que las ideas concebidas en wireframes, encajaban muy bien, no hubo apenas problemas y todo parecía encajar bastante bien, solamente tuvimos que reorganizar la cabecera con las migas de pan y el buscador, el espacio real no era suficiente para todas las causticas que podían suceder en ese espacio.

Como conclusiones, estas son las más destacadas:

Aspectos potenciales

1. Los wireframes ayudaron mucho a la hora de ponerse manos a la obra con Photoshop.

2. La elección de paleta de colores, con una pequeña modificación sobre la original (escogida sobre la paleta disponible en la página del a comisión europea) funciona muy bien, da un toque mucho más vistazo y alegre.

3. La navegación es consistente entre los diferentes dispositivos, la adaptabilidad y maquetarla de manera responsiva no debería ser difícil.

4. Se mantiene en el sitio móvil toda la misma navegación (slides) por lo que el usuario puede familiarizarse de manera rápida e intuitiva con el contenido.

Áreas de mejora

1. El logotipo oficial para usar en web móvil es de difícil uso y visibilidad, cuesta encajarlo en el diseño de manera acertada, se ha hecho lo mejor posible respetando su guía de estilo.