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

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

Si estás empezando en diseño o simplemente necesitas un logo rápido sin complicarte la vida, Logo Diffusion es una de esas herramientas que te hacen pensar: “vale, esto ya está jugando en otra liga”.

La idea es simple: escribes lo que quieres (por ejemplo: logo minimalista para marca de café moderno) y la IA te escupe varias propuestas listas para usar. También puedes subir un boceto cutre hecho en 30 segundos y la herramienta lo convierte en algo bastante decente.

Y aquí viene lo interesante: no es solo generar por generar. Puedes ajustar colores, estilos, composición… básicamente tienes control suficiente para que no parezca el típico logo genérico de IA.

Además, trabaja con modelos de difusión (de ahí el nombre), lo que significa que las imágenes que genera tienen bastante calidad y coherencia visual. Nada de logos rotos o letras raras… bueno, casi nunca

Otro punto fuerte es la velocidad. En minutos tienes varias opciones sobre la mesa, algo que en un proceso tradicional te puede llevar horas o días. Y si estás validando ideas o haciendo branding rápido, esto es oro puro.

También mola que puedas exportar en vector (SVG), lo cual es clave si luego quieres usar ese logo en serio: web, impresión, lo que sea.

Ahora, vamos a ser claros: esto no sustituye a un diseñador. Es una herramienta brutal para empezar, prototipar o incluso sacar algo funcional si vas justo de presupuesto. Pero si quieres una identidad de marca con personalidad de verdad, ahí sigue ganando el factor humano.

En resumen, Logo Diffusion es como tener un diseñador junior ultrarrápido dentro del navegador. Tú le das ideas, él te devuelve opciones. Y a partir de ahí decides si te vale o si necesitas algo más trabajado.

#DiseñoGráfico #IA #LogoDesign #Branding #HerramientasIA #Diseño #Creatividad #Startups #Freelance #DiseñoDigital

Si alguna vez has diseñado en Figma y luego has tenido que “traducir” eso a código… sabes perfectamente el dolor.

Horas perdidas, inconsistencias, y ese momento en el que el diseño final no se parece en nada al mockup. Pues bien, ahí es donde entra Pencil.dev y viene a romper esa dinámica de raíz.

La idea de pencil.dev es simple pero potente: diseñar interfaces directamente dentro de tu editor de código. Sí, dentro del propio VS Code o Cursor. Nada de saltar entre herramientas. Nada de handoff. Todo en el mismo sitio.

Funciona como un lienzo vectorial (rollo Figma), pero integrado en tu entorno de desarrollo. Tienes canvas infinito, capas, componentes reutilizables… lo típico de diseño, pero pegado a tu código.

Y aquí viene lo interesante: está pensado para trabajar con IA desde el minuto uno. Puedes generar interfaces enteras con prompts, iterar diseños o modificar componentes sin salir del editor.

En lugar de diseñar algo bonito y luego pelearte para implementarlo, aquí el diseño ya vive dentro del proyecto. Literalmente se guarda como archivos versionables en Git, lo que significa que diseño y código están sincronizados desde el principio.

Esto cambia bastante el juego, sobre todo si eres desarrollador con inquietudes de diseño o si trabajas solo. Porque elimina ese paso intermedio donde todo se rompe.

Además, la herramienta tira fuerte hacia lo que ahora llaman “vibe coding”: generar interfaces directamente con IA mientras programas. Es decir, describes lo que quieres y el sistema te monta la UI y el código a la vez.

¿Es perfecta? Ni de lejos.

Al ser una herramienta bastante nueva, todavía está verde. Le faltan cosas que Figma ya tiene súper pulidas, y dependiendo de cómo la uses puede volverse algo inestable o consumir bastantes recursos. Pero eso es bastante normal en este tipo de herramientas que están naciendo ahora mismo.

Aun así, lo importante no es si hoy es mejor que Figma o no. Lo importante es hacia dónde apunta:

