¿Sueñan diferente los diseñadores que saben de programación?

Diseño y tecnología

Hace algunos años (1) un estudiante me preguntó en clase de programación web «¿Por qué no usamos PDFs en vez de tener que hacer todo esto con HTML?». La duda planteada tiene sentido. Sería más sencillo: diseñamos y maquetamos el contenido con un programa como Word o Photoshop, exportamos el PDF, lo subimos al servidor, y listos. Pero la web no consiste solo en mostrar páginas estáticas.

¿Qué es un sitio web?

Un sitio web es un programa que se ejecuta en el navegador, lo que significa que no solamente se visualiza en nuestro dispositivo: debe poder comunicarse con él. Por ejemplo, usar la cámara u otros sensores, permitir a los usuarios interactuar con la App (2), y recibir y enviar datos desde y hacia otros servicios (servidores, bases de datos, APIs, notificaciones PUSH, etc).

Fases del diseño de una App

El proceso de diseño de una App tiene muchas fases, que incluyen investigaciones iniciales varias, diseño UX/UI, creación de wireframes, definición del sistema de diseño, creación de iconos y elementos interactivos, diseño responsive, etc. Después, algunas herramientas de diseño que usamos permiten generar prototipos interactivos para realizar pruebas de usuario básicas. Pero todo esto no es el producto final, sinó que es el proceso para definirlo. Son los planos.

Una vez que la fase de diseño está completa, el producto final, la App, debe ser construida. En esta fase de desarrollo, utilizaremos otras herramientas que siempre van a incluir al menos un lenguaje de programación (3). No puede ser de otro modo porque la App debe poder «funcionar en el dispositivo». Lo que tendremos al final de la fase de desarrollo es otro objeto, que se crea a partir del proceso de diseño anterior.

El grado de proximidad o dependencia entre un producto de diseño y la tecnología responsable de su implementación es muy variable. Podemos decir que lo que un diseñador debe conocer sobre una tecnología dada es directamente proporcional a ese grado de proximidad. En el caso de las aplicaciones web y móviles, el grado de dependencia diseño/tecnología es muy alto. Por tanto, los profesionales que las conciben deben conocer en profundidad las tecnologías subyacentes. Comprender qué hace funcionar y sustenta los productos digitales nos proporciona herramientas de reflexión y modifica nuestra intuición, de manera que nuestro proceso creativo se amplía y enriquece al entender por qué y cómo funcionará lo que estamos diseñando.

Por otro lado, la tecnología evoluciona en función de las necesidades de uso. El diseño tiene la capacidad de detectar carencias y necesidades tecnológicas, que hacen necesario que esta deba adaptarse para satisfacer estas demandas. El CSS por ejemplo, surgió debido a la necesidad de controlar y mejorar el diseño de las páginas web (4), algo que HTML por sí solo no podía hacer adecuadamente. Es importante por tanto que los diseñadores, a través de la investigación y su conocimiento de la tecnología, puedan proponer nuevas formas de uso que beneficien y en cierto modo supervisen el avance tecnológico.

Front-end

En el contexto de las aplicaciones digitales, el concepto de front-end hace referencia a la interfaz que permite la interacción de los usuarios con un dispositivo, programa o aplicación, como por ejemplo un sitio web, una aplicación móvil o un juego.

El front-end es responsable de mostrar el diseño y proporcionar al usuario las herramientas necesarias para utilizar la aplicación y acceder a todas sus funcionalidades. El desarrollo del front-end es una tarea de programación informática que implica diversas tecnologías, dependiendo de la plataforma desde la cual se accederá a la aplicación.

Para el desarrollo front-end de aplicaciones web, usamos básicamente tres tecnologías: HTML, CSS y JavaScript.

HTML y CSS no son exactamente lenguajes de programación, sino más bien lenguajes de descripción de interfaces gráficas. JavaScript, por otro lado, es propiamente un lenguaje de programación y es uno de los lenguajes con más demanda de profesionales.

Aunque HTML/CSS no se consideran lenguajes de programación, tienen algunas similitudes con ellos que resultan muy útiles para introducirnos en esta disciplina. Proporcionan una interfaz abstracta, muy diferente a las herramientas visuales usadas para el diseño gráfico, y nos obligan a pensar de manera diferente, no visual. Al usarlos también nos acostumbramos a trabajar con un lenguaje formado por signos varios, que deben usarse siguiendo unas reglas determinadas, para que realicen la tarea requerida. El siguiente paso natural es empezar con JavaScript (5). A partir de aquí, se nos abre un ecosistema que incluye otras herramientas, basadas en las anteriores, como las librerías y frameworks (por ejemplo React o Vue para JavaScript).

Como diseñadores, no es imprescindible conocer a fondo HTML, CSS y JavaScript. Probablemente no queremos ser programadores a tiempo completo. Pero el trabajo del diseñador es muy interdisciplinar y requiere conocimientos de los aspectos implicados en todo el proceso de diseño, y la programación es uno de ellos. Conocer las implicaciones tecnológicas de nuestro producto digital permite una reflexión realista e informada durante todo el proceso creativo. Este conocimiento aporta herramientas que nos ayudan a tomar decisiones más acertadas y efectivas para nuestros diseños.

Si eres diseñador y deseas iniciarte en el tema de la programación web para entender mejor las implicaciones que tiene la programación informática en el diseño, te animamos a curses el Posgrado en FrontEnd para diseñadores. En él, conocerás en profundidad las tecnologías y lenguajes de programación HTML, CSS y JavaScript para poder enriquecer el proceso creativo de creación de aplicaciones.

(1) Esto fue al principio de los años 2000, en que la web era más simple, y no existían los SmartPhone, y por tanto no se hablaba aún de responsive design.
(2) Con App me refiero a cualquier herramienta del tipo aplicación móvil, aplicación web, sitio web, servicio digital o servicio en-línea.
(3) Aunque se use una herramienta del tipo no-code, esta será la encargada de generar el código.
(4) También podríamos empezar con JavaScript y obviar HTML y CSS, pero no sería una progresión lógica para el desarrollo de aplicaciones web.
(5) También podríamos empezar con JavaScript y obviar HTML y CSS, pero no sería una progresión lógica para el desarrollo de aplicaciones web.

Jordi Espuny. Diseñador y desarrollador de proyectos web, y director del Posgrado en FrontEnd para Diseñadores de SHIFTA.