ZaRQuN – Diseño Gráfico, Web y Programación Blog sobre diseño grafico en general y curiosidades

Si te mola el diseño y siempre estás cazando tipografías nuevas, Hot Type es de esos sitios que deberías tener en favoritos ya mismo. No es otra web más de fonts random: aquí hay curro serio detrás, con tipografías modernas que beben de lo clásico pero con personalidad propia. Básicamente, diseño tipográfico con intención, no relleno.

Lo interesante es que no juegan a ser “free fonts forever”, sino que van a lo profesional: familias tipográficas bien construidas, múltiples estilos y pensadas para branding, editorial o digital. Ejemplos como Exat, Nyck o Hot Sans no están ahí de adorno, cada una tiene su rollo bien definido: desde sans geométricas limpias hasta serif con carácter para textos largos o titulares con punch.

Pero aquí viene lo bueno: puedes probar todo esto gratis sin hacer malabares. Tienen una sección de test fonts que es oro puro si estás trabajando en proyectos o simplemente explorando ideas. Descargas las fuentes completas, con todos los caracteres, y puedes usarlas en mockups, pruebas o presentaciones a cliente sin problema.

Eso sí, sin líos: gratis para testear, no para lanzar el proyecto final. Si vas a usarla en algo real (web, branding, cliente, etc.), toca pagar licencia. Y tiene todo el sentido del mundo: estás usando tipografía bien hecha, no un experimento de Dafont.

Lo interesante aquí es el enfoque: te dejan trabajar con la fuente de verdad antes de decidir. No es el típico preview engañoso. Puedes ver cómo se comporta en layouts reales, cómo respira en un diseño, si funciona en UI o si se rompe en un párrafo largo. Y eso, si diseñas en serio, marca la diferencia.

Además, el catálogo no es infinito (y eso es bueno). Está bastante curado: menos ruido, más calidad. Cada familia tiene su personalidad clara, desde la contundencia de Stroy Grotesk hasta el rollo más editorial de Punta o Nyck. No es para descargar 200 fuentes, es para encontrar UNA que funcione de verdad.

En resumen: HotType es de esos recursos que no necesitas hasta que lo descubres… y luego no lo sueltas. Si curras con tipografía, su sistema de test fonts gratis es justo lo que debería hacer toda foundry: dejarte probar sin fricción y pagar solo cuando toca.

#Tipografía #Fonts #DiseñoGráfico #UIUX #Branding #WebDesign #RecursosGratis #Typography #HotType

Vale, esto es importante: si sabes hacer una web, ya puedes hacer vídeos. Sin timeline, sin Premiere, sin After Effects. Solo HTML.

Eso es exactamente lo que propone HyperFrames, un framework open source de HeyGen que básicamente rompe la forma tradicional de crear vídeo.

La idea es tan simple que cuesta entender por qué no existía antes: escribes HTML, lo renderizas y obtienes un MP4. Fin.

Pero ojo, no es “HTML metido en un vídeo”. Es un sistema donde defines cada elemento con timing, capas y animaciones usando atributos tipo data-start o data-duration. Es decir, conviertes el DOM en una línea de tiempo.

Y aquí es donde se pone interesante para diseñadores y devs:
no hay interfaz visual obligatoria. No hay timeline arrastrando clips. No hay caos. Hay código limpio.

De hecho, HyperFrames está pensado más para máquinas que para humanos. Sí, literalmente. Está diseñado para que agentes de IA puedan generar vídeos solos porque “hablan HTML de forma nativa”.

Esto cambia totalmente el juego.

Antes:
→ Diseñas en Figma
→ Exportas
→ Editas vídeo
→ Renderizas

Ahora:
→ Describes el vídeo
→ Un agente escribe el HTML
→ Ejecutas un comando
→ Tienes el vídeo listo

Y además con algo clave: determinismo. Mismo input, mismo output siempre. Nada de renders aleatorios o bugs raros. Esto es oro para pipelines automáticos, CI/CD o generación masiva de contenido.

A nivel técnico, por dentro mezcla cosas que ya conoces: Chrome en modo headless, captura frame a frame y FFmpeg para generar el vídeo final. Nada mágico, pero muy bien conectado.