Eliminar la separación entre diseño y desarrollo
Trabajar directamente sobre el producto final
Usar IA como parte del flujo, no como añadido

Si estás empezando en diseño o desarrollo, esta es de esas herramientas que merece la pena probar aunque sea por entender por dónde va el futuro.

Porque esto huele a cambio gordo.

#DiseñoUI #UX #IA #Herramientas #Programación #Frontend #WebDesign #AItools #Figma #Desarrollo

Si alguna vez has querido darle ese rollo “realista pero guarro bien hecho” a tus diseños, esto te va a encantar. Estamos hablando de un pack de 40 texturas de cartón y papel kraft que funcionan literalmente para todo: mockups, fondos, branding, packaging… lo que se te ocurra.

Lo bueno aquí no es solo la cantidad, que ya está bastante bien, sino la calidad. Cada textura viene en JPG a una resolución bastante bestia (6000×3376), lo que significa que puedes usarlas tanto en digital como en cosas más serias tipo impresión sin que se rompa nada. Y sí, se ven muy reales, con sus imperfecciones, sus pliegues y ese rollo orgánico que hace que un diseño pase de “meh” a “esto ya tiene personalidad”.

Otro punto que suma mucho: puedes usarlas en proyectos personales y comerciales sin preocuparte por licencias raras. No necesitas atribuir nada, aunque el autor, Artyom Saqib, deja la puerta abierta por si quieres darle crédito. Pero vamos, que no te va a perseguir nadie por usarlas en un cliente.

¿Dónde brillan estas texturas? Pues en cualquier sitio donde quieras salirte del diseño plano de siempre. Por ejemplo:

• Branding con rollo ecológico o artesanal
• Mockups de packaging (cajas, bolsas, etiquetas)
• Fondos para posters o redes sociales
• Interfaces con estética más “tangible”
• Collages o composiciones tipo editorial

Además, combinan muy bien con tipografías sans serif limpias o incluso con fuentes más “handmade”. Si sabes jugar con modos de fusión en Photoshop o Figma, puedes sacar cosas muy potentes en minutos.

En resumen: es uno de esos recursos que deberías tener guardados sí o sí. No porque los vayas a usar todos los días, sino porque cuando los necesitas… te salvan el proyecto.

#DiseñoGráfico #Texturas #RecursosGratis #Packaging #Mockups #Kraft #UIUX #Photoshop #Figma #DiseñoCreativo

Si te interesa el mundo del arte digital, el modelado 3D o simplemente te flipan las imágenes que parecen sacadas de otro planeta, tienes que conocer a Anna Yashina. Esta artista 3D y CG Artist se está ganando su lugar a base de talento, creatividad y una sensibilidad estética que se nota en cada uno de sus trabajos.

Lo primero que llama la atención de Anna es su capacidad para convertir conceptos aparentemente simples en composiciones visuales que atrapan. No se trata solo de modelar objetos o personajes, sino de darles vida, atmósfera y narrativa. Su estilo se mueve entre lo realista y lo estilizado, con un dominio técnico que deja claro que detrás hay muchas horas de dedicación y aprendizaje constante.

En el universo del modelado 3D, donde herramientas como Blender, ZBrush o Maya son el pan de cada día, Anna destaca por cómo utiliza estas tecnologías para contar historias. Cada textura, cada iluminación y cada detalle está pensado para generar impacto. Y eso es justo lo que la hace diferente: no crea por crear, sino que construye experiencias visuales.

Además, su trabajo encaja perfectamente con las tendencias actuales del diseño digital, donde el 3D está cada vez más presente en publicidad, videojuegos, cine y redes sociales. De hecho, es muy probable que en el futuro veamos nombres como el suyo asociados a grandes proyectos dentro de la industria creativa.

Otro punto fuerte de Anna Yashina es su presencia online, donde comparte sus proyectos y procesos creativos. Esto no solo inspira a otros artistas, sino que también demuestra transparencia y pasión por su trabajo. Porque sí, aquí hay talento, pero también hay amor por lo que hace.

