nodiro logo nodiro

La arquitectura
invisible detrás
de cada pixel

Diseño sistemas, no páginas. Priorizo la estructura espacial sobre el ornamento para crear interfaces que se sienten, no se explican.

Mobile-First WCAG AA System Design Bogotá

Metodología: Evaluando límites y robustez

No diseño "bonito"; diseño funcional bajo constraints reales. Antes de tocar Figma, entiendo el sistema de información. La robustez de una interfaz se mide por cuánto se tarda un usuario nuevo en comprender su estructura, no por cuántos efectos visuales contiene. Mi método evalúa tres pilares:

1. Jerarquía

¿El ojo sigue un camino lógico sin el scroll?

2. Latencia

¿Carga el contenido crítico en < 2 segundos en 3G?

3. Accesibilidad

¿Navega sin mouse usando solo teclado?

"La mejor interfaz es aquella que no necesita ser explicada, solo sentida. El espacio negativo es el silencio que permite escuchar el contenido."
Nota al margen "El 'Mobile-First' no es una técnica de CSS media queries. Es una filosofía de prioridad de contenido. Si no cabe en la pantalla de un teléfono, no es esencial."
Boceto analógico de estructura espacial
Antes de CSS, hay geometría. La estructura espacial se siente antes de diseñarse.
Referencias de brutalismo digital
Referencias: La honestidad del HTML crudo vs. la sobrecarga visual moderna.
FIGMA
PAPER & INK
TAILWIND
HTML5
Proceso Artesanal

El Trazo y el Código

Mi flujo de trabajo es una mezcla de disciplina analógica y precisión digital. Empiezo con la investigación de la arquitectura de información; nada de colores todavía. Es la etapa de escuchar al contenido y mapear su jerarquía.

La tipografía es el sistema de navegación. Uso Times New Roman y Helvetica como bases para medir la legibilidad y la escala antes de aplicar cualquier estilo visual. Esto asegura que el diseño funcione en su forma más pura.

"¿Esta interfaz funciona si el usuario tiene guantes?" — Un chequeo mental para asegurar tap targets generosos y contraste extremo.

Checklist de Desarrollo

  • Grillas Modulares: Consistencia visual mediante sistemas matemáticos.
  • Accesibilidad: Contrastes AA como mínimo no negociable.
  • Progressive Enhancement: El contenido es el núcleo, la interfaz es una mejora.
  • Velocidad de Iteración: Figma para fluidez, código para validación.
Diagrama de flujo

Mapeo de arquitectura antes del código.

Trade-offs Reales

La decisión correcta depende del contexto. Aquí está lo que sacrifiqué para ganar velocidad y foco en proyectos recientes.

CUSTOM CODE VS TEMPLATES COSTO
Beneficio: 100% control de rendimiento y estética.
Costo: Tiempo de desarrollo extendido.
Mitigación: Reutilización de componentes (Tailwind) y diseño de sistemas atómicos.
DISEÑO VISUAL VS JERARQUÍA FOCO
Beneficio: Interfaces decorativas que impresionan.
Costo: Ruido visual que diluye la conversión.
Mitigación: Decoración solo en espacios de descanso (héroes, pies de página).
INMEDIATO VS DURADERO TIEMPO
Beneficio: Lanzamiento rápido (MVP).
Costo: Deuda técnica si no se planifica.
Mitigación: Estructura semántica de HTML desde el día uno.

Lente de Decisión

¿Para quién es este perfil?

  • Startups que necesitan validación técnica rápida.
  • Marcas rebranding con presupuesto ajustado.
  • Proyectos que priorizan accesibilidad sobre tendencias.

Preguntas para el inversionista

¿La prioridad es la velocidad de carga?

Si no, es posible añadir más efectos visuales, pero afectará el rendimiento en dispositivos antiguos.

¿Hay restricciones de CMS?

WordPress es flexible, pero limita la creatividad en layout si el tema no está construido a medida.

¿Quién edita el contenido post-lanzamiento?

Un sistema modular simple evita romper el diseño por parte del cliente.

¿Se requiere integración compleja?

APIs externas aumentan el tiempo de desarrollo y los puntos de fallo.

CASO DE ESTUDIO E-commerce Sostenible • 2024

La decisión contraria: Eliminar para convertir

El problema era crítico: una tasa de rebote del 70% en el checkout. El cliente quería "más confianza", traducido en más logos, más botones, más texto. El análisis de los heatmaps mostraba que los usuarios estaban perdiéndose en el menú de navegación superior durante el pago.

Antes

Menú completo visible: Inicio, Categorías, Blog, Contacto. El usuario saltaba entre páginas sin completar la compra.

Después

Menú oculto completamente. Solo Checkout, Resumen y Pago. El flujo se redujo a una sola columna lineal.

El Trade-off: Sacrificamos el "branding" constante y la navegación habitual a cambio de una experiencia forzadamente focalizada. El miedo del cliente era que se sintiera "aislado". La realidad fue que la reducción de la tasa de abandono fue del 15% en las primeras dos semanas.

LECCIÓN APRENDIDA

"La confianza en el comercio electrónico no proviene de la decoración, sino de la claridad del proceso. Cuantos menos clicks, mayor la conversión."

Comparativa Checkout
Foco total vs. Distracción

Resultado

rebote conversión salida

Simpleza paga dividendos.

Pitfall Evitado

No se usaron pop-ups de "descuento por salida". Eso genera desconfianza y rompe la experiencia móvil con modales intrusivos.

Visión 2026

Diseñar para el
silencio digital

La economía de la atención ha militarizado el diseño. Mi compromiso es invertir esa tendencia: interfaces que respetan el tiempo del usuario, que desaparecen cuando no se necesitan y que cargan antes de que la paciencia se agote.

Tecnología ética

"Tecnología que respeta el tiempo del usuario,
es tecnología ética."

nodiro

Carrera 13 #93-40, Bogotá, Colombia

Lunes a Viernes: 9:00 - 18:00