網頁設計資源彙整

Tuts+ 是一個老牌的設計教學網站，包含平面設計、網頁設計、程式開發等等的大量教學。

W3School 是一個非常完整，且內容遵循最新標準的網頁前端知識庫，所有的 HTML / CSS / JavaScript 基本語法都能在這裡找到。 網站內也有語法教學與線上測試工具。

同樣也是大量收錄網頁語法資源的網站，但是簡體中文版。

最有名的網頁設計與開發線上學院，可以從基礎 HTML & CSS 開始學起，註冊後網站即會提供自動化課程線上操作。

一個專門提供各類專領域線上教學的平台，其中也包含 Computer Programming 的系列課程，有不少前端程式的教學。

另一個主打網頁設計與網頁開發語言的線上學習平台，課程內容包含 CSS3, RWD, HTML5, JavaScript 與 iOS 開發等等。

完整介紹 Javascript 各種奇異特性，並給予讀者開發引導的網站，內有中文版可選擇。

最有人氣的設計靈感網站，許多神級設計師會將自己的作品上傳這個網站分享給大家，是挖寶的好地方。

近年來非常火紅的作品集網站，整體素質水準非常高，常常有令人驚豔的作品出現。

非常專業的網頁與介面設計師交流平台，有許多不錯的商業設計案例。

每日分享各類創作主題，有設計、插畫、LOGO、名片與網頁等等，非常豐富。

蒐集各類 RWD 響應式網站的設計案例，網站收錄內容經過嚴選，每個作品都非常優秀。

Star Gallery 星辰網頁蒐藏是由 <a href="https://the-allstars.com" target="_blank">Allstars</a> 所經營建置的網站設計資料庫。

蒐藏許多網頁設計、CSS 模版或CMS模版參考的網站，收錄的作品都很有獨特風格。

這個網站定期蒐集優秀的網站設計案例，並交由網友們投票，選出得獎者，是追蹤最新網頁設計趨勢的重要平台。

此網站蒐集的大多是具有質感的形象或廣告網站，很適合做企業形象的設計者前來參考。

提供許多精美的 UI 設計案例參考與靈感啟發，蒐藏的作品設計水準不錯，很有獨特風格。

各大產品的 Onboarding 設計參考。

Muzli 是一個 Chrome 外掛，以圖卡方式將圖文整理在同一個畫面裡，方便使用者在開新分頁時可以快速檢視，看看有沒有任何令你有興趣的主題。

相較於 dribble 或 pinterest 上許多分享太過華麗卻不實用。Lookup.design 是一個收集現實案例的網站，並且是以的UI元件為主，可以快速了解某家公司怎麼設計的，也可以對於產業慣例有比較好的掌握。

台灣的 UX Podcasts 節目與報導，分享各國 UX 留學經歷、工作故事與設計新知。節目內容則訪談許多 UX 設計人員與實務案例。

最知名的 CSS 框架，被全世界廣泛的使用，可以用簡單的語法製作各種頁面排版、按鈕與表單特效等，適合作為各類 Web UI 介面的底層。

由 YOOTheme 出品的另一套強大的 CSS 框架，功能更多更完整，且在部分元件的間距編排上比 Bootstrap 更優美，適合作為形象佈景的底層框架。

由 Zurb 出品的老牌 CSS 框架，在全世界也有許多使用者，在部分技術上比 Bootstrap 更難掌握一些，但靈活性也更強大。

強調要以非常語意化的語法來編寫 Web 介面的框架，其語法都較長也較繁瑣，盡量避開無意義或難懂的簡寫。

Flat UI 是一款基於 Bootstrap 的扁平化前端 UI 工具包，設計非常清新且漂亮，可以給原本的 Bootstrap 耳目一新的感受。

由 Yahoo 出品的 CSS 框架，結構簡單小巧，外型也很清新。不過功能也真的非常簡潔，需要自行編寫更多功能上去。

將 Bootstrap 轉成 Google Material Design 風格的前端框架。

標榜用 Compass 編寫的 CSS 框架，可以大幅增進開發速度。

超級簡潔的 CSS 框架，如同其名一樣，只給你最簡單的功能，讓你自行描繪網站的輪廓。

