Módulo · Elaboración de Piezas Gráficas · Grado 11A
El sistema de diseño de tu marca
Ya elegiste los colores de tu marca en el Taller 11. Hoy DANI descubre que una marca no es solo "un logo bonito": es un sistema — reglas que hacen que todo se vea como de la misma familia. Vas a cerrar con el Taller 12: la ficha de sistema de diseño de tu marca.
Institución Educativa Rafael J. Mejía · Sabaneta, Antioquia · Profe Diego
Progreso: 0 de 4 retos completados
Nivel 1 · La base
¿Qué es el diseño gráfico?
Antes de hablar de "sistemas", hay que tener clarísimo qué es diseñar.
D
DANIProfe, yo pensaba que "diseño gráfico" era básicamente hacer que algo se vea bonito en Canva 😅
PD
Profe DiegoVa más allá, DANI. El diseño gráfico es la disciplina que selecciona y organiza elementos visuales — tipografía, imágenes, símbolos, color, composición — para comunicar un mensaje claro a un público específico. No es decoración: es comunicación con intención.
D
DANI¿O sea que si se ve bonito pero nadie entiende el mensaje, no está bien diseñado?
PD
Profe DiegoExacto. "Bonito" es subjetivo. "Claro para tu público" es el verdadero objetivo. Un buen diseño puede ser minimalista o maximalista — lo que importa es que cumpla su función.
Los 4 elementos que siempre estás organizando LAB 01
Toca cada tarjeta para ver de qué se trata.
🔤 Tipografía +
Uso intencional de fuentes, tamaños, jerarquía e interlineado para apoyar el mensaje. La letra que eliges "habla" antes de que alguien lea la palabra.
🎨 Color +
Paletas, contraste, temperatura y asociación simbólica. El color transmite emociones antes que cualquier texto (confianza, energía, calma…). Ya lo trabajaste a fondo en el Taller 11.
🖼️ Imagen y símbolos +
Fotos, ilustraciones e íconos que representan ideas y emociones sin necesidad de palabras.
📐 Composición y maquetación +
Cómo se distribuyen los elementos en la página o pantalla: estructura, grillas y espacio en blanco (el espacio vacío también es diseño).
D
DANIOk, ¿y cómo sé si organicé bien esos 4 elementos? A veces mi diseño se ve "raro" y no sé por qué.
PD
Profe DiegoPara eso existe un marco muy usado en el mundo del diseño: CRAP — Contraste, Repetición, Alineación y Proximidad. Actívalos uno por uno abajo y mira cómo cambia la misma tarjeta.
Laboratorio CRAP LAB 02
Esta tarjeta empieza "desordenada" a propósito. Activa cada principio y observa qué corrige.
Producto nuevo
Panadería Luna
Croissants recién horneados todos los días, desde las 6 a.m.
Ver menú
Toca un chip para activar ese principio en la tarjeta de arriba.
Reto 1 · CRAP en acción
Agrupas el título y la descripción de un producto muy cerca, y dejas más espacio antes del siguiente producto. ¿Qué principio estás aplicando?
Nivel 2 · Ojo entrenado
Diagnóstico visual: 3 marcas famosas
Saca tu celular y busca en imágenes los logos de estas 3 marcas. Míralos con ojo de diseñador, no de consumidor.
PD
Profe DiegoBusca en tu navegador: McDonald's logo, Nike logo y Apple logo. Para cada uno, respóndete: ¿dónde veo contraste, repetición, alineación y proximidad? No hay respuesta única — lo que quiero es que empieces a "leer" diseño.
🍟 McDonald's
Fíjate en la forma, el color y qué tan simple es reconocerlo de lejos.
👟 Nike
Fíjate en qué tan simple es el símbolo y si funciona sin el nombre al lado.
🍎 Apple
Fíjate en cuántos colores usa y qué tan minimalista es.
🧩 Ahora conecta las 3
Esta es la pregunta puente hacia la siguiente sección.
Nivel 3 · La gramática de la marca
¿Qué es un sistema de diseño?
Aquí está la diferencia clave entre "hacer un logo bonito" y construir una marca de verdad.
D
DANIYa intuyo que McDonald's, Nike y Apple no improvisan cada pieza que publican… pero, ¿cómo se llama eso exactamente?
PD
Profe DiegoSe llama sistema de diseño: el conjunto organizado de reglas, estilos y componentes que hace que todas las piezas de una marca se vean y funcionen como parte de la misma familia. No es una pieza — es la infraestructura detrás de todas las piezas.
D
DANIEntonces, ¿diseño gráfico y sistema de diseño son lo mismo?
PD
Profe DiegoNo. El diseño gráfico toma las decisiones visuales (qué tipografía, qué color, qué estilo de foto). El sistema de diseño convierte esas decisiones en reglas reutilizables — para que la próxima pieza no empiece de cero, sino que herede lo ya decidido.
Sin sistema vs. con sistema LAB 03
Estas 3 tarjetas representan 3 piezas de la misma marca (un post, un banner y una historia). Alterna entre los dos estados.
Post 1Promo verano
BannerNueva colección
HistoriaSíguenos
Cada tarjeta "inventa" su propia tipografía, color y forma — como cuando una marca improvisa pieza por pieza.
🎯 Dato curioso: esta misma página que estás leyendo también sigue un sistema de diseño. Por eso el Taller 11 y este Taller 12 — aunque son archivos distintos — se ven "de la misma familia": mismos colores base, misma tipografía, mismo estilo de tarjetas. Eso no es casualidad, es sistema.
D
DANIOk Profe, ¿y qué partes tiene un sistema de diseño? ¿Solo colores?
PD
Profe DiegoMucho más que colores. Aquí está el esquema completo — el mismo que vas a llenar hoy en el Taller 12 (los 4 primeros bloques).
1. Identidad de marca Taller 12
Propósito, valores, público objetivo, personalidad y promesa principal. El "quién eres" antes del "cómo te ves".
2. Fundamentos visuales Taller 12
Paleta de color (ya la tienes del Taller 11), tipografías principal y secundaria, y criterios de espaciado. En sistemas de diseño digitales a esto se le llama design tokens.
3. Componentes clave Taller 12
Logotipo y sus variantes (horizontal, vertical, monocromo) y elementos recurrentes: botones, tarjetas, íconos, encabezados, banners.
4. Patrones y plantillas
Estructuras que se repiten: publicación de Instagram, flyer, portada de PDF, diapositiva estándar. Lo verás más adelante en el curso.
5. Lenguaje verbal y tono Taller 12
Cómo "habla" la marca: formal o informal, cercana o técnica, palabras que sí usa y palabras que evita.
6. Documentación y ejemplos
Reglas claras de uso (qué sí / qué no), versiones aprobadas y ejemplos buenos y malos. Es lo que convierte el sistema en algo que otros pueden seguir sin preguntarte a ti cada vez.
Reto 2 · Diseño gráfico vs. sistema de diseño
¿Cuál de estas frases describe mejor un sistema de diseño (y no solo diseño gráfico)?
Nivel 4 · Tu nuevo asistente
¿Qué es un LLM?
La herramienta que vas a usar para mantener vivo tu sistema de diseño.
D
DANIProfe, todos hablan de ChatGPT y Claude… ¿pero qué es exactamente un LLM?
PD
Profe DiegoLLM significa Large Language Model — modelo de lenguaje grande. Piénsalo como un "cerebro de texto": fue entrenado leyendo muchísimo lenguaje humano, y aprendió patrones tan bien que ahora puede conversar, escribir, resumir y ayudarte a diseñar — siempre que tú le des buen contexto y buenas instrucciones.
D
DANI¿"Buen contexto" como qué?
PD
Profe DiegoExactamente como lo que vas a construir hoy: tu ficha de sistema de diseño. Si le das al LLM tu identidad, tu paleta, tus componentes y tu tono, va a generar piezas que respetan tu marca — en vez de inventar algo genérico.
Herramientas que puedes usar desde el celular LAB 04
Todas funcionan desde el navegador, sin instalar nada. Toca cada una.
💬 ChatGPT (OpenAI) +
Modelo conversacional con versión gratuita y de pago. Escribe, edita contenido, analiza archivos que subas y puede generar imágenes.
🟠 Claude (Anthropic) +
Modelo conversacional con énfasis en razonamiento cuidadoso. Analiza imágenes, escribe y trabaja bien con documentos largos — ideal para pegarle tu ficha completa.
🦙 Modelos abiertos (Llama y similares) +
Alternativas de código abierto. Requieren más configuración técnica, pero es bueno saber que existen — no todo depende de una sola empresa.
Reto 3 · Identifica el LLM
¿Cuál de estas NO es una herramienta basada en un LLM conversacional?
Nivel 5 · Alimenta a tu IA
La base de conocimiento de tu marca
El puente entre todo lo que aprendiste hoy y el Taller 12 que vas a llenar.
D
DANIEntonces… ¿le copio y pego mi ficha completa al LLM cada vez que necesito una pieza nueva?
PD
Profe Diego¡Esa es la idea! A ese conjunto ordenado de documentos sobre tu marca — identidad, paletas, componentes, tono, ejemplos — se le llama base de conocimiento de marca. Si se la das al LLM como contexto, va a generar piezas nuevas que respetan tu sistema en vez de inventar algo desconectado de tu marca.
El flujo de trabajo, paso a paso LAB 05
Así es como se construye y se usa una base de conocimiento de marca con ayuda de un LLM.
1 · Definir identidad con ayuda del LLM +
Escribes un primer borrador (propósito, valores, público) y le pides al LLM que te ayude a clarificarlo o ampliarlo, manteniendo coherencia.
2 · Co-crear fundamentos visuales +
Propones una paleta inicial y el LLM ayuda a nombrar colores, sugerir combinaciones y justificar cada elección según tu público.
3 · Definir componentes y patrones +
A partir de piezas que ya hiciste, el LLM ayuda a identificar qué se repite: estructura de un post, posición del logo, tipo de imagen.
4 · Documentar tono de voz y ejemplos +
Compartes mensajes reales de tu marca; el LLM extrae el tono y te ayuda a formular una guía de redacción. Tú siempre revisas críticamente el resultado.
5 · Uso continuo con esa base +
Cada vez que generes una pieza nueva, le compartes tu base de conocimiento al LLM y le pides que respete esas reglas. El LLM propone; tú decides.
Reto 4 · Pensamiento crítico
¿Cuál es el mayor riesgo de depender de un LLM sin tener claras tus bases de diseño gráfico y tu identidad de marca?
★ Taller 12 · Entregable
Ficha de sistema de diseño de tu marca
Completa identidad, fundamentos visuales, componentes y tono de voz. Todo se guarda automáticamente en este navegador, igual que el Taller 11.
Buscando los datos de tu Taller 11 en este navegador…
1 · Identidad de marca
2 · Fundamentos visuales
Tu paleta ya vive en el Taller 11 — aquí solo la mostramos como referencia. Si quieres cambiarla, edítala allá.
3 · Componentes clave
Variantes de tu logotipo que ya tienes (o que te faltan):
Elementos recurrentes que tu marca necesita:
4 · Lenguaje verbal y tono
Muy formalMuy informal
Muy cercanaMuy técnica
Checklist de entrega
🤖 Convierte tu ficha en un prompt para IA
Así se ve en la práctica el Bloque 4: le compartes tu base de conocimiento a un LLM y le pides algo concreto.
Completa tu ficha arriba para generar el prompt.
Tus respuestas se guardan automáticamente en este navegador.