Explorando los Principios Gestalt del Diseño

Este articulo fue escrito por Cameron Chapman. Originalmente publicado en Toptal.

El espacio negativo ha sido durante mucho tiempo un elemento básico de un buen diseño. Dejar un espacio en blanco alrededor de los elementos de un diseño es lo primero que se nos viene a la mente. Pero luego hay diseños que usan ese espacio en blanco para inferir un elemento que no está realmente allí (la flecha escondida entre la E y la X en el logotipo de FedEx inmediatamente viene a la mente como un ejemplo).

La "E" y la "x" en el logotipo de FedEx crean una flecha dentro del espacio negativo entre ellas.

El cerebro humano es excepcionalmente bueno rellenando los espacios en blanco en una imagen y creando un todo que es mayor que la suma de sus partes. Es por eso que vemos caras en cosas como hojas de árboles o grietas en las aceras.

Este principio es una de las ideas subyacentes más importantes detrás de los principios gestálticos de la percepción visual. La propuesta inicial más influyente escrita sobre la teoría fue publicada por Max Wertheimer en sus leyes de organización perceptiva de 1923, aunque la discusión de Wolfgang Köhler en 1920 sobre la Gestalten física también contiene muchas ideas influyentes sobre el tema.

Independientemente de quién propuso las ideas por primera vez (ha habido ensayos que datan de hasta 1890), los principios gestalt son un conjunto importante de ideas para cualquier diseñador para aprender, y su implementación puede mejorar mucho no solo la estética de un diseño, sino también su funcionalidad y facilidad de uso.

En los términos más simples, la teoría gestalt se basa en la idea de que el cerebro humano intentará simplificar y organizar imágenes complejas o diseños que consisten en muchos elementos, al organizar inconscientemente las partes en un sistema organizado que crea un todo, en lugar de solo un serie de elementos dispares. Nuestros cerebros están diseñados para ver la estructura y los patrones con el fin de que comprendamos mejor el entorno en el que vivimos.

Hay seis principios individuales comúnmente asociados con la teoría gestalt: similitud, continuación, cierre, proximidad, figura/fondo, y simetría y orden (también llamado prägnanz). También hay algunos principios adicionales más nuevos asociados a veces con gestalt, como destino común.

Similitud

Es la naturaleza humana agrupa cosas similares. En gestalt, elementos similares se agrupan visualmente, independientemente de su proximidad entre sí. Se puede agrupar por color, forma o tamaño. Semejanza se puede usar para unir elementos que pueden no estar próximos. el otro al otro en un diseño.

Los cuadrados aquí están todos igualmente espaciados y tienen el mismo tamaño, pero los agrupamos automáticamente por color, aunque no hay rima o razón para su ubicación.

Por supuesto, puedes hacer que las cosas sean diferentes si quieres que se destaquen entre la multitud. Es por eso que los botones para llamadas a la acción a menudo se diseñan con un color diferente al del resto de la página, por lo que se destacan y llaman la atención del visitante sobre la acción deseada.

En el diseño de UX, al usar la similitud, deja claro a los visitantes qué elementos son iguales. Por ejemplo, en una lista de características que usa elementos de diseño repetitivos (como un ícono acompañado de 3-4 líneas de texto), el principio de similitud haría que sea fácil escanearlos. Por el contrario, cambiar los elementos de diseño por las características que desea resaltar los hace destacar y les da más importancia en la percepción del visitante.

Incluso cosas tan simples como asegurarse de que los enlaces de un diseño estén formateados de la misma manera se basan en el principio de similituden la forma en que sus visitantes percibirán la organización y la estructura de su sitio.

Continuación

La ley de la continuidad postula que el ojo humano seguirá el camino más suave al ver las líneas, independientemente de cómo las líneas en realidad fueron dibujados.

El ojo tiende a querer seguir la línea recta desde un extremo de esta figura a la otra, y la línea curva desde la parte superior a la inferior, incluso cuando las líneas cambian de color a la mitad.