由 Google 出品的 Material Design 專用圖示集。

充滿大量圖像設計素材的搜尋引擎，有不少向量圖型可以下載來使用。

專門提供 Sketch 軟體可用模版與素材的網站，收錄許多美麗的樣板。

收藏各類免費網頁與UI設計的素材，有 PSD, AI, Sketch, 程式片段與 Web Font 等等相關資源。

非常多扁平化 Icon 圖示可以使用 ，適合作為介面設計的圖示來源。

很有名的字型圖示的提供者，有大量且完整的向量圖型文字可以選擇。

另一個知名的圖示字型提供者，同樣也是可縮放與變色的向量圖示。

老牌圖示搜尋引擎，收錄大量的付費與免費圖示，使用前請注意各個作者的授權規範。

老牌的 CC0 圖片提供者，每週更新十張圖片，其選的圖片都很空靈、優美，充滿意境，適合作為大橫幅圖片使用。

一個 CC0 圖片搜尋引擎，收錄了許多網站的 CC0 圖片，並用 tag 分門別類，方便尋找想要的圖片。

非常大量的 CC0 圖片，除了各家分享的高品質 CC0 圖片外，也包含不少基本的去背物品等圖片，適合用在商業文章或企業簡介中。

非常大量的 CC 授權圖片，不只有 CC0 而已，也另外蒐集了其他不同的 CC 授權圖片，因此能找到的題材更為多樣化。但非 CC0 的圖片記得要注意授權條款喔。

許多高水準的平面設計與網頁設計素材，各類特殊設計字體等，免費與付費皆有。

將 Dribbble 上許多設計師分享的免費素材檔案分門別類整理起來，包括 HTML/CSS、背景、圖示集、字型、PSD、使用者介面、網站模版等等。

來自莫斯科的設計工作小組 Kit8 善於設計扁平化風格的插圖，您可以根據自己的設計需求購買圖片並下載。

可商用扁平化圖示免費下載！適合用於網站、應用程式或簡報設計

提供大量3D人物與物品模型，可以擺出自己想要的姿勢後輸出成圖片，或匯入 blender 編輯。

Sapiens 是一個很有趣得插畫素材網站，可以自訂插畫的各種元件、風格與顏色，自己組裝需要的插畫圖案。

Streamline 提供了各種風格不同的線條式插畫與icons，可應用在不同的設計用途。

提供各種插畫、Mockups 與 UI 素材，不只品質非常高，很多資源甚至提供系列套組，可以一次取得需要的素材組合。

各類免費又優質的 Bootstrap 佈景主題，可直接下載來修改使用，適合形象網站。

提供各種經過調整顏色的 Bootstrap 版本，可以套用在已有的 Bootstrap 網站上，令人耳目一新。

提供付費 Bootstrap 佈景的網站，前後台界面都有，每個佈景風格迴異且多樣化。

提供付費 Bootstrap 佈景的網站，品質非常優良，包含形象網站布景與高規格的後台介面佈景，很適合系統開發使用，

提供各類純 CSS 模板下載使用，風格也是以形象網站為主。

知名的佈景主題販賣平台，匯聚各家佈景，設計水準優良。無論要 CSS 模板、CMS模板還是各類設計用素材都有販售。

一款給不會寫網頁程式但又有網站需求的線上個人架站服務。

一款給不會寫網頁程式但又有網站需求的線上個人架站服務。

一款給不會寫網頁程式但又有網站需求的線上個人架站服務。

最知名的靜態網站產生器，GitHub 官方就是以這一套為範例，需在 Ruby 環境運行。

PHP 語言的靜態網站產生器，功能強大，但操作也較為複雜，由 Symfony 框架驅動。

PHP 製作的 Prototype 工具與靜態網站產生器，也可以製作超簡易動態網站，操作簡單，可以很快就上手，適合做小型文件網站或是系統 Prototype。

更多不同語言的靜態網站產生器可供參考

更多不同語言的靜態網站產生器可供參考

一款 Bootstrap 線上編輯器，功能強大，可以支援團隊一同協作。