En definitiva, estamos ante una artista que no solo domina el modelado 3D, sino que entiende cómo conectar visualmente con el espectador. Y en un mundo saturado de imágenes, eso vale oro.

#AnnaYashina #3DArtist #CGArtist #ArteDigital #Modelado3D #3DDesign #Blender3D #ZBrush #DigitalArt #CreativeIndustry #VisualArt #3DModeling #CGI #ArtistaDigital #Diseño3D

Si te dedicas al desarrollo web o simplemente te gusta ver cómo una web “cobra vida” cuando haces scroll o clic, probablemente ya hayas oído hablar de GSAP (GreenSock Animation Platform). Es una de esas herramientas que, cuando la pruebas, entiendes por qué está en tantísimos sitios web modernos: animaciones suaves, control total del tiempo y un rendimiento brutal.

Pues bien, dentro del ecosistema de GSAP existe un repositorio en GitHub llamado gsap-skills, que básicamente funciona como una especie de “mapa de aprendizaje avanzado”. No es un tutorial típico ni una librería nueva, sino un conjunto de skills o habilidades estructuradas para aprender a usar GSAP como un profesional de verdad.

La idea es muy interesante: en lugar de aprender GSAP de forma caótica (un poco de timelines por aquí, un ScrollTrigger por allá), este proyecto organiza conocimientos prácticos como si fueran “habilidades desbloqueables”. Por ejemplo, puedes aprender cómo construir animaciones basadas en scroll, cómo estructurar timelines complejos, cómo optimizar rendimiento o incluso cómo aplicar principios clásicos de animación como anticipación, rebote o squash & stretch directamente en código.

GSAP ya es conocido por ser una herramienta extremadamente potente para animaciones en CSS, SVG, Canvas o incluso React, pero este tipo de recursos lo llevan un paso más allá: te enseñan a pensar como un animador, no solo como un desarrollador que mueve elementos en pantalla.

Además, encaja perfectamente con el enfoque moderno del frontend: experiencias más interactivas, sitios más dinámicos y microinteracciones que hacen que una web no solo funcione, sino que también “se sienta viva”.

En resumen, gsap-skills no es una librería, es una guía estructurada para subir de nivel con GSAP. Si ya has hecho tus primeras animaciones con gsap.to() o ScrollTrigger, este repo es como pasar de conducir un coche automático a pilotar un Fórmula 1 con control total de cada curva.

Y lo mejor de todo es que encaja con la filosofía de GSAP: aprender haciendo, experimentar y construir animaciones que realmente impacten.

#GSAP #JavaScript #Frontend #WebAnimation #GreenSock #ScrollTrigger #MotionDesign #WebDevelopment #UIAnimation #GitHub

Si estás montando una web, app o cualquier proyecto digital y aún no tienes claro qué librería de iconos usar, deja de buscar porque Lucide puede ser justo lo que necesitas. Y no, no es otra librería más del montón: es rápida, bonita y pensada para desarrolladores que no quieren complicarse la vida.

Para empezar, hablamos de una colección brutal de más de 1.500 iconos en formato SVG, lo que significa que son ligeros, escalables y se ven perfectos en cualquier pantalla . Nada de iconos pixelados ni archivos pesados que ralentizan tu web. Aquí todo fluye.

Lo interesante de Lucide es que no nació de cero, sino como una evolución de Feather Icons. Básicamente, la comunidad dijo: “esto mola, pero puede ser mejor”, y se pusieron manos a la obra. Resultado: una librería mantenida activamente, con mejoras constantes y nuevas incorporaciones .

Y cuando digo comunidad, lo digo en serio. No hay una empresa detrás marcando el ritmo, sino diseñadores y desarrolladores que aportan y mantienen el proyecto vivo. Eso se traduce en algo clave: consistencia visual. Todos los iconos siguen las mismas reglas de diseño, así que no tendrás ese efecto Frankenstein de mezclar estilos raros .

