Share on facebook
Share on linkedin
Share on twitter

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.

Y si deseas saber cómo, a partir de la optimización de la interfaz de usuario UI logramos implementar estrategias de SEO para inmobiliarias, estás en el lugar indicado…

Diseño web

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:

  • UI Movement:

https://uimovement.com/

  • UI Garage:

https://uigarage.net/

  • Muzli:

https://muz.li/

  • Pinterest:

https://www.pinterest.com/

  • Web Design Inspitation:

https://www.webdesign-inspiration.com/

  • Behance:

https://www.behance.net/

 

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, debes conocer 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

 

Mejorar procesos a partir de la reutilización de elementos

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

 

Conoce más sobre diseño y desarrollo web

 

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)

Margins linked

  • Gutter Width: 15px (Espacio entre columnas)

Gutter Width

  • Column Width: 70px (Ancho de las 12 columnas que conforman la contenedora)

Column Width

 

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.

 

Espaciado y proximidad

 

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.

Átomo

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.

Molécula

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.

Organismo

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.

Plantillas

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.

Páginas

Quiero diseñar mi página web

Recordemos lo que dice 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.

Eddie Vélez Benjumea
Eddie Vélez Benjumea
Periodista especializado en redacción SEO y Content Marketing por Hubspot. Columnista de opinión, escritor y poeta.

También te puede interesar

Diseño

Este artículo contiene pasos para optimizar diseños de UI, enlaces de proyectos para un entrenamiento en diseños de buenos esquemas...

Diseño

¿Estás interesado en un diseño web en Colombia? Debes tener cuidado a la hora de buscar una agencia que te...

¡Suscríbete!

Te mantendremos informado de todas las novedades.

Las personas hoy en día realizan más del 70% de las compras a través de la búsqueda de información.