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

interfaz de usuario

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.

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 Velez

Eddie Velez

Compartir:

Share on facebook
Share on twitter
Share on linkedin

Categorías similares

Mira otros contenidos que podrían interesarte sobre
SEO, SEM , Analítica e Inbound Marketing.

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 …

Marketing de resultados: usando SEMrush como centro de control de estrategia

Entendamos el marketing de resultados como una metodología derivada del marketing digital, la cual inicia y finaliza en la data. En este artículo comprenderás qué es marketing de resultados y …

Pasos para una buena optimización SEO

Es fundamental controlar el número de URLs totales de un proyecto, analizando el estado en el que se encuentran desde el punto de vista de su rastreo, la correcta indexación …

Marketing de contenidos: estrategias, formatos y narrativas. El contenido es el rey

El marketing de contenidos es un conjunto de conocimientos que consiste en el análisis de públicos específicos, de tal forma que permita determinar cuáles son los formatos y narrativas que …

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Los campos obligatorios están marcados con *

Comentarios recientes

    Suscríbete y recibe todas
    nuestras novedades