所以,整个东西
我一直发送这些一个接一个,当我建造时,山、鸟、侧边栏、夜空,全部在过去一个星期左右作为分开的小开发日志。想当一个帖子只回退并看整个推,因为从内部它没有感觉像一个特征列表。它感觉像一个想法一直增长胳膊和腿直到它基本上是一个小生态系统生活在我的标题栏中。
短版本:旧网站看起来像 Bootstrap 默认在我的名字上。很好,可读的,完全通用。可以是任何人的博客。我想要它看起来像我的,和特别像这里,Lovund,我真的活的岛。所以我给了它一个颜色和一个字体然后花了远多于计划的绘制鸟。
绿色,和一个字体这不是 Helvetica
调色板首先。用绿色去了因为我喜欢绿色(没有深刻的推理那里,只是真的),降落在两种心情,一个更轻"沿海日"对浅色模式和一个更黑"北海夜"对暗色模式。所有令牌都在一个 CSS 文件中住所以我不猎选择代码贯穿十二个组件当我不可避免地改变我的想法关于一个阴影:
--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;
}过去五分钟它只是翻页一个新的。简单规则,花了一些尝试降落,一切其他我尝试感觉无论太固状或太随机。
夜空,和与浅色模式的战斗
暗色模式变成是简单的一半。交换山对一个柔软边缘夜版本,掉进大熊座和仙后座大致他们的实际位置周围北极星,让他们缓慢地转,它只读作一个晚上在水面。几乎不得不战斗它。
浅色模式是对面。得到背景山真的显示对一个苍白的天空没有把它变成视觉噪音后面文本花了几次通过在洗和阴影颜色,太强它与阅读经验战斗,太弱你不能告诉那有一个山那里。降落在什么有一个柔和的颜色混合洗在底部背景那在那里如果你看但不有的方式阅读一个帖子关于,说,一个半马拉松。
其中它是在
那是重新设计,更多或少全部一个地方。它不是完成完成,我不想一个个人网站曾是真的完成,我仍然戳在间距和鸟时间和什么他人烦我当我看它太长。但它感觉像我的现在而不是一个有我的名字甩在它的模板,那是整个点。对今晚好足够。