Portada del artículo sobre Roadmade y el proceso de un proyecto de diseño.

Roadmade: entender y estimar un proyecto de diseño antes de empezar

He diseñado webs durante años. También he trabajado en identidad visual.

Aun así, cuando decidí profundizar en UX/UI, me di cuenta de que conocer las partes no era lo mismo que entender el recorrido completo. Podía buscar qué era una entrevista, un user flow o un test de usabilidad. Lo difícil era saber qué venía antes, qué dependía de qué y cuándo podía dar una fase por terminada.

No necesitaba otra lista de tareas sueltas. Necesitaba entender el proceso.

De esa necesidad nació Roadmade, una aplicación de roadmaps explicados y editables para proyectos de diseño. Incluye dos disciplinas, UX/UI e identidad visual, y permite convertir un proceso amplio en decisiones concretas de trabajo.

Vista real de un proyecto de identidad visual dentro de Roadmade, con su estado, fases, tareas y horas.

Onepage de Roadmade mostrando la fase de briefing y preparación del roadmap UX/UI.

El problema no era encontrar información

Información hay mucha. Hay artículos sobre investigación, wireframes, sistemas de diseño, naming o manuales de identidad. El problema aparece cuando tienes que convertir todo eso en un proyecto real.

¿Qué tareas corresponden a este encargo? ¿Cuánto tiempo pueden llevar? ¿Qué puedes dejar fuera sin comprometer el resultado? ¿De dónde salen las horas que después incluyes en una propuesta?

En Roadmade el punto de partida es un proceso profesional estructurado. No pretende que todos los proyectos sean iguales. Es una referencia completa que puedes consultar y adaptar con criterio.

Aquí utilizo roadmap para hablar del recorrido de trabajo de un proyecto de diseño, no de un roadmap de producto destinado a priorizar funcionalidades durante meses. Roadmade no decide qué debe construir una empresa. Ayuda a ordenar el trabajo necesario para abordar un encargo de diseño.

Una tarea debería explicar algo más que su nombre

Una checklist puede decirte: «Detectar el problema real de marca».

Pero esa frase puede quedarse corta. ¿Qué significa exactamente? ¿Por qué importa? ¿Cómo sabes que la tarea está terminada?

Por eso cada tarea incorpora tres niveles de explicación:

  • Qué es, para situar la acción.
  • Por qué importa, para entender la decisión que hay detrás.
  • Hecho cuando, para reconocer un criterio de cierre.

También puedes editar el título y las horas, añadir una nota privada, completar la tarea o excluirla si no corresponde al encargo.

No se trata de marcar casillas. Se trata de saber qué estás aceptando, cambiando o dejando fuera.

Explicación de una tarea en Roadmade con qué es, por qué importa y cuándo está terminada.

UX/UI e identidad visual necesitan recorridos distintos

Las dos disciplinas comparten algunas preocupaciones —entender el encargo, investigar, definir el alcance, presentar y entregar—, pero no son el mismo proceso con etiquetas diferentes.

En UX/UI, el recorrido pasa por la definición, la investigación, la arquitectura, los flujos, la interfaz, las pruebas y el handoff. En identidad visual, avanza desde el briefing y el diagnóstico hasta la estrategia, la dirección visual, el sistema gráfico, sus aplicaciones y el manual.

Cada disciplina tiene sus propias fases, tareas y entregables. En ambos casos el recorrido se puede adaptar, porque un proyecto pequeño no necesita lo mismo que uno complejo y un rediseño no parte del mismo lugar que una marca nueva.

La guía muestra el mapa completo. La persona decide qué camino tiene sentido recorrer.

Ver el trabajo ayuda a estimarlo mejor

Muchas veces pensamos en el logotipo, las pantallas o el entregable final, pero dejamos fuera reuniones, investigación, revisiones, QA o preparación de la entrega. Si esas tareas no aparecen, tampoco entran en la estimación.

Roadmade asigna horas editables a tareas, bloques y fases. Cuando excluyes algo o ajustas su duración, la estimación cambia con el alcance. Después puedes calcular cada fase con tu tarifa, con otra tarifa si interviene otra persona o con un precio cerrado.

El resultado es una referencia interna antes de preparar el presupuesto. No es una factura ni un presupuesto contractual, y tampoco decide cuánto debes cobrar. El precio final sigue siendo una decisión profesional.

La IA puede proponer. La persona decide

La revisión con IA parte del brief y lo compara con el roadmap. Puede sugerir qué partes parecen necesarias y cuáles podrían quedar fuera, explicando el motivo.

Nada se aplica automáticamente. Puedes aceptar, rechazar o editar cada propuesta.

Para mí este límite es importante. La IA puede ayudar a detectar incoherencias, pero no conoce todos los matices del cliente, del equipo o del contexto. Una sugerencia necesita revisión, no obediencia.

¿A quién puede ayudar Roadmade?

Roadmade puede servir a quien está entrando en una disciplina y quiere comprenderla sin aprenderla a base de piezas sueltas. Pero también a profesionales, estudios o empresas que necesitan dimensionar un encargo antes de comprometer horas, fechas y precio.

Los usos son distintos, pero la necesidad es la misma: tener delante el proceso y convertirlo en decisiones reales.

No sustituye la experiencia. La hace más visible.

Lo que me llevo como diseñadora

Durante mucho tiempo asocié un proceso detallado con una forma rígida de trabajar. Construir Roadmade me ha hecho verlo de otra manera.

Tener el proceso delante no significa seguirlo sin pensar. Significa poder quitar una tarea sabiendo por qué no corresponde, ampliar una fase cuando el encargo lo exige y explicar mejor de dónde salen las horas.

