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…
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:
-
UI Garage:
-
Muzli:
-
Pinterest:
-
Web Design Inspitation:
https://www.webdesign-inspiration.com/
-
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, debes conocer estos tres principios Lean que nos ayudarán en nuestro diseño de interfaz de usuario -UI-.
- Elimina todo los procesos que no agregan valor
- Equivócate mucho
- 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)
- 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.
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.