Lo realmente potente no es la tecnología, es el enfoque.

HyperFrames no intenta ser “otro editor de vídeo”. Es más bien una capa nueva:
el vídeo como código.

Y eso tiene implicaciones brutales:
puedes versionar vídeos en Git, generar contenido dinámico, automatizar campañas, o crear vídeos personalizados a escala sin tocar una interfaz visual.

Para diseñadores, esto puede sonar raro al principio. Pero si ya trabajas con motion, UI o sistemas de diseño, en el fondo es lo mismo: componentes, estados y animaciones… solo que ahora viven en HTML.

Para developers, esto es directamente un regalo. No tienes que aprender un software nuevo. Usas lo que ya sabes: HTML, CSS, JS, GSAP o lo que quieras.

Y si te preguntas si esto es hype o no, la comunidad está bastante intrigada. En Reddit ya lo están llamando “lo más interesante” que ha salido en vídeo programático últimamente, sobre todo por lo fácil que encaja con herramientas tipo Claude Code o similares.

¿Va a sustituir a After Effects? No.
¿Va a cambiar cómo se crean vídeos en productos digitales, marketing o IA? Muy probablemente sí.

Porque cuando el contenido se vuelve código, deja de ser manual y pasa a ser escalable.

Y ahí es donde empieza lo realmente gordo.

#HyperFrames #DiseñoGráfico #Programación #VideoAutomation #AI #HTML #Frontend #MotionDesign #DevTools #OpenSource #HeyGen #ContentCreation #NoCode #CreativeCoding

Si alguna vez has intentado recrear ese efecto acuarela natural en digital, ya sabes que no es tan fácil como parece. El problema no es Photoshop, ni tu habilidad… casi siempre es el material. Y aquí es donde entra este pack de 100 pinceles de acuarela gratuitos para Photoshop que, sin exagerar, están a otro nivel.

No estamos hablando del típico pack reciclado que ves en mil webs. Este set está pensado desde cero para ofrecer texturas reales, alta resolución y control total. Cada pincel tiene intención: manchas orgánicas, bordes húmedos, degradados suaves y ese caos controlado que hace que la acuarela funcione.

Lo interesante es que no necesitas ser ilustrador para sacarle partido. Si haces diseño gráfico, puedes usar estos brushes para crear fondos con personalidad, overlays que rompan la rigidez digital o detalles que hacen que un diseño plano se sienta más humano. Si programas interfaces o trabajas en producto digital, también puedes integrarlos en assets visuales para dar ese toque editorial que ahora está tan de moda.

El pack está optimizado para que no tengas que pelearte con ajustes raros. Cargas los pinceles y ya responden bien a presión, opacidad y flujo. Eso significa menos tiempo configurando y más tiempo creando. Además, al estar en alta resolución, puedes trabajar tanto para redes sociales como para proyectos de impresión sin que todo se vea pixelado.

Otro punto fuerte es la variedad. No son 100 pinceles que hacen lo mismo con ligeras variaciones. Aquí tienes desde trazos gruesos tipo brocha hasta salpicaduras, lavados suaves, efectos de borde seco… incluso algunos que simulan acumulación de pigmento, que es justo lo que le da ese look auténtico a la acuarela real.

En términos prácticos: este pack te ahorra horas. Horas de buscar, probar y descartar pinceles mediocres. Lo instalas y tienes un kit completo para experimentar, prototipar o incluso producir trabajos finales sin depender de recursos externos.

Y lo mejor: es gratis. Sin trampas, sin versiones limitadas, sin tener que pagar para desbloquear lo útil. Simplemente un recurso bien hecho, pensado para gente que quiere resultados rápidos sin sacrificar calidad.

Si trabajas en diseño o te gusta trastear con Photoshop, este tipo de recursos no son un “nice to have”. Son de esos que acabas usando más de lo que esperas.

#Photoshop #Brushes #Watercolor #DiseñoGráfico #RecursosGratis #PhotoshopBrushes #IlustraciónDigital #GraphicDesign #Freebies #DiseñoDigital

Si estás metido en diseño, desarrollo o cualquier movida digital, seguro que ya te has peleado con herramientas tipo Mailchimp, SendGrid o similares. Funcionan bien, sí… hasta que empiezas a pagar facturas mensuales que duelen.

