项目 背景
Beer to the Bush 是由 Dubbo 主办的户外啤酒节,把本地独立啤酒和苹果酒酿造商聚在一起,鼓励访客带上野餐垫、几把椅子和家人,度过轻松的一天。
节日本身在本地社区有口皆碑,但官方网站存在明显的信息架构和视觉陈旧问题——访客难以快速获取活动信息、票务入口模糊、缺乏节日氛围的渲染。
这次任务的交付目标:完成一套包含调研、设计系统、信息架构、线框图、以及 6 大核心页面双端高保真的完整方案。
设计 目标
从原始网站与竞品的对照研究中,我提炼出本次重设计需要解决的核心问题(摘自 PDF 第 2 页原始研究批注):
字体与版式缺乏设计感
缺少活跃氛围
文案缺少细节补充
浏览体验欠佳
缺少高质感氛围渲染
关键操作不够显眼
设计 过程
过程分为四步:研究分析 → 情绪板 → 设计系统 → 信息架构与线框图。
4.1 原始网站诊断
先对原站做用户视角的可用性巡检——把每个页面的问题用蓝框圈出,配文说明影响:
4.2 竞品研究
选了 3 个对标站点做参考:
- Strawberry Fields(澳洲本土音乐节)—— 大胆色彩 + 醒目的原住民插画视觉,识别度极高
- London Taste Festivals(伦敦美食节)—— 多入口浮动窗口、信息层级分明
- Dubbo Region(Dubbo 地区官方站)—— 手绘插画 + 自然元素(桉树叶、长颈鹿),呼应本地生态
4.3 情绪板
关键词:温暖、复古、真实。围绕啤酒文化、内陆日落、本地酿造等元素构建氛围。
4.4 设计系统
从情绪板提炼出完整的视觉语言——关键词、Logo 规范、字体、配色、关键元素。
4.5 线框图
线框图采用 1280 px Desktop 等同于 4 列 Mobile 的栅格系统,针对 Homepage / Tickets / News / Products / Brewers / Contact Us 全部 6 个核心页面均交付了双端线框。以下展示 Homepage 双端核心骨架为代表:
最终 产出
共 6 个核心页面的双端高保真原型:Homepage / News / Products / Brewers / Contact Us(Tickets 页暂未展示)。
5.1 Homepage · 首页
Hero 区走"全屏节日现场 + 沉浸式标语",核心 CTA「Get Tickets」配合 Date + Location 一并展示,3 秒内即可判断"是否值得去"。
5.2 Latest News · 新闻页
3 列卡片瀑布流(PC)+ 单列列表(移动端),每张卡片配实景图 + 标题 + 简介,适合"刷一刷看看最近动态"的浏览场景。
5.3 Products · 产品页
分为 Craft Beer 与 Food 两大区块。PC 端每区 3 × 3 网格 + 「Fine More」按钮;移动端单列下拉浏览。
5.4 Brewers · 入驻酿酒商
黑色背景 + 白色文字区块介绍整体供应情况,下方逐一展示 Mountain Culture、White Bay Beer、Reckless Brewing 等核心酿酒商。
5.5 品牌周边延展
将品牌系统延展到线下物料——活动海报与帆布袋是节日现场最高频的视觉触点。