Materia	Carrera	Plan	Año	Periodo
INTRODUCCION AL DISEÑO GRAFICO	TCO.UNIV.EN WEB	08/13	2026	1° cuatrimestre

Docente	Función	Cargo	Dedicación
PEREZ, NORMA BEATRIZ	Prof. Responsable	P.Adj Exc	40 Hs
GATICA, CLAUDIA RUTH	Auxiliar de Práctico	A.1ra Semi	20 Hs
VALLEJO, ENRIQUE JORGE	Auxiliar de Práctico	A.1ra Simp	10 Hs

La materia Introducción al Diseño Gráfico se constituye como el pilar fundamental en la formación del Técnico Universitario en Web (TUW), proporcionando las estructuras conceptuales y metodológicas necesarias para abordar la complejidad de los entornos digitales contemporáneos. El programa trasciende la mera composición visual para centrarse en la Arquitectura de Información (AI), el Diseño de Interfaz (UI) y la Experiencia de Usuario (UX) como ejes articuladores del proyecto web.

El acto de diseñar se aborda como un proceso sistémico donde convergen tres dimensiones críticas:

Dimensión Morfo-Sintáctica (El qué): El estudio de la forma, la tipografía y la jerarquía visual en pantallas.

Dimensión Funcional-Operativa (El para qué): La resolución de problemas de usabilidad, navegabilidad e interactividad en dispositivos diversos.

Dimensión Estético-Comunicativa (El cómo): La construcción de lenguajes visuales que transmitan mensajes precisos y generen vínculos emocionales con el usuario.

Para alcanzar estos objetivos, la materia propone una metodología basada en el Pensamiento de Diseño (Design Thinking), guiando al estudiante a través de etapas de investigación, análisis de usuarios, prototipado de baja y alta fidelidad, y producción digital optimizada. Este enfoque garantiza que las soluciones de comunicación no sean solo visualmente atractivas, sino técnicamente viables y funcionalmente eficientes.

Finalmente, la materia busca forjar una conciencia ética sobre el rol del profesional universitario. Se enfatiza la función social del diseñador web como facilitador del acceso a la información, promoviendo la inclusión, la accesibilidad digital y la responsabilidad en la construcción de discursos visuales en la red.

Objetivos de la Materia:

- Fundamentar el Pensamiento Proyectual: Capacitar al estudiante en el uso de metodologías de diseño y comunicación visual para la resolución técnica de problemas en entornos digitales.

- Desarrollar la Retórica Visual: Instruir en la construcción de conceptos sólidos y su traducción en piezas gráficas que comuniquen de forma unívoca y eficiente.

- Dominar el Ecosistema de Producción Digital: Proveer las destrezas técnicas en el uso de software de diseño profesional (Suite Adobe, Figma o herramientas Open Source actuales) para el desarrollo integral de activos digitales.

- Estimular la Creatividad Aplicada: Fomentar la exploración de lenguajes visuales y artísticos como herramientas de innovación en el diseño de interfaces y experiencias de usuario.

Resultados de Aprendizaje Esperados. Al finalizar la materia, el estudiante habrá desarrollado las siguientes competencias:

Capacidad de Análisis y Síntesis Visual
- Resultado esperado: Poder descomponer un problema de comunicación y proponer una solución gráfica fundamentada en la jerarquía visual, la teoría del color y la tipografía.
- Evidencia de logro: Creación de un sistema de identidad visual o interfaz que resuelva una necesidad específica de un usuario real.

Prototipado y Producción Técnica
-Resultado esperado: Dominar las herramientas digitales de edición vectorial y de mapa de bits, siendo capaz de exportar activos optimizados para diferentes densidades de pantalla y formatos web.
-Evidencia de logro: Entrega de un proyecto digital íntegro (ej. un sistema de componentes o una landing page) técnicamente apto para su implementación por un equipo de desarrollo.

Conceptualización y Storytelling
-Resultado esperado:Ser capaz de generar una narrativa visual coherente, transformando ideas abstractas en metáforas gráficas e iconos funcionales que mejoren la usabilidad.
-Evidencia de logro: Documento de fundamentación de diseño donde se explique el proceso creativo y la elección de cada elemento gráfico.

