Whoops 知識庫
網頁設計
網頁設計完整教學：UI/UX 流程、RWD 響應式設計、配色與字體、Figma 實作與最新設計趨勢，做出好看、好用又能轉換的網站介面。
目前分類：網頁設計16 個分類
依發布日期由新到舊
第 73–84 篇，共 102 篇
品牌官網設計攻略：Astra + Spectra 打造形象網站
品牌形象網站怎麼做？完整教學從品牌設計 token、Astra＋Spectra 設定，到品牌視覺、RWD、Core Web Vitals 速度優化與聯絡表單，零程式碼也能架出專業形象官網。
CTA 按鈕設計：文案、對比、觸控與 A/B 測試
用可見、可懂、可信與可操作四個問題檢查 CTA 按鈕，說明 WCAG 對比與目標尺寸、GA4 曝光分母及測試條件，避免紅色按鈕或固定成效公式。
作品集網站製作的盲點：你在展示作品，對方在查核證據
作品集網站的成敗，有一半在打開架站工具之前就決定：它不是展示才華的櫥窗，而是你不在場時替你被評分的文件。先從曝光、理解、信任三層診斷卡點，把案例頁寫成可查核的證據，用一致的視覺與乾淨的圖片傳遞紀律，平台與版型放到結尾用是非題與淘汰法選擇，讓每一頁都替你回答對方的疑問。
AI 繪圖＋ChatGPT 網頁設計實戰：零背景也能上手
AI 網頁設計從需求、資訊架構到視覺與上線檢查的實作流程；說明 ChatGPT 和生圖工具各能協助什麼，以及行動版、對比度和授權的人工驗收。
作品集範本怎麼挑？六種職業的骨架結構與檢查清單
挑作品集範本前，先搞清楚它賣的是可信度還是美感。本篇用「骨架加模組」拆範本，針對六種職業給範本結構建議，附三變數決策表與十五項上線前檢查清單，並比較自架站與現成平台兩條路線。
30 款英文字體推薦與下載：襯線、非襯線到手寫體
挑英文字體不只是美感問題，更是效能與授權問題。精選襯線、非襯線到手寫體推薦，Google Fonts 與 Adobe Fonts 來源全比較，含免費商用授權判斷、字體配對與網頁載入優化，一次搞懂不踩雷。
Fonts Ninja 字體辨識教學：一秒找出網頁字型
用 Fonts Ninja 辨識網頁字體，交叉核對實際渲染、字重與行高，再確認商用授權和網站載入成本。
9 個排版設計技巧：字體、行距到視覺層次指南
用九個面向檢查網頁排版：字型、字級、行距、欄寬、層級、留白、對比、手機與字型載入，分清設計起點和 WCAG 要求。
品牌色彩挑選指南：從色彩心理學到實務應用
品牌顏色挑選指南：從品牌需求與受眾任務建立候選，檢查版面角色、文字對比、跨裝置及印刷輸出，再整理色票、用途和版本規範。
Wireframe 線框圖設計入門：網站原型規劃技巧
Wireframe 線框圖用來討論網站內容、資訊層級與操作位置。瞭解它與 Mockup、Prototype 的差異，依問題選擇保真度，並整理響應式規則、標註與交接。
Claude Code + Stitch 網頁設計：從設計稿到上線工作流
教你用 Claude Code 搭配 Google Stitch，從設計稿一路做出可上線的網頁。涵蓋分工原則、五步工作流、CLAUDE.md 規矩、行動優先與速度底線，以及上線前的 SEO 與審查檢查清單。
Figma 按鈕動畫卡卡的？流暢的關鍵在開始動之前就決定
Figma 按鈕動畫卡卡，問題常出在按下播放之前：狀態邊界沒定義、圖層命名不一致。從症狀診斷、七狀態盤點、按鈕分級，到連線、Smart Animate 與互動組件的路線選擇，再以 150 到 300 毫秒起測節奏，用驗收表把流暢變成可檢查的規格。