bueno, la cosa entera
He ido publicando esto pieza a pieza a medida que lo construía, la montaña, los pájaros, la barra lateral, el cielo nocturno, todo goteado durante la última semana más o menos como devlogs separados y pequeños. Pensé que valía la pena una entrada que simplemente diera un paso atrás y mirara todo el impulso completo, porque desde dentro no se sintió como una lista de funciones. Se sintió como una sola idea que siguió creciendo brazos y piernas hasta que era básicamente un pequeño ecosistema viviendo en la barra de mi cabecera.
Versión corta: el sitio antiguo se veía como un Bootstrap por defecto con mi nombre puesto. Correcto, legible, completamente genérico. Podría haber sido el blog de cualquiera. Quería que se viera como mío, y específicamente como aquí, Lovund, la isla en la que realmente vivo. Así que le di un color y una tipografía y luego pasé mucho más tiempo del planeado dibujando pájaros.
verde, y una tipografía que no es Helvetica
Paleta primero. Fui con verde porque me gusta el verde (sin razonamiento profundo ahí, simplemente cierto), aterricé en dos estados de ánimo, un "día costero" más claro para modo claro y una "noche del mar del norte" más oscura para modo oscuro. Todos los tokens viven en un solo archivo CSS para no andar buscando códigos hexadecimales en doce componentes cuando inevitablemente cambie de opinión sobre un tono:
--color-bg: #ecf3ee;
--color-surface: #e3eee4;
--color-fg: #141c18;
--color-accent-500: #2f6b45;
--color-accent-600: #275a3a;
--color-sea: #256d80;
--color-rock: #7e8f84;El modo oscuro invierte la mayoría de estos alrededor de una base intercambiada, el mar y la roca siguen siendo legibles contra un fondo casi negro en vez de simplemente invertirse a ciegas, que es su propia pequeña batalla a la que llegaré.
La tipografía es Literata, una serif. Quería algo que se leyera un poco más como una página impresa y un poco menos como cualquier página de aterrizaje de SaaS, ya que esto es un blog personal y no un producto. Cosa pequeña pero cambia toda la sensación de la página más de lo que esperaba de entrada.
la idea real: de cerca son píxeles, de lejos es suave
Esta es la parte de la que cuelga todo lo demás. Quería dos registros visuales en la misma escena: las cosas de cerca se renderizan como pixel art nítido, bordes duros, tosco, y las cosas en el fondo lejano se renderizan suaves y atmosféricas, como si de verdad estuvieran lejos y ligeramente desenfocadas. Las franjas de cabecera y pie de página son la capa de píxeles. La montaña que se sienta detrás de todo es la capa suave.
Una vez que tuve esa regla hizo que todas las demás decisiones fueran más fáciles, porque solo tenía que preguntar "esto está cerca o lejos" y saber cómo dibujarlo.
dibujando lovundfjellet, dos veces
La montaña detrás de la escena es Lovundfjellet, la cumbre real de aquí, calcada de una foto que tomé desde el ferri. En el primer intento la dibujé demasiado puntiaguda, más pico alpino que la cosa real, que es más una cresta larga y jorobada. Volví a la foto, medí de verdad los ángulos de la pendiente en vez de dibujar de memoria, y la rehíce. Error obvio en retrospectiva, sé cómo se ve la montaña, la veo la mayoría de los días, pero dibujar de "vibra" en vez de la foto de referencia me dio una forma que estaba mal de una manera que no noté hasta que la puse al lado del horizonte real.
También hice un pequeño logo BMK a juego, iniciales con una montañita trabajada en las letras. No quería un monograma genérico, quería que el mismo hito apareciera dos veces.
la navegación se movió al lateral
Moví la navegación a una barra lateral izquierda en vez de una barra superior, cada sección recibe un pequeño icono en vez de solo texto, el archivo recibe un cofre del tesoro que probablemente sea mi detalle tonto favorito de todo el rediseño. Sin teoría profunda de UX aquí, simplemente me gustan las barras laterales y quería un sitio para iconos diminutos.
luego se me fue un poco de las manos (para bien)
Esta es la parte que se escapó del plan original. Una vez que existían la montaña y la franja de la cabecera seguía mirando el cielo vacío y el agua vacía y pensando "eso necesita algo dentro." Lovund tiene una colonia de frailecillos genuinamente enorme, así que los frailecillos entraron primero. Luego las gaviotas se sintieron obvias una vez que existían los frailecillos. Luego un águila marina solitaria porque de verdad las tenemos aquí. Luego un ostrero, un charrán, un cormorán, peces moviéndose por la capa del mar, y finalmente una diminuta versión en píxeles de mí mismo de pie en la cumbre con los brazos arriba, porque si voy a dibujar esta isla bien puedo ponerme a mí mismo en lo alto de ella.
Tuve que ponerme algunas reglas cuando la lista de invitados se alargó, o la cabecera iba a acabar pareciendo un panel de Where's Waldo:
- nunca más de un puñado de pájaros en pantalla a la vez
- todo se queda en su zona: pájaros en el cielo, peces en el mar, gente en tierra, nadie cambia de carril
Mantiene la sensación de vida en vez de desorden, que era el riesgo real una vez que empecé a añadir fauna sin ningún plan.
la escena recuerda dónde se quedó
Quería que volver al sitio en pocos minutos se sintiera continuo en vez de volver a sortear una disposición de pájaros totalmente nueva en cada carga de página. Así que la escena actual, posiciones, tiempos, todo, se guarda con una marca de tiempo, y una visita fresca dentro de cinco minutos la avanza según cuánto tiempo estuviste fuera en vez de descartarla.
El primer corte simplemente guardaba la fase en la que estaba cada pájaro y la ponía de vuelta exactamente ahí en la siguiente carga. Técnicamente "recordaba" la escena, de la forma más inútil posible:
// first attempt: just restore, no idea how long the tab was gone
function restoreScene(saved: ScenePhases): ScenePhases {
return saved;
}Dejé la pestaña en segundo plano durante dos minutos y volví a pájaros congelados exactamente en el punto donde estaban cuando dejé de mirar, porque nada tenía en cuenta el tiempo que de verdad había pasado. Lo arreglé avanzando cada fase guardada según el tiempo real transcurrido, envuelto correctamente alrededor del propio ciclo de cada pájaro:
export function advancePhases(
phases: ScenePhases,
cycles: Record<string, number>,
elapsedMs: number
): ScenePhases {
const elapsedS = Math.max(0, elapsedMs) / 1000;
const advanced: ScenePhases = {};
for (const [key, value] of Object.entries(phases)) {
const cycle = cycles[key];
if (!cycle || cycle <= 0 || !Number.isFinite(value)) {
advanced[key] = value;
continue;
}
advanced[key] = (((value + elapsedS) % cycle) + cycle) % cycle;
}
return advanced;
}Pasados cinco minutos simplemente sortea una nueva. Regla simple, me llevó varios intentos dar con ella, todo lo demás que probé se sentía o demasiado pegajoso o demasiado aleatorio.
cielo nocturno, y la pelea con el modo claro
El modo oscuro resultó ser la mitad fácil. Cambiar la montaña por una versión nocturna de bordes suaves, colocar la Osa Mayor y Casiopea en sus posiciones más o menos reales alrededor de la Estrella Polar, dejarlas rotar lentamente, y sin más se lee como una noche sobre el agua. Apenas tuve que pelear con eso.
El modo claro fue lo contrario. Conseguir que la montaña de fondo apareciera de verdad contra un cielo pálido sin convertirse en ruido visual detrás del texto me llevó varias pasadas por los colores del lavado y la sombra, demasiado fuerte y compite con la experiencia de lectura, demasiado débil y no se nota que hay una montaña ahí en absoluto. Terminé con algo con un lavado suave de color mezclado sobre el fondo base que está ahí si lo buscas pero no estorba la lectura de una entrada sobre, digamos, una media maratón.
dónde está la cosa ahora
Eso es el rediseño, más o menos todo en un solo sitio. No está terminado del todo, no creo que un sitio personal esté nunca del todo terminado, y sigo tocando el espaciado y los tiempos de los pájaros y lo que sea que me moleste cuando lo miro demasiado tiempo. Pero ahora se siente mío en vez de una plantilla con mi nombre pegado encima, y ese era todo el punto. Suficientemente bueno por esta noche.