Slip-On DIY
Draw on a sheet of paper. Scan it with your phone. The drawing wraps itself around a 3D Vans Slip-On.
We built a mobile H5 tool for Vans. Users receive a paper template printed with the shoe's unfolded surface, and draw freely with markers — doodles, patterns, lettering, anything. Once finished, they scan the paper with their phone, and the design maps onto a rotatable, zoomable 3D shoe model in real time. What you draw is what you see, instantly wearable on screen.
The tool was deployed as a workshop in Vans retail stores. One table, a pile of coloured markers, a sheet of paper, a phone — simple enough for kids to jump in. Finished designs could be shared directly from the tool.
Selected for GDC15 (Graphic Design in China 2015).
Commercial project, client: Vans. In collaboration with Super Nature Design.
--- layout: work.njk title_zh: Slip-On DIY title_ja: Slip-On DIY title_en: Slip-On DIY year: 2016 cover: /images/2016-slip-on-diy/cover.jpg materials: HTML5 · WebGL · 移动端 Web 应用 materials_ja: HTML5 · WebGL · モバイル Web アプリ materials_en: HTML5 · WebGL · mobile web app description: "An HTML5/WebGL mobile tool for Vans that captures hand-drawn designs on paper and maps them onto a 3D shoe model in real time — draw, scan, wear." workTags: - software - interactive - commercial --- <div class="gallery"> <img loading="lazy" src="/images/2016-slip-on-diy/s5.jpg" alt="鞋形纸模板与彩色马克笔"> <img loading="lazy" src="/images/2016-slip-on-diy/s4.jpg" alt="工作坊现场 — 桌面布置"> <img loading="lazy" src="/images/2016-slip-on-diy/s3.jpg" alt="参与者用手机扫描图案"> <img loading="lazy" src="/images/2016-slip-on-diy/s2.jpg" alt="手机中的3D鞋体预览"> <img loading="lazy" src="/images/2016-slip-on-diy/s1.jpg" alt="手绘鞋面设计展示"> </div> <div lang="zh"> 在纸上画一双鞋，用手机拍一下，画就跑到了一双 3D 的 Vans Slip-On 上。 我们为 Vans 做了一个移动端 H5 工具。用户拿到一张印有鞋面展开图的纸模板，用马克笔随便画——涂鸦、图案、写字，画完之后用手机扫描，图案会实时贴合到一双可以旋转、缩放的 3D 鞋模型上。画什么就是什么，立刻能看到穿上脚的效果。 这个工具在 Vans 门店以工作坊的形式落地。一张桌子，一堆彩笔，一张纸，一部手机——流程足够简单，小朋友也能玩。画完还可以分享自己的设计。 入选 GDC15（Graphic Design in China 2015）。 商业项目，客户 Vans。与 [Super Nature Design](https://www.supernaturedesign.com/) 共同完成。 </div> <div lang="ja"> 紙に靴を描いて、スマートフォンで撮る。すると絵が 3D の Vans Slip-On に貼り付く。 Vans のために制作したモバイル H5 ツール。ユーザーは靴の展開図が印刷された紙テンプレートを受け取り、マーカーで自由に描く——落書き、パターン、文字、なんでもいい。描き終えたらスマートフォンでスキャンすると、図案がリアルタイムで回転・ズーム可能な 3D シューズモデルに貼り付けられる。描いたものがそのまま、履いた姿として目の前に現れる。 このツールは Vans 店舗でワークショップとして展開された。テーブル一つ、カラーペンの山、紙一枚、スマートフォン一台——子供でも遊べるシンプルさ。完成したデザインはシェアもできる。 GDC15（Graphic Design in China 2015）入選。 商業プロジェクト、クライアント：Vans。[Super Nature Design](https://www.supernaturedesign.com/) との共同制作。 </div> <div lang="en"> Draw on a sheet of paper. Scan it with your phone. The drawing wraps itself around a 3D Vans Slip-On. We built a mobile H5 tool for Vans. Users receive a paper template printed with the shoe's unfolded surface, and draw freely with markers — doodles, patterns, lettering, anything. Once finished, they scan the paper with their phone, and the design maps onto a rotatable, zoomable 3D shoe model in real time. What you draw is what you see, instantly wearable on screen. The tool was deployed as a workshop in Vans retail stores. One table, a pile of coloured markers, a sheet of paper, a phone — simple enough for kids to jump in. Finished designs could be shared directly from the tool. Selected for GDC15 (Graphic Design in China 2015). Commercial project, client: Vans. In collaboration with [Super Nature Design](https://www.supernaturedesign.com/). </div>