Esta continuación puede ser una herramienta valiosa cuando el objetivo es guiar la mirada del visitante en cierta dirección. Seguirán el camino más simple en la página, así que asegúrese de que las partes más vitales que deberían ver caigan dentro de ese camino.

Como el ojo sigue naturalmente una línea, colocar los elementos de una serie en una línea atraerá la atención de un elemento al siguiente. Los deslizadores horizontales son uno de esos ejemplos, al igual que los listados de productos relacionados en sitios como Amazon.

Cierre

Closure es uno de los principios más geniales de Gestalt y uno que ya tocado al principio de esta pieza. Es la idea de que su cerebro completará las partes faltantes de un diseño o imagen para crear un todo.

En su forma más simple, el principio de cierre le permite a su ojo seguir algo así como una línea punteada hasta su final. Pero aplicaciones más complejas se ven a menudo en logotipos, como el del World Wildlife Fund. Grandes trozos del contorno del panda faltan, pero tu cerebro no tiene problemas para completar las secciones faltantes y ver todo el animal.

El principio de cierre gestalt se ilustra bellamente en el logotipo de panda del Fondo Mundial para la Naturaleza. El cerebro completa las formas blancas, a pesar de que no están bien definidas.

El cierre se utiliza muy a menudo en el diseño de logotipos, con otros ejemplos que incluyen los de la red estadounidense, NBC, Sun Microsystems e incluso Adobe.

Otro ejemplo muy importante de cierre en el trabajo en UX y diseño de la interfaz de usuario es cuando se muestra una imagen parcial desapareciendo de la pantalla del usuario para mostrarles que hay más para encontrar si deslizan hacia la izquierda o hacia la derecha. Sin una imagen parcial, es decir, si solo se muestran imágenes completas, el cerebro no interpreta inmediatamente que podría haber más para ser visto, y por lo tanto es menos probable que el usuario se desplace (ya que el cierre ya es aparente).

Proximidad

Proximidad se refiere a qué tan cerca están los elementos entre sí. Las relaciones de proximidad más fuertes son aquellas entre superposición de sujetos, pero simplemente agrupar objetos en una sola área también puede tener un fuerte efecto de proximidad.

Lo opuesto también es cierto, por supuesto. Al poner espacio entre los elementos, puede agregar separación incluso cuando sus otras características son las mismas.

Tome este grupo de círculos, por ejemplo:

Lo único que diferencia al grupo de la izquierda de los de la derecha es la proximidad de las líneas. Y sin embargo, su cerebro interpreta la imagen de la derecha como tres grupos distintos.

Un PDF de USPS forma ejemplo donde el principio gestalt de proximidad está perjudicando a UX. Debido a que las etiquetas de campo están más cerca de los campos debajo de ellos, la gente erróneamente cree que es donde la información va para "c". y "d" Sin embargo, se supone que la información debe proporcionarse en los campos sobre las etiquetas de texto.

En el diseño UX, la proximidad se usa con mayor frecuencia para que los usuarios agrupen ciertas cosas juntas sin el uso de elementos como bordes rígidos. Al poner las cosas similares más cerca entre sí, con espacio entre cada grupo, el espectador reconocerá de inmediato la organización y la estructura que desea que perciban.

Figura/Fondo

El principio de figura/fondo es similar al principio de cierre porque aprovecha la forma en que el cerebro procesa el espacio negativo. Probablemente haya visto ejemplos de este principio flotando en los memes en las redes sociales, o como parte de logotipos (como el logotipo de FedEx ya mencionado).

Su cerebro distinguirá entre los objetos que considera que están en el primer plano de una imagen (la figura o punto focal) y el fondo (el área en la que descansan las figuras). Donde las cosas se ponen interesantes es cuando el primer plano y el fondo en realidad contienen dos imágenes distintas, como esta:

Algunas personas verán inmediatamente el árbol y las aves cuando vean el logotipo del Zoológico de Pittsburgh& PPG Aquarium, mientras que otros verán al gorila y al león mirándose el uno al otro.

Otro gran ejemplo del principio gestalt de figura/tierra.