Sensibilidad Estética y Alfabetización Visual
-Resultado esperado: Integrar referentes del arte y la cultura visual en sus propuestas, logrando diseños originales que se alejen de las plantillas genéricas y aporten valor diferencial.
-Evidencia de logro: Aplicación de estilos visuales variados y tendencias de diseño contemporáneo en sus producciones prácticas.

Unidad 1: El Proyecto de Diseño en la Era Digital
El objetivo es entender el diseño no como ornamento, sino como un proceso metodológico de resolución de problemas de comunicación.
-Introducción al Diseño Gráfico y la Comunicación Visual: Definición, alcances y ética profesional en el entorno digital.
-Diferenciación Disciplinar: Diseño vs. Arte vs. Publicidad. El diseño como función y mensaje.
-Metodología Proyectual: Fases del diseño (Investigación, Ideación, Prototipado y Validación). Introducción al Design Thinking.
-Hitos de la Historia del Diseño: Del movimiento Bauhaus a la estética de la Web 3.0.
- El Ecosistema Digital: Características específicas del diseño para pantallas vs. soportes analógicos.

Unidad 2: Morfología y Lenguaje Visual Aplicado
El objetivo es dominar los elementos básicos de la forma y el color, pero aplicados específicamente a la legibilidad y jerarquía en interfaces.
- Fundamentos de la Composición: Punto, línea, plano y volumen. Relación figura-fondo, leyes de la Gestalt aplicadas a la web.
-Sintaxis de la Imagen: Equilibrio, contraste, escala y ritmo en el diseño de layouts.
-Teoría del Color Digital: El modelo RGB y espacio de color. Psicología del color y accesibilidad (contraste para legibilidad).
- Tipografía para Pantallas: Anatomía y clasificación. Tipografía responsive, jerarquías visuales y legibilidad en dispositivos móviles.
-Sistemas de Iconografía: Diseño de pictogramas, símbolos y sistemas de signos para navegación.
-Grillas y Sistemas de Composición: El uso de la retícula (Grid System), espaciados (Box Model) y proporciones en interfaces web.

Unidad 3: Diseño de Interfaces (UI) y Experiencia de Usuario (UX)
El objetivo es integrar los conocimientos previos en la creación de productos digitales funcionales, accesibles y optimizados.
- Fundamentos de UI (User Interface): Interacción hombre-máquina (HCI). El diseño de componentes (botones, formularios, menús).
-Gestión de la Imagen Digital: Diferencias técnicas entre mapas de bits (Bitmap) y gráficos vectoriales (SVG). Modos de color, resoluciones (DPI vs. PPI) y formatos de exportación (WebP, PNG, SVG).
-Arquitectura de Información (AI): Organización, etiquetado y estructuración de contenidos. Mapas de sitio y flujo de usuario (User Flow).
-Principios de UX (User Experience):
-Usabilidad: Las heurísticas de Nielsen aplicadas al diseño web.
-Navegabilidad: Patrones de navegación y comportamiento del usuario en la red.
-Accesibilidad (WCAG): Diseño inclusivo para personas con capacidades diferentes.
-Diseño Responsivo y Adaptativo: Diseño para múltiples dispositivos y contextos de uso.
-Optimización y Flujo de Trabajo: Herramientas de prototipado (Figma/Sketch). Exportación de activos, optimización de peso y productividad en el flujo diseño-desarrollo.

Práctico 1: Identidad Visual y Marca Personal
Objetivo: Dominar la síntesis visual y la construcción de una imagen coherente en entornos digitales.
El Desafío: El estudiante debe construir su propia identidad como profesional técnico.
Entregables:
-Diseño de Isologotipo/Marca: Basado en conceptos de síntesis y retórica visual.
-Sistema de Iconografía Personal: Creación de un set de iconos originales para sus redes y web.
-Piezas de Comunicación: Diseño de CV (optimizado para lectura en pantalla/ATS) y tarjeta personal digital (QR/NFC).
-Fundamentación: Documento breve explicando la elección de la paleta cromática (RGB) y tipografías según es solicitado en el práctico.