Una guía no elimina el criterio. Te da una base más clara para utilizarlo.

En resumen

→ Roadmade reúne el proceso y la explicación en un mismo lugar.

→ Incluye recorridos específicos para UX/UI e identidad visual.

→ Permite adaptar tareas y horas al alcance real del encargo.

→ Convierte ese alcance en una estimación interna de tiempo y coste.

→ La IA propone cambios, pero la persona decide siempre.

Puedes empezar a utilizar Roadmade con hasta dos proyectos activos. Yo seguiré revisándola como reviso cualquier proyecto de diseño: usándola y detectando qué decisiones todavía pueden mejorar.

Portada del artículo sobre cómo se construyó Roadmade con Claude Code y Codex.

Cómo construí Roadmade: de Claude Code a Codex

Roadmade no nació de un prompt. Tampoco de un plan perfecto.

Nació de una necesidad que ya tenía antes de abrir ninguna herramienta de IA: quería comprender el proceso UX/UI completo. Venía del diseño web y la identidad visual, conocía muchas de sus partes, pero me faltaba verlas conectadas desde el briefing hasta la entrega.

La idea era sencilla de explicar y bastante menos sencilla de convertir en un producto: reunir un proceso profesional, explicarlo y permitir que cada persona lo adaptara a un proyecto real.

El curso «Crea tus propias apps reales con Claude Code», de tribUX, me dio el contexto para empezar a construir esa idea. El certificado acredita esa formación; no valida Roadmade ni convierte el resultado en algo terminado.

Onepage de Roadmade mostrando la fase de investigación y definición del roadmap UX/UI.

La necesidad vino antes que la aplicación

Podía haber creado una checklist rápida de UX/UI. Habría sido más fácil, pero no resolvía lo que yo necesitaba. Una lista dice qué hacer; no necesariamente explica por qué importa, cómo encaja con lo anterior o cuándo puedes considerar que has terminado.

También quería que el método no dependiera de lo que una IA decidiera generar cada vez. El contenido debía partir de prácticas profesionales conocidas y mantener una estructura estable. La IA podría ayudar a adaptar el recorrido, pero no inventarlo desde cero.

Esa decisión condicionó la arquitectura, la forma de presentar las tareas y el papel de la IA dentro de la aplicación.

La primera construcción con Claude Code

Empecé a desarrollar Roadmade durante el curso trabajando con Claude Code.

Yo no llegaba como desarrolladora experta. Llegaba como diseñadora con una necesidad concreta, experiencia en web y muchas decisiones de producto que tomar. No se trataba de pedir «hazme una app de UX».

Mientras la aplicación tomaba forma, fui decidiendo cómo representar las fases y las tareas, qué debía explicar cada una, cómo excluir trabajo sin borrarlo, cómo mostrar las horas y dónde podía ayudar la IA sin apropiarse del criterio.

También había que distinguir una estimación interna de lo que finalmente ve un cliente. El código era una parte. La definición del producto era otra.

La identidad también forma parte de la experiencia

En el proceso aparecieron el nombre, el logotipo y la identidad de Roadmade. Ayudaron a dar coherencia al proyecto, pero no solucionaron automáticamente la interfaz.

Hubo que ajustar jerarquías, iconos, mensajes y estados. Es una lección que conozco bien por el branding: la identidad no acaba en el logotipo. Si Roadmade prometía claridad, cada decisión de la interfaz debía demostrarla.

Probar un proyecto completo cambió más que otra pantalla

Una de las pruebas más útiles llegó al recorrer un proyecto de principio a fin.

En un formulario apareció un error y se borró lo que ya se había escrito. Técnicamente, la validación había detectado que faltaba algo. Desde la experiencia de uso, el resultado era absurdo: la aplicación avisaba de un problema creando otro mayor.

La corrección exigía conservar el contenido, señalar el campo que requería atención y avisar antes de que la persona perdiera su trabajo.

En otra pantalla, las tareas excluidas no entraban en el cálculo, pero todavía parecían disponibles para marcarlas como completadas. El sistema hacía una cosa y la interfaz sugería otra.

Estos fallos también son diseño. Una pantalla puede verse bien y seguir siendo confusa cuando alguien se equivoca o cambia de opinión.

Del producto a la onepage: continuar con Codex

Más adelante continué el trabajo con Codex y construí la onepage actual de Roadmade.

Parecía una tarea distinta, pero explicar la aplicación me obligó a revisarla otra vez. Había que dejar claro que incluye procesos de UX/UI e identidad visual, que las tareas se pueden adaptar, que las horas son una estimación interna y que la IA nunca modifica el proyecto por su cuenta.

Escribir esa explicación fue otra forma de diseñar. Si necesitaba demasiados matices para justificar una función, quizá la función o su interfaz todavía no estaban suficientemente claras.

La onepage no fue solo un envoltorio. Funcionó como una prueba de comprensión del propio producto.

Onepage de Roadmade mostrando la fase de entrega, QA y cierre del roadmap UX/UI.

Cambió la herramienta, no la responsabilidad

Claude Code me ayudó a construir la primera etapa. Codex me permitió continuar, revisar y llevar el producto y su presentación a otro punto.

No quiero convertir esto en una comparación de asistentes ni en una historia de velocidad. Ya he contado que usar IA puede añadir más capas al trabajo, no necesariamente quitarlas.

En Roadmade esas capas fueron muy concretas: definir el problema, estructurar el método, probar recorridos, corregir contradicciones, cuidar la accesibilidad y explicar el resultado.

Las herramientas podían proponer código, textos o soluciones. Yo tenía que decidir si respondían a la necesidad original.

Lo que me llevo como diseñadora