一款 Bootstrap 線上編輯器，功能強大，可以支援團隊一同協作。

由台灣人開發的強大HTML頁面產生器，可以高效率的進行前端開發與設計工作，自動整合許多流程。

Sketch 是一款輕量化但功能強大的介面繪製工具，比起 Photoshop 的繁瑣，Sketch 非常完美的整合 UI、Icon、與螢幕顯示元素的設計工作，讓設計師可以更有效率的工作。

Lunacy 是一套可以相容並打開 Sketch 檔案的 UI 繪製工具，雖然目前功能較少一些，但是 Sketch 在 Windows 上不錯的替代用品。

可以跟 Sketch 整合，工程師與設計師溝通版面的好用工具。

Avocode 是一款 photoshop 增強功能，主要用於將圖層屬性轉換成 CSS 樣式查看，只需點擊即可顯示和預覽圖層的樣式、字體、顏色等等，查看圖層 CSS 變得很方便。

一款將前端開發工作流程整合的工具，可以自動化編譯、壓縮與處理前端專案的 CSS, JS, Script 等等。

一款將前端開發工作流程整合的工具，可以自動化編譯、壓縮與處理前端專案的 CSS, JS, Script 等等，是繼 Grunt 之後的後起之秀。

可以跟瀏覽器整合，每次編輯儲存之後就自動刷新網頁頁面的工具。

Storybook 是一個開源工具，可以讓您預先編寫 UI 元件庫的使用說明與範例展示。您可以將團隊內的共用 UI 規範作成線上文件讓工程師快速參考。

背景視差特效工具，特色是可以支援影片與 Youtube 的背影播放與視差

功能簡單但強大的視差捲動外掛，不只背景，還可以支援 foreground div 的視差

功能簡單但強大的視差捲動外掛，不只背景，還可以支援 foreground div 的視差

用來製作滑鼠移動到卡片上時，能夠 3D 微調方向的外掛

一個可以用來作滾動翻頁與動態特效的JS套件

專門做整頁向下切換翻頁的 JS 套件

也是一個滾動切換外掛，但是他的特色是左右會用不同的方向翻進來，創造出非常有趣的效果

Parallax.js 也是一個視差外掛，但他不是用在滾動上，他的特色是根據滑鼠移動來位移 HTML 元素，可以創造出很有趣的互動效果。

Headroom 可以做出往下滑就隱藏 選單/header ，往上滑就重新出現的效果，類似手機上常見的介面

可做出如同星空般的視差效果

另一個可做出如同星空般的視差效果

也是一款滾動特效外掛，特點是完全跟著滾動的數值更新位置，且

GSAP 是 GreenSock Animation Platform 的簡稱，是一套專門處理動畫與特效的 JS 套件。功能非常強大，是很多特效網站採用的工具。

Waypoints 是一個方便的外掛，可以在滾動到特定元素時，執行你需要的自定程式碼。用在滾動後執行任何動作非常方便。

WOW.js 非常熱門，滾動到特定元素後會出現在頁面上，就這麼簡單。通常會搭配 animate.css 製作滑入特效

非常有名的動畫CSS工具，只要用類似 fadeInUp 這樣的 CSS class 就能製作各種動畫入場或離場特效，通常會搭配 wow.js 使用。

可以在頁面與圖片尚未完全載入時，預先顯示一個全頁讀取畫面與進度的工具。

很多很多的純 CSS loading 特效，適合用在全頁覆蓋或小區域讀取

也是一個建立全頁讀取覆蓋的套件，可以自定中間的內容 HTML，搭配 SpinKit 可以做出非常美觀的讀取畫面

一系列純CSS非常美觀的 loading icon，採用幾何造型，充滿現代感，適合與全頁讀取搭配使用或放置在小空間中。

全頁讀取覆蓋畫面，採用 Load Awesome 的 icon

功能極為強大的 2D WebGL 繪圖引擎，可以用來作多種動態特效與動畫。

Lottie.js 是 Airbnb 出品的工具，可以把 Adobe After Effect 製作的動畫轉成 HTML5 動畫。

Three.js 是功能極為強大的 JS 3D 引擎，可以用來創建多種 3D 特效，甚至載入 3D 模型在 Web 上顯示。是目前的主流 3D 函式庫。

