Diseño para desarrolladores

Nota: Como verás a continuación, este módulo es actualmente solo un esquema/programa de estudios. Tenemos la intención de convertir esto en un curso completo en el futuro, a medida que el tiempo lo permita.

La idea de este módulo es (re)introducir a los desarrolladores al pensamiento de diseño. Es posible que no quieran trabajar como diseñadores, pero tener algunos conocimientos básicos de experiencia de usuario y teoría del diseño es bueno para todos los involucrados en la creación de sitios web, sin importar cuál sea su función. Como mínimo, incluso el desarrollador más técnico y "no diseñador" debe comprender los informes de diseño, por qué las cosas están diseñadas como lo están y ser capaz de meterse en la mentalidad del usuario. Y les ayudará a que sus portafolios se vean mejor.

Además, a los desarrolladores de interfaz (front-end) a menudo se les asigna la tarea de realizar varias tareas de diseño en los proyectos. Los clientes y empleadores a menudo asumen que pueden hacerlo porque están involucrados con los elementos visuales del sitio web. Históricamente, "desarrollador web" solía ser más un rol híbrido de diseñador/desarrollador de lo que es hoy.

Requisitos previos

Antes de comenzar este módulo, debes estar familiarizado con HTML y CSS.

Nota: Si estás trabajando en una computadora/tableta/otro dispositivo donde no tienes la capacidad de crear tus propios archivos, podrías probar (la mayoría de) los ejemplos de código en un programa de codificación en línea como JSBin o Glitch.

Lecciones

Teoría básica del diseño

Resultados del aprendizaje:

  • Fundamentos del diseño de la interfaz de usuario:
    • Contraste.
    • Tipografía.
    • Jerarquía visual.
    • Escala.
    • Alineación.
    • Uso del espacio en blanco.
  • Teoría del color.
  • Uso de imágenes.

Recursos:

Diseño centrado en el usuario

Resultados del aprendizaje:

  • Comprender que todo lo que hacemos es para el usuario.
  • Introducción a la investigación/pruebas de usuarios y a los requisitos del usuario.
  • Diseñar para la accesibilidad: considera el público objetivo y qué necesidades adicionales pueden tener. Diseña para ellos desde el principio.
  • Comprender qué son los patrones de diseño y los patrones comunes utilizados en la web, por ejemplo:
    • Modo oscuro.
    • Rutas de navegación.
    • Tarjetas.
    • Registro diferido/perezoso.
    • Desplazamiento infinito.
    • Diálogos modales.
    • Divulgación progresiva.
    • Indicación de progreso en formularios/registro/configuración.
    • Carrito de compras.

Recursos:

Informes de diseño

Resultados del aprendizaje:

  • Hablar el lenguaje del diseño para comunicarse con los diseñadores.
  • Interpretar los requisitos del informe de diseño para producir una implementación.
  • Herramientas típicas que utilizan los diseñadores para transmitir su mensaje a los desarrolladores (por ejemplo, Figma).

Véase también