“El medio es el mensaje” – Marshall McLuhan
Cada era del diseño de productos web trae consigo nuevas herramientas de diseño que cambian la forma en que diseñamos sitios web e influyen en la próxima generación de herramientas de diseño.
Sé que esto puede parecer una idea novedosa para algunos de ustedes que leen esto, pueden pensar que pueden diseñar el sitio web que desean y solo están limitados por su imaginación, pero solo tienen razón a medias.
Esto es cierto hasta cierto punto, pero tú también eres humano, y todos los humanos a veces somos vagos, y nos gusta diseñar sitios web que sean fáciles de diseñar y desarrollar, no nos gusta la fricción, como sabe cualquier diseñador que estudie la experiencia del usuario.
Como dijo una vez Marshall McLuhan: “El medio es el mensaje”, lo que significa que los medios cambiantes nos sitúan dentro de ciertas realidades cuando utilizamos herramientas de diseño web.
En este artículo intentaré repasar en orden cronológico las diferentes herramientas utilizadas para diseñar páginas web, aunque por supuesto algunas de ellas se utilizan simultáneamente por lo que no hay límites claros.
Pero haré todo lo posible para trazar la historia de las herramientas de diseño web en etapas a medida que las reviso, así que comencemos.
Primero, tenemos HTML simple.
lenguaje de marcado de hipertexto
Antes de que existieran herramientas de diseño, existía HTML, que era (y sigue siendo) el componente fundamental de la web.
Cuando HTML era la única forma de diseñar sitios web, usábamos interfaces WYSIWYG para manejar mejor el contenido que era esencialmente solo etiquetas HTML, como párrafos, encabezados, tablas e imágenes.
CSS aún no existía, por lo que todo el estilo se realizó dentro del propio HTML (recuerde color de fondo? ) y la única forma de centrar todo es usar una tabla y hacer invisibles sus bordes.
En cierto modo, todavía existen estilos HTML simples en boletines informativos por correo electrónico y proyectos apasionantes, pero la web en sí ha evolucionado para mejor.
Los sitios web en este campo enfatizan las etiquetas y su estética es única, con muchos GIF, muchas imágenes de fondo que se repiten y, por supuesto, algo de música de fondo para crear el ambiente.
El infractor más famoso de este tipo de sitios a principios de los años 90 fue GeoCities, que ofrecía un editor WYSIWYG para que todos lo usaran de forma gratuita.
Los sitios web de esa época se crearon para Netscape o Internet Explorer posterior, nadie intentó hacer que sus sitios fueran compatibles y solo funcionaban a veces.
Estos problemas de compatibilidad suelen ocurrir cuando se utilizan etiquetas específicas (que ya no se utilizan), como muchas carpa Etiqueta, conjunto de cuadros, parpadear Etiquetas y más.
Estos eran visualmente únicos, pero eventualmente quedaron obsoletos por razones de accesibilidad y/o seguridad, por lo que solo los encontramos entre las reliquias del primer diseño web.
Hablando de cuestiones de seguridad, el siguiente es Flash.
destello
Cuando Macromedia Flash (más tarde Adobe Flash) se convirtió en la herramienta estándar para todos los diseñadores y desarrolladores, Flash tenía su propio lenguaje de programación llamado script de acción Tiene su propia interfaz basada en animaciones.
Como resultado, la gente empezó a sustituir sitios web enteros por sitios web Flash, que eran muy vívidos y se adaptaban perfectamente a sus necesidades, sin más plantillas ni copias de etiquetas HTML entre sí (los sitios web Flash estaban nutricionalmente desactivados, a diferencia del HTML).Ver código fuente“Características)
Flash cambió la web más que cualquier otra herramienta, hizo que toda la web dependiera de su tecnología patentada, nos convirtió en desarrolladores y animadores y, a veces, incluso en diseñadores de juegos.
Como resultado, estos sitios a menudo están inflados porque la optimización es opcional y son muy hostiles al SEO porque está todo desactivado.
Pero la era Flash fue la era más creativa que la web jamás haya visto, los sitios web Flash podían hacer casi cualquier cosa que pudiéramos imaginar y los juegos Flash eran una gran cosa a mediados de la década de 2000, consulte el sitio web de Newgrounds arriba.
Flash todavía existe en forma de Adobe Animate, pero es menos adecuado para los sitios web actuales a medida que la web ha evolucionado, en parte debido al cambio de la web hacia una web móvil primero.
Los sitios web Flash están inflados y tienen problemas de seguridad, pero lo más importante es que no responden lo suficiente para sobrevivir en la era de Internet móvil, donde el espacio en la pantalla y la duración de la batería son aún más escasos.
Animo a todos a leer “Pensamientos sobre FlashEl libro de Steve Jobs resume muy bien los problemas con Flash en dispositivos móviles.
Photoshop/Ilustrador
Photoshop e Illustrator eran productos de Adobe y no eran nuevos en ese momento, pero cuando Flash estaba muriendo, la industria los utilizó por defecto.
Cuando Flash dejó de ser la herramienta de diseño dominante para la web, nada podía realmente ocupar su lugar, por lo que la industria recurrió a herramientas que ya habían demostrado su supervivencia.
Esta era del diseño web se siente particularmente estática ya que los diseñadores solo diseñan sitios web para computadoras de escritorio y móviles, a menudo nada intermedio, y recuerde, el iPad aún no existía y/o acababa de salir.
Todo se hizo manualmente con una mano de obra agotadora, no había automatización, ni herramientas para facilitar el proceso y ciertamente no había herramientas especializadas.
Photoshop e Illustrator son software de uso general: Photoshop para editar imágenes, Illustrator para editar formas vectoriales y ninguno está diseñado específicamente para diseño web.
Como resultado, tienen muchas herramientas que no tienen nada que ver con el diseño de productos y faltan muchas herramientas relacionadas.
Estas herramientas relacionadas o no relacionadas son el modelo para la próxima generación de herramientas, se basan en el flujo de trabajo de Photoshop/Illustrator y deciden qué herramientas incluir y cuáles excluir.
Photoshop e Illustrator nunca han sido excelentes herramientas para el trabajo de diseño web, pero fueron muy buenos como marcadores de posición hasta que aparecieron algunas herramientas más profesionales.
bosquejo
Para muchos diseñadores, Sketch era una nueva herramienta creada desde cero para el diseño de productos (o diseño de UI, como se llamaba en aquel entonces). Sketch no es tan inflado como Photoshop e Illustrator porque está diseñado específicamente.
La aplicación en sí y las herramientas que contiene están optimizadas y son exactamente lo que los usuarios quieren. Aunque muchos de mis amigos y colegas han estado expuestos a Sketch, yo no he estado expuesto a Sketch. Sketch era (y sigue siendo) una aplicación exclusiva para Mac, por lo que sabía que no podía ser la herramienta del futuro.
Industrias enteras se construyeron en PC con Windows, y Sketch, exclusivo para Mac, creó muchos problemas en sus procesos, tales como: industria del juego, industria de seguridad de datos, AR y VR (en ese momento), industria bancaria, etc.
Sketch hizo muchas cosas bien, pero en última instancia, una cosa que logró fue hacer que toda la industria del diseño reconsiderara las herramientas que utilizaban.
Sketch puede caminar para que Figma pueda correr.
figura
Figma no es solo una versión multiplataforma de Sketch, Figma toma la fórmula de Sketch de ser una herramienta de diseño sencilla y precisa diseñada específicamente para el diseño de UI y la amplía.
Esta es una herramienta nueva: es la primera herramienta en línea que Figma puede usar a través de un navegador sin ninguna instalación (era nueva y emocionante cuando hizo esto, sé que es más común hoy en día).
Dado que todo está en línea, los archivos Figma también se pueden compartir y trabajar juntos, y Figma tiene las herramientas “multijugador” más avanzadas que jamás haya visto, lo que significa que los diseñadores pueden trabajar juntos en el mismo archivo de diseño al mismo tiempo porque todo está en línea.
Por ejemplo, piense en Google Docs, también puede editar los mismos archivos en Google Docs o el mismo código en un repositorio de Git, pero Figma aportó la misma idea a las herramientas de diseño y muchas herramientas han intentado hacer lo mismo desde entonces.
Debido a que Figma está tratando de simplificarse (al igual que Sketch antes), ha renunciado a muchas herramientas en el proceso, no más herramientas de edición de fotografías, filtros limitados, herramientas de diseño de movimiento limitadas, no herramientas 3D, etc.
Por otro lado, se introdujeron muchas herramientas nuevas, controles de diseño responsivos para cada marco, herramientas de creación de prototipos y controles de diseño automático, solo por nombrar algunos.
A pesar de esto, los diseños de Figma parecen muy “planos” y es más difícil lograr un trabajo más detallado. Mucha gente todavía utiliza Adobe Illustrator o Photoshop para diseños detallados, y mucha gente simplemente se da por vencida y acepta la planitud.
Dado que el movimiento avanzado, la animación o trabajar con elementos 3D es casi imposible en Figma, estos elementos rara vez se ven en la web hoy en día.
Creo que características como el diseño de movimiento y el trabajo 3D todavía faltan en Figma hoy porque no estaban presentes en la herramienta original, Photoshop/Illustrator.
Para que quede claro: no estoy en contra de ninguno de los dos, me encanta el diseño plano y creo que el diseño inteligente se puede realizar en cualquier estilo y en cualquier medio, independientemente del resultado renderizado, cuando digo “departamento“No lo digo como una crítica, sólo como una observación visual.
Conclusión
Ha sido un gran viaje desde la ausencia de herramientas de diseño hasta WYSIWYG y Flash, Photoshop/Illustrator, Sketch y, por supuesto, Figma.
No son sólo las herramientas las que han cambiado cómo Diseñamos sitios web interactivos pero Qué También los diseñamos, incluyendo su apariencia, cómo funcionan y cómo los experimentan los usuarios. Ningún sitio web se crea de la nada.
Podemos ver claramente cómo las herramientas de cada época influyeron en el diseño del sitio web a continuación, ambos sitios web promocionales diseñados en el momento del estreno de la película.
El primer ejemplo (Space Jam) utiliza herramientas HTML y WYSIWYG, y el resultado es una versión más pulida del sitio web GeoCities, con imágenes de fondo repetidas y elementos ocultos.
El ejemplo de Matrix se realizó en la era Flash, tenía muchos televisores reproduciendo pequeños clips de la película; tenga en cuenta que realmente no diseñaron la interfaz de usuario, sino más bien un “mundo” al que se podía acceder.
El último ejemplo: John Wick es un diseño moderno, probablemente hecho en Figma, es altamente reutilizable, probablemente usa la misma plantilla que cualquier otra película, es una interfaz de usuario con texto, títulos, menús e incluso un video rectangular, ¿cuánto tiempo llevamos realmente aquí?
Se puede decir que cualquier industria creativa está destinada a cambiar, y la historia de la pintura y el arte está llena de ejemplos: cómo la invención de la pintura al óleo permitió brillar a los maestros del Renacimiento, cómo la acuarela liberó a los impresionistas del estudio para pintar al aire libre, etc.
Como declaró Marshall McLuhan hace más de 60 años: “El medio es el mensaje”, y esto nunca es más evidente que en cualquier campo tecnológico porque las herramientas tecnológicas cambian constantemente.
Nadie puede predecir el futuro. Sin embargo, estoy bastante seguro de que estas herramientas seguirán evolucionando y Figma no será el principio ni el fin del diseño de productos.
Gracias por leer🙏
recurso
Cronología de la historia del diseño web /Museo de Diseño Web
Una breve historia y pecado original de las herramientas de diseño web. / Edén Vidal
Historia del diseño web: del bloc de notas a la inteligencia artificial (1998-2025) / influencia digital
Historia y evolución del diseño web (cronología) /Inspiración en diseño web
Enlace a este artículo
Utilizo Netscape Composer en 2024 / Pierre-Luc Braut
Revisión de la aplicación Sketch /Nueva negrita
Cómo diseñar con Figma / señal única
Cómo las herramientas que utilizamos cambian los productos que diseñamos Publicado originalmente en Colectivo de experiencia de usuario En Medium, la gente continúa la conversación destacando y respondiendo a esta historia.
