Итак, вся вещь
Я отправлял это по одному куску за раз когда я строил это, гора, птицы, боковая панель, ночное небо, всё это в течение последней недели или около того как отдельные маленькие девлоги. Подумал стоит одного поста которой просто отступает и смотрит на весь толчок, потому что изнутри это не чувствовалось как список особенностей. Это чувствовалось как одна идея которая продолжала расти руки и ноги пока она не была в основном маленькая экосистема живущая в моей планке заголовка.
Короткая версия: старый сайт выглядел как Bootstrap по умолчанию с моим именем на нём. Хорошо, читаемо, полностью универсально. Мог быть кем-то блог. Я хотел это выглядело как мое, и специфично как здесь, Lovund, остров я действительно живу. Так я дал это цвет и шрифт и затем потратил намного больше планируемого рисования птиц.
Зелёный, и шрифт то не Helvetica
Палитра сначала. Пошёл с зелёным потому что люблю зелёный (нет глубокого рассуждения там, просто правда), приземлился на две настроения, более светлый «береговой день» для светлого режима и более тёмный «северно-морской вечер» для тёмного режима. Все токены живут в одном CSS файле поэтому я не охотящийся за hex кодами по двенадцати компонентам когда я неизбежно меняю свой ум об оттенке:
--color-bg: #ecf3ee;
--color-surface: #e3eee4;
--color-fg: #141c18;
--color-accent-500: #2f6b45;
--color-accent-600: #275a3a;
--color-sea: #256d80;
--color-rock: #7e8f84;Тёмный режим переворачивает большинство это вокруг обменённого основания, море и камень остаются чистыми против почти чёрного фона вместо просто слепо инвертирования, что это собственный маленький бой я доберусь до.
Шрифт это Literata, серифный. Хотел что-то что читает немного больше как печатная страница и немного меньше как каждая SaaS посадочная страница когда-либо, так что это личный блог а не продукт. Маленькое но это меняет целое чувство страницы больше чем я ожидал идя в.
Реальная идея: близко это пиксели, далеко это гладко
Это кусок что всё остальное висит. Я хотел два визуальных регистра в то же самое сцене: вещи близко рендер как хрустящая пиксель-арт, жёсткие края, блочные, и вещи в дальнем фоне рендер гладко и атмосферно, как они действительно далеко и немного размыто. Стрелки заголовка и подвала это пиксель слой. Гора сидящая позади всего это гладкий слой.
Раз я имел то правило это сделало каждое другое решение легче, потому что я мог просто спросить «это вещь близко или далеко» и знать как её рисовать.
Рисование lovundfjellet, дважды
Гора позади сцены это Lovundfjellet, реальный пик здесь, трассированный из фотографии я взял с парома. Первый проход я рисовал это слишком остро, больше альпийский шип чем реальная вещь, что больше долгий горбатый гребень. Вернулся к фотографии, действительно измерил углы склона вместо рисования по памяти, и переделал это. Очевидная ошибка в задней части, я знаю как выглядит гора, я видел это большинство дней, но рисование от «вибраций» вместо эталонной фотографии получило мне форму которая была неправильна способом я не заметил до я поместил это рядом с реальным горизонтом.
Сделал маленький BMK логотип пойти с ним тоже, инициалы с маленькой горой работал в буквах. Не хотел универсальный монограмм, хотел то же самое ориентир показывающийся дважды.
nav пошёл в сторону
Переместил навигацию в левую боковую панель вместо верхней полосы, каждый раздел получает маленький значок вместо просто текста, архив получает маленький сундук с сокровищами что вероятно мой любимый глупый деталь во всём переоформлении. Нет глубокого UX теория здесь, я просто люблю боковые панели и хотел место для крошечных значков.
Потом это слегка вышло из-под контроля (хорошо)
Это кусок что убежал от первоначального плана. Раз гора и стрелка заголовка существовали я держал смотрение на пустое небо и пустую воду и думая «то нуждается что-то в этом». Lovund имеет действительно огромную колонию тупиков, поэтому тупики пошли в сначала. Потом чайки чувствовалось очевидно раз тупики существовали. Потом одинокий морской орел потому что мы действительно их получаем здесь. Потом устричник, крачка, баклан, рыба движущаяся вокруг в морском слое, и наконец крошечная пиксель-версия меня стоящего на вершине с поднятыми руками, потому что если я рисую этот остров я также мог поместить себя наверху это.
Пришлось установить себе некоторые правила раз список гостей становился длинным или стрелка собиралась выглядеть как панель Где Уолдо:
- никогда больше чем горсть птиц на экране одновременно
- всё остаётся в его зоне: птицы в небе, рыба в море, люди на земле, никто не меняет полосы
Держит это чувствующее себя живым вместо загромождённого, что было реальный риск раз я начал добавлять дикую природу без плана.
Сцена помнит где она оставила
Хотел возвращение к сайту в течение пары минут чувствовать непрерывным вместо пере-разворота полностью новой расстановки птиц на каждой загрузке страницы. Поэтому текущая сцена, позиции, синхронизация, всё это, получает сохранено с временем метки, и свежий визит в течение пяти минут продвигает это вперёд на то как долго ты был ушёл вместо выброса это.
Первый раз только сохранил фазу каждой птицы на и положил это назад точно там на следующей загрузке. Технически «запомнил» сцену, в большинстве бесполезного способа возможного:
// первый попытка: просто восстановить, никакая идея как долго вкладка была ушла
function restoreScene(saved: ScenePhases): ScenePhases {
return saved;
}Оставил вкладку в фоне для двух минут и пришёл назад к птицам замёрзшим в точном месте они были когда я посмотрел прочь, потому что ничто не было учитывая реальное прошедшее время. Исправил это продвигая каждую сохранённую фазу вперёд реальным прошедшим временем, обёрнутое вокруг собственного цикла каждой птицы:
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;
}Прошлые пять минут это просто разворачивает новую. Простое правило, потребовало несколько попыток приземлиться, всё остальное я попытался чувствовалось либо слишком липко либо слишком случайно.
Ночное небо, и бой с светлым режимом
Тёмный режим оказался лёгкой половиной. Поменяй гору на мягкую-краевую ночную версию, упади в Big Dipper и Cassiopeia примерно в их реальных позициях вокруг North Star, позволи им медленно вращаться, и это просто читает как ночь над водой. Едва пришлось бороться.
Светлый режим был противоположным. Получение фоновой горы действительно показывающейся против бледного неба без этого становящегося визуальным шумом позади текста потребовало нескольких проходов по цветам стирки и тени, слишком сильно и это борется опыт чтения, слишком слабо и ты не можешь сказать что там гора вообще. Приземлилось на что-то с мягкой цветной смешанной стиркой над основным фоном то есть там если ты смотришь но не на пути чтения поста о, скажем, половине марафона.
Где это в
Это переоформление, более менее всё это в одном месте. Это не полностью закончено, я не думаю личный сайт когда-либо действительно закончен, и я всё ещё пыхтел на интервалы и синхронизация птиц и что-либо ещё что меня беспокоит когда я смотрю на это слишком долго. Но это чувствует себя как мое теперь вместо шаблона с моим именем выброшенным на него, и это была вся суть. Достаточно хорошо на сегодня.