Artifacts on Fernando Ruiz

Design Specifications

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Detailed documentation that translates designs into development instructions—the bridge between design and code.

What are Design Specifications?

Design specifications are detailed documents that describe design intent precisely enough that developers can implement it without returning to designers for clarification. Specs cover everything: spacing (the button has 16px padding), colors (the primary blue is #0066FF), interactions (on hover, the button becomes 2% darker), and edge cases (disabled state shows 50% opacity).

Especificaciones de Diseño

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Documentación detallada que traduce diseños en instrucciones de desarrollo—el puente entre diseño y código.

¿Qué son Especificaciones de Diseño?

Las especificaciones de diseño son documentos detallados que describen la intención del diseño lo suficientemente preciso para que los desarrolladores puedan implementarlo sin volver a los diseñadores para aclaración. Las especificaciones cubren todo: espaciado (el botón tiene 16px de padding), colores (el azul primario es #0066FF), interacciones (al pasar el ratón, el botón se vuelve 2% más oscuro), y casos borde (estado deshabilitado muestra 50% opacidad).

Especificaciones de Diseño

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Documentación detallada que traduce diseños en instrucciones de desarrollo—el puente entre diseño y código.

¿Qué son Especificaciones de Diseño?

Mapas de Sitio

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Un diagrama jerárquico que muestra todas las páginas y cómo se relacionan—el plano antes de diseñar una sola página.

¿Qué es un Mapa de Sitio?

Un mapa de sitio es una representación visual de la estructura de un sitio web. Muestra cada página y cómo se conectan. La página de inicio se sienta en la parte superior. Las páginas de productos se ramifican hacia abajo. Las páginas de soporte se ramifican por separado. Cada página tiene un padre claro y hermanos.

Mapas de Sitio

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Un diagrama jerárquico que muestra todas las páginas y cómo se relacionan—el plano antes de diseñar una sola página.

¿Qué es un Mapa de Sitio?

Red Routes

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

The top 5 user journeys your product must support flawlessly—identify these and everything else is secondary.

What are Red Routes?

Red routes are the core user journeys your product must support perfectly. The term comes from London’s Underground—red routes are the main lines that carry the most traffic. Everything else is secondary.

For an e-commerce site, red routes are: browsing products, reading reviews, adding to cart, checking out, and contacting support. Everything else (wishlists, recommendations, social sharing) is nice-to-have.

Red Routes

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Los 5 mejores viajes de usuario que tu producto debe apoyar sin falla—identifica estos y todo lo demás es secundario.

¿Qué son Red Routes?

Las red routes son los viajes de usuario principales que tu producto debe apoyar perfectamente. El término viene del Underground de Londres—las red routes son las líneas principales que llevan el tráfico más pesado. Todo lo demás es secundario.

Para un sitio de e-commerce, las red routes son: navegar productos, leer reseñas, añadir al carrito, pagar y contactar soporte. Todo lo demás (listas de deseos, recomendaciones, compartir social) es nice-to-have.

Red Routes

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Los 5 mejores viajes de usuario que tu producto debe apoyar sin falla—identifica estos y todo lo demás es secundario.

¿Qué son Red Routes?

Site Maps

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A hierarchical diagram showing all pages and how they relate—the blueprint before you design a single page.

What is a Site Map?

A site map is a visual representation of a website’s structure. It shows every page and how they connect. The homepage sits at the top. Product pages branch down. Support pages branch separately. Each page has a clear parent and siblings.

A site map answers: “Where does this page live? What pages are at the same level? What pages are nested inside?” Without a site map, designers design pages in isolation. Pages feel disconnected. Navigation feels random.