hele redesignet, i ett innlegg

så, hele greia

Jeg har postet disse ett stykke om gangen etter hvert som jeg bygde dem, fjellet, fuglene, sidefeltet, nattehimmelen, alt sammen dryppet ut over den siste uken eller så som separate små devlogger. Tenkte det er verdt ett innlegg som bare tar et steg tilbake og ser på hele pushet, fordi det innenfra ikke føltes som en liste med funksjoner. Det føltes som én idé som fortsatte å vokse armer og bein til det stort sett var et lite økosystem som bodde i header-baren min.

Kort versjon: den gamle siden så ut som en Bootstrap-standard med navnet mitt på. Grei, lesbar, helt generisk. Kunne vært hvem som helst sin blogg. Jeg ville at den skulle se ut som min, og spesifikt som her, Lovund, øya jeg faktisk bor på. Så jeg ga den en farge og en font og brukte deretter mye lenger tid enn planlagt på å tegne fugler.

grønt, og en font som ikke er Helvetica

Palett først. Gikk med grønt fordi jeg liker grønt (ingen dyp begrunnelse der, bare sant), landet på to stemninger, en lysere "kyst-dag" for lys modus og en mørkere "nordsjø-natt" for mørk modus. Alle tokenene bor i én CSS-fil så jeg ikke jakter hex-koder gjennom tolv komponenter når jeg uunngåelig ombestemmer meg om en nyanse:

--color-bg: #ecf3ee;
--color-surface: #e3eee4;
--color-fg: #141c18;
--color-accent-500: #2f6b45;
--color-accent-600: #275a3a;
--color-sea: #256d80;
--color-rock: #7e8f84;

Mørk modus snur de fleste av disse rundt en byttet base, sjø og stein forblir lesbare mot en nesten svart bakgrunn i stedet for bare å inverteres blindt, som er sin egen lille kamp jeg kommer til.

Fonten er Literata, en antikva. Ville ha noe som leser litt mer som en trykt side og litt mindre som enhver SaaS-landingsside noensinne, siden dette er en personlig blogg og ikke et produkt. Liten ting, men den endrer hele følelsen av siden mer enn jeg forventet på forhånd.

den faktiske ideen: nært hold er piksler, langt unna er glatt

Dette er biten alt annet henger på. Jeg ville ha to visuelle registre i samme scene: ting nært hold rendres som skarp pixel art, harde kanter, klosset, og ting i den fjerne bakgrunnen rendres glatt og atmosfærisk, som om de faktisk er langt unna og litt ute av fokus. Header- og footer-stripene er pikselaget. Fjellet som sitter bak alt er det glatte laget.

Når jeg først hadde den regelen gjorde den alle andre avgjørelser lettere, fordi jeg bare kunne spørre "er dette nært eller fjernt" og vite hvordan jeg skulle tegne det.

å tegne lovundfjellet, to ganger

Fjellet bak scenen er Lovundfjellet, den faktiske toppen her, sporet fra et bilde jeg tok fra fergen. Første forsøk tegnet jeg det for spisst, mer alpint spir enn det ekte, som er mer en lang, humpete rygg. Gikk tilbake til bildet, målte faktisk skråningsvinklene i stedet for å tegne fra hukommelsen, og gjorde det på nytt. Åpenbar feil i ettertid, jeg vet hvordan fjellet ser ut, jeg ser det de fleste dager, men å tegne fra "vibber" i stedet for referansebildet ga meg en form som var feil på en måte jeg ikke la merke til før jeg satte den ved siden av den ekte horisonten.

Laget en liten BMK-logo til å gå med den også, initialer med et lite fjell jobbet inn i bokstavene. Ville ikke ha et generisk monogram, ville ha det samme landemerket vist to ganger.

navigasjonen flyttet til siden