Un ejemplo más simple se puede ver con esta imagen, de dos caras creando un candelabro o jarrón entre ellos:

En esta famosa ilusión desarrollada por el psicólogo danés Edgar Rubin, al espectador generalmente se le presentan dos interpretaciones de formas: dos rostros o un jarrón. Es otro excelente ejemplo del principio figura/fondo.

En términos generales, su cerebro interpretará el área más grande de una imagen como el suelo y la más pequeña como la figura. Como se muestra en la imagen de arriba, puedes ver que los colores más claros y más oscuros pueden influir en lo que se ve como la figura y lo que se ve como el suelo.

El principio figura/fondo puede ser muy útil cuando los diseñadores de productos desean resaltar un punto focal, particularmente cuando está activo o en uso, por ejemplo, cuando aparece una ventana modal y el resto del sitio se desvanece en el fondo, o cuando se hace clic en una barra de búsqueda y el contraste se incrementa entre él y el resto del sitio.

Simetría y orden

La ley de simetría y orden también se conoce como prägnanz, la palabra alemana para “buena figura”. Lo que este principio dice es que su cerebro percibirá formas ambiguas de la manera más simple posible. Por ejemplo, una versión monocromática del logotipo Olímpico se ve como una serie de círculos superpuestos en lugar de una colección de líneas curvas.

Aquí hay otro buen ejemplo del principio de diseño gestalt “prägnanz”:

Su cerebro interpretará la imagen de la izquierda como un rectángulo, círculo y triángulo, incluso cuando los contornos de cada uno estén incompletos porque son formas más simples que la imagen en general.

Destino común

Si bien destino común no era originalmente incluido en la teoría gestalt, se ha agregado desde entonces. En el diseño UX, su utilidad no puede pasarse por alto. Este principio establece que las personas agruparán las cosas que apuntan o se mueven en la misma dirección.

En la naturaleza, vemos esto en cosas como bandadas de pájaros o bancos de peces. Están formados por un conjunto de elementos individuales, pero debido a que se mueven aparentemente como uno solo, nuestros cerebros los agrupan y los consideran un único estímulo.

Una bandada de pájaros se ve como una sola unidad cuando vuela en la misma dirección y, por lo tanto, comparte un destino común. (por Martin Adams en Unsplash)

Esto es muy útil en UX ya que los efectos animados se vuelven más frecuentes en el diseño moderno. Tenga en cuenta que los elementos en realidad no tienen que moverse para beneficiarse de este principio, pero tienen que dar la impresión de movimiento.

Principios de Gestalt en el Diseño UX

Al igual que con cualquier principio psicológico, aprender a incorporar los principios de percepción visual de gestalt en su trabajo de diseño puede mejorar enormemente la experiencia del usuario. Comprender cómo funciona el cerebro humano y luego explotar las tendencias naturales de una persona crea una interacción más fluida que hace que el usuario se sienta cómodo en un sitio web, incluso si es su primera visita.

Los principios de Gestalt son relativamente fáciles de incorporar en casi cualquier diseño y pueden elevar rápidamente un diseño que parece aleatorio o como luchar por la atención de un usuario a uno que ofrece una interacción perfecta y natural que guía a los usuarios hacia la acción que desean que tomen.

Familiarizándose con el Plugin de Sketch de Desarrollo

Este articulo fue escrito por Manuele Capacci. Originalmente publicado en Toptal.

Las herramientas de diseño mejoran constantemente, y cada día entran más en el mercado (InVision Studio, por ejemplo). Dicho esto, las herramientas de diseño modernas como Sketch se crean para ser minimalistas, donde la herramienta se establece para eliminar todas las características no esenciales. Es típico crear funcionalidades adicionales solo cuando sea necesario, y aquí es donde entramos en el interesante mundo del desarrollo del plugin Sketch.

Desarrollar plugins de Sketch puede ayudar a los diseñadores a adoptar el aspecto técnico de cómo Sketch realmente funciona y darles la posibilidad de automatizar las tareas repetitivas. Los complementos de croquis están hechos con código y Sketch JavaScript API, pero como los diseñadores no necesitan ser desarrolladores expertos para usar esta API, este tutorial demuestra cómo codificar un complemento para simplificar un proceso de diseño y mejorar el flujo de trabajo en Sketch.

