手绘铁艺巫师帽招牌

THE WITCH'S LITTLE ATELIER

一些想法,一点魔法。

下拉铃绳,或点击拉铃入内 ↓

THE WORK INDEX

作品目录

THE ATELIER / MAKING OF

THE FINAL RECIPE / NO. 004

四种灵感汇聚到手绘魔药锅中04 / 04

灵感收藏家

四种灵感,收集完成。

四个作品类别已完成浏览,以下为网站制作过程与技术说明。

新媒体运营平面设计多媒体活动内容运营

THE MAKING OF网站制作过程

张小珏手绘的魔药书,网页视觉的起点
01 / 手绘定调

手绘素材与视觉设定

以张小珏绘制的魔药书、药瓶和锅为基础,建立网站的主题视觉,并按设计、运营和影像划分作品章节。

作品与手绘:张小珏

THE INTERACTION RECIPEHTML · CSS · JavaScript
02 / AI 辅助实现

页面结构与交互实现

通过 Codex 辅助编写原生网页代码,实现翻页、拖拽药瓶、海报牌组和视频放映;根据张小珏提出的设计要求与浏览反馈进行调整。

手绘素材 → 页面结构 → 交互动效

电脑端魔药调制室的真实页面手机端魔药调制室的真实页面
03 / 测试与迭代

浏览测试与多轮调整

根据浏览反馈调整布局、音量和动效节奏,并通过浏览器自动化检查手机与电脑尺寸下的导航、视频播放和刷新状态。

自动化检查不等同于所有实机均已测试。

04 / THE INGREDIENTS技术构成

HTML · CSS · JavaScript
原生页面、响应式排版与交互逻辑,没有使用前端框架。
SVG · Canvas · Web Animations
叉针图案、魔杖星尘,以及翻页、调制和作品切换动效。
Web Audio · 原生 Video
交互音效、背景音乐与视频播放;支持键盘操作和减少动态效果偏好。

作品与手绘:张小珏 · 网站代码与交互:AI 辅助实现、多轮反馈迭代

CONTACT DETAILS

联系张小珏

邮箱
Caroline990521@126.com

横屏浏览作品集

横屏采用桌面版布局与动效。
支持上下滚动,图片可点击放大。