[建站手记] 设计断舍离:从 Elementor 到 Ollie 的手搓之路

01. 迷失在“别人的设计”里

ShinStudio 的初衷,是构建一个充满活力的数字工坊,而非四平八稳的企业官网。

起初,为了寻求捷径,我尝试使用成熟的商业主题(Astra Pro)。它提供的预制模板看似完美,但当我导入后,立刻陷入了**“削足适履”**的困境。

我想用高饱和度的**“Shin Orange (#FF6B00)”**来强调极客的活力,但主题预设的柔和商务风格总与我的设想格格不入。圆润的按钮、灰色的标题、通用的布局,都在稀释我想要的那种硬核感。我被迫花费大量时间重写 CSS 以覆盖原有样式,结果成品不伦不类——既失去了模板原本的优雅,也没能达成我想要的热烈。

那种感觉,就像是穿着一套昂贵但不合身的借来西装,处处受限。

02. Elementor:虚假的自由度

为了夺回设计主导权,我转向了 Elementor 页面构建器。

起初,“拖拽”操作确实带来了短暂的自由错觉。但很快我发现,这种自由是肤浅的。

Elementor 的底层逻辑是“堆砌”。为了构建一个充满张力的首屏,我被迫堆叠各种现成的“小部件”(Widget)。结果是,页面元素虽然丰富,但缺乏统一的“灵魂”,难以跳出既定框架,呈现出“工业感”与“未来感”碰撞的张力。拖拽出来的效果,总带有一种廉价的“模板感”。

我意识到,我需要的不是更多的小部件,而是更底层的**“设计掌控力”**。

选型进化之路对比表(设计视角):

维度1.0 商业主题 (Astra)2.0 页面构建器 (Elementor)3.0 原生 FSE (Ollie)
设计逻辑被动接受 (套用预设)拼凑堆砌 (依赖部件)主动创造 (原子级构建)
个性化表达困难 (处处受限)中等 (风格趋同)极致 (完全掌控)
色彩与活力容易被主题色冲淡需要手动逐个调整全局统筹,一键迸发
核心痛点“穿着别人的衣服”“千篇一律的网红脸”需要极强的设计自觉

03. Ollie 与 FSE:回归设计的白纸

最终,我选择了彻底的断舍离。我拥抱了 WordPress 原生的 全站编辑 (FSE),并选用了几乎是“一张白纸”的主题——Ollie

这正是我所需的干净底座。现在,网站的每一个像素都源于我的主动选择。我开始用最基础的原生区块(组、标题、段落、图片)像搭积木一样构建页面。活力的来源不再是花哨的特效插件,而是依靠纯粹的色彩与结构

  • 在全局样式中,我将主色调坚定地锁定为 #FF6B00 (Shin Orange),确保每一处高亮都纯粹、有力。
  • 我利用原生区块的“全宽”布局和巨大的字号来制造视觉冲击力。
  • 每一个模块的设计,不是因为“这里有个空位要填”,而是因为“我想在这里传达一种情绪”。

这种纯粹**“手搓”**的过程,让我重新找回了作为“工匠”的设计快感,令人满足。

04. Gemini:我的首席设计参谋

从“套模板”转变为“从零设计”,最大的挑战在于审美决策。此时,我的 AI 合伙人 Gemini 不再仅仅是代码辅助工具,而成为了关键的设计参谋:

  1. 配色方案顾问: 确定主色橙色后,Gemini 建议我放弃传统的纯白背景,在首屏 Hero 区域大胆使用深色背景来压住橙色的躁动,营造出“暗房”或“机库”的工业氛围,这让橙色的文字和按钮瞬间有了爆发力。
  2. 模块内容策划: 在规划首页介绍区时,我苦恼如何介绍复杂的兴趣。Gemini 建议提炼出三个核心支柱——“造物 (3D打印)”、“智核 (AI开发)”、“影像 (街头摄影)”,并用极简的图标加短句呈现。这奠定了现在首页清晰、硬核的内容结构。
  3. 视觉叙事建议: 对于首页最核心的 Hero 主图,Gemini 坚持建议我使用一张具有强烈透视感和“未完成感”的 3D 渲染图(正如现在你看到的那颗晶格化的心脏),而不是一张普通的照片,以此来隐喻“数字与现实边界”的主题。

05. 结语:设计是自我的延伸

放弃 Elementor,拥抱 Ollie 和 FSE,这条路并不平坦。它要求我不仅要做一个开发者,更要做一个设计师,去审视每一个区块存在的意义。

但这一切都是值得的。现在的 ShinStudio,不再是一个拼凑出的展示柜,而是一个有着独立人格和统一美学的数字生命体。

这里的每一抹橙色,每一次留白,每一个模块的布局,都诚实地反映了我想表达的活力与态度。这才是属于极客工匠真正的自由。