Estudio por iniciativa propia · Sin fines de lucro · Servicios para jóvenes · 2026
LanternhouseUna luz encendida en el porche.
Un sitio web completo para una organización sin fines de lucro ficticia de Charlotte, creado para descubrir qué haría yo si el único encargo fuera la persona que más necesita ayuda.
Lanternhouse atiende a jóvenes de 16 a 24 años que salen del sistema de acogida en Charlotte, Carolina del Norte. Escribí el encargo, inventé la organización por completo, dirigí el arte de cada fotografía y construí el sitio a partir de un único archivo de contenidos. Me puse una sola regla: diseñar para una joven de 19 años con el teléfono roto, de noche y sin un lugar donde dormir, y dejar que todo lo demás se derivara de ahí.
- Organización
- Ficticia, inventada para este estudio
- Función
- Encargo, contenidos, dirección de arte, diseño y desarrollo
- Plataforma
- Generador estático en Python, CSS y JavaScript escritos a mano, Vercel
- Creado
- Octubre de 2026, con una renovación del diseño ese mismo mes
- Idiomas
- Inglés, con una página de inicio en español
Dos formas de leer este estudio. Cada capítulo empieza en lenguaje sencillo: qué cambió y para quién. Los lectores técnicos pueden abrir Bajo el capó para ver la ingeniería.
El encargo
Construir un sitio creíble para una organización sin fines de lucro, lo bastante sólido para sostener una organización real: una ruta de ayuda, seis programas, donaciones, voluntariado, eventos, historias, noticias, finanzas, empleo y prensa.
El método
Escribir primero para la visita más difícil, hacer crecer una identidad a partir de una sola imagen, generar cada página desde un único archivo de contenidos, y después medir en navegadores reales y corregir lo que muestran las cifras.
Lo que demuestra
Cómo trabajo cuando nadie fija las restricciones: estructura guiada por el contenido, accesibilidad como punto de partida, movimiento con reglas y un registro honesto de lo que todavía falta mejorar.
El encargo
Un encargo que escribí yo, y las reglas que me impuse
La mayoría de los conceptos de portafolio son unas cuantas pantallas bonitas. Yo quería lo contrario: una organización completa, con la profundidad que una junta directiva, un financiador y una joven de 19 años pondrían a prueba, cada uno a su manera.
Por eso el encargo vino primero, escrito como si un cliente me lo hubiera entregado. Inventar una organización sin fines de lucro de Charlotte para jóvenes que salen del sistema de acogida. Darle una fundadora con experiencia vivida, un equipo directivo, una junta, seis programas, un centro de atención sin cita, finanzas y ofertas de empleo. Después, construir cada página que todo eso implica.
Antes de cualquier trabajo de diseño fijé dos salvaguardas, porque un sitio de ayuda ficticio conlleva un riesgo real. Los únicos números de teléfono que funcionan son líneas de crisis reales (988, 911 y 211); los números propios de la organización usan el rango 555 reservado para la ficción. Y el sitio pide a los buscadores que no lo indexen.
- Un encargo escrito con alcance, públicos y criterios de éxito
- Una organización completa: dirección, junta, programas, cifras
- Salvaguardas de seguridad decididas antes del primer boceto
Bajo el capóPara lectores técnicos
- Encargo estructurado como una ficha de ingreso de cliente: públicos, objetivos, secciones obligatorias, restricciones y cómo se ve el éxito.
- Modelo de contenidos escrito antes del diseño: cada programa responde para quién es, qué se recibe y cómo empezar; historias, eventos y noticias comparten un mismo esquema.
- noindex enviado como encabezado X-Robots-Tag desde el servidor perimetral y anotado en robots.txt, además de una línea en el pie de cada página que identifica el sitio como un concepto.
- Números de la organización en el rango 555-01xx reservado para la ficción; las líneas de crisis reales se mantienen exactas.
Público
Diseñar primero para la visita más difícil
La persona más importante que visita este sitio tiene 19 años, un teléfono roto con poca señal, es de noche y no tiene dónde dormir. Si el sitio funciona para ella, también funciona para la trabajadora social, el voluntario y el donante.
Cada página mantiene una forma de llegar a una persona en un solo toque: una barra superior con el número de teléfono, un botón Text us que permanece en pantalla en los teléfonos y una franja de ayuda al final de las páginas de programas. La página de inicio hace una sola pregunta, “Where do you want to start?” (¿Por dónde quiere empezar?), y lleva a cualquiera al lugar correcto en tres clics o menos.
Una verificación de elegibilidad de tres preguntas indica a los jóvenes a qué tienen derecho sin pedirles nunca su nombre.
- Una pregunta, cuatro respuestas sencillas, tres clics a cualquier lugar
- Una página “Somewhere to sleep tonight” (Un lugar donde dormir esta noche) escrita como pasos numerados
- Elegibilidad sin identidad: sin nombre, sin correo, sin guardar nada
Bajo el capóPara lectores técnicos
- La portada con la ruta es mejora progresiva: cada camino es un enlace real, y JavaScript lo convierte en una ruta en la misma página con una línea de progreso de tres pasos.
- El botón Text us se oculta al desplazarse hacia abajo, vuelve al desplazarse hacia arriba, deja libre el indicador de inicio del iPhone y desaparece al llegar al pie de página.
- La verificación de elegibilidad se ejecuta por completo en el navegador; las respuestas nunca se envían ni se guardan.
- Páginas de ayuda redactadas en lenguaje sencillo, con un nivel de lectura de aproximadamente octavo grado.
Identidad
Una imagen, un sistema: una luz encendida en el porche
La organización se construye sobre una sola imagen: la luz del porche encendida para alguien que llega tarde a casa. El sistema visual crece a partir de ella: azules profundos de atardecer, un único amarillo de lámpara y el marco de una ventana en arco que contiene cada fotografía clave.
Al cargar, la ventana de la página de inicio se ilumina poco a poco, como si alguien acabara de encender la luz. Es el único movimiento del sitio que ocurre sin que el visitante haga nada.
Los titulares usan Bricolage Grotesque, por su calidez y una ligera irregularidad juvenil. El texto usa Atkinson Hyperlegible Next, diseñada por el Braille Institute, porque muchos jóvenes que salen del sistema de acogida han tenido una escolaridad interrumpida o problemas de visión sin corregir.
- Dos colores, usados con disciplina
- Marcos en arco que hacen que cada fotografía se sienta como una ventana
- Una tipografía elegida para quien lee, no para quien diseña
Bajo el capóPara lectores técnicos
- Tokens de color en :root. El amarillo se reserva para acciones y luz, nunca como decoración; las combinaciones de texto cumplen 4,5:1.
- Fuentes alojadas en el propio sitio y precargadas, para que ninguna solicitud salga del dominio.
- El arco es un clip-path estático, para que una fotografía en movimiento nunca se salga de la forma en Safari.
- El encendido de la ventana es una sola transición de opacidad, que se omite por completo con movimiento reducido.
Arquitectura de contenidos
Cincuenta páginas que responden preguntas reales
Un sitio creíble para una organización sin fines de lucro es, sobre todo, contenido, así que lo escribí como estrategia de contenidos antes de convertirlo en páginas. Cada página de programa responde las mismas tres preguntas en el mismo orden: para quién es, qué se recibe y cómo empezar.
Alrededor de los programas están las páginas que una organización real necesita y que los sitios conceptuales suelen omitir: una página de transparencia con gastos e ingresos, una lista de artículos para el hogar que se necesitan, empleo, prensa, una declaración de accesibilidad que enumera los problemas conocidos y una política de privacidad para donantes.
Las historias hablan de resultados, no de rescates. Cada una empieza con las propias palabras de la persona joven.
- Seis programas con una misma plantilla coherente
- Finanzas, empleo, prensa y políticas, no solo páginas de promoción
- Búsqueda en todo el sitio, que se abre con la tecla de barra diagonal
Bajo el capóPara lectores técnicos
- Un único archivo de contenidos en Python genera todas las páginas; las plantillas comparten un mismo vocabulario de componentes.
- Datos estructurados en cada página: NGO, WebSite con búsqueda, Service, Event, NewsArticle, FAQPage, Person y BreadcrumbList.
- Elementos dialog nativos para la búsqueda y el menú móvil, para que el foco quede contenido y se devuelva correctamente.
- Enlace para saltar al contenido, regiones de referencia, migas de pan y una jerarquía de encabezados lógica en cada página.
Donaciones
Pedir una donación como lo haría un buen recaudador de fondos
La página de donación empieza por la donación mensual, porque un aporte constante vale más para una organización como esta que uno único más grande. Al elegir un monto, la línea de abajo cambia para explicar lo que logra ese monto: 100 dólares cubren una semana de cenas en The Porch para 15 jóvenes.
Las donaciones en homenaje, la opción de cubrir la comisión de procesamiento y otras formas de donar están en la misma página. Quienes prefieren donar objetos en lugar de dinero encuentran una lista de artículos necesarios en vez de un callejón sin salida.
- Primero la donación mensual, con la única a un toque de distancia
- Un mensaje de impacto que cambia según el monto
- Un siguiente paso para cada tipo de donante
Bajo el capóPara lectores técnicos
- El formulario se valida en el navegador y, en este estudio, nunca envía datos; en un proyecto real pasaría al procesador de pagos de la organización.
- Los montos y los mensajes de impacto son contenido, para que el personal pueda cambiarlos sin tocar el código.
- Una política de privacidad para donantes redactada en coherencia con un sitio sin rastreadores.
Dirección de arte
Dirigir el arte de fotografías que aún no existen
No había una biblioteca de fotos, así que la escribí. Cada imagen empezó como una dirección de arte por escrito: un estilo de la casa que describe la cámara, el lente, la luz y el tipo de película, y después una ficha para cada toma que dice quién aparece, qué está haciendo y qué debe transmitir.
El estilo de la casa pide realismo documental: espontáneo, sin poses, con textura natural de la piel, Charlotte al anochecer, sombras azul profundo y luz cálida de lámpara. Los siete retratos de la dirección se hicieron en una misma sesión, para que la luz y el fondo coincidan en toda la serie.
Como la organización, cada persona que aparece es inventada. En un proyecto real, el mismo documento se convierte en el encargo para un fotógrafo y para las personas a las que sirve la organización.
- 33 tomas, cada una con un propósito escrito y un encuadre exacto
- Un estilo de la casa que mantiene cada imagen en un mismo mundo visual
- Cada persona retratada es inventada, como la organización
Bajo el capóPara lectores técnicos
- Las fichas de toma viven en un solo documento, con nombres de archivo, proporciones y tamaños finales en píxeles.
- Un script de descarga obtiene los originales de una carpeta compartida por ID de archivo y, si se retira el acceso, recurre a las imágenes publicadas.
- Un script de optimización recorta cada imagen a su espacio, genera WebP en los tamaños necesarios y crea la imagen para compartir.
- URL de imágenes con hash del contenido, para que una foto reemplazada nunca quede oculta por una caché desactualizada.
Movimiento
Una renovación del diseño, y las reglas que me enseñó
Después de la primera versión añadí encima cinco tendencias de diseño actuales: transiciones suaves entre páginas, un párrafo que se ilumina palabra por palabra a medida que se lee, una cuadrícula bento de fotos, titulares que ganan peso al aparecer y un fino grano de película en las franjas de atardecer.
La primera versión se trababa. Las animaciones de forma sobre fotografías, ligadas al desplazamiento, obligaban al navegador a repintar constantemente. Las reemplacé por simples fundidos y desplazamientos hacia arriba que se ejecutan una sola vez, y los repintados al desplazarse por la página de inicio bajaron de 2.959 a 319.
Las pruebas en Safari encontraron dos problemas más: fotografías en movimiento que se salían de sus marcos redondeados y un desenfoque animado que de vez en cuando hacía fallar la página. Ambos se corrigieron, y ambos se convirtieron en reglas escritas para cada sitio posterior.
- Las fotografías solo se funden y se mueven. Nada anima una forma.
- Cada imagen en movimiento está dentro de un recorte estático
- El movimiento reducido lo desactiva todo
Bajo el capóPara lectores técnicos
- Las View Transitions entre documentos mantienen fija la cabecera mientras las páginas se funden; las Speculation Rules precargan y renderizan la página al pasar el cursor.
- Las entradas usan solo opacity y transform, y se activan una sola vez con IntersectionObserver.
- El error de recorte de Safari se corrigió envolviendo las imágenes y las capas de brillo en un span con un clip-path estático.
- Un fallo intermitente de WebKit se reprodujo repitiendo la misma carga y el mismo desplazamiento una docena de veces, y se rastreó hasta un filter: blur animado en las palabras de los titulares.
Móvil y rendimiento
Rápido en un teléfono lento, y medido
Las 50 páginas se revisaron a 360 y 390 píxeles de ancho: sin desplazamiento lateral, cada control con al menos 44 píxeles para tocar y ningún campo de formulario tan pequeño como para que un iPhone haga zoom.
Los efectos al pasar el cursor solo se ejecutan en dispositivos que lo permiten, para que nada quede activado después de un toque, y los teléfonos reciben imágenes más pequeñas que las computadoras. En un teléfono de gama media con limitación de velocidad y 4G lento, la página de inicio muestra su contenido principal en aproximadamente 1,5 segundos, sin que nada salte mientras carga.
- Sin desbordamiento horizontal en ninguna de las 50 páginas
- Áreas táctiles de 44 píxeles o más, incluidos los enlaces del pie de página
- Unos 1,5 segundos hasta el contenido principal con 4G lento limitado
Bajo el capóPara lectores técnicos
- Menos de 120 KB de HTML, CSS, JavaScript y fuentes en la primera carga de la página de inicio, sin contar la fotografía.
- CSS y JavaScript con huella digital, almacenados en caché durante un año en el servidor perimetral.
- Los fondos de portada se cargan solo cuando la página está inactiva, y se omiten con el ahorro de datos o en conexiones 2G y 3G.
- Imágenes adaptables con dimensiones explícitas; desplazamiento del diseño medido por debajo de 0,1 en cada página probada.
Privacidad y visibilidad
Privado por defecto, fácil de encontrar por diseño
Una persona joven que busca ayuda no debería ser seguida por internet por haberlo hecho. El sitio no instala cookies, no carga rastreadores ni analíticas, no inserta widgets de redes sociales y no hace solicitudes a ningún otro dominio. Lo comprobé en veinte cargas de página, y el recuento fue cero.
La privacidad no tiene por qué costar visibilidad. Cada página incluye datos estructurados, URL canónicas, imágenes para compartir y alternativas en inglés y en español, para que una versión real quede bien descrita tanto para los buscadores como para las herramientas de respuesta con IA. Una página de inicio en español atiende a las familias y a los jóvenes que prefieren el español.
- Sin cookies, rastreadores ni solicitudes a terceros
- Una Content Security Policy estricta y HSTS
- Datos estructurados y alternativas de idioma en cada página
Bajo el capóPara lectores técnicos
- La Content Security Policy solo permite los scripts, estilos, fuentes e imágenes del propio sitio, con frame-ancestors en none.
- HSTS con preload, una Permissions Policy restringida y una política de referencia estricta.
- noindex enviado como encabezado porque se trata de un concepto; un lanzamiento real elimina una sola línea.
- Los formularios tienen etiquetas visibles, validación en línea y mensajes de estado que anuncian los lectores de pantalla.
Calidad
Lo que encontró una auditoría honesta
El 30 de octubre de 2026 ejecuté una revisión automatizada de accesibilidad (axe-core, reglas WCAG 2.2 AA) en diez páginas, en tamaños de computadora y de teléfono. La mayoría de las páginas salieron limpias. Vale la pena contarle dos hallazgos.
El párrafo que se ilumina al leer empieza con las palabras aún no leídas atenuadas, y el texto atenuado no cumple el contraste hasta que se ilumina. La solución conserva el efecto: empezar cada palabra con contraste completo e iluminarla con color y peso. Por otro lado, el nombre accesible del botón Text us no contiene sus palabras visibles, lo que puede confundir a quienes usan control por voz. Esa corrección es de una sola línea.
Un proyecto real añadiría lo que un estudio no puede: contenidos elaborados junto a jóvenes que lo han vivido, pruebas en sus propios teléfonos, un procesador de pagos real y un sistema de contenidos que el personal pueda gestionar.
- Medido y luego documentado, incluido lo que falló
- Dos hallazgos, cada uno con una solución clara
- Una lista sencilla de lo que aporta el trabajo real y un estudio no puede
Bajo el capóPara lectores técnicos
- axe-core 4 con Playwright en 20 cargas de página (10 páginas, en computadora y en teléfono).
- Hallazgos: color-contrast en el párrafo que se ilumina al desplazarse (solo en inicio); label-content-name-mismatch en el botón flotante Text us (teléfonos).
- Las mismas 20 cargas: sin desbordamiento horizontal, sin solicitudes a terceros, desplazamiento del diseño por debajo de 0,1.
- Correcciones registradas en las notas del proyecto, junto a las reglas de movimiento.
Lléveselo
La historia completa, en papel.
El informe de diseño completo y un resumen de una página, escritos para equipos que están decidiendo si soy el socio adecuado.