Secciones Universitat Oberta de Catalunya Buscar
Universitat Oberta de Catalunya

Rediseño web con prototipos gráficos

Asignatura: Diseño de Interfaces Multimedia.

Nombre del estudiante: Alfons Serrano Carpinell.

Consultor y profesor: Tona Monjo Palau.

Introducción

La asignatura de Diseño de Interfaces Multimedia nos habla de la importancia del diseño de una buena interfaz multimedia para que la experiencia del usuario sea un éxito. En pocas palabras, ésta tiene que ser casi invisible para el usuario, es decir, debe ser clara, sencilla y fácil de utilizar. Además, debe convencer con un diseño original y enfocado a dicho usuario.

Etapas y retos

En la PAC1 elegimos y analizamos dos interfaces analógicas y dos interfaces digitales. Aquí el reto era encontrar una buena interfaz y una mala en cada grupo, según nuestro criterio. Poco a poco fuimos aprendiendo cuáles eran los elementos claves que diferenciaban una buena interfaz de una mala. Además, fue una experiencia que te hacía reflexionar sobre las interfaces en general y sobre su nivel de transparencia. Es decir, hasta qué punto se hacen tan cómodas y familiares que no nos damos cuenta que están ahí (se vuelven casi invisibles) facilitándonos la comunicación con el producto multimedia.

En las siguientes PACs, empezamos la aventura del rediseño de la web Revolutum con las siguientes fases:

Perfiles de Personas
En la PAC2 debíamos indicar cuál sería el usuario final que utilizaría el producto multimedia (en nuestro caso, la web de Revolutum), trazando una serie de perfiles sociodemográficos (Personas) en forma de ficha técnica. Lo más importante que teníamos que indicar es cómo, cuándo y porqué esta Persona utilizaría la web de Revolutum. En éste caso, yo empecé a imaginarme cuales de mis amigos y familiares estarían interesados en visitar o comprar en la web y porqué motivo. A partir de ahí empecé a trazar tres perfiles de persona (con edad, sexo y estado marital distintos) que ejemplificaban perfectamente el tipo de usuario final de la web.

Wall Concept
Una vez definido el usuario final, teníamos que hacer volar nuestra imaginación y pensar qué concepto querríamos transmitir con nuestra propuesta de rediseño gráfico. Para ello utilizamos la técnica del Wall Concept: un muro lleno de imágenes que representarían dicho concepto gráfico. Yo eché primero un vistazo a la web y sobre todo a su logo. Lo que me transmitían era la invitación a un mundo onírico de juguetes artesanales hechos a mano. Esto me recordó a conceptos como “trabajos manuales”, “artes plásticas”, “artesanía”, etc. A su vez, esto me recordó a un juego de Playstation llamado Little Big Planet 3, dónde los elementos, personajes y decorados están creados con texturas de todo tipo (madera, plástico, papel, cartón, lana, tejido, cristal, metal, etc.). A partir de ahí utilicé la web de Pinterest para buscar imágenes de todo tipo de creaciones hechas a mano, utilizando texturas de todo tipo y los materiales típicos de las artes plásticas (acuarelas, plastilina, papel maché, pegamento, etc.). Las 25 que más me gustaron fueron seleccionas para formar el mural Wall Concept en el documento creado con Adobe InDesign.

Propuesta gráfica
Una primera propuesta gráfica

Primera propuesta gráfica
Para crear los primeros prototipos gráficos trabajé con Adobe Photoshop. En mi opinión es un programa fácil y cómodo, ya que al ser posible diseñar por capas, podemos experimentar (probando, sustituyendo o eliminando los elementos gráficos) hasta crear una composición gráfica adecuada.

La tarea empezaba por crear dos primeros prototipos gráficos, que serían los de la página inicial de la web (para escritorio y para dispositivo móvil).

