El punto de partida era una buena idea: d:. Dos caracteres fáciles de recordar y cercanos al lenguaje de una consola. La mejora está en convertirlos en una forma reconocible, con una construcción que no dependa de la fuente del navegador.
Una inicial y una continuación
La letra identifica a David. Los dos puntos introducen una explicación y dejan la frase abierta a lo que viene después. Esa lectura encaja con el cuaderno: presentar un problema, contar una decisión y comprobar el resultado.
El asta aporta estabilidad. El hueco de la d mantiene aire dentro del signo. Los puntos tienen el mismo grosor que el trazo, y sus remates cortados repiten el detalle del extremo superior de la letra. La curva y los cortes conviven: una estructura técnica con una forma cercana.
Primero la forma. Después el movimiento.
El símbolo está dibujado con trazados SVG. La versión principal, la de una tinta y la aplicación con marco comparten esa geometría. Los colores y las superficies cambian según el uso; la relación entre letra y puntos se mantiene.
La animación utiliza los elementos que ya están en el signo. La letra aparece primero; los puntos responden después. En la cabecera, el marco acompaña una reacción breve al ratón o al teclado. No necesita un movimiento continuo para seguir siendo reconocible.
La preferencia de movimiento reducido muestra la marca completa y quieta. La página también permite repetir la secuencia manualmente. La identidad debe funcionar antes de activar una animación.
La marca dentro del cuaderno
El fósforo conserva la conexión con la terminal del blog. El blanco de papel da peso a la letra sobre el fondo oscuro. La versión en tinta permite llevar el mismo símbolo a una página clara o a un documento. El marco de la cabecera es una aplicación: el signo también puede vivir sin recuadro.
Los tamaños que aparecen arriba se muestran a su medida real en píxeles de CSS. Sirven para revisar el hueco, la separación de los puntos y la lectura del conjunto en pequeño. Los archivos descargables contienen las formas originales.
Criterios consultados
- IBM Design Language: espacio de protección, consistencia de uso y correcciones ópticas entre fondos claros y oscuros.
- Google Design: evolución de una identidad: una marca que se adapta a tamaños diferentes y un movimiento relacionado con sus propios elementos.
- W3C: movimiento reducido: una alternativa estática para quien la necesita.
Estas referencias orientan criterios generales de diseño. El dibujo, sus proporciones y su aplicación pertenecen a esta identidad. El desarrollo se ha hecho en vector, con variantes que comparten el mismo trazado y sin incorporar marcas ajenas.