Construir Roadmade me ha confirmado que poder producir una primera versión no equivale a tener un producto resuelto. El trabajo importante aparece en las decisiones que conectan una necesidad con una experiencia coherente.

Cuando una interfaz era confusa, no bastaba con explicar mejor mi intención. Había que cambiarla. Cuando una estimación podía confundirse con un precio para el cliente, había que separar ambos conceptos. Y cuando la IA proponía cambios, había que hacer visible que la decisión seguía siendo humana.

No he salido de este proceso pensando que ahora todo es más fácil. He salido con una herramienta real, más criterio sobre cómo construirla y una lista más precisa de lo que todavía quiero mejorar.

En resumen

→ Roadmade nació de una necesidad de aprendizaje y de trabajo, no de un prompt aislado.

→ Claude Code me ayudó a convertir esa necesidad en una primera aplicación durante el curso.

→ Las pruebas reales descubrieron problemas que una pantalla estática no mostraba.

→ El nombre, la identidad, la interfaz y los textos formaron parte del mismo producto.

→ Con Codex continué el trabajo y construí una onepage que también sirvió para revisar qué prometía Roadmade.

→ La IA participó en la construcción; las decisiones y la responsabilidad siguieron siendo mías.

Puedes conocer el resultado actual en Roadmade y leer primero el artículo de presentación de la herramienta. Seguiré contando el proceso sin convertirlo en una historia limpia, porque lo más útil no fue acertar a la primera. Fue saber qué mirar cuando algo no funcionaba.

uso de inteligencia artificial en diseño y aumento del tiempo de trabajo

Uso IA cada día y tardo más en mi trabajo

Uso IA cada día y tardo más en mi trabajo. Sobre diseño, criterio y el miedo que casi nadie dice en voz alta.

Llevo meses usando IA en mi trabajo. Claude, ChatGPT, Codex, Google AI Studio, Antigravity, herramientas de código, generadores de texto. Las pruebo, las integro, me peleo con ellas.

Y tardo más que antes.

No es lo que se supone que tendría que decir. Pero es lo que me ocurre. Y cuando lo comento con otros diseñadores, casi siempre pasa lo mismo: asienten. En voz baja, como si fuera una confesión.

uso de inteligencia artificial en diseño y aumento del tiempo de trabajo

¿Nuestro trabajo peligra o se transforma?

Hay dos conversaciones sobre IA y diseño.

Una es la oficial: las herramientas evolucionan, los profesionales se adaptan, siempre ha sido así.

La otra es la que se tiene en privado: ¿y si esta vez es diferente?

No creo que el diseño desaparezca. Pero sí creo que se está transformando de una forma que todavía no sabemos leer bien. Y la diferencia entre “peligra” y “se transforma” importa, porque cambia cómo respondes.

Si crees que peligra, te da miedo y te paralizas.
Si crees que se transforma, te preguntas hacia dónde. Y eso ya es otra conversación.

Lo que sí veo con claridad es esto: el trabajo de producción pura, generar opciones, hacer variaciones, montar maquetas básicas, se está volviendo cada vez más fácil de conseguir y, por tanto, menos valioso. Y el cliente que solo busca eso lo va a encontrar enseguida.
La pregunta es qué hacemos con eso.

¿Rapidez y cantidad antes que calidad?

Probablemente una parte del mercado sí.

Siempre ha habido clientes que prefieren rápido y barato. La IA les da una opción nueva. No nos la quita a nosotros: simplemente nos saca de esa conversación. Y quizá eso no sea tan malo.

Lo que me preocupa más es otra cosa: que la velocidad se convierta en el estándar. Que el cliente que antes valoraba el proceso, el criterio y la iteración ahora espere lo mismo en dos horas. Que la rapidez deje de ser una opción y pase a convertirse en la norma.

Eso sí cambia las cosas. Y todavía no tengo claro cómo va a resolverse.

La IA no me ha quitado trabajo. Me ha añadido capas.

Antes hacía un diseño y era mío. Lo pensaba, lo resolvía y lo entregaba.

Ahora lo genero, lo corrijo, lo regenero, lo exporto, lo retoco, lo ajusto al sistema y lo vuelvo a corregir. Y, además, tengo que saber dirigirlo bien desde el principio, porque si no, lo que sale no tiene nada que ver con lo que necesito.

Lo mismo me pasa con las animaciones. Con el código. Con los textos.

La IA no me ha quitado trabajo. Me ha añadido capas. Y esas capas requieren algo que no se genera con un prompt: saber qué está mal y por qué.

La IA genera. El criterio decide.

Saber si una composición no funciona aunque sea bonita.
Saber si un flujo confunde aunque el cliente lo encuentre perfecto.
Saber cuándo parar de añadir y empezar a quitar.
Saber si lo que se ha generado encaja con la marca, con el usuario y con el contexto.

Eso es pensamiento crítico. Y no sale de la nada. Se construye con años de trabajo real, de proyectos que fallan, de decisiones que luego tienes que revisar, defender o rehacer.

Una persona sin formación o experiencia puede usar estas herramientas.
Lo que no puede hacer igual es dirigirlas.

No sabe qué corregir cuando algo no funciona.
No sabe qué está sobrando.
No sabe prever lo que el usuario va a entender o sentir.

Los profesionales sí. Y ahí, de momento, sigue estando la diferencia.

La accesibilidad: el punto ciego que casi nadie menciona

Hay algo que me llama especialmente la atención cuando reviso lo que generan estas herramientas: casi nunca tienen en cuenta la accesibilidad.

Generan interfaces con contrastes insuficientes.
Tipografías difíciles de leer.
Estructuras que no funcionan con lectores de pantalla.
Flujos que asumen que el usuario ve, entiende y navega exactamente igual que la mayoría.

