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

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

Si ya usas GitHub Copilot y sientes que podría dar más de sí… no estás loco. La realidad es que Copilot es potente, pero lo que realmente marca la diferencia es cómo lo usas. Y aquí es donde entra Awesome GitHub Copilot para volarte la cabeza.

Estamos hablando de una especie de “repositorio cheat code” creado por la comunidad que reúne prompts, agentes, instrucciones y configuraciones para sacarle todo el jugo a Copilot. No es una herramienta nueva, es mejor: es un kit de mejoras para una herramienta que ya usas.

Dentro te encuentras auténticas joyas: prompts listos para generar documentación sin sufrir, instrucciones que hacen que Copilot siga estándares de código como si fuera tu senior más exigente, y agentes especializados que entienden flujos concretos de trabajo. Todo pensado para que dejes de pelearte con la IA y empieces a dirigirla como toca.

La gracia de todo esto es que no partes de cero. En lugar de escribir prompts random esperando que Copilot adivine lo que quieres, aquí tienes estructuras ya probadas por otros desarrolladores. Es literalmente aprender de la experiencia colectiva, pero sin tener que leer mil hilos de foros.

Además, el proyecto no para de crecer. Es open source, así que cualquiera puede aportar nuevos prompts, mejorar los existentes o crear colecciones completas para casos específicos como DevOps, testing, documentación o incluso arquitectura de software.

Y por si fuera poco, han montado incluso una web navegable donde puedes explorar todo esto como si fuera una tienda de mejoras para tu Copilot: agentes, skills, plugins, workflows… todo organizado para que encuentres rápido lo que necesitas sin perderte entre markdowns.

¿El resultado? Que pasas de usar Copilot como “autocompletado fancy” a convertirlo en un copiloto real que entiende contexto, sigue reglas y trabaja contigo. Productividad, sí, pero con cabeza.

Porque al final, la diferencia entre una IA que ayuda y una que estorba no es la tecnología… es cómo la configuras. Y ahí Awesome GitHub Copilot juega en otra liga.

#GitHubCopilot #IA #Programación #DesarrolloWeb #Productividad #DevTools #AIcoding #OpenSource

Hay recursos que simplemente cumplen… y luego están los que hacen que tu diseño pase de “meh” a “wow” en cuestión de segundos. Este pack de 200 gradientes dorados entra de lleno en la segunda categoría. Porque sí, el dorado tiene ese algo especial: lujo, elegancia, brillo y un toque aspiracional que convierte cualquier pieza gráfica en algo mucho más atractivo.

Lo interesante de esta colección no es solo la cantidad —que ya de por sí es una locura— sino la variedad. No hablamos de un único dorado plano repetido hasta el infinito, sino de 200 interpretaciones distintas del oro: más cálidas, más frías, más intensas, más suaves… combinaciones que te permiten jugar sin miedo hasta encontrar el acabado perfecto para tu proyecto.

Y aquí es donde empieza la diversión. Puedes probar cómo queda un dorado más metálico en un logotipo, uno más suave en un fondo elegante, o incluso mezclarlos con otros colores para crear composiciones que destaquen sin parecer recargadas. Porque el truco del dorado no es solo usarlo, sino saber elegir el tono adecuado.

Este tipo de recursos son especialmente útiles si trabajas en branding, redes sociales, packaging o incluso interfaces donde quieras transmitir una sensación premium sin complicarte demasiado la vida. Básicamente, es como tener una paleta de lujo lista para usar en cualquier momento.

Además, el pack está pensado para ser práctico: descargar, aplicar y listo. Sin configuraciones raras ni procesos eternos. Lo tienes todo preparado para experimentar, combinar y ver cuál de esos 200 dorados hace que tu diseño brille más (literalmente).

Así que si alguna vez has pensado que a tu diseño le falta ese “toque caro” sin saber exactamente cómo conseguirlo, probablemente la respuesta estaba aquí: en un buen gradiente dorado.

#DiseñoGráfico #Gradientes #RecursosGratis #GraphicDesign #UIUX #Branding #DiseñoDigital #Gradients #Freebies #Creatividad

Si pensabas que las redes sociales de los supermercados eran territorio de ofertas aburridas y fotos de tomates con filtro, es que no has visto lo que está haciendo Lidl España últimamente. Porque sí, han decidido que vender está bien, pero hacerte reír mientras tanto está mucho mejor.