Práctico 2: Análisis de Interfaz (UI) y Lenguaje Visual
Objetivo: Desarrollar el "ojo crítico" y aplicar los fundamentos de composición, color y tipografía en layouts web.
El Desafío: Análisis y rediseño conceptual (Reskin) de un sitio web real existente.
Actividades:
-Auditoría Visual: Análisis de jerarquías, contraste y uso de la grilla en tres sitios web líderes del mercado.
-Bocetado de Baja Fidelidad (Wireframing): Traducción de la estructura de un sitio a formas básicas (punto, línea y plano).
-Guía de Estilo (Style Guide): Definición de variables tipográficas (escalas), paleta de colores accesibles y estilos de botones/componentes.
-Exploración de Connotación: Aplicar dos estilos visuales diferentes al mismo boceto para observar cómo cambia el mensaje.

Práctico 3: Proyecto Integrador Final – Diseño de Experiencia (UX/UI)
Objetivo: Integrar todas las unidades en un producto digital funcional, estético y centrado en el usuario.
El Desafío: Diseñar una interfaz web compleja (mínimo 4 secciones) bajo un enfoque sistémico.

Requisitos Técnicos:
-Arquitectura de Información (AI): Mapa del sitio y flujo de navegación lógico.
-Diseño Responsivo (Mobile First): Diseñar primero la versión móvil y luego la adaptación a PC, asegurando la continuidad visual.
-Prototipo de Alta Fidelidad: Uso de herramientas como Figma o Adobe XD para mostrar interacciones (hovers, clics, transiciones).
-Accesibilidad y Optimización: Aplicar normativas de contraste (WCAG) y entregar los activos (assets) optimizados en formatos modernos (SVG, WebP).
-Portfolio Profesional: Compilación de los 3 prácticos en un soporte digital (puede ser en Behance o una web propia) que sirva como carta de presentación laboral.

Condiciones para promocionar:
-Asistencia 75%
-Aprobación del 100% de los trabajos prácticos de laboratorio.
-Aprobar los dos parciales o las recuperaciones previstas (dos por parcial), con un mínimo de 7 (siete).

Condiciones para regularizar:
-Asistencia 65%
-Aprobación del 80% de los trabajos prácticos de laboratorio.
-Aprobar los parciales o sus recuperaciones previstas, con un mínimo de 6 (seis).
-Se otorgan dos recuperaciones por cada parcial.
-Los estudiantes que hayan cumplimentado estos requisitos pueden presentarse a rendir el examen final.
Examen final: escrito y/o oral
Examen Libre: No se admiten debido a los contenidos prácticos inherentes de la materia.

[1] Ambrose, G., y Harris, P. (2019). Fundamentos del diseño gráfico (2.ª ed.). Parramón.
[2] Bringhurst, R. (2016). Los elementos del estilo tipográfico (4.ª ed.). Fondo de Cultura Económica.
[3] Heller, S., y Vienne, V. (2024). 100 ideas que cambiaron el diseño gráfico (2.ª ed.). Blume.
[4] Krug, S. (2015). No me hagas pensar: Una aproximación a la usabilidad en la web y los dispositivos móviles (3.ª ed.). Pearson Educación.
[5] Lupton, E. (2020). Pensar con tipos: Una guía crítica para diseñadores, editores, tipógrafos y estudiantes (2.ª ed. rev.). Gustavo Gili.
[6] Lupton, E. (2019). El diseño como storytelling (1.ª ed.). Gustavo Gili.
[7] Lidwell, W., Holden, K., y Butler, J. (2024). Principios universales de diseño (Ed. revisada). Blume.
[8] Norman, D. A. (2023). El diseño de las cosas cotidianas (Ed. revisada y ampliada). Capitán Swing.
[9] Saltz, I. (2020). Fundamentos de la tipografía: 100 reglas de diseño para trabajar con tipos de letra. Promopress.
[10] Wong, W. (2011). Fundamentos del diseño bi- y tri-dimensional. Gustavo Gili.

