Publicar tu app en GitHub Pages es una forma rápida y gratuita de mostrar tus proyectos front-end. En esta guía te explico, paso a paso, cómo hacerlo desde un proyecto creado con React y Vite.
Requisitos previos
Proyecto creado con React + Vite.
Repositorio en GitHub con tu código.
Node.js y terminal operativos.
Nota: GitHub Pages sirve sitios estáticos (HTML/CSS/JS); no ejecuta código de servidor.
Configura la ruta base en vite.config.ts o vite.config.js
Vite necesita saber desde qué ruta se servirá tu sitio en producción. Para repositorios de proyecto (https://TU_USUARIO.github.io/NOMBRE_DEL_REPO/), define base con esa URL.
Ejemplo: vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
base: 'https://TU_USUARIO.github.io/NOMBRE_DEL_REPO/',
})
Si usas un User/Org Page (repositorio llamado TU_USUARIO.github.io), la base suele ser '/':
La propuesta es el inicio formal de una relación profesional. Demuestra que entendemos el contexto, el problema y la oportunidad y que contamos con el enfoque y la experiencia para resolverla. También es un filtro: una propuesta confusa o incompleta puede transmitir desorganización y poca claridad.
Idea clave: Una propuesta eficaz conecta necesidades, soluciones y resultados, con un marco claro de alcance, tiempos y métricas.
Qué incluir en una propuesta para un cliente
1) Portada y datos básicos
La primera impresión cuenta. Incluye:
Título del proyecto (breve y descriptivo).
Nombre del cliente y fecha.
Datos de contacto (nombre, web, email, teléfono).
Ejemplo: Propuesta de desarrollo web para [Nombre del Cliente] Equipo [Tu Marca] — [tusitio.dev]
2) Resumen ejecutivo
Es el “tráiler” de la propuesta: en 8–10 líneas explica el problema, la solución y el resultado esperado. Debe leerse en un minuto y dejar claro el valor.
¿Qué reto enfrenta el cliente?
¿Qué proponemos y por qué es la mejor vía?
¿Qué impacto esperamos (KPIs o resultados cualitativos)?
3) Objetivos del proyecto
Redacta objetivos orientados a resultados, no a tareas. Sustituye “instalar formulario” por “incrementar la captación de leads cualificados”. Si puedes, usa objetivos SMART:
Específicos: qué se logrará exactamente.
Medibles: con qué indicadores.
Alcanzables: realistas con los recursos disponibles.
Relevantes: vinculados al negocio.
Temporales: con un horizonte de tiempo.
Ejemplo: “Aumentar en un 30% la conversión de solicitudes de demo en 90 días”.
4) Alcance del trabajo (Scope)
El alcance define qué está incluido y qué no. Es el antídoto contra malentendidos y el temido scope creep.
Incluye
Módulos y entregables (wireframes, diseño UI, desarrollo en Astro/React, QA, despliegue).
Herramientas y entornos (repo Git, hosting, analítica).
Revisiones previstas (p. ej., hasta 2 rondas por fase).
No incluye
Servicios no contemplados (copys, fotografía, ilustración, campañas pagas).
Licencias de terceros salvo que se especifique.
Cambios fuera de fase o ampliaciones no pactadas.
Añade una cláusula de solicitudes adicionales (cómo se cotizan y cómo afectan a tiempos).
5) Metodología de trabajo
Explica cómo vamos de A a B. El cliente quiere entender el recorrido:
CTA sugerido: “Si estás de acuerdo, agendamos la reunión de inicio esta semana”.
Qué no incluir en una propuesta
1) Jerga técnica excesiva
El cliente busca claridad. Si necesitas un glosario, colócalo como anexo y usa lenguaje accesible en el cuerpo principal.
2) Listas interminables de microtareas
Agrupa por bloques de trabajo; no conviertas la propuesta en un checklist inabarcable.
3) Promesas irreales
Evita garantías que no controlas (p. ej., “triplicar ventas en 30 días”). Comprométete con la calidad del proceso y KPIs razonables.
4) Información irrelevante
Céntrate en lo que impacta el proyecto: casos afines, metodología y resultados.
5) Precios sin contexto
Acompaña cada cifra con su racional: alcance, esfuerzo y valor esperado.
Cómo lograr que tu propuesta destaque
Personalización real
Nada mata más rápido una propuesta que el “copiar y pegar”. Personaliza problema, ejemplos y lenguaje. Demuestra que entendiste el negocio del cliente.
Claridad visual y jerarquía
Usa títulos, subtítulos, listas y espacios en blanco. Facilita una lectura en diagonal: muchos decisores evalúan en 5–10 minutos.
Storytelling con enfoque en valor
Cuenta la solución como una historia: “Tu marca necesita X; con esta arquitectura y este diseño, tus usuarios lograrán Y; el negocio obtendrá Z”.
Pruebas y métricas desde el día 1
Define cómo se medirá el éxito (tiempo de carga, conversiones, retención, NPS) y en qué plazos revisaréis el impacto.
Gestión de riesgos y plan B
Menciona riesgos (demoras en contenidos, dependencias externas, integraciones) y cómo los mitigaréis.
Errores comunes al enviar propuestas
No revisar ortografía o formato: resta credibilidad.
No definir plazos ni condiciones: abre la puerta a conflictos.
No señalar el “qué sigue”: sin CTA, la decisión se enfría.
No explicitar dependencias del cliente: el calendario se descuadra.
No establecer límites de revisiones: desgaste y sobrecostes.
Preguntas frecuentes (FAQs)
1) ¿PDF, enlace editable o ambos?
Recomendamos PDF para mantener el diseño y un enlace editable (Google Docs/Notion) para comentarios. Combinas solidez y colaboración.
2) ¿Cuál es la extensión ideal?
Depende del proyecto, pero como guía: entre 5 y 15 páginas. Menos puede quedar corto, más suele ser abrumador salvo concursos complejos.
3) El cliente pide cambios constantes, ¿qué hacemos?
Define desde el inicio un número de revisiones por fase y un proceso para cambios fuera de alcance. Documenta decisiones en actas breves para mantener una única versión de la verdad.
De propuesta a proyecto: el último empujón
Una buena propuesta no se “cierra”; se activa. Si hemos conectado contexto, alcance y valor, el siguiente paso es simple: mover la conversación del papel a la agenda. Nuestro objetivo no es impresionar, sino desatascar decisiones.
Antes de enviarla, validemos tres puntos: (1) ¿Qué recibe el cliente y cuándo?, (2) ¿Cómo mediremos el éxito? y (3) ¿Cuál es el primer hito pagado? Con eso claro, la propuesta deja de ser un PDF bonito y se convierte en un acuerdo operable.
Checklist relámpago:
CTA claro (responder/firmar/agendar).
Vigencia y condiciones visibles.
Alcance y no-incluye sin ambigüedad.
¿Listos? Enviemos la propuesta y reservemos el kick-off.
El diseño de interfaces nunca es neutral. Cada color, cada tipografía y cada microinteracción comunica algo. El diseño emocional busca provocar una respuesta afectiva que acompañe a la tarea y potencie el vínculo con el producto. Cuando logramos que alguien sonría con una animación sutil o sienta confianza gracias a un lenguaje claro, construimos una relación que va más allá de lo técnico.
Beneficios tangibles
Memorabilidad: lo que emociona, se recuerda mejor.
Confianza: una interfaz que transmite calma y claridad reduce la fricción.
Conversión: la emoción guía muchas decisiones antes que la razón.
Diferenciación: dos apps pueden hacer lo mismo, pero la que conecta se queda en la mente.
Señales de que tu UI necesita más emoción
Usuarios completan tareas, pero no regresan ni recomiendan.
Feedback cualitativo frío: “funciona”, “está bien”, pero nada más.
Bajas tasas de interacción en vacíos de contenido, estados de error o onboarding.
Qué significa prototipar emociones
Prototipar emociones es hacer visible lo invisible: definir, diseñar y testear la atmósfera afectiva que deseamos provocar en cada momento clave de la experiencia. Igual que prototipamos interacciones, también podemos prototipar la sensación que queremos provocar.
Traducción de atributos: tono de voz, paleta, tipografía, ritmo, movimiento, sonido.
Escenarios: recorridos reales donde esa emoción es crítica (p. ej., pagos, errores, vacíos).
Protoboard emocional: un lienzo con ejemplos de microcopy, estados y animaciones objetivo.
Capas de experiencia a considerar
Visceral: percepción inmediata (color, forma, contraste).
Conductual: control, feedback, fluidez.
Reflexiva: significado, valores y coherencia de marca a largo plazo.
Idea clave: si no podemos describir la emoción objetivo con una frase simple, no podremos diseñarla ni medirla.
Investigación: detectar y priorizar emociones
Antes de diseñar hay que escuchar. La investigación con foco emocional combina métodos cualitativos y cuantitativos para entender qué sienten las personas y por qué.
Métodos cualitativos
Entrevistas en profundidad: exploran detonantes, miedos y expectativas.
Diarios de uso: capturan emociones en contexto y a lo largo del tiempo.
Mapa de empatía y journey map: visualizan las emociones por etapa.
Card sorting emocional: tarjetas con palabras-estado (calma, prisa, logro, duda) para priorizar.
Guion base para entrevistas orientadas a emociones
Cuéntanos una experiencia reciente con [producto/categoría]. ¿Qué sentiste al inicio?
¿Qué momento te resultó más tenso? ¿Por qué?
Si pudiéramos cambiar una sensación, ¿cuál sería y en qué punto?
Completa: “Me gustaría sentir ___ cuando ___”.
Métodos cuantitativos
Escalas de valencia/arousal: miden positividad e intensidad de la emoción.
Encuestas post-tarea: “En una palabra, ¿cómo te sentiste?” + escala Likert.
Eventos de comportamiento: abandonos, rage clicks, tiempo en error.
Consejo práctico
Incluye siempre una pregunta abierta: “¿Qué hubiera hecho que te sintieras mejor en este paso?” La gente suele darte pistas accionables de microcopy o feedback visual.
Traducir emociones a la UI
Ahora convertimos intención en decisiones de diseño. No es decoración: es sistema. Cada componente debe sostener la emoción objetivo sin sacrificar accesibilidad ni rendimiento.
Paleta y tipografía con intención
Calma/Confianza: tonos fríos o desaturados; tipografías legibles y estables.
Energía/Logro: acentos cálidos; pesos tipográficos que destaquen el momento de éxito.
Cercanía: redondeos suaves, alturas de línea generosas, microcopys conversacionales.
Microguía rápida de contraste
Asegura contraste suficiente (WCAG) en mensajes críticos. La claridad también se siente: reduce ansiedad.
Microcopy que habla en voz humana
Éxito: “¡Listo! Guardamos tus cambios. ¿Quieres revisar el resumen?”
Error: “No pudimos completar el pago. Revísalo y probamos otra vez juntos.”
Vacío: “Aquí vivirán tus proyectos. Crea el primero en un clic.”
Principios de tono
Claro antes que creativo: la comprensión reduce la carga emocional negativa.
Empático, no paternalista: evita culpar; ofrece guía concreta.
Coherente: misma voz en correos, notificaciones y UI.
Microinteracciones y movimiento
El movimiento es un canal emocional potente. Úsalo con propósito: anticipación, respuesta, confirmación.
Feedback inmediato: cambios de estado visibles y auditables (si aplica).
Éxito: pequeños rebotes o checkmarks que celebran sin interrumpir.
Progreso: esqueletos y contadores reducen incertidumbre durante esperas.
Patrones rápidos
Loading con tiempo estimado realista y acción alternativa.
Errores con ruta de salida (CTA secundaria de ayuda).
Confirmaciones que ofrecen el siguiente mejor paso.
Prototipos, narrativa y fidelidad
Un prototipo sin contexto puede sentirse frío. La narrativa envuelve al flujo y permite que evaluadores y usuarios vivan la experiencia, no solo la analicen.
Niveles de fidelidad
Baja: bocetos y wireframes para explorar emociones objetivo sin distracciones.
Media: UI aproximada con microcopy y estados clave.
Alta: microinteracciones, tiempos, sonidos; ideal para test emocionales finos.
Storyboards y guiones
Usa viñetas simples: situación, tensión, acción, resolución. Diseña los picos emocionales (tensión) y las válvulas (alivio) con intención.
Técnicas útiles
Wizard of Oz: simula IA o automatizaciones para validar emoción sin construir todo.
Role play: reproduce contextos (prisa, distracción, baja conectividad).
Escenarios adversos: prueba qué se siente cuando algo falla y cómo se recupera.
Cómo medir el impacto emocional
Medir emociones no es esotérico: es método. Combinamos lo que la gente dice, lo que hace y cómo se siente en el trayecto.
Métricas cualitativas
Escala de una palabra: “Describe tu experiencia con una palabra”.
Diarios post-sesión: cómo cambia la sensación al usarlo por varios días.
Mapa emocional del journey: puntúa 1–5 valencia/arousal por etapa.
Plantilla de registro por tarea
Registro de valencia y arousal por tarea
Tarea
Valencia (−2 a +2)
Arousal (1–5)
Palabra
Observaciones
Onboarding
+1
3
Esperanza
Microcopy claro, diseño aireado.
Pago
0
4
Tensión
Falta tiempo estimado y métodos alternativos.
Métricas cuantitativas
Conversión por estado: éxito tras errores con y sin ayuda empática.
Abandono en esperas: diferencia entre spinner vs. progreso con expectativa.
Eventos de frustración:rage clicks, reintentos, cierres inesperados.
Triangulación práctica
Si la valencia mejora pero sube el abandono, quizá la UI es más amable pero sigue lenta.
Emoción sin rendimiento no retiene; rendimiento sin emoción no fideliza. Equilibremos.
Guía paso a paso: de la intención al impacto
Define 1–2 emociones objetivo por flujo crítico.
Arma un moodboard emocional con referencias de voz, color y movimiento.
Lista momentos sensibles (onboarding, error, pago, vacío, éxito).
Escribe microcopy para cada estado, con variantes A/B.
Prototipa fidelidad media con tiempos y estados realistas.
Incorpora microinteracciones mínimas viables y accesibles.
Testea emociones con valencia/arousal + pregunta abierta.
Itera según hallazgos y trade-offs con rendimiento.
Documenta un “sistema emocional” en tu design system.
Monitorea en producción abandono, errores y NPS por flujo.
Preguntas frecuentes (FAQs)
¿Cómo diferenciar un diseño funcional de uno verdaderamente emocional?
El funcional resuelve la tarea; el emocional, además, deja huella. Se percibe en la memoria (“quiero volver”), en la reducción de ansiedad y en micro-momentos de satisfacción bien diseñados.
¿Se puede medir de forma objetiva una emoción en UI?
Podemos aproximarnos con valencia/arousal, encuestas post-tarea y eventos de comportamiento. Lo ideal es triangular: lo que la gente dice, hace y siente.
¿Qué pasa si buscamos provocar tensión o frustración?
Puede tener sentido en juegos o aprendizajes por reto, pero debe ser controlado y contextual, con una vía clara de alivio y recuperación para que no erosione la confianza.
Más allá de las pantallas
Diseñar interfaces sin emociones es como construir un puente solo con hierro y cemento: cumplirá su función, pero nadie querrá detenerse en medio a contemplar el paisaje.
Cuando prototipamos emociones, en cambio, levantamos puentes habitables: con luces que guían, con detalles que sorprenden y con un ritmo que acompaña al viajero. Así logramos que las personas no solo crucen, sino que disfruten del trayecto y recuerden la experiencia.
El reto está en atreverse a diseñar con sensibilidad. Preguntarnos en cada interacción: “¿qué quiero que sienta aquí?”. Porque al final, más allá de los flujos y de los botones, lo que queda en la memoria no son las pantallas, sino las sensaciones.
Nuestro llamado es claro: no dejemos las emociones fuera del prototipo. Convirtámoslas en el hilo conductor que transforme productos digitales en experiencias humanas, vivas y cercanas.
