Propuesta de interfaz gráfica para una web multiplataforma

Asignatura: Diseño de Interfaces Multimedia

Nombre del estudiante:  Joan Casellas Cubiña

Consultor y profesor: Olga Cuevas Melis, Astrid Sanchez Lopez

Introducción

La práctica final de la asignatura Diseño de Interfaces Multimedia, ha consistido  en hacer un diseño gráfico multiplataforma (para escritorio y smartphone) de la página web e-renova.net, una página especializada en compra-venta de coches. Actualmente, la web presenta problemas de interactividad, usabilidad, accesibilidad y distribución del contenido. Por este motivo, en la practica final, se han realizado una serie de cambios respecto a la versión existente, con el fin de mejorar todos estos problemas y conseguir una buena experiencia de usuario. Para hacerlo, anteriormente se han realizado tres PEC para adquirir  todos los conceptos necesarios e ir perfilando el diseño definitivo que se pedía en la practica.

Así pues, durante el diseño de la interfaz, se ha querido asegurar que el proceso de interacción entre interfaz y usuario, se pueda efectuar de manera fácil e intuitiva, y sobretodo, que el usuario principal, pueda acceder a la información o hacer las acciones correspondientes de la manera más simple posible.

Etapas y retos

Para empezar a diseñar el prototipo final, ha sido indispensable seguir todas la PEC anteriores. La propuesta gráfica empieza a partir de la PEC 2, dónde tenemos que escoger uno de los dos modelos de wireframe dados para distribuir los elementos, decidir quien será el publico objetivo de la web y, muy importante, generar un Wall Concept básico (25 imágenes) con la finalidad de definir la gama cromática con la que trabajaré y cuales serán los referentes gráficos del diseño. Siguiendo las etapas marcadas, primero de todo, se ha tomado la decisión de utilizar la segunda versión del wireframe (podíamos escoger entre dos versiones diferentes) porque me pareció la más adecuada, por el simple hecho de que sigue una estructura definida y no produce en el usuario una sensación de desorden cuando accede a la información, aunque ha habido variantes durante el diseño.

Wireframe 1

Wireframe 2 y Wireframe 3

Una etapa importante antes de empezar el diseño, ha sido escoger quien será y cuales características tendrá el publico objetivo de la web. Por este motivo, se han definido tres perfiles de usuario teniendo en cuenta atributos comunes como sus necesidades de información, su experiencia y conocimientos, o sus condiciones de acceso a la información. De esta manera, he podido empezar a pensar el diseño por una audiencia con unas características definidas que me han permitido adaptarme a unos objetivos concretos y optimizar su grado de satisfacción.

En cuanto al Wall Concept, la decisión ha sido generar una tonalidad visual basada en tres colores principales (negro, rojo y gris), presentes en el logotipo original con la intención de dar una sensación de seriedad, ya que los usuarios que utilizaran la web serán adultos y profesionales del sector. Además, le proporciona a la web una identidad propia.

Wall Concept

Llegados a este punto, se empieza a realizar la propuesta gráfica, Así pues,  durante la PEC2 y, sobretodo durante la PEC3 y la practica final, se irán generando y perfeccionando los diseños de las diferentes páginas de la web, ya sea en versión escritorio como en versión responsive, siguiendo el siguiente proceso de optimización:

Uso de retículas. Inicialmente, en la versión escritorio, quería utilizar una única retícula para todos los diseños, pero la distribución del contenido no me lo ha permitido y se optó por modificar-la siguiendo una estructura modular adaptable dependiendo de la página en la que nos encontramos. Por otro lado, en la versión responsive, el contenido se ha colocado verticalmente, es decir, en una única columna. Volviendo a la versión escritorio, en varias paginas, ha sido muy útil utilizar una retícula basada en columnas, con el objetivo de separar los diferentes apartados y así, definir mejor cuales son los contenidos y proporcionar una mejor claridad para el usuario. 

Tipografía. La tipografía utilizada ha sido la “Bebas Neue” para títulos y subtítulos, y la “Open Sans” para el texto en general. La elección de estas dos tipografías es debido a que están perfectamente contrastadas. También se ha modificado los espacios interlineales del texto para que el usuario lea mejor el contenido. Destacar, que en algunas ocasiones se he separado el espacio entre letra y letra de los títulos porqué la tipografía “Bebas Neue” hace que se junten mucho por defecto.

