一个小而美的作品集网站

[ioNaLyhO]

next.mossdesign.cn

这是一个非商业项目，是设计师学习 Next.js 和 Sanity 的一个实例。在很大程度上也受制于技术，因为我的技术有限，只能做自己能实现的设计，好在不必受制于人，也因此做得很开心。这样说并不是否定人类文明进程中许多伟大的成果不是分工合作所创造的，我当然相信商业本身就是互助合作和正和游戏，不过是我们还在榨取式社会丛林中艰难的前行，想要坚守「平凡但不平庸」实际上是极高的要求。

我的初衷是做一个小而美的作品集网站，本项目以兄弟公司青苔设计为原型，在设计中，我先为网站构思了文案，青苔设计这个名字是什么意思？如果人们无法解读就会缺少共情。我想到杉本博司的书《直到长出青苔》便去挖掘其中的意义，于是有了「真正有生命力的事物，需要时间去沉淀、去生长、去被理解」、「青苔不语，生机盎然」、「沉淀、静谧、坚韧、永恒」这些标语，与该公司做品牌设计相契合。有了文案，我们才有了排版的元素，甚至有了做设计的感觉，它不仅仅是信息本身，也是一种视觉元素，更有可能成为点睛之笔。就像一首歌，如果光是好听，那也只是好听而已，如果它的歌词触动了你，它就超越了好听。文案是自然语言，设计是视觉语言，普通人更能够理解自然语言，不一定理解视觉语言，它们相互相成，文案也为普通人去理解设计做了铺垫。

这是一种极简主义的设计，但不同于以富媒体为主视觉的网页设计，比如苹果的官网；也不同于以文字为主视觉的网页设计，比如 Typewolf 收录的网站。青苔的网页设计倾向于以作品本身为视觉主语，结合网页特性的轻体验，塑造一个简约而不简单的作品集网站。就像无印良品的风格，我称它为——没有设计的设计——自然、本味。我喜欢《不服从的艺术》里面译者的一句介绍：「虽然身为译者，但最大的梦想却是让读者感觉不到译者的存在。期待自己的译文能如原文般自然流畅、饶富趣味。」

网站的主要特性和实现

1. (sanity): 创建了自定义数据模式类型，用于后台管理和前端渲染
2. (sanity): 适配了浏览器默认语言，支持自动切换管理面板中英文界面
3. (sanity): 支持按需新增图片、视频或文本块的页面搭建
4. (sanity): 仅在开发环境中自动启用了 vision 工具可用于查看数据结构，而不干扰最终用户
5. (sanity, next.js): 支持预加载低像素模糊占位图
6. (next.js): 页面首图使用了预加载、其余图片使用懒加载
7. (tailwindcss): 适配了系统色彩模式，支持 light 和 dark 方案
8. (tailwindcss): 适配了从手机到 5K 屏幕的自动布局

---

演示

next.mossdesign.cn

后台

next.mossdesign.cn/studio

用户名

[e-mail]

密码

y6{O65*7Zr

[hueralin]

访问不了呢

[ioNaLyhO]

@hueralin 奇怪，还有这种情况

[jiupeak]

我的感受是：按照视觉习惯应该是从左到右，图片会把目光吸引走，文字留大空了！

[nathen]

建议小兼容一下 PC ，PC 打开布局有点不美观

[ioNaLyhO]

@nathen 感谢你的建议，回头找个 PC 看看

[ioNaLyhO]

@jiupeak 感谢你的建议，有时间还会再优化设计

[kongkx]

挺好的，设计感不错。但手机上面, 个人感觉滚动的时候，文字直接盖在图片上面不够优雅 。

[ioNaLyhO]

@kongkx 感谢你的建议！文字压图是一种个性化的设计，有意为之，个性化就必然有人喜欢有人不喜欢。但是目前来说设计不重要，设计我只用了一天时间，开发用了 3 周，重点是实现。