Aquí es donde aparece BillionMail, un proyecto que básicamente dice: “¿y si montas tu propio Mailchimp en tu servidor y te olvidas de pagar?”

Y ojo, no es humo.

BillionMail es un servidor de correo + plataforma de email marketing totalmente open source, pensado para que tú tengas el control absoluto: desde el envío de newsletters hasta campañas masivas o emails transaccionales . Nada de depender de terceros, nada de límites absurdos… aquí mandas tú.

La propuesta es bastante directa: lo instalas (literalmente en unos minutos según el repo), conectas tu dominio, configuras DNS y ya puedes empezar a enviar campañas . Y sí, suena demasiado bonito, pero es justo lo que busca: simplificar algo que normalmente es un infierno técnico.

Lo interesante aquí no es solo que sea gratis, es que es self-hosted. Eso significa privacidad total, sin terceros rastreando tus datos ni tus listas de suscriptores . Para mucha gente esto ya es motivo suficiente para darle una oportunidad.

Además, viene con lo típico que esperas de una herramienta de marketing: analíticas de aperturas, clics, gestión de listas, plantillas reutilizables… todo integrado en una interfaz web bastante limpia . No es un juguete, es una alternativa seria.

Y luego está el punto clave: envío ilimitado. Mientras tu infraestructura aguante, puedes mandar correos sin restricciones . Esto rompe completamente el modelo SaaS tradicional donde pagas por cada contacto o cada envío.

Pero no todo es perfecto (obvio). Esto no es plug & play nivel principiante. Si no sabes lo que es un DNS, SPF, DKIM o cómo calentar una IP… te vas a pegar una buena curva de aprendizaje. Y aquí es donde mucha gente sigue prefiriendo herramientas de pago.

De hecho, en comunidades dev hay opiniones bastante claras: montar tu propio sistema te ahorra dinero, pero los SaaS siguen ganando en comodidad y deliverability a largo plazo si no sabes optimizar bien tu setup.

Así que BillionMail no es para todo el mundo. Es para perfiles que quieren control, que no quieren depender de terceros y que no tienen miedo a tocar servidor. Si eres diseñador con perfil técnico o dev con mentalidad maker, esto es literalmente tu juguete.

En resumen: BillionMail no es “otra herramienta más”, es un cambio de mentalidad. Pasas de alquilar email marketing… a poseerlo.

#BillionMail #OpenSource #EmailMarketing #SelfHosted #DesarrolloWeb #DiseñoDigital #Programación #DevTools #SaaSAlternativas #MarketingDigital

Si estás aprendiendo diseño gráfico o te interesa el mundo de la ilustración digital, el perfil de Nicolas Rix en Behance es uno de esos que tienes que abrir con calma… y perderte un rato.

No estamos hablando del típico diseñador “correcto”. Aquí hay personalidad. Mucha.

Rix es ilustrador, animador y director, con años de experiencia trabajando para marcas grandes como Marvel o Dreamworks . Eso ya te da una pista: sabe lo que hace y no está jugando en ligas pequeñas.

Pero lo interesante no es su currículum. Es cómo dibuja.

Su estilo entra directo por los ojos: colores potentes, personajes con mucha expresividad y una mezcla bastante curiosa entre lo infantil y lo oscuro. Puede hacer algo que parece sacado de un cuento para niños… y al segundo siguiente meterle un toque creepy que lo cambia todo. Esa dualidad es clave en su trabajo .

Y aquí viene lo importante si estás aprendiendo:
este tipo no destaca por hacer cosas “bonitas”, destaca por tener un lenguaje visual propio.

Muchos diseñadores novatos cometen el error de intentar hacerlo todo perfecto, limpio, minimalista… y acaban pareciéndose a todo el mundo. Rix hace justo lo contrario: exagera, deforma, juega con las proporciones y mete textura sin miedo. Resultado: lo ves y sabes que es suyo.

Otro punto interesante es la narrativa. No son solo ilustraciones sueltas. Cada pieza parece parte de una historia más grande. Esto es algo que en programación creativa o diseño interactivo también es oro: no diseñes pantallas, diseña experiencias.

