Identidad · 2026

Una marca que conecta

Cómo nació la identidad de este sitio: lo que se probó, lo que se tiró y lo que quedó.

Proyecto
Marca personal
Qué hice
Identidad, logo, sitio y movimiento
Tiempo
Cuatro días
En línea
migueldelossantos.me

01

El desafío

Una marca que dijera lo que hago sin sonar a agencia: no vendo software, entro a un negocio, entiendo cómo funciona y construyo lo que le falta.

Tenía que ser sobria, directa y mía. Y cumplir dos reglas que se respetaron hasta el final:

  • Nada que no se pueda sostener. Ni resultados sin medir, ni cifras sin confirmar, ni datos reales de clientes en las capturas.
  • Nada que dependa de terceros. Sin plantillas ni librerías, sin cookies, con la letra servida desde el propio sitio.

02

La primera versión

Se llamó “mano y piedra”: papel crema arrugado, letra clásica, mayúsculas grabadas y una firma cursiva que se escribía sola, trazo a trazo, con una gota de tinta que escurría de la “l” y caía. “Cómo trabajo” era una escena dibujada que avanzaba con el scroll.

La primera portada: la firma Miguel en cursiva sobre papel crema arrugado y la frase Diseño y construyo los sistemas que hacen funcionar un negocio.
La portada, con la firma escrita en la hoja.
La primera versión de Cómo trabajo: la silueta de una persona caminando entre un escritorio y papeles, dibujada sobre el mismo papel.
“Cómo trabajo” como una escena dibujada.

Por qué se descartó. Era linda y muy trabajada, pero hablaba de un calígrafo, no de alguien que ordena sistemas. Se tiró entera.

03

Dos rondas de bocetos. Los monogramas parecían de estudio contable, la M de nodos decía lo mismo dos veces y “mds.” solo era una palabra escrita en una fuente.

Primera ronda de bocetos: la firma cursiva, el nombre completo, un monograma MdS en círculo, una M de nodos, mds. y la firma con el apellido, cada uno sobre claro, como ícono y sobre oscuro.
Primera ronda: seis caminos, sobre claro, como ícono y sobre oscuro.
Segunda ronda: cuatro combinaciones de mds. con nodos: el punto como nodo azul, la M de nodos junto a mds., la m dibujada como nodos y mds. sobre una línea de tres nodos.
Segunda ronda: la palabra y los nodos, combinados.

Lo que quedó: el punto final se volvió un nodo, y una línea lo conecta con la “m”. Dos nodos unidos, como un sistema que cierra.

  1. 1

    La palabra

    “mds” en Cabinet Grotesk 500, con el interletrado cerrado a −0,05 em.

  2. 2

    El nodo

    El punto: un círculo de 0,2 em en azul cobalto.

  3. 3

    La conexión

    Una línea de 0,05 em que une un nodo de tinta bajo la “m” con uno azul bajo el punto. Todo en em: escala con la letra.

Se conecta al entrar

  1. El punto aparece.

  2. Nace el nodo.

  3. La línea corre hacia la “m”.

  4. Conectado.

Pasa al cargar la página y otra vez al pasar el mouse por el logo. Con movimiento reducido, queda quieto y completo.

04

Color

Gris plano, negro y un solo acento. El azul se buscó “que combine y no sea chillón”: un cobalto apagado.

05

Tipografía

Cabinet Grotesk

Una sola familia para todo, del logo a la firma de la carta, en dos pesos. Grotesca, de trazo firme, con carácter en los tamaños grandes.

500 · Sistemas que hacen funcionar un negocio.

400 · Entiendo cómo funciona y construyo lo que le falta.

06

Fotografía

Blanco y negro sobre el mismo gris del sitio, con la ropa de todos los días: camisa blanca, pantalón holgado, botas de gamuza. La cara, siempre la mía.

Miguel de los Santos de perfil, de camisa blanca, sobre fondo gris.
La foto de la portada.
Miguel de los Santos sentado en un banco alto, de camisa blanca, pantalón negro y botas.
La de “¿Por qué conmigo?”.

07

El sitio

La marca aplicada: portada con la foto y el titular, la carta, un caso real, el recorrido y el cierre. Sin plantillas: unos 37 KB de código por página.

La portada del sitio en escritorio: la foto de Miguel de perfil y el titular Sistemas que hacen funcionar un negocio.
La portada en escritorio.
La portada del sitio en un celular: la foto arriba y el titular abajo.
Y en el celular.
La página del caso: Un salón de fiestas que vivía en WhatsApp, con la ficha del proyecto.
El caso de Varieventos.
La sección ¿Por qué conmigo?, con la foto sentado y el recorrido como línea de tiempo.
“¿Por qué conmigo?”, con el recorrido.
El cierre del sitio en negro: Hablemos en letras gigantes y los botones de WhatsApp y mail.
El cierre: Hablemos.

08

Movimiento

“Cómo trabajo” cuenta el método sin palabras de más: las preguntas sueltas de un negocio se ordenan, se vuelven un sistema y terminan contestadas. Va a su propio ritmo, no al del scroll, para que nadie se lo pierda bajando rápido.

  1. Entiendo: preguntas sueltas de un negocio flotando desordenadas, como ¿Cuánto stock queda? o ¿Ya se pagó?
    Entiendo. Las preguntas de todos los días, sueltas.
  2. Ordeno: las preguntas se acomodan en cuatro columnas, Stock, Pedidos, Clientes y Caja.
    Ordeno. Cada una en su lugar.
  3. Construyo: las preguntas aterrizan en un sistema y empiezan a volverse respuestas en azul.
    Construyo. Aterrizan en un sistema.
  4. Lo dejo andando: el sistema completo, en marcha, con todas las respuestas en azul.
    Lo dejo andando. Se contestan solas.

La 404: un análisis que no cierra

Hasta el error cuenta la idea. Nodos sueltos intentan formar el “404”, casi lo logran, las conexiones se parten y vuelve el caos.

  1. Nodos sueltos por toda la pantalla, conectados al azar.
    Caos.
  2. Los nodos forman el 404 casi completo, con algunos azules que no encajan.
    Casi.
  3. El 404 se desarma: las conexiones se parten y los nodos se dispersan.
    Se cae.