Complementos de bosquejo simples pero muy útiles

Muy a menudo, los diseñadores de bocetos tienen instalados al menos tres o cuatro complementos de Sketch. Los complementos a continuación son de naturaleza algo básica, pero se usan comúnmente porque ahorran mucho tiempo.

• RenameIt (cambia el nombre de varias capas a la vez)
• Sort Me (ayuda a reordenar las capas de una manera lógica)
• UnsplashIt (recupera imágenes de Unsplash)
• Content Generator (genera nombres falsos y otros datos “reales”)

Si tienes curiosidad por ver qué se puede lograr con los complementos de Sketch, echa un vistazo a nuestra lista definitiva de 50 complementos de Sketch.

El plugin RenameIt es un popular plugin de Sketch que ayuda a los diseñadores a cambiar el nombre de varias capas a la vez.

Aspectos básicos de JavaScript en menos de 2 minutos

Antes de comenzar a codificar, tendrás que aprender algunas cosas sobre la sintaxis de JavaScript (es decir, la formalidad de cómo se escribe el código). Esto no solo te ayudará a escribir el código de tu plugin de Sketch, sino que comprenderás mejor cómo y por qué funciona el código.

Comentarios

Comencemos con los comentarios del código.

Los comentarios de código son como notas ocultas: no están orientados al usuario y, por lo tanto, no se mostrarán en el complemento de Sketch resultante. Los desarrolladores suelen utilizar estos comentarios de código para explicar el código que se ha escrito, por lo que si otro desarrollador lee el código o si vuelven al código más adelante, comprenderán qué se ha escrito y cómo funciona.

// this is a single-line comment

/*
    This is a 
    multiline comment
*/

Variables

Las variables son como pequeños contenedores que se usan para almacenar valores; por ejemplo:

var firstName = "Manuele Capacci";
// the variable firstName now equals "Manuele Capacci"

Para recuperar este valor, debe usar la variable; por ejemplo:

log(firstName);
// esto grabará "Manuele Capacci" en la consola

La ventana de scripting Destacado: la consola, que se usa para probar la salida.

Objetos

Los objetos pueden almacenar múltiples variables, como esta:

var user = {
    firstName: "Manuele",
    lastName: "Capacci",
    age: 28,
    role: "Product Designer"
}