Empecé con la idea en mi mente de que los colores del logo (y la textura de madera utilizada en él) eran básicos para empezar el diseño y además estarían presentes en la mayor parte del diseño. Aun así, habría que buscar más imágenes de texturas para poder editarlas y ajustarlas al prototipo gráfico. Para ello, utilicé Flickr para buscar las imágenes, ya que tiene un buscador muy potente y se pueden filtrar las búsquedas para que encuentre imágenes que estén bajo licencias Creative Commons (atribución, compartir igual, no comercial, etc.). Finalmente, de entre todas las imágenes que busqué, sólo utilicé 5 de ellas (madera, tela, tejido tejano, metal y botones de plástico); ya que de lo contrario se saturaba la composición y se perdía la armonía con el logo. Otras imágenes que también necesitaba, eran las que representarían el catálogo de los productos que se venden en la web, por lo que busqué de nuevo en Flickr otras 5 imágenes aleatorias (enchufe, reloj, despertador, gemelos…) y las edité, cambiando color y volteado para que no fueran tan repetitivas.

Para que la composición de los elementos del prototipo fuera fiel al wireframe que teníamos que seguir, hice una captura (print+screen) de éste mismo en el documento pdf y lo edité en Photoshop; poniendo dicha captura como capa de fondo (en opacidad al 50%) como si fuera una plantilla donde encajar cada elemento (más adelante ya nos ayudaríamos de la retícula).

Propuesta gráfica
Wireframe para móvil: Home y comportamiento

La edición de las imágenes consistió básicamente en escalados, cambios de tono/saturación o filtros de color para ajustarlo a lo que yo buscaba (por ejemplo, puse un filtro de color azul en la madera para conseguir un tono azul muy parecido al del logo).

Propuesta gráfica
Detalle de la cabecera superior y texturas elegidas

Nuevos prototipos gráficos y guía de estilo
Seguimos en la PAC3 que incorpora nuevos retos, ya que además de seguir diseñando prototipos gráficos para el resto de las páginas web de Revolutum (ficha de producto, carrito de la compra, etc.), teníamos que crear la guía de estilo con los siguientes elementos:

Retícula
Aquí deberíamos pensar en nuestro rediseño como un sitio web “responsive”, por lo tanto era preciso establecer una retícula para la guía de estilo.

Una de las opciones (para mí fui la más entendible y lógica) era considerar una retícula modular que se adaptará al dispositivo deseado (escritorio, tablet o smartphone). Yo elegí una retícula modular que tendría un número de columnas variable según el tipo de dispositivo (12 para escritorio, 8 para tablet y 4 para smartphone).

Propuesta gráfica
Retícula para el diseño responsive de la página web

Tipografía
Para elegir la tipografía, seguí las indicaciones de mi consultor (Tona Monjo) que me recomendó utilizar webfonts. Estas fuentes están disponibles (en línea) para que el navegador pueda leerlas al indicar la referencia en la cabecera del código fuente de la web. Así que busqué en Google Fonts y elegí dos fuentes sans serif que tuvieran una buena legibilidad: una sería para casi todo el documento (PT Sans Caption) y otra con más florituras (Indie Flower) sería utilizada muy puntualmente en algunos encabezamientos de la web.

Lo que sí tenía claro es que el color de la tipografía sería de color blanco sobre fondos oscuros y negro sobre fondos claros (para conseguir un mayor contraste y legibilidad).

Propuesta gráfica
Ejemplo de fuente en Google Fonts

Gama cromática
Para indicar la gama cromática, utilicé la herramienta Cuentagotas de Adobe Photoshop ya que me indicaría el color preciso de los elementos gráficos que había utilizado. Al ser texturas, los colores eran aproximados ya que éstos no eran figuras planas pintadas de un solo color. Aun así, decidí poner los colores más significativos para obtener una gama cromática aceptable de 20 colores.

Propuesta gráfica
Gama cromática utilitzada en este trabajo