Otra de las joyas de la corona es lo personalizable que es. Puedes cambiar tamaño, color, grosor de línea… lo que quieras. Literalmente puedes adaptar los iconos a tu branding sin despeinarte . Y si usas frameworks como React, Vue o Angular, estás de suerte, porque tienen paquetes oficiales listos para integrar sin dolores de cabeza .

Pero aquí viene lo que de verdad enamora a los desarrolladores: es “tree-shakable”. Traducido: solo cargas los iconos que usas, no toda la librería. Esto hace que tu proyecto sea más rápido y eficiente, algo clave hoy en día donde cada milisegundo cuenta .

Y por si fuera poco, es totalmente gratis, incluso para uso comercial. Sí, puedes usarlo en proyectos de clientes sin preocuparte por licencias raras ni pagos ocultos .

En resumen, Lucide es como ese colega que hace todo bien: ligero, bonito, flexible y encima gratis. Si estás diseñando interfaces modernas y quieres mantener coherencia visual sin complicarte, es una opción que deberías probar ya mismo.

#Lucide #IconosSVG #DesarrolloWeb #UIUX #Frontend #ReactJS #DiseñoWeb #OpenSource #WebDesign #DevTools

Llevaba tiempo con el gusanillo de meterme en el mundo de la pintura digital. Tenía el iPad muerto de risa para cuatro notas y Netflix, así que pensé: “oye, igual aquí hay un mini artista frustrado esperando salir”. Total, que me lancé a probar tres de las apps más populares: Adobe Fresco, Procreate y Autodesk SketchBook. Y sí, hay diferencias… y bastante claras.

Empecé por Procreate, que es como la puerta de entrada de casi todo el mundo. Es rápida, intuitiva y tiene una barbaridad de pinceles. Literalmente abres la app y ya estás dibujando como si llevaras años. Me flipó lo fluido que es todo, el rendimiento es una pasada y tienes herramientas suficientes para hacer cosas muy serias. Eso sí, cuando intentas ir más allá y buscas un rollo más “realista” en pintura, notas que todo está muy optimizado para ilustración digital más que para simular pintura tradicional.

Luego probé SketchBook, que es como el colega tranquilo que no hace ruido pero cumple. Es gratuita, ligera y muy fácil de usar. Perfecta si estás empezando o si quieres dibujar sin complicarte la vida con mil menús. Pero claro, comparada con las otras dos, se queda un poco corta en herramientas avanzadas y en sensaciones. Es como si te faltara ese “algo” cuando quieres experimentar más en serio.

Y aquí es donde entra Adobe Fresco… y donde yo hice clic. Lo que más me atrapó es cómo se siente pintar. Los pinceles “vivos” son una locura: acuarelas que se mezclan de verdad, óleos que reaccionan como esperarías… de repente no estás “dibujando en digital”, estás pintando. Para alguien que viene con la idea romántica de la pintura tradicional, esto engancha muchísimo. Además, la integración con el ecosistema de Adobe suma puntos si ya tocas otras herramientas.

Eso no quiere decir que sea perfecta. Fresco puede parecer menos inmediata que Procreate al principio, y algunas funciones están más escondidas. Pero cuando le pillas el truco, es donde más disfrutas el proceso, no solo el resultado.

Si tuviera que resumirlo fácil: Procreate es la mejor para ilustrar rápido y con potencia, SketchBook es la más sencilla para empezar sin presión, y Adobe Fresco además de gratuita es la que más se acerca a la sensación real de pintar. Y en mi caso, eso último ha pesado más que todo lo demás.

Así que sí, después de probar las tres, mi favorita es Adobe Fresco. No porque sea “la mejor” en todo, sino porque es la que me ha hecho querer volver a abrir el iPad cada día para seguir pintando. Y al final, de eso va todo esto.

#AdobeFresco #Procreate #SketchBook #iPad #ArteDigital #Ilustración #DiseñoGráfico #Creatividad #DigitalPainting #AppsCreativas