GalaxyBoyz

專案定位

讓樂團個性在第一眼成立的視覺網站

GalaxyBoyz 是一個以樂團個性為核心的網站。我用大字、強烈構圖和滾動動態，讓使用者還沒細讀內容前，就先感受到品牌的態度。

角色與範圍

負責視覺 UI、響應式網格與動態原型

我負責設計視覺介面、規劃桌機與手機的版面規則，並用 GSAP 和 Vue 3 實作滾動動態。

問題背景

強烈視覺很容易犧牲可讀性

音樂網站需要讓人有記憶點，但如果字太大、動態太多、版面太跳，使用者很容易看不懂要去哪裡，也可能讀不到真正的內容。

設計目標

創造衝擊感，但不讓使用者迷路

我的目標是讓網站有衝擊感，但不要讓使用者迷路。所以導覽、段落層級和手機版面都要保持清楚。

視覺洞察

視覺衝擊必須建立在方向感仍清楚的前提上

強烈字體和動態可以抓住注意力，但使用者還是需要一些穩定的線索。所以我用導覽、留白和段落節奏當作基準，讓比較實驗的視覺不會失控。

困難與取捨

在差異很大的螢幕尺寸中保留識別感

最難的是桌機版要夠大膽，但手機版不能變得難讀。我分別規劃桌機和手機的網格，並讓動態配合段落出現，而不是只把動畫當裝飾。

關鍵設計決策

以受控對比作為視覺規則

• 用超大字級建立品牌記憶點，再用留白避免畫面太吵。
• 桌機和手機使用不同版面規則，讓品牌感在兩種尺寸都成立。
• 版面可以比較實驗，但導覽和按鈕仍然保持好找、好理解。