Además, viene muy influenciado por animación clásica y cultura pop (rollo dibujos de los 80-90 o anime tipo Miyazaki) , lo que explica ese rollo tan dinámico que tienen sus personajes. No están “posando”, están viviendo algo.

En resumen: el Behance de Nicolas Rix no es solo para mirar, es para analizar. Fíjate en cómo usa el color, cómo simplifica formas complejas y cómo consigue transmitir emociones sin depender de detalles hiperrealistas.

#DiseñoGráfico #IlustraciónDigital #Behance #CharacterDesign #Animación #DiseñoCreativo #ArteDigital #InspiraciónDiseño #UIUX #MotionDesign

Hay campañas que intentan ser virales… y luego están las que simplemente lo son sin parecer que lo intentan. Eso es justo lo que pasa con “Every day can be iconic with a TK Maxx deal”. La idea es simple hasta decir basta: coger algo cotidiano, meterle un toque inesperado y convertirlo en algo que quieres compartir. Fin. Pero claro, ejecutarlo así de bien ya es otra historia.

El spot gira alrededor de una escena absurda pero hipnótica: un gato aparece con un zapato rojo sacado de una bolsa de TK Maxx. No hay storytelling complejo, no hay narrativa épica, no hay voice-over que te explique la vida. Solo una imagen potente, estética cuidada y ese punto raro que hace que no puedas dejar de mirar. Esto, a nivel de diseño y creatividad, es oro puro: cuando reduces el mensaje a lo esencial, todo lo demás suma.

Aquí hay varias claves interesantes si vienes del mundo del diseño o la programación creativa. La primera es el concepto de low effort, high impact. No necesitas una producción tipo Hollywood para generar impacto, necesitas una idea clara y una ejecución coherente. La segunda es entender cómo funciona el lenguaje visual actual: contenido rápido, raro, reconocible y fácilmente “remezclable”. Este anuncio está diseñado para vivir en redes, no en televisión.

Desde el punto de vista de branding, lo que hace TK Maxx es bastante inteligente. No te venden lujo, te venden la sensación de encontrar algo especial sin pagar precio de lujo. Es casi como gamificar la compra: buscar tesoros escondidos. Y ese gato con el zapato rojo es literalmente eso, una metáfora visual de “mira lo que te puedes encontrar cualquier día”.

Si te fijas bien, también hay una lección importante para desarrolladores y gente que trabaja en producto digital: esto va de experiencia, no de producto. TK Maxx no está diciendo “tenemos ropa barata”, está diciendo “puedes sentirte icónico cualquier día”. Ese cambio de enfoque es lo que marca la diferencia entre algo funcional y algo que conecta.

Y luego está el tema viral. Esto no parece un anuncio, parece un clip raro que alguien subiría a TikTok o Instagram sin contexto. Ese es el truco. Cuando una marca consigue camuflarse dentro del contenido nativo de las plataformas, deja de interrumpir y empieza a formar parte del feed. Y ahí es donde ganas.

En resumen: idea sencilla, ejecución inteligente y un entendimiento muy fino de cómo consumimos contenido hoy. Si estás aprendiendo diseño o programación creativa, quédate con esto: no necesitas complicarlo todo. A veces, un gato, un zapato rojo y una buena dirección creativa valen más que mil líneas de código o cien layouts distintos.

#TKMaxx #PublicidadCreativa #DiseñoGráfico #MarketingDigital #CampañasVirales #Branding #Creatividad #DiseñoVisual #UX #ContenidoViral

Vale, te voy a ahorrar tiempo: si estás usando IA para programar interfaces y todo te sale con pinta de plantilla cutre… no eres tú, es la falta de contexto.

Aquí entra awesome-design-md, un repo que básicamente dice: “oye, en vez de pedirle magia a la IA, dale instrucciones de diseño claras”. Y lo hace con algo tan simple que duele: archivos Markdown.

Sí, Markdown. Nada de Figma, nada de tokens raros, nada de pipelines complejos. Un archivo llamado DESIGN.md donde defines colores, tipografías, espaciados, componentes… y listo. Lo metes en tu proyecto y le dices al agente: “usa esto”. Fin.

La idea es potente porque soluciona un problema real: las IAs programan bien, pero diseñan como si vivieran en 2014. Botones genéricos, layouts reciclados… todo correcto, pero sin alma.

