inspo.page 背后的旅程:更好的网页设计灵感收集方式
一个简单的想法如何发展成为发现让网站令人难忘的细节的精选平台。
一切开始的时刻
几年前,我在浏览网页时偶然发现了一个特别的网站。那种每个微动画都经过精心设计、每个过渡都感觉有意的类型。它不仅仅是漂亮,它让我感受到了某种东西。
从那时起,我就迷上了网页设计。
发现空白
起初,我使用常见的灵感网站。它们非常适合发现漂亮的网站并获得创作灵感。但我注意到:它们展示的是整个网站,这对于整体灵感来说很棒。
问题是,有时我会痴迷于某个特定细节。可能是一个按钮动画,或者手风琴的打开方式,或者非常流畅的页面过渡。我会收藏整个网站,但后来要花很长时间才能再次找到那个完美元素。
从小处着手
我开始构建自己的库。每当我看到很酷的东西(流畅的页面过渡、优雅的定价部分、酷炫的导航动画)时,我会录制它并用非常具体的标签保存,如“卡片”、“英雄区域”或“页面过渡”。
从个人工具到公共资源
在建立这个个人收藏几年后,我想到:“如果这对我的帮助这么大,也许其他设计师和开发者也能使用它。”
这就是我决定与世界分享的时候。
实际工作原理
inspo.page 背后的想法很简单:我建立了三个特定的过滤系统:
- 什么 - 所有不同的组件和布局
- 哪里 - 网站的各个部分
- 动效 - 与运动相关的一切
魔力在于组合这些过滤器时发生。想专门查看定价部分的卡片动画吗?或者用于展示服务的视差效果?只需叠加过滤器就能准确找到你想要的内容。
技术方面
在技术方面,我使用 Astro 和 Sanity。因为我有时很懒,而且真的想要一个面向未来的项目,我想让策划灵感变得尽可能简单。
这就是为什么我想出了这个自动化系统,我只需点击录制就可以了。它会自动获取 URL、创建不同的视频版本、压缩所有内容、托管到 Bunny.net,然后发送到 CMS,所以我只需要标记并发布。
最困难的部分
你可能认为最困难的部分是所有技术内容,比如设置自动化和管理视频上传。但说实话,那是最简单的部分。
真正的挑战是弄清楚如何组织一切,以便人们能够真正找到他们想要的内容。
我至少重新设计了整个标签系统 10 次。每次我以为自己搞定了,就会意识到它要么太复杂,要么太模糊。
AI 世界中的人性化触感
现在 AI 可以在几分钟内构建一个看起来不错的网站。很令人印象深刻。
但仍然缺少一些东西。AI 可以处理布局和基本样式,但还无法把握人性化的东西。比如悬停效果的时机、过渡的权重,或者确切知道微交互应该有什么感觉。这是纯粹的品味和直觉。
下一步计划
每周,我都在向平台添加更多灵感。我不是试图建立最大的收藏,只是想要真正有用的东西。
如果你想查看,请访问 inspo.page,看看是否能找到你下一个最喜欢的交互。你可以按特定组件(如卡片、按钮、模态框等)、网站部分(英雄区域、定价等)或动效模式(视差、页面过渡等)进行过滤。