Principios básicos y optimización de la interfaz de usuario UI

Principios básicos y optimización de la interfaz de usuario UI

Este artículo contiene pasos para optimizar diseños de UI, enlaces de proyectos para un entrenamiento en diseños de buenos esquemas de páginas web, la descripción y principios de la metodología Lean, sugerencias para mejorar procesos y detalles de la metodología atomic design.

Entrenamiento para diseñar buenos esquemas

Antes de comenzar a diseñar, tenemos que acostumbrar nuestros ojos a ver diseños bien elaborados, entender que estos diseños utilizan fundamentos teóricos, estructura y cumplen con ciertos parámetros para lograr una estética que cumpla con esquemas de un buen diseño de interfaz de usuario -UI-.

Aquí te dejamos algunos campos de entrenamiento:

2

UI Movement

2

UI Garage

2

Muzli

2

Pinterest

2

Web Design Inspitation

2

Behance

Principios Lean para UI

Lean es una metodología de trabajo que se basa en eliminar procesos que no aporten valor al producto final. Asimismo, optimiza el tiempo al permitir el trabajo colaborativo.

Teniendo en cuenta que en nuestro entorno lo ideal es tener diseños eficientes y rápidos sin que pierdan calidad visual, ten en cuenta estos tres principios Lean que nos ayudarán en nuestro diseño de interfaz de usuario -UI-.

1. Elimina todo los procesos que no agregan valor

2. Equivócate mucho

3. Diseña colaborativamente

Entrenamiento para diseñar buenos esquemas

El método Lean, nos ayuda evitar doble trabajo reutilizando elementos que pueden cumplir el mismo rol en diferentes pantallas, un ejemplo son los formularios. Esto ayudará a nuestro diseño a tener mayor consistencia porque…

… es una buena práctica de usabilidad
… permite ahorrar trabajo extra
… mejora la fluidez de trabajo del equipo de desarrollo

Visual Thinking

El visual thinking es una metodología que permite comprender y asimilar conceptos complejos de manera gráfica. Existen muchas aplicaciones, pero una de las más comunes es el brief de nuestro cliente.

El cliente facilita un brief a manera de texto, pero que debe adaptarse de manera visual para hacerlo más atractivo para sus compradores.

Benchmark para UI

El benchmarking es una acción de gestión que consiste en referenciar los mejores aspectos o prácticas de competidores o referentes de mercado para adaptarlos a las necesidades propias.

Para el caso de la interfaz de usuario -UI-, consiste en una búsqueda específica de referencias netamente de diseño visual frente a la usabilidad. Esto permite optimizar los diseños propios a favor del proyecto o marca a la que le estés trabajando.

Fórmula para un buen Benchmark UI

Producto + UI

Producto + Interfaz + UI

Arquitectura de información visual

Es necesario comenzar detectando cómo están compuestos los patrones de resultados del benchmark UI realizado, esto permite definir una arquitectura favorable al proyecto y a los tiempos de diseño y desarrollo, marcando los puntos de partida.

Elaboración de wireframes

Este paso es muy importante porque armaremos el esqueleto de nuestra
página web, será nuestra guía visual, dado que nos ayuda a obtener
una aproximación más tangible de las funcionalidades del sitio.

Es importante que tengas en cuenta ciertos parámetros que son importantes para la realización de la misma:

Grillas

Margins linked: 138px
Ancho de la contenedora donde van alojados todos elementos de una página web.

Gutter Width: 15px
Espacio entre columnas.

Column Width: 70px
Ancho de las 12 columnas que conforman la contenedora.

Espaciado y proximidad

La distancia es de suma importancia para lograr definir cada sección.

La proximidad de los elementos en una sección se mide con una distancia de 40px de elemento a elemento. El espaciado de un grupo de elementos a otro se aplica con una medida de 80px.

De estas dos maneras se logra una diagramación donde hay una buena proximidad entre los elementos que conforman un grupo.

El descanso visual debe hacer presencia cuando hacemos scroll de una sección a otra.

Jerarquía

Le daremos orden al contenido que conforma nuestra web, definiendo lo más importante para el lector. Esto tendrá una coherencia y un sentido a la lectura de la información.

Atomic design

El atomic design, es un sistema de trabajo creado por Brad Frost que se basa en la creación de elementos sencillos para crear estructuras de información más complejas.

Los 5 niveles de este sistemas para crear un interface son:

Nivel 1 – átomos

Un átomo es la unidad de partículas más pequeño que puede existir. Para el caso del diseño gráfico, un átomo hace referencia a un elemento UI, como por ejemplo: color, tipografía, card, entre otros.

Nivel 2 – Moléculas

Se genera con la unión de dos o más átomos. Del mismo modo, la unión de diferentes átomos se usa para formar un elemento UI más complejo, como por ejemplo: formulario con botón de enviar.

Nivel 3 – Organismo

Podríamos considerar un organismo como la unión de moléculas (Por encima de todo se pueden repetir), como por ejemplo: cuando unimos un rectángulo con el avatar y sus nombres.

Nivel 4 – Plantillas

Las plantillas son la unión de distintos organismo para formar una página o una aplicación. Se trata de un entregable de alta fidelidad, pero que no termina de ser el diseño final.

Nivel 5 – Páginas

Este seria el ultimo nivel del atomic design. Consiste en la entrega del diseño final que contiene todos los elementos UI aplicados. Este archivo pasa para el desarrollo o test con usuarios o equipo de trabajo.

Esto nos ayudará a crear un sistema que, a futuro, podrá asumir fácilmente el diseño de nuevas funcionalidades, pues estarán los átomos creados y solo habrá que combinarlo de tal modo que cree nuevas moléculas y organismos.

Ten en cuenta que recurrir a estas técnicas nos permite crear diseños web que logren cumplir los objetivos de nuestros clientes, con las intenciones de los usuarios y el cumplimiento de nuestra meta: entregar un diseño con una estética agradable, altamente usable y funcional.

Recordemos lo que dijo el gran diseñador
massimo vignelli.
“Me gusta que el diseño sea semánticamente correcto, semánticamente consistente y pragmáticamente comprensible. Me gusta que sea visualmente poderoso, intelectualmente elegante y, sobre todo, que perdure.”

Pedro Martez, Animador 2D/3D en Los Creativos

Pedro Martez
Diseñador y animador 2D/3D

Compartir:

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

WhatsApp Conversa con nosotros