Case · 01 · Beer to the Bush
JENNIFER YU
Case 01 Web Redesign · 2024

Beer to
the Bush

为澳洲新南威尔士州 Dubbo 的户外啤酒节做的完整网站重设计——从原始网站调研、竞品分析,到情绪板、设计系统、信息架构、线框图,再到 6 大核心页面的 PC + 移动端高保真原型。

ProjectBeer Festival Website
RoleUX/UI Designer
ToolsAdobe XD · Figma
Year2024

项目 背景

Beer to the Bush 是由 Dubbo 主办的户外啤酒节,把本地独立啤酒和苹果酒酿造商聚在一起,鼓励访客带上野餐垫、几把椅子和家人,度过轻松的一天。

节日本身在本地社区有口皆碑,但官方网站存在明显的信息架构和视觉陈旧问题——访客难以快速获取活动信息、票务入口模糊、缺乏节日氛围的渲染。

这次任务的交付目标:完成一套包含调研、设计系统、信息架构、线框图、以及 6 大核心页面双端高保真的完整方案。

设计 目标

从原始网站与竞品的对照研究中,我提炼出本次重设计需要解决的核心问题(摘自 PDF 第 2 页原始研究批注):

Logo & 视觉
Logo 需要优化
字体与版式缺乏设计感
主题色
原站主题色单一
缺少活跃氛围
内容呈现
节日描述不够详细
文案缺少细节补充
信息层级
信息缺乏优先级
浏览体验欠佳
照片氛围
黑白照片缺乏吸引力
缺少高质感氛围渲染
按钮引导
按钮可更突出
关键操作不够显眼

设计 过程

过程分为四步:研究分析 → 情绪板 → 设计系统 → 信息架构与线框图。

4.1 原始网站诊断

先对原站做用户视角的可用性巡检——把每个页面的问题用蓝框圈出,配文说明影响:

原站诊断批注

4.2 竞品研究

选了 3 个对标站点做参考:

竞品研究:Strawberry Fields / London Taste Festivals / Dubbo Region

4.3 情绪板

关键词:温暖、复古、真实。围绕啤酒文化、内陆日落、本地酿造等元素构建氛围。

情绪板 Moodboard

4.4 设计系统

从情绪板提炼出完整的视觉语言——关键词、Logo 规范、字体、配色、关键元素。

品牌关键词
主色配色方案
Logo Style Guide
字体系统 Typography

4.5 线框图

线框图采用 1280 px Desktop 等同于 4 列 Mobile 的栅格系统,针对 Homepage / Tickets / News / Products / Brewers / Contact Us 全部 6 个核心页面均交付了双端线框。以下展示 Homepage 双端核心骨架为代表:

Wireframe · Desktop · Homepage
PC 端首页线框图
Wireframe · Mobile · Homepage
手机端首页线框图

最终 产出

共 6 个核心页面的双端高保真原型:Homepage / News / Products / Brewers / Contact Us(Tickets 页暂未展示)。

5.1 Homepage · 首页

Hero 区走"全屏节日现场 + 沉浸式标语",核心 CTA「Get Tickets」配合 Date + Location 一并展示,3 秒内即可判断"是否值得去"。

Desktop
滚动查看 ↓ PC 端首页高保真
Mobile
滚动查看 ↓ 手机端首页高保真

5.2 Latest News · 新闻页

3 列卡片瀑布流(PC)+ 单列列表(移动端),每张卡片配实景图 + 标题 + 简介,适合"刷一刷看看最近动态"的浏览场景。

Desktop
滚动查看 ↓ PC 端新闻页
Mobile
滚动查看 ↓ 手机端新闻页

5.3 Products · 产品页

分为 Craft Beer 与 Food 两大区块。PC 端每区 3 × 3 网格 + 「Fine More」按钮;移动端单列下拉浏览。

Desktop
滚动查看 ↓ PC 端产品页
Mobile
滚动查看 ↓ 手机端产品页

5.4 Brewers · 入驻酿酒商

黑色背景 + 白色文字区块介绍整体供应情况,下方逐一展示 Mountain Culture、White Bay Beer、Reckless Brewing 等核心酿酒商。

Desktop
滚动查看 ↓ PC 端酿酒商页
Mobile
滚动查看 ↓ 手机端酿酒商页

5.5 品牌周边延展

将品牌系统延展到线下物料——活动海报与帆布袋是节日现场最高频的视觉触点。

海报与帆布袋设计

在 Adobe XD 中查看完整高保真原型

含 6 大核心页面的完整原型、组件库、设计系统说明、可交互演示。

打开 Adobe XD ↗

← 返回作品集