Observa que el valor `age ‘no está entre comillas. Esto se debe a que las citas definirán la variable como una cadena, lo que significa que la salida prevista debe ser literal. No queremos eso; queremos que la variable se defina como un número entero para que podamos realizar operaciones matemáticas en él. Poner comillas alrededor del valor definirá indeseablemente el valor como una cadena.

Podemos usar las variables del objeto, como esta:

// using the object's variables
user.firstName;
user.lastName;
user.age;
user.role;

Arrays

Las matrices son un tipo de objeto más simple:

var users = ["Manuele", "Daniel", "Miklos"]
// "users" is an array that contains a list of names

user[0]; // this equals "Manuele"
user[1]; // this equals "Daniel"
user[2]; // this equals "Miklos"

Funciones

Las funciones son accionables — ellos hacen algo. En el ejemplo siguiente, la función calcula la suma de ay b. En este ejemplo, a es 2 y b es 3.

// a function declaration
function sum(a, b) {
    return a + b;
}

// calling the function
sum(2, 3); // this equals 5

// recapitulando lo que hemos aprendido hasta ahora

var total = sum(2, 3); // la variable "total" será igual a 5
log(sum(2, 3)); // esto dará como resultado 5 en la consola
log(total); // esto también dará como resultado 5 en la consola

Declaraciones condicionales

Los enunciados condicionales solo ejecutan el código dentro de sus corchetes si se cumple la condición especificada. En el ejemplo siguiente, el código se ejecuta de inmediato porque el valor de firstName de hecho es igual a “Manuele”; por lo tanto, el código else if yelse no se ejecuta.

var firstName = "Manuele";

if(firstName == "Manuele") {
    // hacer algo por Manuele
} más  si(firstName == "Daniel") {
    // haz algo por Daniel
} más {
    // hacer algo por alguien más
}

Tratemos de escribir un código básico en Sketch.

Escribir tu primera línea de código en Sketch

Navegue a “Complementos → Ejecutar script” en Sketch. En esta ventana de creación de scripts, puede escribir código para hacer que las cosas sucedan en Sketch (como cambiar el nombre de las capas) y luego, empaquetar este código en un complemento de Sketch con .sketchplugin filetype.

Abajo: Así es como se ve la ventana de scripting la primera vez que la abre. Es posible que veas algún código con el que no estés familiarizado, pero aprenderás un poco más sobre JavaScript en el camino. El código predeterminado que ya existe en esta ventana le dice el nombre del documento de boceto, qué capas están actualmente seleccionadas y más.

Por ahora, borre todo el código en esta ventana y reemplácelo por:

log("Hello Sketch");

Lo que estás haciendo aquí es llamar a la función log y pasar la cadena Hello Sketch como argumento. Este registro solo es accesible entre bastidores, lo que lo hace útil para depurar código cuando las cosas no funcionan como se esperaba. Si hace clic en el botón “Ejecutar”, el argumento Hello Sketch se registrará en la consola debajo de la ventana de scripting.

Vamos a cavar un poco más profundo.

• 
• 
• 

Creación de un complemento para cambiar el nombre de la capa de boceto

Ahora puede usar su conocimiento de scripting JavaScript y Sketch para crear un script que cambie el nombre de varias capas a la vez. Rodrigo Soares creó el plugin RenameIt, que logra lo mismo y guarda designers a mucho tiempo — creemos una versión simplificada. Asegúrate de crear algunas capas de boceto para que pueda probar su secuencia de comandos.

El código debe comenzar con una línea repetitiva. Necesita usar la Interfaz de Programación de Aplicaciones (API) de Sketch — este es un término elegante para un objeto especial que necesitará si desea interactuar con Sketch de manera significativa. Nombra este objeto especial de API sketch.

Obviamente, solo cambie el nombre de las capas actualmente seleccionadas. ¿Cómo averiguas qué capas están actualmente seleccionadas? La API de Sketch JavaScript proporciona una forma práctica de obtener esta información con solo una línea de código.

A continuación se explica cómo lograr todo esto con el código JavaScript:

// asignar el objeto API a una variable
var sketch = context.api();

// asignar capas actualmente seleccionadas a una variable
var selection = sketch.selectedDocument.selectedLayers;

Toda la información sobre las capas seleccionadas actualmente está contenida dentro de la variable selection. Ahora solo necesitas “iterar” (repetidamente ejecutar algún código) sobre las capas para cambiarles el nombre.

Por el bien de la prueba, cambia el nombre de cada capa a “Redenominada Layer”.

Agrega este código al final de tu script:

selection.iterate(function(layer) { // for every selected layer
    layer.name = "Renamed Layer"; // rename to "Renamed Layer"
})

Una vez que pulses “Ejecutar”, verás que cada capa ha sido renombrada como “Capa renombrada”, pero para que al usuario se le pregunte cuál debería ser el nombre de la nueva capa. Adaptemos el script:

// pregunta al usuario cuál debe ser el nuevo nombre de la capa
var newLayerName = context.document.askForUserInput_initialValue('What should these layers be renamed to?', '');

selection.iterate(function(layer) { // for every selected layer
    layer.name = newLayerName; // rename to the value of newLayerName
})

Aparecerá una ventana emergente pidiéndole al usuario que especifique un nuevo nombre para las capas.

Si no estás seguro de cómo acceder a ciertos contextos, como las capas actualmente seleccionadas, o cómo revelar un cuadro de entrada de usuario (como en los escenarios anteriores), puede leer el documento oficial Sketch developer documentation, que le mostrará qué código se requiere.

Cuando estés listo para continuar, presiona el botón “Guardar …” en la esquina inferior izquierda de la ventana de secuencias de comandos y asigne un nombre al guión. Ahora encontrarás este complemento de Sketch accesible desde el menú Sketch en “Complementos”, igual que con todos los demás complementos de Sketch.

Cambiar el nombre de las capas en boceto: el código completo

var sketch = context.api();
var selection = sketch.selectedDocument.selectedLayers;

// pregunta al usuario cuál debe ser el nuevo nombre de la capa
var newLayerName = context.document.askForUserInput_initialValue('What should these layers be renamed to?', '');

selection.iterate(function(layer) { // para cada capa seleccionada
    layer.name = newLayerName; // renombrar al valor de newLayerName
})

Creación de un complemento de bosquejo “Seleccionar todas las capas en un grupo”

Ahora vamos a crear algo un poco más complejo. El siguiente complemento de Sketch seleccionará automáticamente todas las capas dentro de un grupo, que luego podrá adaptar para incluir solo capas de texto, o solo capas de formas, o incluso podría detectar automáticamente el tipo de capa y solo seleccionar capas de ese tipo.

Como anteriormente, comencemos definiendo el contexto. Luego puedes iterar/repetir sobre las capas dentro de ese contexto y seleccionarlas automáticamente.

var sketch = context.api();
var selection = sketch.selectedDocument.selectedLayers;

selection.iterate(function(layer) {
    if(layer.isGroup) { // solo ejecuta el siguiente código si la selección es un grupo
        layer.iterate(function(innerLayer){ // para cada capa en el grupo
            innerLayer.addToSelection(); // agregarlo a la selección
        });
        layer.deselect(); // deseleccionar el grupo
    }
});

Con este código, se seleccionarán todas las capas dentro de cualquier grupo seleccionado actualmente (siempre que se seleccionen algunas). Mientras tanto, los grupos mismos serán de seleccionados.

Para refinar aún más esta secuencia de comandos, puedes incluir una declaración condicional que comprueba si la capa es de un tipo específico. Digamos que desea seleccionar específicamente todas las capas text en un grupo — para hacer eso, en cada iteración, verifique el tipo de capa de cada capa, así:

if(innerLayer.isText) {
    innerLayer.addToSelection();
}

Seleccionar todas las capas de texto en un grupo: el código completo

var sketch = context.api();
var selection = sketch.selectedDocument.selectedLayers;

selection.iterate(function(layer) {
    if(layer.isGroup) { // solo si la selección es un grupo
        layer.iterate(function(innerLayer){ // para cada capa en el grupo
            if(innerLayer.isText) { // solo si la capa es una capa de texto
                innerLayer.addToSelection(); // agregar a la selección
            }
        });
        layer.deselect(); // deseleccionar el grupo
    }
});

Puede mejorar este script de varias maneras, utilizando la documentation como referencia:

• Permitir al usuario seleccionar solo formas
• Permitir al usuario seleccionar solo imágenes
• En caso de que no se seleccione un grupo, automáticamente seleccione grupo principal , lo que permite al usuario seleccionar capas de un tipo similar
• Si el grupo tiene grupos anidados dentro de él, procese de la misma manera

Conclusión

Si tienes curiosidad acerca del desarrollo de complementos de Sketch que otros diseñadores pueden usar, eche un vistazo a SKPM (Administrador de complementos de bocetos). SKPM permite a los diseñadores empaquetar sus complementos en el formato de archivo .sketchplugin, que hace que el complemento sea instalable. Durante este proceso, los desarrolladores de complementos también pueden definir atajos de teclado para las acciones del complemento.

Un diseñador que sabe cómo codificar los complementos de Sketch es un diseñador que sabe cómo mejorar su flujo de trabajo y trabajar más rápido cuando es necesario, liberando más tiempo para gastar en la entrega un producto final de alta calidad. No solo eso, sino que aprender cómo funciona Sketch detrás de escena es una excelente oportunidad para sumergirse en el mundo de JavaScript.