Graphic design and web programming: the strategic translation
Fredy Polania
Founder & Principal Strategist
Introduction: The Bridge Between the Visual and the Abstract
Approaching web programming from a graphic designer’s point of view is a challenge of strategic translation. In traditional graphic design, most elements are visible, the content is known, and the size of the piece is predefined. We operate in a direct visual environment. In contrast, web development requires abstract thinking to solve dynamic requirements.
1. From Drawing to Declaring: Differences in Approach
- In Graphic Design: If you need a circle, you select the tool in Illustrator or Photoshop, draw it, and edit its properties (width, height, fill color) visually.
- In Web Programming: If you want to change the width of an element, you must modify its properties in the CSS styles. You don’t “draw” the change; you declare it.
This fundamental difference is what makes web design a systems architecture and not just an image composition. As an architect, my role is to ensure that this translation is fluid and de-risks the technical implementation.
2. The Purpose of this Space
This blog aims to create content that serves as a bridge between design and programming. It is aimed at designers, programmers, and enthusiasts who seek to learn the fundamentals of web design and development without losing visual excellence. The central themes are:
I. Web Design and Programming
- Graphic Design: Fundamentals, Logos, print media, and typography.
- Web Design: Types of sites (static, web apps, CMS) and tools.
- Web Programming: HTML, CSS, JS, and front-end and back-end tools.
II. Technical Guides (The Builder’s Toolset)
- Creative Stack: Illustrator, Photoshop, Animate, Gimp, Inkscape, FontBase.
- Dev Stack: Visual Studio Code, GitHub, Chrome Dev Tools.
- Modern Frameworks: Vue, React, Gatsby, Nuxt, Astro, Tailwind, and WindiCSS.
III. Reviews
- Graphic design, web development, and information technologies.
- Video games, series, and movies.
