Whoops 知識庫
網頁設計
網頁設計完整教學：UI/UX 流程、RWD 響應式設計、配色與字體、Figma 實作與最新設計趨勢，做出好看、好用又能轉換的網站介面。
目前分類：網頁設計16 個分類
依發布日期由新到舊
第 85–96 篇，共 102 篇
Canva Pro 進階工作流：訂閱費回本的五階段產線
把 Canva Pro 從範本工具升級成設計產線：品牌箱鎖定品牌規格、Magic Resize 一稿多尺寸、Bulk Create 批量產出，五階段工作流讓每月訂閱費真正回本。
Figma 響應式設計卡關診斷：三層病灶與修復順序
Figma 響應式設計的卡關多半不在工具，而在沒有定位問題層級：稿子不能變形屬結構層，修 Auto Layout、Constraints 與三種尺寸模式；每個斷點重抄畫板屬流程層，靠樣板與元件變體收斂；規格含糊被退件屬交付層，把行為與例外講清楚。外掛只當時間槓桿，結構過關才派得上用場，交付前以真機驗收。
Logo 標準字設計全攻略：中英文字體挑選與調整
Logo 標準字設計指南：比較中英字體、字距與光學調整，分開核對字體授權和商標條件，並用實際尺寸與媒材規劃字標、簡化版及交付規範。
網站維護費用解析：自己做 vs 委外哪個划算
網站維護費用一年從幾千到數十萬都有，價差關鍵不只在網站規模，更在風險由誰扛。本文拆解自己維護與委外的真實成本、合約必看條款、計價邏輯與預算試算，幫你算出該編多少預算才划算。
Figma 網格系統教學：Layout Grid 響應式排版
Figma Layout Guide 教學：解析 Uniform grid、Column、Row 三種格線類型與參數取捨，示範桌面、平板與手機的欄數調整方式，以及如何把格線規格交付給 CSS Grid 與 Tailwind。
免費圖庫的隱藏成本：商用授權、署名與上線流程
免費圖庫能不能商用，答案在單張素材的授權、下載方案與用途，不是網站首頁的宣傳。本篇拆解平台自訂授權、CC0 與署名義務的差異，說明人物、商標等第三方權利怎麼清，AI 圖片的來源驗證，以及壓縮、延遲載入、IPTC 授權標記與素材證據庫的欄位設計，把免費素材變成可長期使用的設計資產。
網域怎麼買？從挑選到設定的完整註冊指南
Gandi 網域註冊教學：用 Gandi 當範本帶你走完查詢、結帳到 DNS 指向，拆解買完第一個小時要做的信箱驗證、DNS 指向、WHOIS 隱私、自動續費與網域鎖四件事，挑對名稱與字尾、不再卡關。
網域註冊決策指南：你買下的不是名字，是有期限的使用權
網域註冊買到的不是名字所有權，而是一段有期限、要續約的使用權。網域申請前先過三關：命名壓力測試、後綴對準市場、用首年價加各年續約價估五年總成本；註冊人填自己名下、開自動續約，DNS 設對四類紀錄，到期與轉移規則依後綴而異；結帳前後六個檢查點十分鐘做完，決策依據一次看懂。
Figma 滑塊與輪播設計完整教學
Figma Slider 分成數值滑桿與內容輪播；比較狀態、原型轉場、鍵盤操作、減少動態效果與交付註解，避免把可點原型當成上線元件。
Figma 毛玻璃效果教學：Glassmorphism 設計指南
Figma 毛玻璃效果教學：比較原生 Glass、Background Blur 與 Layer Blur，再用透明度、邊緣和陰影做出可讀的玻璃卡片。
9 款 Figma 必裝外掛：新手設計師效率倍增神器
Figma 外掛怎麼選？依圖示、照片、去背與內容填充等任務，比較相容性、授權、更新和費用；先測需求，再建立精簡工具清單。
UI Prototype 原型設計：與 Wireframe 差異解析
瞭解 UI Prototype、Wireframe 與 Mockup 的用途差異，依驗證問題選擇原型擬真度，規劃互動、錯誤狀態、使用者測試與開發交接。