[1] Frutiger, Adrian.(2005). Signos, símbolos, marcas, señales. Ed. Gustavo Gili.
[2] Carter, Rob. (1998). Diseñando con tipografía 2. Logotipos, Papelería, Identidad corporativa. Rotovision.
[3] Ricupero, Sergio. (2007). Diseño gráfico en el aula. Ed. Nobuko. Buenos Aires.Barcelona.
[4] Bonsiepe, Gui.(1999). Del objeto a la interfase. Ed. Infinito.
[5] Wong, Wucius.(1997). Fundamentos del Diseño. Ed. Gustavo Gili.
[6] Javier Royo. (2004). Diseño digital. Ed. Paidós.
[7] Mordecki Daniel. Pensar primero. Biblioteca Concreta.
[8] Jorge Frascara. (2000) Diseño Gráfico y Comunicación. Ed. Infinito.
[9] D. A. Dondis (2010) Sintaxis de la Imagen. Ed. Gustavo Gili.

1. Fundamentación del Pensamiento Proyectual
Se busca que los estudiantes lo entiendan como un proceso metodológico. Aprenderán a investigar, analizar y prototipar soluciones visuales que resuelvan problemas específicos de comunicación en entornos digitales.

2. Dominio del Lenguaje y la Sintaxis Visual
Busca que conozcan y apliquen las reglas que rigen la percepción humana. Esto incluye el manejo experto de:
-Morfología: Uso de punto, línea y plano.
-Teoría del Color: Aplicada a pantallas (RGB) y accesibilidad.
-Tipografía: Selección y jerarquía para garantizar la legibilidad en diferentes dispositivos.

3. Especialización en Interfaces (UI) y Experiencia (UX)
Dado el perfil técnico de la carrera, un objetivo crítico es la transición del diseño gráfico tradicional al diseño de interacción. Que los estudiantes aprendar a crear interfaces funcionales, considerando la arquitectura de la información, la usabilidad y la navegabilidad, asegurando que el diseño sea adaptable (responsive) a cualquier pantalla.

4. Competencia Técnica y Producción Digital
Se busca el dominio de las herramientas de software profesional (como Figma, Adobe Suite o similares) para producir activos digitales optimizados. Que aprendan a gestionar formatos (vectores vs. bitmaps), resoluciones y flujos de trabajo que faciliten la implementación real en el desarrollo web.

Esta materia se estructura como un puente entre la comunicación visual y la arquitectura de interfaces. Su enfoque principal es transformar la creatividad en un proceso metodológico aplicado a entornos digitales.

A continuación, un resumen de sus ejes centrales:

1. Fundamentación Proyectual (Unidad 1)
Se define el diseño como una disciplina de resolución de problemas, diferenciándolo del arte y la publicidad. El impacto aquí es metodológico: el estudiante aprende a investigar, analizar y prototipar bajo el enfoque de Design Thinking, comprendiendo las particularidades del ecosistema web y su evolución histórica.

2. Lenguaje y Sintaxis Visual (Unidad 2)
Esta etapa se centra en los "ladrillos" de la comunicación. Se estudian los elementos morfológicos (punto, línea, plano), la Psicología de la Gestalt aplicada a pantallas, y el uso técnico del color (RGB) y la tipografía. El objetivo es que el estudiante logre jerarquías visuales claras y sistemas iconográficos coherentes.

3. Diseño de Interfaces y Experiencia (Unidad 3)
Es el núcleo técnico de la materia. Se aborda la Arquitectura de Información (AI), la usabilidad y la accesibilidad (WCAG). El estudiante aprende a gestionar la imagen digital (vectores vs. bitmaps) y a diseñar interfaces interactivas (UI) que sean navegables y adaptables a múltiples dispositivos (Responsive Design).

4. Práctica y Producción Profesional
A través de tres trabajos prácticos clave, el programa busca:
Identidad: Creación de marca personal y activos digitales.
Análisis: Auditoría visual de sitios reales y creación de guías de estilo.
Proyecto Final: Diseño de un sitio web funcional y optimizado, culminando con la creación de un portfolio profesional que acredite sus competencias técnicas.

Los trabajos prácticos y clases se realizarán de manera "presencial".
El presente programa puede presentar ajustes de ocurrir situaciones epidemiológicas. Toda modificación será acordada y comunicada con los estudiantes e informada a Secretaría Académica.
Cualquier inquietud comunicarse con el docente responsable de la materia: Mg. Ing. Norma Beatriz Perez - Correo: nbperez@email.unsl.edu.ar

-