La accesibilidad no es un detalle estético. Es una decisión de diseño que afecta a personas reales. Y es, precisamente, una de las cosas que requiere criterio, conocimiento y responsabilidad, no solo velocidad.

Cuando un diseñador trabaja con accesibilidad en mente, está tomando decisiones que la IA no toma sola. Está eligiendo quién puede usar lo que diseña. Y eso tiene un valor que todavía no hemos sabido comunicar bien.

¿Pasa solo en diseño?

No.

Los periodistas llevan años preguntándose si la IA va a escribir mejor que ellos.
Los programadores junior ven cómo Copilot genera código en segundos.
Los traductores, los fotógrafos, los ilustradores, los redactores de contenido… todos están en alguna versión de esta misma conversación.

Lo que cambia según el sector es el ritmo. Y en diseño, el ritmo está siendo bastante rápido.

No somos los únicos asustados. Pero tampoco sirve de consuelo saberlo si no sabemos qué hacer con ello.

Lo que me llevo como diseñadora

No tengo una conclusión optimista de manual. No voy a decir “la IA es una oportunidad increíble si la sabes usar” y dejarlo ahí.

Lo que sí tengo es una posición cada vez más clara:

Mi valor no está en lo que produzco.
Está en lo que sé ver.
En las decisiones que tomo.
En el criterio que aplico cuando algo no funciona.

En saber que diseñar bien no es hacer algo bonito rápido. Es entender al usuario, respetar su atención y construir algo que funcione para personas reales.

El miedo no desaparece. Pero se puede trabajar desde él.

En resumen

→ Usar IA no significa trabajar menos. Significa trabajar de otra manera, con más capas y más criterio.
→ El mercado se va a dividir: los que buscan rapidez y los que buscan pensamiento. Nosotros no somos para los primeros.
→ El pensamiento crítico, saber qué está mal y por qué, es lo que diferencia a un diseñador de una herramienta.
→ La accesibilidad es uno de los puntos ciegos más claros de la IA generativa. Y ahí sigue habiendo un terreno clarísimo para diseñadores con criterio.
→ No pasa solo en diseño. Pero eso no resuelve nada si no sabemos cómo posicionarnos.
→ El valor está en lo que sabes ver, no solo en lo que produces.

Del Pantone al prompt: el diseñador como eterno aprendiz

Cuando estudié en Elisava, trabajábamos con papeles Pantone, tijeras y rotuladores. Recuerdo que en clase nos dijeron que los ordenadores «solo serían una herramienta más».

Cuando salí al mercado laboral, solo trabajábamos con ordenadores.

Llevo más de 25 años en diseño. Y esa escena se ha repetido varias veces.

evolución del diseñador UX del pantone a la inteligencia artificial

Guía visual sobre la evolución del diseñador: de las herramientas tradicionales al UX y la inteligencia artificial.


De Freehand a Figma: el suelo siempre se mueve

Empecé con Freehand, Quark, Photoshop. Herramientas que en su momento eran lo que había que saber. Luego llegó Illustrator, InDesign, el diseño web, WordPress…

Cada vez que el sector cambiaba, tocaba aprender. No había otra opción.

Pero hay algo que no cambiaba: el proceso de pensar antes de diseñar.

Desde muy pronto entendí que antes de abrir cualquier programa había que hacer otras cosas. Estudiar la competencia. Conocer al cliente. Entender al usuario final. Saber qué problema resolvía el producto. Tener reuniones, iterar, validar. Construir una arquitectura de contenidos antes de tocar ni un píxel.

No sabía que eso tenía nombre. Lo hacía porque tenía sentido.


El día que descubrí que lo que hacía se llamaba UX

Hace no tanto, escuchando el podcast Píldoras UX, empecé a escuchar conceptos que no conocía: arquitectura de la información, usabilidad, jerarquía cognitiva, patrones de navegación, diseño centrado en el usuario…

Y pensé: ¿pero si esto es lo que yo hago?

Lo que yo llamaba «el esquema de la web» se llamaba arquitectura de la información. Lo que llamaba «conocer al usuario antes de empezar» se llamaba research. Lo que llamaba «que se entienda» se llamaba reducción de fricción. Lo que llamaba «reuniones continuas con el cliente para validar» se parecía mucho a un proceso de Design Sprint.

Había un vocabulario entero, un marco teórico, para decisiones que tomaba por criterio y por años de trabajo.

Eso fue un alivio. Y también un empujón. Y, seré honesta, un pelín estresante — porque junto a las cosas que ya hacía había cosas que genuinamente no sabía. Usabilidad con método. Accesibilidad real — no solo «que se vea bien en móvil». Sistemas de diseño. Figma a fondo. Patrones de interacción. Dark patterns. Sesgos cognitivos aplicados al diseño.

Me puse a aprender. Curso de UX de Google. Cursos de Figma. Libros como No me hagas pensar de Steve Krug. Más podcasts. Más lecturas.

Sustituí Photoshop por Figma. Un programa que uso a diario y con el que cada vez me siento más cómoda — aunque todavía me queda mucho por explorar y perfeccionar. Y luego seguí — porque sigo aprendiendo, y probablemente no pare.


Y cuando empezaba a sentirme más segura, llegó la IA

Ahora toca aprender otra capa encima: Google AI Studio, Figma Make, flujos con IA, prompts, automatizaciones…

Y lo más difícil no es aprender una herramienta. Es que no puedes centrarte en una sola. El trabajo te lleva de una a otra antes de que hayas terminado de entender la anterior. Todavía estás procesando una cuando ya hay tres más esperando.

A veces siento que no llego a todo. Que la meta se aleja justo cuando creía que me estaba acercando.

