專案定位
讓樂團個性在第一眼成立的視覺網站
GalaxyBoyz 被定位為以識別為核心的網頁體驗。頁面透過極端排版、動態與視覺節奏，讓使用者在閱讀細節前就先感受到樂團個性。
角色與範圍
負責視覺 UI、響應式網格與動態原型
我負責設計識別導向介面、規劃桌機與手機網格行為，並以 GSAP 與 Vue 3 實作滾動式動態。
問題背景
強烈視覺很容易犧牲可讀性
音樂與娛樂網站需要記憶點，但超大字級、動態與非常規網格若缺乏控制，容易讓導覽與內容閱讀變得困難。
設計目標
創造衝擊感，但不讓使用者迷路
設計目標是在保留表現力的同時，維持清楚入口、可讀層級與跨螢幕尺寸的響應式行為。
關鍵設計決策
以受控對比作為視覺規則
- 使用超大字級作為品牌錨點，再搭配刻意留白避免視覺噪音。
- 分別規劃桌機與手機網格邏輯，讓品牌識別在不同 breakpoint 都能成立。
- 在周圍版面更實驗的同時，保留導覽與 CTA 的可預期行為。
主要畫面展示
字體、層級與響應式網格行為
畫面組合展示同一套視覺識別如何從大型桌機構圖轉換到更緊湊的手機版面。
UI／網頁設計案例
跨桌機與手機的響應式表現力
網頁設計重點是在不同 breakpoint 調整版面密度、字級與影像節奏，同時維持一致情緒。
前端原型案例
將動態作為敘事節奏
使用 GSAP 與 ScrollTrigger 編排滾動段落，讓動態支援故事節奏，而不是成為純裝飾。
- 滾動驅動動態控制使用者遇到關鍵識別畫面的時機。
- 動態系統綁定版面結構，讓實作更容易維護。
回饋檢查聚焦於視覺方向是否能傳達樂團個性，以及使用者是否仍能辨識導覽與內容區塊。
- 2 種 breakpoint
- 桌機與手機版面邏輯
- 12 欄
- 桌機網格基礎
- GSAP
- 動態實作工具
反思與下一步
下一版應把視覺衝擊接到轉換目標
目前網站已能建立情緒與記憶點。下一步可把識別瞬間更直接地連到聆聽、活動或商品轉換行為。
- 補上更清楚的聆聽平台與活動轉換 CTA 狀態。
- 衡量滾動動態是提升停留，還是分散導覽注意力。