Flyttet navigasjonen inn i et venstre sidefelt i stedet for en toppbar, hver seksjon får et lite ikon i stedet for bare tekst, arkivet får en liten skattekiste som sannsynligvis er favorittdetaljen min i hele redesignet. Ingen dyp UX-teori her, jeg liker bare sidefelt og ville ha en plass til bitte små ikoner.

så løp det litt løpsk (på en god måte)

Dette er delen som løp fra den opprinnelige planen. Når fjellet og header-stripen fantes fortsatte jeg å se på den tomme himmelen og det tomme vannet og tenke "det trenger noe i seg." Lovund har en genuint enorm lundekoloni, så lunder gikk inn først. Så føltes måker opplagt når lunder allerede fantes. Så en enslig havørn fordi vi faktisk har dem her. Så en tjeld, en terne, en skarv, fisk som beveger seg rundt i sjølaget, og til slutt en bitte liten pikselversjon av meg selv stående på toppen med armene opp, fordi hvis jeg tegner denne øya kan jeg like gjerne sette meg selv på toppen av den.

Måtte sette meg noen regler når gjestelisten ble lang, ellers ville headeren sett ut som et Where's Waldo-panel:

aldri mer enn en håndfull fugler på skjermen samtidig
alt holder seg i sin sone: fugler i himmelen, fisk i sjøen, folk på land, ingen bytter felt

Holder det levende i stedet for rotete, som var den faktiske risikoen når jeg begynte å legge til dyreliv uten noen plan.

scenen husker hvor den slapp

Ville at det å komme tilbake til siden i løpet av noen minutter skulle føles kontinuerlig i stedet for å terne opp en helt ny fugleoppstilling for hver eneste sidelasting. Så den nåværende scenen, posisjoner, timing, alt sammen, lagres med et tidsstempel, og et ferskt besøk innen fem minutter fremskyver den med hvor lenge du var borte i stedet for å kaste den.

Første forsøk lagret bare fasen hver fugl var i og satte den tilbake akkurat der ved neste lasting. Teknisk sett "husket" scenen, på den mest ubrukelige måten mulig:

// first attempt: just restore, no idea how long the tab was gone
function restoreScene(saved: ScenePhases): ScenePhases {
	return saved;
}

Lot fanen ligge i bakgrunnen i to minutter og kom tilbake til fugler frosset på nøyaktig samme flekk de var på da jeg så bort, fordi ingenting tok hensyn til tiden som faktisk hadde gått. Fikset det ved å fremskyve hver lagrede fase med den faktiske forløpte tiden, wrappet rundt hver fugls egen syklus:

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;
}

Etter fem minutter terner den bare opp en ny. Enkel regel, tok noen forsøk å lande på, alt annet jeg prøvde føltes enten for klissete eller for tilfeldig.

nattehimmel, og kampen med lys modus

Mørk modus viste seg å være den enkle halvparten. Bytt ut fjellet med en myk nattversjon, slipp inn Karlsvogna og Cassiopeia på omtrent deres faktiske posisjoner rundt Nordstjernen, la dem rotere sakte, og det leser bare som en natt over vann. Måtte knapt kjempe med den.

Lys modus var det motsatte. Å få bakgrunnsfjellet til å faktisk vises mot en blek himmel uten at det ble til visuell støy bak teksten tok flere runder med vask- og skyggefargene, for sterkt og det kjemper mot leseopplevelsen, for svakt og du kan ikke se at det er et fjell der i det hele tatt. Landet på noe med en myk fargeblandet vask over grunnbakgrunnen som er der hvis du ser etter den, men som ikke kommer i veien for å lese et innlegg om, si, en halvmaraton.

hvor det står nå

Det er redesignet, mer eller mindre alt sammen på ett sted. Det er ikke ferdig-ferdig, jeg tror ikke en personlig side noensinne er helt ferdig, og jeg pirker fortsatt på avstand og fugletiming og hva enn annet som plager meg når jeg ser på det for lenge. Men det føles som mitt nå i stedet for en mal med navnet mitt slengt på, og det var hele poenget. Godt nok for i kveld.