跳到正文

Tara Designs

一个建筑与平面设计工作室的四页网站。

角色
设计与开发
我的部分
网站由我搭建,字体排印由我选定。
提供方
工作室提供了照片、名称和文案。
技术栈
HTML, CSS, JavaScript, Canvas 2D
其他渠道
访问线上网站
tara-designs-creative.vercel.app
Tara Designs 的首页:近乎全黑的页面上有深红色的点、白色的字标和两个按钮,还有一张倾斜的玻璃卡片,上面是工作室的标志。
图纸 01首页:玻璃卡片朝指针倾斜。

A-01 / A-08

构想

一家建筑与平面设计公司的四个页面、一个可筛选的图库和一个联系表单。

A-02 / A-08

问题

它必须展示真实的作品:五个类别共十五个项目,每个都在灯箱中打开。

照片、名称和文案都来自工作室;网站要把它们展示好,并且让人容易联系到他们。

tara-designs-creative.vercel.app
Works 页面顶部:标题“My Work”、一排筛选标签(All、Architecture、Graphics、Logos、Frames and Merch)和图库的第一行。
图纸 02Works 页面。

A-03 / A-08

思路

保持轻量:朴素的 HTML、CSS 和一个由四个页面共用的脚本。图库就是切换一个 class,加一个灯箱。

筛选为 Architecture 的 Works 页面,有三张带说明的图块:3-Bedroom Bungalow、5-Bedroom Duplex 和 Interior Wall Detail。
图纸 03Architecture 筛选。
作品灯箱打开着一张两层建筑的建筑渲染图,说明为 Residential Development,右上角有一个关闭按钮。
图纸 04灯箱。

A-04 / A-08

关键决定

字体排印由我选定:标题用 Fraunces,小标签用 Space Mono,正文阅读用 Inter。

不用框架,也没有构建步骤:纯 HTML、CSS 和四个页面共用的一个脚本(最初是好几个,后来合并成了一个)。

联系表单会先在页面里检查填写的内容,再发送到 Formspree。

指针效果只在使用精确指针、且没有开启减少动态效果时才运行;点阵网络在第一版后一天做了速度优化。

A-05 / A-08

设计

深色的、像蓝图一样的表面,只有一种深红色强调色。各个章节的标注方式就像一套图纸里的图号。

tara-designs-creative.vercel.app
Tara Designs 首页首屏之下:标题“What I Do”在三张深色卡片之上,然后是一条更浅的“Common Problems”区块。
图纸 05服务能力。
首屏文字的特写:一行带字距的等宽字体写着两个专业领域,白色的 Tara Designs 字标,以及“See the Work”和“Start a Project”两个按钮。
图纸 06字体,近距离。
首屏展示区的特写:一张倾斜的玻璃卡片,上面是工作室滴着颜料的头像标志,卡片一角之外有深红色的圆环弧线。
图纸 07展示区。

A-06 / A-08

实现

朴素的 HTML、CSS 和 JavaScript,圆点网络用一个 canvas 绘制。

指针效果只在有精确指针、且没有开启减少动态效果的情况下运行。

从第一次提交到最后一次提交只用了三天:2026 年 8 月 28 日至 30 日之间共 25 次提交。

页面
首页、关于、作品、联系
图库
15 个项目,5 个类别
表单
先校验,再发送到 Formspree
字体
Fraunces、Space Mono、Inter
源码
私有仓库
手机上的 Tara Designs 首页:圆角导航栏、倾斜的玻璃标志卡片和深红色圆环,以及白色字标的上半部分。
图纸 08手机,首屏。
打开的 Tara Designs 手机菜单:一块深色面板,用带字距的等宽大写字母列出 Home、About、Works 和 Contact。
图纸 09手机上的菜单。
手机上的 Tara Designs 服务能力部分:标题“What I Do”在三张堆叠的深色卡片之上,分别是 Architecture、Graphic Design 和 Merch。
图纸 10手机上的服务能力。
手机上的 Tara Designs Works 页面,已开启 Architecture 筛选,下方是两个全宽图块:一张平房渲染图和一张两层住宅渲染图。
图纸 11筛选为 Architecture 的图库。

A-07 / A-08

细节

标志卡片朝指针倾斜。一束深红色的聚光灯跟着鼠标在卡片间移动。光标附近的圆点会为它让路。

tara-designs-creative.vercel.app
三张深色卡片;中间那张“Your brand looks outdated”朝指针倾斜,带着深红色聚光灯和圆形的 TD 徽章。
图纸 12指针下的一张卡片。

A-08 / A-08

目前状态

它能正常运行,而且已经上线。

下一个项目

Corda

Victor Ohiri