跳转至内容
voutch_website_design.hlp帮助

Voutch Website Design

品牌识别 + 网站 · 2025 · 03/21

把群聊里乱糟糟的倒票,变成一个霓虹色的派对票市场

客户
Voutch
行业
夜生活 / 二手转票
服务
品牌识别 + 网站
周期
2025
作品集
Voutch Website Design — cover
成果
3
标志方案
试了三个,选定一个。
7
品牌色
基础色 + 白天浅调。
上线
转票市场
自己搭的,voutch.org。
目标 · 挑战 · 成果

目标

给爱去派对的人一个霓虹色、没广告的地方转票——不用再挤在群聊里。

挑战

得比群聊靠谱,又不能一副公司做派;转票流程还只能从零搭,套模板不行。

成果

一套霓虹品牌,加一个自己搭的转票市场。已上线 voutch.org。

访问线上站点

01 / 识别三个方案,选定一个

标志先试了三个方向——一个聚光灯、一张撕开的票、一个字母 T 的节日符号——然后把选定的那个搭成一整套品牌:标志、色彩、字体,还有一套海报模板。

02 / 品牌这套识别系统怎么搭起来的

标志先试了三个方向,选定一个,再搭成一整套品牌:标志、色彩、字体,还有一套海报模板。

§ 01

方案一 — 聚光灯

应用图标
概念

聚光灯、现场、舞台、高光、聚焦。

优势

视觉伸缩性强——有动感、好玩、干净、有冲击力。

结论

选定 →

变体

方案一 — 聚光灯 variation 1
方案一 — 聚光灯 variation 2
方案一 — 聚光灯 variation 3
方案一 — 聚光灯 variation 4
§ 02

方案二 — 票

应用图标
概念

票、模块化、文字——一张撕开的票。

优势

好玩、模块化、有创意、有动感、信息为先。

结论

未选用

变体

方案二 — 票 variation 1
方案二 — 票 variation 2
方案二 — 票 variation 3
方案二 — 票 variation 4
§ 03

方案三 — 字母 T

应用图标
概念

字母 T、加号——一个扁平的节日符号。

优势

色彩感、好玩、活泼、吸睛——多巴胺。

结论

未选用

变体

方案三 — 字母 T variation 1
方案三 — 字母 T variation 2
方案三 — 字母 T variation 3
方案三 — 字母 T variation 4
§ 04

标志 — 主体

完整标志

完整标志

文字标

图形标

关于这个标

主标志是字标加聚光灯图形标。空间和对比允许的地方都用完整版;字标塞不下时,单用图形标。

格式

SVG · PNG · PDF · EPS

§ 05

标志 — 变体

彩色文字标
彩色图形标
渐变图形标
渐变图形标
应用图标
应用图标
§ 06

色彩 — 调色板

基础色

霓虹绿

#D1FF54 · 主色 · 按钮 · 主视觉铺底

#000000 · 文字 · 夜色对比

#FFFFFF · 底色

辅助色

浅霓虹绿

#E4FF99 · 底色 · 辅助色调

深霓虹绿

#5E8100 · 霓虹上的字 · 压深

米白

#F5F5F5 · 中性背景

#575757 · 次要文字 · 元数据

一套霓虹绿,晚上出门那股劲儿。每个画面只用一个重点色,绝不叠两个——黑底配霓虹、霓虹配黑,或者用白天的浅调。

§ 07

字体

字库

标志 · KEEP CALM

Aa

主字体 · DM SANS

Aa

装饰 · CORMORANT

搭配

Keep Calm 是标志专用字体——只给字标用。DM Sans(Regular + Medium)管所有界面、产品和正文。Cormorant Semi-Bold 斜体是装饰性的点缀,用在偏编辑感的地方。品牌外的字体一律不替换。

§ 08

字体 — 字阶与层级

层级
层级示例规格
Display大标题60 · Cormorant SemiBold Italic
H1章节标题42 · DM Sans Bold
H2小节标题30 · DM Sans Medium
H3卡片标题23 · DM Sans Medium
正文段落——日常阅读的主力字号。18 · DM Sans Regular
小字次要信息与辅助说明15 · DM Sans
注释标签 · 元信息12 · DM Sans · 加字距
§ 09

图标与图形元素

海报与社交模板——把这套系统铺到各种版式上:霓虹或黑底上的大字标题、聊天群截图,还有满版的夜场摄影,每张都用 Voutch 字标署名收尾。

十二张 Voutch 海报与社交模板——霓虹、黑与白天浅底,混合大字标题、聊天群截图和满版派对摄影,每张都用 Voutch 字标署名

BRAND GUIDELINES — VOUTCH

03 / 网站一套自建的转票流程

转票流程是专门搭的,不是往市场模板上一套了事。25+ 个界面把卖家从挂单一路送到买家的购物车、结账和确认,桌面和手机都走得通。

Address https://www.voutch.org
线上站点 — 桌面网页
线上站点 — 手机

交付内容

NameType
品牌识别——字标 + 图形标志Deliverable
色彩 + 字体系统Deliverable
转票流程 UX(25+ 界面)Deliverable
前端搭建Deliverable
上线 voutch.orgDeliverable
Voutch Website Design
就绪