A-Frame 是一套在HTML上實現3D/AR/VR的工具，可以支援 Quest, Rift, WMR, SteamVR, mobile, desktop 等裝置。

p5.js 也是一個 Canvas 繪圖工具，將許多繪圖、數學、物理模擬等函式封裝好讓我們可以直接使用，如此一來我們可以在享受 Canvas 繪圖的同時不用費心思處理瑣碎的工具！

Konva.js 是一個強大的 canvas 繪圖函式庫，主要功能是讓你創建 Canvas 上的繪圖版、圖層、拖拉工具等，適合用來作 Web 繪圖軟體工具的底層。

Gridster.js 可以建立出一個類似 Windows 動態磚概念的格狀版面，支援手動拖拉大小與位置交換，適合用在設計 UI 上。類似的套件還有 vue-grid-layout 與 react-grid-layout。

用來製作書籍翻頁特效的 jQuery 套件，支援左右與上下翻，翻頁內容可以是 HTML

功能強大的動畫工具，可以和CSS3變數、SVG、DOM 之類的元素互動，製作出高效能且平滑的動畫效果。

這個網站可以快速的輸入關鍵字與要偵測的網址，就能知道這個網址在Google與Yahoo中特定關鍵字的排名狀況。還可以將這個查詢結果頁面分享給其他人看。

這是比較早期的排名查詢工具之一，也是簡單的輸入網址與關鍵字就能查詢Google與Yahoo的排名囉。除此之外這個網站還能偵測網站的 PageRank 值。

CuteRank 是桌面軟體，安裝起來後可以查詢多種搜尋引擎的排名，包含 Google / Yahoo / AOL 等等，可以選擇搜尋特定國家地區的排名，還能互相比較，是一套蠻完整的查詢工具。

Google 提供的網站內容分析工具，可以得知自己網站的搜尋分析與收錄狀態，也可以測試 Google 是怎麼觀看你的網站的。

PageSpeed Insights 會分析網頁內容，並提供如何加快網頁載入速度的建議。

Google 所提供的行動裝置相容性測試工具可以幫助網站設計者測試自己的網站是否適合手機瀏覽，並且列出各種問題與改善方案。

Screaming Frog 是一個安裝在電腦上執行的全站分析工具，可以幫助您了解網站架構及網站內部連結的配置，是優化中不可缺少的好工具。

功能強大的SEO追蹤服務，可以每日追蹤自己與對手的SEO效果或分析關鍵字。

一個書籤 RWD 檢測工具，可以快速測試某個網站在多種螢幕裝置下的檢視效果。

(Chrome) 立即檢視頁面上的網頁字體是什麼，只需要將滑鼠游標懸停在網頁中字體的上方，就可以瞭解該字體的相關信資訊。

(Chrome) 快速了解一個網站的技術資訊，例如主機程式、CMS 類型、還有用了哪些前端框架等等。

(Chrome) 可以讓你快速檢查關鍵字在網站中的位置。

(Chrome) 快速檢查關鍵字在多個網站中的位置，支持多個國家。

(Chrome) 顯示當前網頁的 Google PageRank、Alexa、Compete、Quantcast 排名，以及 IP 位置、Whois、SNS、Cache、backlinks 等。

最知名且擁有龐大社群與支援的輕量級程式編輯器，有大量外掛可以增強其功能，但中文支援差強人意。

由 GitHub 開發，採用 Web 技術編寫的編輯器，功能更為強大，但效能比 Sublime 稍差一些，也有大量社群支援。

功能極為強大完整的程式碼編輯器，可以當半個 IDE 使用，當然也較為肥大一些，支援中文 Big5 與 UTF-8 之間的轉換。

微軟推出的強大編輯器，擁有豐富的功能與外掛。

專門為了 Web 語言而開發的免費 IDE，是 Eclipse 的家族成員之一。

IDEA 系列成員之一，專門開發來支援 Web 前端開發的強大 IDE，需要付費，但近年來頗受好評，Opensource 專案或教育專案有機會免費使用。

