設計重點
- 版面策略：設計非對稱 12 欄網格，在打破常規的同時維持視覺節奏
- 字體排印：運用超大字級與高對比排版，建立強烈且令人難忘的品牌錨點
- 動態敘事：編排滾動驅動動畫控制段落節奏，讓動態服務內容而非裝飾
專案定位
讓樂團個性在第一眼成立的視覺網站
GalaxyBoyz 以樂團個性為核心。我用大字、強烈構圖與滾動動態，讓使用者還沒細讀內容前就先感受到品牌態度。我負責視覺介面設計、規劃桌機與手機的版面規則，並用 GSAP 與 Vue 3 實作滾動動態。
問題與目標
創造衝擊感，但不讓使用者迷路
音樂網站需要記憶點，但字太大、動態太多、版面太跳，使用者容易找不到方向，也讀不到真正的內容。目標是讓網站保持表現力，同時維持清楚的入口、可讀的層級，以及在不同螢幕都成立的版面。
關鍵設計決策
以受控對比作為視覺規則
- 用超大字級建立品牌錨點，再以刻意留白避免畫面變吵。
- 桌機與手機使用不同的網格邏輯，讓識別感在兩種尺寸都成立，而不是單純縮小。
- 導覽與 CTA 行為保持可預期，正因如此周圍的版面才能更實驗。
主要畫面展示
字體、層級與響應式網格行為
這些畫面呈現同一套視覺風格，如何從桌機的大構圖轉成手機上緊湊但仍有個性的版面。
網頁設計案例
跨桌機與手機的響應式表現力
版面密度、字級與圖片節奏會隨螢幕尺寸調整，但整體情緒維持一致。
動態設計案例
將動態作為敘事節奏
我編排滾動段落，讓動態跟著內容節奏出現，而不是只做表面裝飾。
- 滾動動態用來控制使用者什麼時候看到關鍵視覺畫面。
- 動態與版面結構綁在一起，後續比較容易維護。
以下是我對自己設計所做的檢查，不是使用者測試的發現：視覺是否傳達樂團個性，以及在這樣的視覺之下，導覽與內容區塊是否仍然找得到。
- 2 種 breakpoint
- 桌機與手機版面邏輯
- 12 欄
- 非對稱網格基礎
- 滾動動態
- 敘事節奏控制
反思與下一步
下一版應把視覺衝擊接到轉換目標
目前網站已經能建立情緒與記憶點。下一步是把這些視覺亮點更直接地接到聆聽音樂、查看活動或購買商品等行動。
- 補上更清楚的聆聽平台與活動 CTA 狀態。
- 檢查滾動動態是幫助使用者停留，還是反而干擾導覽。