Diseño gráfico y programación web: la traducción estratégica

Introducción: El Puente entre lo Visual y lo Abstracto

Abordar la programación web desde el punto de vista de un diseñador gráfico es un reto de traducción estratégica. En el diseño gráfico tradicional, la mayoría de los elementos son visibles, el contenido es conocido y el tamaño de la pieza está predefinido. Operamos en un entorno visual directo. En contraste, el desarrollo web exige un pensamiento abstracto para resolver requerimientos dinámicos.

Los programas de diseño gráfico están adaptados a esta naturaleza; si quieres hacer un círculo basta con elegir la herramienta indicada y dibujarla en el espacio de trabajo. En contraste, el diseño web se utiliza el pensamiento abstracto para resolver los requerimientos que se nos plantean; por ejemplo, si queremos cambiar el ancho de un elemento en nuestra vista web, es necesario modificar sus propiedades en los estilos CSS.

Las maneras de abordar los cambios son diferentes porque en el diseño gráfico las características del círculo (Ancho, alto, color de relleno, entre otros) se manejan seleccionándolo y editando sus propiedades en el programa de diseño (Illustrator, Photoshop). En la programación web se requiere ajustar el código que maneja el estilo visual de dicho elemento.

¿Cuál es el objetivo de blog?

Crear contenido en español de diseño y programación web, compartir e interactuar con personas interesadas en el diseño gráfico, la programación web y las tecnologías de la información. También su propósito, es el de servir información para iniciar el aprendizaje del diseño y la programación web.

Está dirigido a diseñadores gráficos, aficionados, entusiastas, programadores web y cualquier persona que busque conocer los fundamentos del diseño gráfico.

Temas

I.Diseño y programación web

• Diseño gráfico

Fundamentos.

• Logotipos, impresos, tipografía.

• Diseño web

Fundamentos.

• Tipos de sitios web (estáticos, web apps, CMS).

• Herramientas.

• Programación web

Fundamentos.

• HTML, CSS, JS.

• Herramientas front-end.

• Herramientas back-end.

II. Guías

• Programas de diseño gráfico

Illustrator, Photoshop, Animate, Gimp, Inkscape, FontBase.

• Programas de desarrollo web

Visual Studio Code, GitHub, Google Chrome Dev Tools.

• Librerías y frameworks

Vue, React, Gatsby, Nuxt, Astro, Tailwind, WindiCSS.

II. Reseñas

• Diseño gráfico, desarrollo web y tecnologías de la información.

• Videojuegos, series y películas.