Solo hay que darse una vuelta por su perfil de X (antes Twitter) para entenderlo: juegos de palabras que parecen escritos a las 3 de la mañana, referencias absurdas que no sabes si son geniales o un accidente… y precisamente ahí está la magia. Publicaciones como “EsPESTO patronum” o simplemente “Un durum” sin contexto son el tipo de contenido que rompe cualquier lógica publicitaria tradicional y, aun así, funciona de forma escandalosa.

Lo interesante es que esto no es casualidad. Lidl lleva tiempo entendiendo que en internet gana quien mejor domina el lenguaje meme. Ya lo demostraron con publicaciones surrealistas o incluso mensajes aparentemente erróneos que acababan siendo virales, logrando miles de interacciones y conversación orgánica. Y ahora han llevado esa fórmula un paso más allá: abrazar el humor absurdo sin complejos.

Aquí no hay storytelling épico ni anuncios emocionales con piano de fondo. Hay chistes malos (pero buenísimos), dobles sentidos que te hacen releer el tuit dos veces y un tono que parece más de colega que de marca. Y eso conecta especialmente con un público que está saturado de publicidad “perfecta”.

Además, esta estrategia encaja perfectamente con lo que buscan muchas marcas hoy: ser parte de la conversación, no interrumpirla. Lidl no intenta venderte directamente, se mete en el feed como uno más, responde con humor y juega con códigos que normalmente pertenecen a los usuarios. De hecho, ya han demostrado que cuando una marca entra en el juego con inteligencia, la comunidad responde multiplicando la viralidad.

Y ojo, porque este tono no se queda solo en redes. Lidl lleva años apostando por un estilo creativo fresco y cercano, incluso en packaging o campañas, buscando conectar con públicos más jóvenes a través del humor y la creatividad.

En resumen: Lidl ha entendido algo clave en 2026 — en redes no gana quien más vende, sino quien mejor entretiene. Y mientras otros siguen intentando parecer modernos, ellos directamente se han convertido en meme. Sin filtros, sin miedo al ridículo… y con resultados que ya querrían muchas agencias.

#Lidl #MarketingDigital #SocialMedia #Humor #PublicidadCreativa #Memes #CommunityManager #Branding #RedesSociales #Marketing

Si alguna vez has tenido una idea brillante para una web o app pero te has quedado bloqueado al momento de diseñarla, Google está experimentando con algo que podría cambiar bastante las reglas del juego. Se llama Stitch y básicamente intenta convertir descripciones simples en interfaces visuales funcionales usando inteligencia artificial.

La propuesta es tan simple como potente: escribes lo que quieres crear, algo tipo “una app de recetas con fotos grandes y botón de favoritos”, y Stitch empieza a generar una interfaz acorde a esa idea. No hablamos solo de bocetos básicos, sino de layouts bastante coherentes que ya te dan una base real para trabajar. Es como tener un diseñador UI al lado… pero en versión IA.

Este tipo de herramientas encaja perfectamente con la tendencia actual de desarrollo asistido por IA, donde cada vez más tareas creativas y técnicas se automatizan o se aceleran. Stitch no viene a reemplazar diseñadores, pero sí a quitar esa fricción inicial de empezar desde cero. Y seamos honestos: empezar es muchas veces lo más difícil.

Lo interesante es que Stitch forma parte de la línea experimental de Google, lo que significa que está en constante evolución. No es un producto final ni cerrado, sino más bien un laboratorio donde se están probando nuevas formas de interacción entre humanos y máquinas. Algo muy en la línea de lo que ya vimos con herramientas como Figma o Adobe XD, pero con el añadido fuerte de la inteligencia artificial generativa.

Para diseñadores, puede ser una herramienta brutal para prototipar rápido y validar ideas. Para desarrolladores, un atajo para visualizar conceptos sin tener que montar todo desde cero. Y para creadores en general, una forma de dar forma a ideas sin necesidad de dominar herramientas complejas desde el minuto uno.

¿Es perfecta? Para nada. Como toda IA generativa, puede fallar, generar cosas genéricas o no entender del todo lo que buscas. Pero como punto de partida, es difícil no verle el potencial. Y sobre todo, abre una puerta interesante: la de democratizar aún más el diseño digital.

En definitiva, Stitch es otro paso más hacia un futuro donde crear productos digitales sea más rápido, accesible y, por qué no, más divertido.

#Google #Stitch #InteligenciaArtificial #DiseñoWeb #UIUX #DesarrolloWeb #IA #HerramientasDigitales #Diseño #UX #Tecnología