Me quejo — pero a la vez me emociona. Me emociona ver lo que puedo crear ahora, lo que puedo hacer con herramientas que hace dos años no existían. Y al mismo tiempo me da miedo. Miedo a no llegar, a que el ritmo sea demasiado, a quedarme atrás sin darme cuenta.

Supongo que las dos cosas pueden ser verdad a la vez.


Pero esta sensación tampoco es nueva

La tuve cuando salí de Elisava y el mercado ya solo trabajaba con ordenadores. La tuve cuando el diseño web se convirtió en parte del trabajo y había que aprender casi desde cero. La tuve cuando llegó Figma y tocó reaprender flujos que creía que ya dominaba. Y ahora la tengo con la IA.

Y aquí sigo. Aprendiendo. Trabajando. Sin haber parado.

Lo que cambia con los años no es que la incertidumbre desaparezca. Es que aprendes a reconocerla. Sabes que es parte del proceso, no una señal de que estás haciendo algo mal.


Lo que me llevo como diseñadora

Que la experiencia no te vacuna contra la incertidumbre. Te enseña a convivir con ella.

Que muchas cosas que hacía «por instinto» tenían un nombre, un marco y una razón detrás. Aprenderlo no me hizo sentir que empezaba de cero — me hizo entender mejor lo que ya hacía.

Y que en diseño, como en casi todo, quedarte quieta siempre ha sido la peor decisión.

La meta se mueve. Lleva moviéndose desde que empecé. Eso no es un problema. Es el oficio.


En resumen

→ En diseño, el suelo se mueve. Lleva moviéndose desde los Pantones y el Freehand. → Muchas decisiones de UX/UI las tomaba ya — solo sin el nombre ni el marco teórico. → Aprender el vocabulario no es empezar de cero: es entender mejor lo que ya hacías. → La IA no es la primera revolución que vivo en este sector. Probablemente tampoco será la última. → La sensación de «no llego» no es señal de que algo falla. Es señal de que estás en un sector vivo. → Me emociona y me da miedo a la vez. Supongo que eso también forma parte del oficio.


Fuentes e inspiración

— Píldoras UX (podcast): pildorasux.com/podcast — Steve Krug, No me hagas pensar — Curso de Diseño UX de Google

Guía rápida para entender marca, UI kits y sistemas de diseño

Guía rápida para entender marca, UI kits y sistemas de diseño (explicado fácil)

Llevo años trabajando con marcas y webs, y últimamente me he metido de lleno en el mundo del UX/UI. Y si hay algo que he visto repetirse (en equipos, en clientes y también en mí misma) es esta confusión:

“¿Necesitamos un sistema de diseño?”
“¿O solo un UI kit?”
“¿Esto no era la identidad visual?”
“¿Y la biblioteca de Figma qué pinta aquí?”

La realidad es que todo está relacionado, porque todo busca coherencia. Pero no es lo mismo. Y cuando mezclas conceptos, suele pasar una de dos: o te quedas corto en tus diseños… o te complicas la vida de más.

Así que he escrito esta guía rápida para ordenar las piezas y entender qué es cada cosa, sin tecnicismos raros.


1. ¿Qué es la identidad de marca?

La identidad de marca es quién es la marca y cómo se expresa. No es solo “lo que se ve”, también es lo que se siente.

Aquí entran elementos intangibles y de comunicación:

  • Propósito, valores y personalidad.
  • Tono de voz (cómo habla y cómo escribe).
  • Experiencia (cómo se comporta en cada punto de contacto).
  • Sensorial: cómo suena (si aplica), qué estilo transmite y qué sensación deja al interactuar con ella.

Dicho fácil: Identidad de marca = lo que eres + cómo te expresas.


2. ¿Y la identidad visual?

La identidad visual es una parte de la identidad de marca: la parte que se ve (la “cara”).

Incluye los cimientos gráficos:

  • Logo y sus versiones.
  • Paleta de color.
  • Tipografías.
  • Estilo gráfico (fotografía, ilustración, iconografía).

Dicho fácil: Identidad visual = cómo se ve la marca.

Matiz importante: una marca puede tener una identidad visual impecable en un manual en PDF… y aun así ofrecer una experiencia digital caótica si la interfaz (UI) se monta sin un sistema.


3. Entonces… ¿qué es un UI kit?

Un UI kit es una caja de piezas preparadas para diseñar pantallas de forma consistente y rápida.

Suele incluir:

  • Estilos de color y tipografía ya aplicados a la interfaz.
  • Componentes base (botones, inputs/campos de formulario, tarjetas, etiquetas).
  • Iconos y recursos gráficos reutilizables.
  • Ejemplos de composición (secciones, layouts, módulos).

Un UI kit te resuelve la vida en proyectos donde necesitas mantener coherencia visual, agilizar el diseño y no tener que reinventar la rueda en cada pantalla.

Dicho fácil: UI kit = piezas para diseñar interfaces con coherencia y velocidad.


4. ¿Y un sistema de diseño?

Aquí subimos de nivel. Un sistema de diseño no es solo un kit de componentes. Es componentes + reglas + documentación para que un producto digital se mantenga coherente a lo largo del tiempo, aunque crezca o cambie el equipo.

Según el Nielsen Norman Group, un sistema de diseño reúne patrones, estilos y guías para escalar el diseño en productos digitales.