IDEA 的完整版全功能 IDE，或者任何一套後端主力 IDE 如 PHPStorm、Rubymine 或 PyCharm 等等，都能完整支援前端開發工作。

Nuclide 是 Fackbook 開發的開源免費 IDE，與 Atom 一樣採用 Electron 技術，是專門為 React 與 Hack 而生的 IDE。

線上 Javascript 測試沙箱，可以編寫測試程式碼或範例給他人觀看，或是嵌入網頁作為文件使用。

線上 CSS 測試沙箱，可以編寫測試程式碼或範例給他人觀看，或是嵌入網頁作為文件使用。

簡單好用的線上即時假圖產生器，只要輸入對應網址並插入在 img 標籤中就能使用

簡單好用的線上即時假圖產生器，以 Unsplash 內的 CC0 圖片為主，會隨機產生相關圖片作為設計填塞用。

可快速取用的線上隨機大頭貼工具，方便設計 UI 或前端介面時替刻插入 Avatar，最大的特色是支援用自訂字串取得固定的頭像。

快速產生我們稱為 Lorem Ipsum 的無意義英文假文用來填塞頁面用。

以蘋果日報、賴和與徐志摩為語料庫的中文假文產生器，內容較具可讀性，但一樣沒意義（笑）。

非常好用的圖片壓縮服務，可以快速將各種圖片檔轉成網頁最佳化的品質與大小。

Biteable 是一個，快速、簡單，不用太多學習就能立刻製作形象影片的的影片套版製作工具。

中文假文產生器，採用比較近似真實語法的語料庫，計算詞頻後呈現，可以產生出比較類似真實文章的斷行效果。

使用易經或三字經生成的假文，念的通順但又沒有意義，適合用來填塞畫面空間語標題。

Animatron Wave Video 是一個非常適合行銷人員快速建立行銷影片的工具，他準備好了非常多可用素材與動畫特效，可以直接拖拉製作影片。而他的 Studio 則可以建立 HTML5 動畫，直接放到網站上執行。

商業性的靈感集合帳號，藉由設計師主動標註 LOGOBOOK 的帳號，蒐集全世界教育與啟發性的設計師 Logo 作品。

蒐集各種 Logo 的靈感激發IG帳號，和 @web.inspirations @type.inspirations 是同品牌帳號。

蒐集各種 Web/UI 設計的靈感激發IG帳號，和 @logo.inspirations @type.inspirations 是同品牌帳號。

蒐集各種字型設計的靈感激發IG帳號，和 @logo.inspirations @web.inspirations 是同品牌帳號。

商業經營的UI設計蒐集帳號，Po文頻率非常高，蒐集許多國外流行的網頁或 APP UI 視覺設計。

較專注蒐集 dashboard UI 介面的設計，多為功能性APP的設計分享。

商業經營帳號，透過設計師作品標註，分享較多風格強烈的 UI/UX 設計。

每日分享一篇UI或web設計，注重令人亮眼的不同視覺風格分享，較多影像視覺運用。

商業經營帳號，每日分享獨特的UI或web設計，蒐集較多運用2D/3D插畫的視覺風格。

網頁與UI設計蒐集帳號，設計師於網站提交設計項目，挑選獨特的視覺風格與介面均衡地發布，三天分享一個原型操作影片。

網頁設計蒐集帳號，每日提供國外流行的商業網頁設計，風格強烈且配合流行，有極多討喜的風格可以參考。

商業性帳號，位於歐洲(芬蘭、德國、法國、丹麥)的網頁設計代理商，蒐集分享網頁設計作品。

商業性帳號，由@akezmedia經營，除了有規律地分享蒐集的網頁與UI設計，會提供知識性的問答或教學，學習UI設計的技巧，例如如何決定light/dark模式的顏色(連結見內文）。

商業性品牌帳號，位於比利時的設計代理商，分享該代理商的案例作品。

中文與英文的隱私權條款範例模板，以《政府網站版型與內容管理規範》中為基礎的隱私權政策範本，稍微調整過移除不適用一般企業的項目，更改網站名稱即可使用。

本文件提供一個易讀且清晰的常用中文網頁排版指南，供網頁設計師參考。