Diseño de UX: etapa de diseño de interfaz de usuario
Por: Marcela Rodríguez / Jeisson Sierra
Luego de pasar por un proceso de investigación y proceder con un dedicado trabajo de arquitectura de la información, este es el momento en el que los insumos de las dos primeras etapas se juntan para entregar un resultado real de lo que es el sitio web. Quizá esta sea la etapa en la que la creatividad es la protagonista, pues si bien el contenido juega un papel importantísimo, los elementos gráficos que se usen deben ser el complemento ideal para darle al mensaje toda la fuerza que necesita y convertir al sitio web en un producto realmente usable y deseable para el usuario.
Según varios estudios, uno de los factores que más influye en la credibilidad de un sitio web -y la reputación de la marca que este representa- es su impacto visual. Esto incluye principalmente colores, tipografías, calidad de imágenes y distribución de contenido.
El secreto del éxito en esta etapa, está en encontrar un equilibrio entre la armonía de los elementos gráficos y la funcionalidad de los mismos.
Prototipos de alta calidad
Luego de haber hecho un acercamiento simple a lo que sería la estructura del sitio (a través de los wireframes) y la distribución de los diferentes tipos de contenidos, este es el punto en el que ese esbozo gráfico se aterriza a lo que en realidad será la parte visual del sitio web. Aquí es cuando el diseñador debe procurar entregar una interfaz limpia, con una línea gráfica que se identifique con la marca o proyecto y que sea lo suficientemente atractiva no solo para cautivar la atención del usuario, sino para lograr que este identifique con facilidad nuestra propuesta de valor y realice las acciones que queremos.
Para esto, el equipo de diseño de Newtenberg, hace algunas recomendaciones:
1. Tener claro quién es tu usuario final.
Gracias al proceso de investigación de la primera etapa de diseño de experiencia de usuario, en este punto se tendrá la claridad suficiente a la hora de escoger la línea gráfica del sitio (tipos de letra, color, imágenes, etc.). Ejemplo: Si tu usuario final es un niño, los colores que se utilizarán serán más llamativos, seguramente.
2. Ser intuitivo.
No olvides esta palabra y su significado, a la hora de pensar en tu diseño no debe estar ausente. Ser intuitivo te permite encontrar buenas alternativas para que tu sitio web sea muy agradable y fácil de recorrer. Recuerda que puedes atraer a un usuario a tu página, pero mantenerlo en ella es el gran reto. Por eso no es bueno entregar toda la información en una sola pantalla, entrega bocados que permitan ver de una forma global todo lo que tu página tiene para dar.
3.Cuidar el menú de navegación.
Este punto tiene mucho que ver con la arquitectura de la información, pero lo resaltamos aquí por su gran importancia. No hagas complicado el recorrido por tu página, no es conveniente tener demasiadas secciones (máximo 8), ni demasiados niveles (máximo 2), tampoco usar palabras largas o tecnicismos en los nombres del menú. (Ver: Experiencias exitosas Newtenberg).
4. Peso de pluma en archivos como imágenes y otros.
Si tu sitio pesa menos será más fácil el acceso para muchos usuarios, y para que esto pase, es necesario valerse de diferentes herramientas (existen muchas online), que harán más fácil esta tarea. Ejemplo: cuando se deban incluir recursos como videos, siempre será una buena alternativa usar YouTube. (Ver: Ventajas de elegir un CMS amigable)
5. Responsive design o diseño adaptable.
Como lo mencionamos en una de nuestras anteriores publicaciones (¿Por qué pensar en móvil al momento de crear tu sitio web?), hoy no nos podemos dar el lujo de diseñar o crear un contenido que no sea de consumo amigable desde cualquier dispositivo. Si eres nuevo en el tema o no eres experto en hojas de estilos, existen muchas herramientas (frameworks) como Bootstrap o Foundation, que son en otras palabras, colecciones de códigos que hacen tu vida más fácil.
6. Creación del manual de identidad gráfica.
Una vez se ha definido y aprobado la línea gráfica del sitio web, esta debe quedar consignada en un documento que se conoce como manual de identidad gráfica y que se convertirá en la guía para actualizaciones posteriores. En este se detallan datos sobre elementos como: tipografías, tamaños de texto (títulos, subtítulos, encabezado, cuerpos de texto), estilos, colores, efectos especiales aplicados a elementos como fotos o botones, usos y variantes de logos, entre otros.
Publicaciones que te pueden interesar:
Diseño de UX: etapa de investigación
Diseño de UX: etapa de arquitectura de la información
¿Qué es la experiencia de usuario?
Compartir en: 