¿Qué suele incluir un sistema de diseño (aunque sea uno ligero)?

  • Tokens (variables de diseño): por ejemplo, usar colores por rol (como color-primary, color-error, text-default) en lugar de trabajar con nombres subjetivos.
  • Componentes con estados: cómo se ve un botón en default, al pasar el ratón (hover), cuando está enfocado (focus), mientras lo estás pulsando (pressed/active), si está desactivado (disabled) o si hay error.
  • Patrones: cómo se construyen los formularios, la navegación o las pantallas vacías.
  • Accesibilidad: contraste, tamaños mínimos para móvil, foco visible, etc.
  • Reglas de uso: cuándo usar cada elemento y cómo.
  • Implementación en código: si hay equipo tech, su versión equivalente para desarrollo.

Dicho fácil: Sistema de diseño = coherencia a escala (visual + funcional + de equipo).


5. Y en Figma… ¿qué es una biblioteca?

Aquí es donde suele venir el lío. “Biblioteca” suena a concepto abstracto, pero en Figma es una herramienta muy concreta.

Una biblioteca en Figma es el archivo (o conjunto de archivos) donde guardas y publicas tus estilos, componentes, iconos y variables. La idea es que otras personas (o tú en otros proyectos) puedan usar exactamente esos mismos recursos sin tener que copiar, pegar ni duplicar.

Dicho fácil: Biblioteca (Figma) = el “paquete compartible” de tus elementos de diseño.

Ojo con esta diferencia, porque lo aclara todo:

  • Puedes tener una biblioteca de Figma sin tener un sistema de diseño (solo es un kit ordenado, pero sin reglas de uso).
  • Puedes tener un sistema de diseño sin una biblioteca de Figma (está documentado, pero no lo tienes montado en tu software de diseño).
  • Lo ideal: Sistema (decisiones) + Biblioteca (implementación).

El resumen definitivo (y un ejemplo)

Para que todo encaje, míralo así:

  • Identidad de marca: define el carácter (quién eres).
  • Identidad visual: traduce ese carácter en diseño gráfico.
  • UI kit: baja esa identidad a piezas concretas para pantallas.
  • Sistema de diseño: convierte esas piezas en un producto escalable con reglas.
  • Biblioteca (Figma): es la herramienta para compartirlo y trabajar sin caos.

Ejemplo real (Spotify): su identidad es dinámica y musical. Su identidad visual es ese verde icónico sobre fondos oscuros. Su UI kit son los botones, listas y componentes que se repiten en sus pantallas. Y su sistema de diseño (Encore) es el conjunto de reglas y componentes que mantiene todo consistente (tamaños, estados y comportamiento) para que el producto se sienta igual de “Spotify” en cualquier dispositivo.


¿Cuándo necesitas cada cosa? (Regla rápida)

  • Web corporativa (pocas pantallas, poco cambio): con una buena identidad visual y un UI kit ordenado suele ser suficiente.
  • Producto digital / SaaS (muchas pantallas, iteración constante): necesitas un sistema de diseño (aunque sea ligero). Te ahorrará inconsistencias y retrabajo.
  • Trabajo en equipo (diseño + desarrollo o varios diseñadores): una biblioteca de Figma bien montada deja de ser un “lujo” y pasa a ser imprescindible.

¿Y tú, en qué punto estás? ¿Trabajáis con un UI kit bien apañado o ya habéis dado el salto a un sistema de diseño (aunque sea ligero)?


Fuentes e inspiración

  • Nielsen Norman Group – Design Systems 101
  • Figma Help Center – Guide to libraries in Figma
La importancia de la visualización de datos en ciencia

Haz que la ciencia cobre vida: Visualización de datos con gráficos e infografías

Visualización de datos en ciencia: Guía práctica para científicos que quieren comunicar mejor

La ciencia está llena de historias, de descubrimientos que pueden cambiar el mundo. Pero esos descubrimientos solo tienen impacto si logramos comunicarlos de manera clara y accesible. La visualización de datos no es solo una herramienta; es la clave para transformar información compleja en algo comprensible, emocionante y fácil de compartir.

Como diseñadora gráfica, sé que una buena visualización no solo aclara resultados complejos, sino que potencia su relevancia y facilita la toma de decisiones basadas en evidencia. Este artículo te dará técnicas concretas y herramientas útiles para transformar tus datos científicos en visualizaciones atractivas, claras y efectivas.


¿Por qué importa la visualización en ciencia?

Los datos científicos suelen ser complejos, y una mala presentación puede confundir o restar importancia a tus hallazgos. Una visualización clara te permite:

  • Transmitir resultados con precisión.
  • Destacar tendencias y patrones significativos.
  • Facilitar el entendimiento rápido, incluso en públicos no especializados.
  • Incrementar el impacto de tus publicaciones o presentaciones.
  • Promover decisiones informadas basadas en evidencia.

Cómo elegir la visualización correcta para tus datos

Cada tipo de dato requiere un formato específico para ser eficaz:

  • Gráficos de barras y líneas: Ideales para comparar datos y mostrar cambios a través del tiempo.
  • Diagramas de dispersión: Excelentes para ilustrar correlaciones y distribuciones.
  • Mapas de calor: Muy usados en biología molecular, especialmente en expresión génica o estudios multivariados.
  • Gráficos de redes: Perfectos para representar conexiones complejas, desde redes neuronales hasta interacciones ecológicas o epidemiológicas.
  • Infografías interactivas: Fundamentales para contar historias científicas que capten la atención del público.

Cómo crear visualizaciones que comuniquen efectivamente

Algunas claves prácticas:

  • Claridad ante todo: Minimiza elementos visuales innecesarios; deja que tus datos hablen.
  • Color estratégico: Usa colores intencionadamente para guiar la mirada y resaltar puntos críticos.
  • Anotaciones explicativas: Etiqueta claramente gráficos y figuras. Una visualización debe ser autoexplicativa.
  • Crea narrativas visuales: Organiza los datos para contar una historia científica con principio, desarrollo y conclusión.

Herramientas esenciales para científicos