Este repo lo que hace es convertir el “gusto” en texto reutilizable. No estás copiando componentes, estás copiando criterios de diseño.

Y aquí está la magia: puedes hacer que tu app parezca Stripe, Notion o Apple simplemente cambiando un archivo. Literalmente eliges un estilo y la IA lo sigue como si fuera un manual de marca.

Además, cada DESIGN.md no es un resumen cutre. Tiene de todo:

• paleta de colores con roles semánticos
• jerarquía tipográfica completa
• estilos de botones, inputs, cards
• reglas de espaciado y layout
• comportamiento responsive
• incluso “qué NO hacer”

O sea, es como pasarle a la IA el cerebro de un diseñador comprimido en texto.

Y lo mejor: funciona porque Markdown es justo el idioma que las LLM entienden mejor. No hay que parsear nada raro.

Ahora bien, tampoco es la panacea.

#diseñografico #uxui #frontend #ia #programacion #webdesign #openSource #designsystems #markdown #aiTools

Si estás tirando de Google Fonts en todos tus proyectos… hay algo que deberías conocer ya: Fontsource.

Básicamente, es una librería enorme de tipografías open source listas para usar en tus proyectos, pero con un enfoque muy distinto: aquí no dependes de CDNs externos, tú te llevas las fuentes a casa y las gestionas como cualquier otra dependencia.

¿Y esto qué significa? Que instalas una fuente con npm y listo. Como si fuera una librería más de tu proyecto. Sin líos raros.

Fontsource te da acceso a más de 1500 familias tipográficas listas para descargar y usar directamente en tu código . Y lo mejor es que no se queda solo en las típicas fuentes de Google, también incluye otras que normalmente no tienes tan a mano.

La gracia está en cómo funciona. En lugar de cargar fuentes desde servidores externos (como hace Google Fonts), aquí haces self-hosting. Es decir, las fuentes viven dentro de tu proyecto. Esto tiene varias ventajas bastante serias.

Primero: rendimiento. Al evitar llamadas externas, reduces latencia y mejoras tiempos de carga. Nada de esperar a que otro servidor responda para pintar tu tipografía .

Segundo: privacidad. Google Fonts rastrea cierto uso, y aunque no sea dramático, hay proyectos donde esto importa. Con Fontsource, ese problema desaparece porque todo corre en tu propio entorno .

Tercero: control total. Las fuentes están versionadas como cualquier paquete npm. Nada de sorpresas porque Google ha actualizado una fuente y tu diseño ahora se ve distinto .

Y cuarto: funciona incluso offline. Esto es clave si estás trabajando con PWAs o apps donde no siempre hay conexión.

Además, puedes elegir exactamente qué pesos y estilos necesitas. No tienes que cargar toda la familia si solo quieres un par de variantes, lo cual ayuda bastante a optimizar.

A nivel práctico, usar Fontsource es ridículamente simple. Instalas la fuente que quieras, la importas en tu CSS o JS y listo. Sin enlaces externos, sin configuraciones raras.

Eso sí, no todo es perfecto. Hay gente que comenta que la interfaz de selección de fuentes no es la más cómoda del mundo, pero siendo honestos, eso es lo de menos cuando el sistema que hay detrás es tan sólido.

En resumen: si te tomas en serio el rendimiento y quieres dejar de depender de terceros para algo tan básico como la tipografía, Fontsource es una opción muy potente que deberías probar ya.

#WebDesign #Frontend #Tipografía #CSS #JavaScript #OpenSource #UI #UX #DevTools #Fonts

Si estás diseñando una web o una app y te faltan iconos (o simplemente los que tienes no terminan de encajar), esto te interesa. Gokoryan Icon Set es uno de esos packs que te solucionan la vida sin complicarte nada.

Estamos hablando de 150 iconos vectoriales organizados en 15 categorías distintas. Traducción rápida: tienes variedad suficiente para montar interfaces completas sin tener que ir mezclando estilos raros de diferentes packs. Todo mantiene coherencia visual, que es justo lo que marca la diferencia entre un diseño amateur y uno que se ve fino.