Elementos Interactivos
Aquí debíamos indicar qué comportamiento tenían los botones, enlaces, menús desplegables, casillas de los formularios, etc. Como no tenía mucha idea, busqué en internet algunos ejemplos de páginas web, observando el diseño de sus elementos interactivos (si cambiaban de color, de tamaño, etc.) con lo que cogí bastantes ideas de cómo podría hacerlo. Hay que decir que lo mejor es no complicarse la vida en éste aspecto. Básicamente los comportamientos de los enlaces se indicarían con un cambio de color, los botones cambiarían de tamaño y ligero color, las casillas se resaltarían con un recuadro de color blanco alrededor y el elemento seleccionado de un menú desplegable estaría resaltado en color opuesto al fondo (o más oscuro o más claro).

Propuesta gráfica
Ejemplo de diseño de los elementos interactivos

Una de mis dudas fue que nos indicaron que la guía podía realizarse antes o después de realizar los siguientes prototipos y a decir verdad, encontré que eran dos trabajos muy dependientes el uno del otro. Supongo que no hay ninguna forma correcta pero yo empecé a realizar los siguientes prototipos y a la vez que iba avanzando, me resultó más fácil ir creando la guía paralelamente. Así, la iba ampliando poco a poco a medida que finalizaba los prototipos.

Finalización de los prototipos y guía de estilo
Hasta este punto, teníamos realizados 8 prototipos en total, 4 para cada dispositivo (Home, Subhome, Búsqueda y Ficha de producto) y la guía de estilo.
En la Práctica Final añadiríamos 2 nuevos prototipos (Proceso de compra, para escritorio y Smartphone), haríamos una revisión de todos los prototipos y modificación de todos los errores que hubiéramos encontrado o que el consultor nos hubiera aconsejado mejorar.

En mi caso, hubo que corregir algunos errores:

  • Estandarizar el mismo tamaño de letra para todos los botones para dar coherencia
  • Quitar la semi-transparencia de los menús desplegables para una mejor legibilidad
  • Optimizar la visibilidad de los iconos, comprobando el grado de contraste con la herramienta online Color Contrast Checker de WebAim
  • Indicar todos los tamaños y colores posibles de la tipografía, en la guía de estilo
  • Completar el comportamiento de todos los elementos de interacción, en la guía de estilo (faltaban botones, enlaces, casillas, etc.).

Para acabar, nos hicieron reflexionar sobre qué mejoras de futuro podríamos considerar para el rediseño de los prototipos gráficos.

A mí se me ocurrió la idea de que el propio usuario pudiera “personalizar” a medida la página web, pudiendo elegir entre diferentes texturas y colores que se adaptasen a la estructura de la web. Así, la web se convertiría además en una especie de taller de artes plásticas (handcrafting) para que los usuarios (aparte de gestionar sus compras) se implicaran más con la imagen y el propósito de la empresa.

Conclusiones

Al finalizar los prototipos me quedé bastante satisfecho del trabajo realizado y lo valoré muy positivamente, pero también diré que alguna espina se me quedó clavada. Ya había conseguido plasmar la idea inicial que tenía en el Wall Concept pero aun así, observando de nuevo las 25 imágenes de dicho mural, se podría haber conseguido muchos otros diseños distintos. En ese momento te das cuenta que en el diseño no existe una ni dos posibilidades válidas, sino muchas más. El hecho de elegir un camino, hace que excluyamos un montón de posibilidades que quedaran en el cajón de los desastres y que también nos hubiera gustado utilizar. Esa fue un poco mi impresión al volver a ver el Wall Concept, muchas posibilidades y muchas imágenes (ideas, conceptos, gráficos) que no pude llegar a experimentar en los prototipos (por falta de espacio y composición armónica, claro).

En cuanto a las interfaces, uno aprende que una interfaz invisible o transparente es una utopía. De todos modos, nuestro deber es diseñar siempre una interfaz original, que se familiarice intuitivamente con el usuario, para llegar al éxito.

Documentación

Fuentes y licencias de las imágenes utilizadas para la creación de los prototipos gráficos:

Fuentes y bibliografía

Enlaces relacionados:

Cita recomendada: SERRANO CARPINELL, Alfons. Rediseño web con prototipos gráficos. Mosaic [en línea], enero 2016, no. 135. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n135.1604.

Deja un comentario