Usa software adaptado al tipo de visualización que necesitas:

Ejemplos de visualizaciones científicas inspiradoras

  • Expresión génica: Human Protein Atlas. Muestra mapas de calor interactivos que comunican la actividad génica en tejidos humanos.
  • Cambio climático: NASA Climate Change. Usa visualizaciones interactivas que permiten explorar tendencias históricas del clima.
  • Epidemiología: Dashboard COVID-19 (OMS) o Our World in Data. Ambas plataformas ofrecen mapas y gráficos interactivos sobre la propagación de enfermedades, mostrando el valor de visualizar grandes conjuntos de datos en tiempo real.

Conclusión

La visualización de datos en ciencia no es solo cuestión de estética; es fundamental para compartir conocimientos, influir en decisiones y potenciar el impacto de tu investigación. Como científico, adoptar buenas prácticas de diseño gráfico potenciará el alcance de tu mensaje, facilitando que el público entienda, valore y recuerde tu trabajo.

 

Ejemplo de diseño web para proyectos científicos e investigadores"

Diseño web científico:
Claves para crear una web eficaz

Cómo diseñar sitios web que hablen el idioma de la ciencia

Saber cómo diseñar un sitio web científico es clave para transmitir credibilidad y facilitar el acceso a la información en la comunidad científica; debe transmitir credibilidad, facilitar el acceso a la información y estar alineado con los estándares del sector. Esta guía te ayudará a diseñar una web que se comunique eficazmente con investigadores, instituciones y profesionales de la ciencia.


1. Características clave de un sitio web científico

Un sitio web bien estructurado facilita la comunicación en el ámbito científico. Por eso, el diseño de una web científica debe ser claro y profesional.:

  • Diseño limpio y profesional: Evita los excesos gráficos y prioriza la legibilidad, asegurando que todos los elementos visuales mantengan coherencia en estilo para no confundir al usuario.
  • Estructura clara: La navegación debe ser intuitiva y permitir acceso rápido a datos clave.
  • Rigor en el contenido: Usa terminología precisa y referencias a fuentes verificadas, manteniendo un lenguaje claro y accesible para la audiencia objetivo. Es importante encontrar un equilibrio entre el rigor científico y la claridad comunicativa, adaptando el contenido al perfil de los usuarios sin perder credibilidad.
  • Optimización para dispositivos móviles: La investigación se consulta en diversos dispositivos.
  • Accesibilidad: Cumple con estándares WCAG para garantizar inclusividad.

2. Estructura ideal de un sitio web científico

Cada sección del sitio web debe responder a las necesidades de la audiencia objetivo:

1. Inicio: Debe capturar la esencia del proyecto, con un mensaje claro y conciso. Esta página servirá como un índice que permitirá a los usuarios visualizar rápidamente el contenido disponible en el sitio y navegar de manera eficiente. Ejemplo: «Facilitamos la investigación con tecnología de vanguardia y datos confiables.»

2. Sobre nosotros: Explica la trayectoria, objetivos y misión del equipo o institución.

3. Publicaciones y recursos: Debe incluir un apartado de papers, donde se recopilen publicaciones científicas relevantes, y una sección de noticias con avances y novedades en el ámbito de la ciencia. Se puede automatizar la publicación de papers desde PubMed utilizando su API, lo que permite mantener el contenido siempre actualizado sin necesidad de intervención manual. Un ejemplo de implementación exitosa es el sitio web de Procure Oncology, donde hemos desarrollado un sistema automatizado que integra publicaciones científicas en tiempo real, facilitando el acceso a la información más reciente del sector. Ejemplo: «Consulta nuestra colección de papers más recientes y mantente informado con las últimas noticias científicas.»

4. Servicios o productos: Presenta de manera clara las soluciones científicas que ofreces. Ejemplo: «Plataforma de análisis de secuenciación de ADN con IA.»

5. Colaboraciones, casos de éxito e inversores: Muestra alianzas con universidades, laboratorios, organismos e inversores que han apoyado el proyecto. Destacar la participación de inversores puede generar confianza y atraer nuevas oportunidades de financiación. Además, se pueden incluir los logotipos de los inversores en esta sección como una forma de agradecimiento y para reforzar la credibilidad del proyecto. Ejemplo: «Hemos trabajado con el Instituto Pasteur en la detección de biomarcadores y contamos con el respaldo de inversores especializados en tecnología biomédica. A continuación, presentamos a nuestros principales inversores:»

6. Pipeline: Si la web cuenta con un pipeline, inclúyelo en esta sección para proporcionar un acceso claro a los procesos de trabajo y mejorar la transparencia para los usuarios e inversores.

7. Contacto:

Facilita un formulario intuitivo y datos de contacto visibles.


3. Consejos para mejorar la comunicación visual y textual

  • Evita jergas innecesarias: Aunque el público es especializado, la claridad siempre es clave.
  • Usa infografías y visualizaciones: Facilitan la comprensión de datos complejos.
  • Colores neutros y tipografías legibles: Refuerzan la profesionalidad y credibilidad.
  • Incluye testimonios de expertos: Aportan confianza a nuevos usuarios.

4. Herramientas recomendadas para diseñar un sitio web científico

  • WordPress : Para diseño flexible con integraciones científicas.
  • PubMed API: Para enlazar publicaciones científicas en tiempo real.
  • Google Scholar Citations: Mostrar citas de autores vinculados al proyecto.
  • Canva y BioRender: Para diseñar gráficos científicos de alta calidad.

 

Mocha Mousse como Color del Año en diseño gráfico

Mocha Mousse: Por Qué es el Color del Año 2025