Colores. Toda la web esta basada con los mismos colores (definidos en el Wall Concept inicial): negro, rojo y gris. La intención ha sido darle identidad propia a la web, basándome en los colores principales del logotipo. A partir de aquí, se ha utilizado los diferentes colores, unos para el contenido (negro y rojo) y otros en aspectos gráficos como iconos o marcos.

Aspectos técnicos relacionados con el dispositivo. Evidentemente, trabajar con páginas de 1024px o 320px de ancho condiciona en el momento de estructurar el contenido y, al mismo tiempo, hacer el diseño. La idea es crear un diseño donde se reduzca considerablemente el uso del scroll. Esto se ha conseguido en la versión escritorio, pero en la versión responsive es difícil, porqué el ancho de la pagina es mas pequeño y, por este motivo, el contenido se ha distribuido uno debajo del otro. Para mejorar esto, se han introducido algunos contenidos en “efecto acordeón” , es decir, el usuario puede hacer que aparezcan o se escondan según su interés. También, las noticias en la versión responsive, ocupaban mucho espacio vertical, y por ese motivo se ha decidido crear un slideshow y así reducir el scroll por parte del usuario.

Finalmente, se ha elaborado una guía de estilo para describir las pautas de diseño del web, y que servirá para garantizar la coherencia de la identidad visual en los diferentes dispositivos. La guía de estilo, describe de manera muy visual las siguientes características básicas del diseño: Retícula, tipografía, gamma cromática y elementos de interacción. Para hacerlo, como en todo el proceso para hacer el diseño, he utilizado el software Illustrator.

Guía estilo

Conclusiones

Para hacer el diseño de una web, la idea principal es centrarse en las personas que la utilizarán, ya que son ellas las que interactuarán para acceder a la información o hacer cualquier otro actividad. Por este motivo, tenemos que organizar la información de manera que el usuario pueda acceder a la web de manera fácil y rápida. Muchas webs que hay actualmente en Internet, y en este caso concreto la página de e-renova.net, han descuidado muchos de estos aspectos en el momento de diseñar la web, de manera que generan un total desconcierto delante del gran volumen de información y no siguen una estructura lógica. Por lo tanto, lo mas importante no es la cantidad de información que pueda haber en la web, sino como se distribuye para tener acceso a ella y cual es el impacto visual que tendrá hacia los diferentes usuarios. Además, es muy importante la interacción de los usuarios con los elementos de la web, ya que les da una sensación de control durante la navegación, tanto en la versión escritorio como a la versión responsive.

Seguro que, con el tiempo, hará falta actualizar el diseño y la estructura de nuevo, el contenido, dependiendo de la nueva información que se introduzca, o las necesidades del mercado. Además, también mejoraría o introduciría mas gráficos de los que hay actualmente para potenciar una identidad propia. Por otro lado, también he contemplado la posibilidad de crear un nuevo diseño, con un tono más minimalista, ya que seria una opción óptima para este tipo de web.

Para finalizar, puedo decir que estoy muy satisfecho de los resultados obtenidos porqué una vez terminado el diseño de la interfaz, he podido comparar la web que actualmente esta funcionando con el nuevo diseño, y las mejoras son importantes en todos los aspectos. Además, se han detectado progresivamente los diferentes problemas y paralelamente se han solucionado de una manera lógica, siempre pensando en el usuario, cosa que ha sido muy enriquecedor para futuros diseños a realizar. Por este motivo, puedo decir que ha sido una gran experiencia personal y estoy seguro que me será muy útil en mi vida profesional.

Documentación

Freepik. Recursos graficos para todos. http://www.freepik.es/ (imatges amb llicència BY-NC-SA). [Web]

MaterialDesign. https://www.google.com/design/spec/material-design/introduction.html. [Web]

LonelyPlanet. https://rizzo.lonelyplanet.com/styleguide/design-elements/colours

Com- Elisava. Procesos Creativos. http://www.com-elisava.com/pensar-con-las-manos/ [Web]

UOC. Diseño de Interficies. http://multimedia.uoc.edu/blogs/dii/es/. [Web]

Tona Monjo Palau. Disseny d’interfícies multimèdia. Mòdul 1, Gèneres. Mòdul 2, Disseny Centrat en l’usuari.

Cita recomendada: CASELLA CUBIÑA, Joan. Propuesta de interfaz gráfica para una web multiplataforma. Mosaic [en línea], diciembre 2016, no. 144. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n144.1636.