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