¿Quién iba a pensar que un marrón sería el protagonista del año? Pero no cualquier marrón. Pantone ha elegido el PANTONE 17-1230 Mocha Mousse como el color del 2025, y tiene mucho que decirnos.

Es un color cálido, como el café de la mañana o el cacao que te abraza en invierno. No grita, pero tampoco pasa desapercibido. Y quizá ahí está su magia: nos invita a parar y saborear el momento. En un mundo donde todo va rápido, ¿no es esto justo lo que necesitamos?


¿Por qué es relevante el Color del Año de Pantone?

Cada año, el Pantone Color Institute selecciona un color que no solo marca tendencias, sino que refleja el estado de ánimo global. El Color del Año no es solo una moda pasajera; es una señal de hacia dónde nos dirigimos como sociedad. En este caso, Mocha Mousse nos recuerda la importancia de volver a lo esencial, conectar con lo auténtico y buscar un equilibrio entre lo funcional y lo emocional.

¿Por qué es especial?

Porque combina lo mejor de dos mundos. Por un lado, su calidez nos conecta con lo esencial: la tierra, lo sencillo, lo auténtico. Por otro, tiene un punto sofisticado que lo hace ideal para cualquier proyecto que quiera transmitir elegancia sin pretensiones.

Dónde lo verás (y cómo usarlo):

  • En decoración, llenando espacios de confort y serenidad.
  • En diseño gráfico, dándole a tus marcas un aire acogedor y confiable.
  • En moda, como un básico reinventado que no te fallará.

El Mocha Mousse no solo es bonito; es útil. Versátil. Real. Perfecto para recordarnos que, a veces, menos es más. Y tú, ¿dónde lo usarías primero? 😉

Datos del color en Pantone

 

Pantone Color of the Year 2025

 

¿Qué son los premios awwwards?

¿Qué son los premios awwwards?


¿Has oído hablar de los premios awwwards?

Son los premios al diseño, creatividad e innovación en Internet

El concurso está abierto a cualquier web y se valora de 1 a 10 en términos de diseño, creatividad, contenido y usabilidad. A mí, como diseñadora, me encanta pasarme por su página a “curiosidad” y ver «que se cuece en el mercado». Siempre buscando las últimas tendencias y nunca dejando de aprender.

Los premios Awwwards

Te dejo el enlace por si te interesa:
http://www.awwwards.com/

Tendencias web

Tendencias web


Cada vez más clientes y usuarios buscan destacar sobre los demás. Ya todos tenemos web, ahora lo difícil es sobresalir, ser diferente. Y eso nos lleva a un diseño más personalizado. La colaboración entre diseñadores y desarrolladores es básica.

Tendencias web en 2017:

Fotografía

Cuidaremos tanto la fotografía que volveremos a contratar al fotógrafo. Y si nuestro bolsillo no nos lo permite, buscaremos y buscaremos hasta encontrar la mejor foto para nuestro negocio. Se han acabado las fotos de los bancos de imágenes gratuitos repetidas hasta la saciedad.

tendencias 2017_Edisenius_Fotografía (Photoandgraphic_Ana Meneses)

tendencias 2017_Edisenius_Fotografía (Photoandgraphic_Ana Meneses)


Tipografía

En 2016 ya empezamos a cuidar nuestra tipografía. Una tipografía con carácter vestirá nuestra web combinándola siempre con una de lectura clara.
Se llevará en este 2017 grande y en negrita, que rompa con la cuadrícula y capaz de emocionarnos.

¡Viva la tipografía!

www.odegoods.com

Tendencias diseño

Tendencias diseño

Inspiración en tipografía www.typewolf.com 

Las fuentes de Google seguirán siendo las más usadas y ahora Google ha creado NOTO, una fuente compatible con cualquier idioma y carácter


Color

Pasamos de filtros de tonos apagados y filtros de época a colores más vivos, combinaciones audaces, imágenes en duotonos
Última guía de google (muy chulo) relacionada con la forma y el color .
Más sobre el color: aquí 

Podemos ver un ejemplo claro de tendencias en el logotipo de Instagram:

tendencias 2017_Edisenius_Instagram

tendencias 2017_Edisenius_Instagram

 


Desplazamiento de parallax

Igual la palabra no os suena pero desplazamiento de parallax es cuando el fondo se mueve distinto del contenido. De hecho yo lo utilizo bastante en mis webs y veo que Apple lo ha quitado de la suya. Ahora es más simple. Sinceramente no sé qué pasará…


Flat Desing 2.0

Flat 2.0 sigue apostando por un diseño minimalista, pero ahora cuenta con diseños más llamativos, uso de formas geométricas, tipografías sencillas e imágenes simples.


Menú hamburguesa

El menú hamburguesa sigue dando de qué hablar. Hay defensores y detractores, pero lo que tenemos claro es que desde que las webs se ven en dispositivos móviles nos hemos acostumbrado a este menú y ya no se nos hace raro que esté escondido. Es perfecto para un diseño minimalista.
Desde mi opinión personal es muy válido para páginas muy creativas y que la información en estos menús no sea muy imprescindible. Es decir, no puedes hacer un ecommerce sin menú porque el usuario necesita tener todos los pasos a la vista.

Menos opciones de menú

¡Menos es más!
Los menús muy grandes ya son historia.


Sroll infinito

Recarga toda la información en una página, de modo que el usuario sólo tiene que desplazarse hacia abajo para ver el contenido. Para mi es perfecto para un blog


Despedida

Fuentes donde he encontrado información para escribir mi artículo
www.marketingdirecto.com

¡Me encanta descubrir cosas nuevas!

y es lo que me ha pasado al escribir el artículo
Guía de diseño de Google y os la recomiendo 100%

Saludos 🙂
Susana Meneses