Diseño UI

Terminología y etapas básicas del diseño de interfaces

El diseño de interfaces es un campo en constante evolución. Esto se debe a que su principal objetivo es anticipar las necesidades del usuario, necesidades que están en constante cambio.

Sin embargo, existen ciertos conceptos sobre los que podemos consensuar una definición. A continuación, te presentamos un glosario esencial para comprender las especificidades de este campo del diseño.

Clasificación de elementos en UI

En su libro, “Atomic Design”, Brad Frost define 5 elementos que componen cualquier interfaz.

Átomos

Corresponden a los elementos más básicos en cualquier UI. Pueden ser etiquetas HTML, un input o un botón, aunque cuestiones más abstractas como una paleta de colores también son átomos.

Moléculas

Estos elementos surgen de la combinación de átomos. Corresponden a la unidad funcional más pequeña de un conjunto. Como ejemplifica Frost, un botón, un selector de opciones y un input no son especialmente útiles por sí solos, pero juntos pueden construir un formulario. En ese momento, un grupo de átomos se transforma en una molécula.

Organismos

Son organismos aquellos elementos que servirán como “bloques de construcción” en la interfaz. Es decir, son grupos de moléculas organizadas en torno a funciones similares o relacionadas. Estos pueden ser un footer, una grilla de productos o un menú, por ejemplo.

Plantillas

La agrupación de organismos nos permitirá crear plantillas. Las plantillas definen el contexto en que son útiles los organismos, creando elementos con una utilidad clara, pero que pueden ser utilizados en múltiples páginas.

Páginas

Una página corresponde a una aplicación específica de una plantilla. Por ejemplo, para el sitio de un medio de comunicación, puede que tanto la sección de Deportes como la de Espectáculos ocupen la misma plantilla, pero cada una será una página distinta.

Etapas del diseño de una interfaz

En {ida, nuestra metodología de diseño UI responde a principios del diseño UX, por lo que su creación está fuertemente ligada a un proceso de investigación previo.

Conocer/entender al cliente( y usuario)

Resulta esencial conocer las necesidades de nuestros usuarios y cruzarlas con los objetivos que tengan nuestros clientes. Abordaremos la guía de estilo del proyecto, analizamos el manual de marca y mapeamos la percepción del usuario de la marca.

El Wireframe es solo una guía, no una regla

Los Wireframes están construidos en base a principios del diseño UX, pero no es suficiente con eso. La expresión visual viene a reforzar las interacciones que el usuario deberá realizar en el sitio, haciendo uso de formas y figuras que guiarán al usuario a realizar una acción en específico.

Coherencia y constancia

El sitio debe verse uniforme y constante a lo largo del viaje del usuario a través del sitio. Es importante mantener el tamaño de las imágenes y el estilo de ellas, cuidar los cuerpos de las tipografías, aplicar una paleta de colores versátil. El usuario debe percibir que cada página contiene la identidad de la marca.

El diseño de interfaces va más allá de un sitio web o una pantalla. Es la herramienta que nuestro usuario usará para conseguir sus objetivos y suplir sus necesidades. En definitiva, un buen diseño UI nos permitirá alcanzar una buena experiencia de su parte.