Lo bueno aquí no es solo la cantidad, sino cómo están pensados. Funcionan perfectamente para web, apps móviles en iOS y Android, dashboards, landing pages… básicamente cualquier interfaz moderna. Y eso se nota porque los iconos están limpios, bien equilibrados y no cargan ruido visual innecesario.

Otro punto fuerte: los estilos. No te encasillan en uno solo, sino que tienes tres variantes: colored (a todo color), outline (línea) y monocromático. Esto es clave porque puedes adaptarlos según el proyecto sin tener que buscar alternativas. Por ejemplo, outline para algo más minimalista, monocromo para UI más sobria o color para interfaces más vivas.

Y luego está la parte práctica, que es donde muchos packs fallan. Aquí no. Los archivos vienen en AI, EPS y PNG. Eso significa que puedes editarlos sin problema en Illustrator, adaptarlos a tu sistema de diseño o simplemente exportarlos rápido si vas con prisa. No hay fricción.

Además, al ser vectoriales, puedes escalarlos sin perder calidad. Esto parece obvio, pero cuando trabajas en múltiples resoluciones (hola responsive, hola retina), se vuelve imprescindible.

En resumen, Gokoryan Icon Set es de esos recursos que merece la pena tener guardados. No porque sean “bonitos” sin más, sino porque son útiles, consistentes y fáciles de trabajar. Y cuando estás en medio de un proyecto, eso vale oro.

#IconosGratis #UIUX #DiseñoWeb #DiseñoApp #RecursosGratis #VectorIcons #UXDesign #UIDesign #IconPack #DiseñoGráfico

Vale, vamos al grano. Cambiar entre modo claro y oscuro ya no es suficiente. Si tu web todavía hace ese cambio cutre sin animación… estás perdiendo una oportunidad brutal de destacar.

La demo de https://theme-toggle.rdsx.dev/ es justo lo contrario: un ejemplo simple pero muy potente de cómo hacer transiciones entre temas que parecen magia. Y lo mejor, no necesitas un framework raro ni 200 líneas de código.

La base de todo esto es la View Transitions API, una API moderna del navegador que te permite animar cambios entre estados de la UI de forma nativa. Nada de hacks, nada de trucos raros. Directo al grano.

De hecho, el propio ejemplo te deja claro lo absurdo de simple que puede ser:

if (!document.startViewTransition) switchTheme()
document.startViewTransition(switchTheme);

Ya está. Literalmente eso. Con eso puedes envolver el cambio de tema y convertirlo en una transición animada.

Aquí es donde viene lo interesante. El toggle no se limita a cambiar colores, sino que puedes meterle creatividad: máscaras circulares, efectos blur, animaciones con SVG, clip-paths… incluso GIFs si te vienes arriba.

Y esto cambia totalmente el juego. Porque ya no estás haciendo un “modo oscuro”, estás creando una experiencia.

Piensa en esto: cuando el usuario hace clic, no solo cambia el tema, siente que la web responde, que hay una transición cuidada. Eso es UX del bueno.

Además, este enfoque encaja perfecto con cómo ya funcionan los toggles clásicos. Normalmente solo cambias una clase en el <html> o guardas el estado en localStorage para recordar la preferencia del usuario . Aquí haces lo mismo… pero con esteroides visuales.

Otro punto clave: esto es totalmente personalizable. No estás atado a un estilo concreto. Puedes hacer:

• Animaciones tipo “círculo que se expande”
• Transiciones desde una esquina
• Efectos tipo eclipse
• Cambios con degradados o blur

Y todo controlado con CSS + SVG.

Si estás aprendiendo front, este tipo de recursos son oro. Porque te enseñan algo muy importante: no siempre necesitas más librerías, necesitas entender mejor el navegador.

Y sí, esto se puede integrar perfectamente con Tailwind, React, Astro o lo que quieras. Al final, el toggle sigue siendo un botón que cambia estado. Solo que ahora lo envuelves en una transición.

En resumen:

• Código mínimo
• Impacto visual máximo
• UX mucho más pro

Y sobre todo, algo que la mayoría de webs todavía no está usando. Ahí tienes ventaja.

#Frontend #JavaScript #UX #UI #WebDesign #DarkMode #CSS #SVG #ViewTransitions #DesarrolloWeb #Programación