Sesión completa sobre Diseño de Interfaz de Usuario (DIW)

Siempre le digo a mi alumnado que "somos programadores, no diseñadores", y que lo normal es que, si trabajamos para una empresa o creamos una agencia de desarrollo web, nos aliemos con un buen diseñador o diseñadora que nos complemente. Pero, y recalco ese "pero", que no seamos diseñadores no quiere decir que no tengamos unas nociones básicas de diseño. Y es lo que trato de enseñar durante las primeras semanas de curso: diseño de interfaces, patrones de diseño, usabilidad, accesibilidad...

Aquí os traigo la presentación de una de las primeras sesiones en la que explico los conceptos de Diseño de Interfaz de Usuario.

Psicología de la Gestalt

La psicología de la Gestalt, también conocida como psicología de la forma o de la configuración, es una corriente psicológica del siglo XX que surgió en Alemania y cuyo axioma dice que "el todo es más que la suma de las partes".

A través de la percepción o de la memoria, la mente es capaz de configurar los elementos que llegan a través de ella e interpretarlos mediante una serie de leyes y principios.

Inicialmente, tratamos cuatro leyes o ideas mediante algunos ejemplos: aparición, pregnancia, figura y fondo e invarianza.

Entonces llega el turno del alumnado: sobre una presentación en común compartida a través de Google Drive, cada uno debe explicar en una diapositiva un principio de la Gestalt con imágenes representativas y, posteriormente, dos o más páginas web en las que se aplica este principio. Ponemos en común la presentación de modo que cada persona explica su parte. De este modo, les hacemos partícipes del proceso de enseñanza-aprendizaje. Y es que todo el mundo sabe que el mejor modo de aprender es... explicando.

El cubo de Necker y el jarrón de Rubin. Fuente: Wikipedia.org

¿Quieres recibir actualizaciones sobre esta web? ¡Suscríbete!

Lee la política de privacidad para más información.

Color

Considero indispensable conocer cómo trabaja un ordenador y una imprenta con los colores, y por tanto, entender la diferencia entre RGB, CMYK y HSL, y cómo los identificamos mediante códigos hexadecimales.

Del mismo modo, y aunque sé que muchas veces pecamos de daltonismo (¡todo mi respeto a la gente daltónica!), es importante que sepamos elegir combinaciones de colores que tengan equilibrio entre sí. Y si aún así, seguimos pensando que el azul sobre negro o el amarillo sobre blanco no quedan tan mal, entonces siempre podemos tirar de paletas de colores prediseñadas. ¡Y hay herramientas geniales para ello!

Para finalizar con esta parte, paso el testigo de nuevo al alumnado: cada cuál debe elegir un color, explicar brevemente con qué sensaciones y áreas podemos relacionarlo y buscar ejemplos interesantes, tanto en marcas como en webs en los que se utiliza cada uno de los colores.

Síntesis sustractiva. Fuente: Wikipedia.org

Tipografía

Cerramos el círculo con una de mis partes favoritas: la tipografía. Entender la diferencia entre fuente, familia y tipografía, conocer la importancia del alto de línea, del espaciado entre letras, de la longitud de la línea, etc.

Para finalizar esta parte, dejo en manos del alumnado la creación de un anuncio entre una lista de temas propuestos (originales, por no decir frikis) en el que poner en práctica todo lo aprendido y justificando, frente al resto de estudiantes, el por qué de sus decisiones.

Ejemplo de tipografía de tipo sans-serif. Fuente: wikipedia.org

Y dicho esto, como muestra, un botón: ¡aquí dejo la presentación que he utilizado como apoyo! (la he pasado a castellano así que hay algún espacio que queda "de aquella manera", ¡no lo tengáis en cuenta! 😅).

Diseño de interfaz de usuario - Laura Folgado Galache

Versión de la presentación en euskera

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram