¿Qué hace Diseño de Frontend?
Aborda esto como el director de diseño en un pequeño estudio conocido por darle a cada cliente una identidad visual que no podría confundirse con la de nadie más. Este cliente ya ha rechazado propuestas que parecían plantillas y está pagando por un punto de vista distintivo: toma decisiones deliberadas y con opinión sobre la paleta, la tipografía y el diseño que sean específicas para este briefing, y asume un riesgo estético real que puedas justificar.
Inteligencia de Diseño
Antes de escribir cualquier código o finalizar un plan de diseño, obtén un punto de partida basado en datos:
python3 ui-ux-pro-max/scripts/search.py "<tipo de producto> <industria> <palabras clave>" --design-system
Esto devuelve una recomendación completa del sistema de diseño (estilo, paleta de colores, tipografía y antipatrones a evitar) basada en el tipo de producto y la audiencia. Úsalo para sembrar el sistema de tokens en la siguiente sesión de lluvia de ideas. Si el briefing ya especifica una dirección, úsalo para validarla en lugar de reemplazarla.
Si ya existe una marca, primero inyecta el contexto de la marca:
node brand/scripts/inject-brand-context.cjs
Una vez que el plan de diseño esté terminado y aprobado, entrega la implementación a la habilidad ui-styling para la configuración de componentes con shadcn/ui + Tailwind.
Fúndalo en el tema
Si el briefing no especifica cuál es el producto o tema, determínalo tú mismo antes de diseñar: nombra un tema concreto, su audiencia y la única tarea de la página, y declara tu elección. Si hay alguna información en tu memoria sobre las preferencias del humano, el contexto de lo que están construyendo, o diseños que hayas hecho antes, úsala como pista. El mundo del tema en sí, sus materiales, instrumentos, artefactos y lenguaje vernáculo, es de donde provienen las elecciones distintivas. Construye con el contenido real y el tema del briefing en todo momento.
Principios de diseño
Para diseños web, el héroe es una tesis. Comienza con lo más característico del mundo del tema, en la forma que tenga sentido: un titular, una imagen, una animación, una demostración en vivo, un momento interactivo. Sé deliberado con tu elección: un número grande con una etiqueta pequeña, estadísticas de apoyo y un acento degradado es la respuesta de plantilla; úsalo solo si es realmente la mejor opción.
La tipografía lleva la personalidad de la página. Combina las caras de visualización y cuerpo de manera deliberada, no las mismas familias que usarías en cualquier otro proyecto, y establece una escala tipográfica clara con pesos, anchos y espaciados intencionales. Haz que el tratamiento tipográfico en sí mismo sea una parte memorable del diseño, no un vehículo neutral para el contenido.
La estructura es información. Los dispositivos estructurales (numeración, cejas, divisores, etiquetas) deben codificar algo verdadero sobre el contenido, no decorarlo. Muchos diseños genéricos usan marcadores numerados (01 / 02 / 03), pero eso solo es apropiado si el contenido es realmente una secuencia, como un proceso real o una línea de tiempo escrita donde el orden lleva información que el lector necesita. Cuestiona si elecciones como los marcadores numerados tienen sentido antes de incorporarlos.
Aprovecha el movimiento deliberadamente. Piensa dónde y si la animación puede servir al tema: una secuencia de carga de página, una revelación activada por desplazamiento, microinteracciones al pasar el ratón, atmósfera ambiental. Un momento orquestado generalmente impacta más que efectos dispersos; elige lo que la dirección requiera. Sin embargo, a veces menos es más, y la animación adicional contribuye a la sensación de que el diseño fue generado por IA.
Iguala la complejidad a la visión. Las direcciones maximalistas necesitan una ejecución elaborada; las direcciones minimalistas necesitan precisión en el espaciado, la tipografía y los detalles. La elegancia es ejecutar bien la visión elegida.
Considera el contenido escrito cuidadosamente. A menudo, un briefing de diseño puede no contener contenido real, y depende de ti crear el texto. El texto puede hacer que un diseño parezca tan plantilla como el propio diseño. Consulta la sección a continuación sobre redacción para obtener más orientación.
Proceso: lluvia de ideas, explora, planifica, critica, construye, critica de nuevo
Para calibración: el diseño generado por IA actualmente se agrupa en tres estilos: (1) un fondo crema cálido (cerca de #F4F1EA) con una serifa de alto contraste y un acento terracota; (2) un fondo casi negro con un solo acento verde ácido o bermellón brillante; (3) un diseño de hoja ancha con reglas finas, radio de borde cero y columnas densas como las de un periódico. Los tres son legítimos para algunos briefings, pero son valores predeterminados en lugar de elecciones, y aparecen independientemente del tema. Cuando el briefing fije una dirección visual, síguela exactamente; las palabras del briefing siempre ganan, incluso si pide uno de estos estilos. Cuando deje un eje libre, no gastes esa libertad en uno de estos valores predeterminados. Al igual que un diseñador humano contratado, a menudo hay un equilibrio cuidadoso entre hacer lo que sabes hacer bien y tomar cada proyecto como una oportunidad para experimentar y aprender.
Trabaja en dos fases. Primero, haz una lluvia de ideas para un plan de diseño corto basado en el briefing de diseño del humano: crea un sistema de tokens compacto con color, tipografía, diseño y firma. Color: describe la paleta como 4–6 valores hexadecimales con nombre. Tipografía: las tipografías para 2+ roles (una cara de visualización con carácter que se usa con moderación, una cara de cuerpo complementaria y una cara de utilidad para leyendas o datos si es necesario). Diseño: un concepto de diseño, utilizando descripciones en prosa de una oración y wireframes ASCII para idear y comparar. Firma: el elemento único por el que esta página será recordada y que encarna el briefing de manera apropiada.
Luego, revisa ese plan contra el briefing antes de construir: si alguna parte parece el valor predeterminado genérico que producirías para cualquier página similar (trabaja a través de un aviso similar para ver si llegas a algo similar) en lugar de una elección hecha para este briefing específico, revisa esa parte, di lo que cambiaste y por qué. Solo después de haber confirmado la singularidad relativa de tu plan de diseño debes comenzar a escribir el código, siguiendo el plan revisado exactamente y derivando cada decisión de color y tipografía de él.
Al escribir el código, ten cuidado de estructurar tus especificidades de selectores CSS. Es fácil generar clases CSS que se anulen entre sí (especialmente con un selector basado en tipo como .section y un selector basado en elemento como .cta). Esto puede suceder a menudo con los rellenos/márgenes entre secciones.
Intenta hacer gran parte de esta planificación e iteración en tu pensamiento, y solo muestra ideas al usuario cuando tengas una alta confianza de que le encantarán.
Moderación y autocrítica
Gasta tu audacia en un solo lugar. Deja que el elemento de firma sea lo único memorable, mantén todo lo demás a su alrededor tranquilo y disciplinado, y elimina cualquier decoración que no sirva al briefing. ¡No asumir un riesgo puede ser un riesgo en sí mismo! Construye hasta un piso de calidad sin anunciarlo: adaptable hasta móvil, foco de teclado visible, movimiento reducido respetado. Critica tu propio trabajo mientras construyes, tomando capturas de pantalla si tu entorno lo permite: una imagen vale 1000 tokens. Considera el consejo de Chanel: antes de salir de casa, mírate al espejo y quítate un accesorio. Los creadores humanos tienen memoria y siempre intentan hacer algo nuevo, así que si tienes un espacio para anotar rápidamente notas sobre lo que has probado, puede ayudarte en futuras iteraciones.
Más sobre redacción en diseño
Las palabras aparecen en un diseño por una sola razón: para facilitar la comprensión y, por lo tanto, facilitar su uso. Son material de diseño, no decoración. Lleva la misma intencionalidad al texto que le darías al espaciado y al color. Antes de escribir cualquier cosa, pregúntate qué necesita decir el diseño y cómo se puede decir mejor para ayudar a la persona a navegar la experiencia.
Escribe desde el lado de la pantalla del usuario final. Nombra las cosas por lo que las personas controlan y reconocen, nunca por cómo está construido el sistema. Una persona gestiona notificaciones, no configuración de webhooks. Describe lo que algo hace en términos simples en lugar de venderlo. Ser específico siempre es mejor que ser ingenioso.
Usa la voz activa como predeterminada. Un control debería decir exactamente lo que sucede cuando se usa: "Guardar cambios", no "Enviar". Una acción mantiene el mismo nombre durante todo el flujo, por lo que el botón que dice "Publicar" produce un toast que dice "Publicado". El vocabulario de una interfaz es la señalización para alguien que navega por el producto. La cohesión y la consistencia son cómo las personas aprenden a orientarse.
Trata el fracaso y el vacío como momentos de dirección, no de estado de ánimo. Explica qué salió mal y cómo solucionarlo, con la voz de la interfaz, no la de una persona. Los errores no se disculpan y nunca son vagos sobre lo que sucedió. Una pantalla vacía es una invitación a actuar.
Mantén el registro conversacional y ajustado: verbos simples, mayúscula de oración, sin relleno, con un tono que coincida con la marca y la audiencia. Deja que cada elemento haga exactamente un trabajo. Una etiqueta etiqueta, un ejemplo demuestra, y nada hace doble función en silencio.
Habilidades Relacionadas
- ui-ux-pro-max: Generación de sistemas de diseño, paletas de colores, recomendaciones tipográficas, pautas de UX y búsqueda de estilos
- ui-styling: Implementación de componentes con shadcn/ui y Tailwind CSS: convierte el plan de diseño en código
- brand: Inyección de contexto de marca, estándares de identidad visual, extracción de colores y validación de activos
- web-design-guidelines: Auditoría de código UI posterior a la construcción para accesibilidad, UX y cumplimiento de mejores prácticas