Prototipo gráfico multiplataforma de sitio web

Asignatura: Diseño de interfaces multimedia

Consultor y profesor: Tona Monjo Palau / Laia BLasco

Durante el transcurso de la asignatura de Diseño de interfaces multimedia se nos pidió realizar el rediseño de la versión para escritorio de un sitio web y la creación de una versión para smartphone. Entre las tres páginas que nos fueron propuestas, elegí el portal de juegos online juegosjuegos.com, ya que me resultaba interesante el diseño y la usabilidad orientados a un público juvenil.

Etapas y retos

Para llegar al resultado final, comencé haciendo el prototipo funcional de la versión responsive para smartphone, a partir de la versión para escritorio, que se nos proporcionaba como base sobre la que trabajar. Para ello utilicé la aplicación web Mockflow WireframePro, que permite la creación de wireframes directamente desde el navegador.

En esta primera etapa, adapté para smartphone el contenido de las pantallas más relevantes del sitio web, partiendo de la versión de escritorio. Esta fue la fase más complicada del proyecto, ya que para lograr una versión para móvil ágil y funcional, gran parte del contenido del sitio original debe desaparecer, y las dudas sobre si se están tomando las decisiones adecuadas son enormes, pues el prototipo final se basará en este primer wireframe. A esto se añade la dificultad de adaptar una página web diseñada para escritorio a pantallas táctiles de tamaño reducido.

Con los wireframes para escritorio y smartphone completados, comencé con la fase final, el prototipado gráfico. No sin antes realizar una guía de estilo que permitiese homogeneizar el diseño de las diferentes páginas de la web, así como futuras ampliaciones.

Ya que el rediseño de la página web es bastante drástico, intenté conservar parte de la identidad original manteniendo los colores azul y amarillo de su logotipo, presentes en la mayoría de elementos gráficos.

Mi mayor esfuerzo se centró en transformar una página caótica en una con un diseño centrado en el usuario, con secciones claramente diferenciadas y espacios vacíos que añadan una sensación de limpieza. Algo que resultó complicado debido a la enorme cantidad de contenido a incluir, y para lo que me ayudé de tipografías condensadas que aprovechan mejor el escaso espacio disponible, sobre todo en la versión para smartphone.

El proyecto concluyó con la realización, en ambas versiones, del prototipo gráfico con aspecto final de las páginas más representativas del sitio web: home, subhome, ficha de un juego, resultado de una búsqueda, perfil de usuario, contacto, mapa web y perfil de un programador.

Conclusiones

La llegada de smartphones ha complicado aún más la tarea de diseñar un sitio web centrado en el usuario, ya que el esfuerzo por distribuir los contenidos de forma coherente prácticamente se duplica, y con ello las dudas. Durante el trabajo realizado en esta práctica me han surgido multitud de interrogantes sobre los que he tomado las decisiones que he considerado más adecuadas, pero hasta que no se realice un test con usuarios reales no se puede afirmar que el diseño funciona.

Ha sido un proyecto enriquecedor en el que he aprendido que el diseño de una página web va mucho más allá de su apariencia gráfica. He quedado satisfecho con el resultado general, aunque si empezase de nuevo trataría de realizar test en algunos usuarios durante las primeras fases para comprobar que sigo el camino correcto, ya que en realidad son ellos los que deciden si un diseño es el adecuado.

Cita recomendada: BERROCAL MUÑOZ, Sergio. Prototipo gráfico multiplataforma de sitio web. Mosaic [en línea], febrero 2014, no. 115. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n115.1407.