我自己以前在收藏好用的工具網站或是好看的網頁設計，都是直接放在瀏覽器的書籤列中，並依據用途或主題放在不同的資料夾。但久而久之書籤一多就會非常難找資料，尤其是 Behance、Dribble、Awwwards…等等的網站又太多了，想到某個喜歡的收藏就得要去找它是在那個網站被收藏的。因此我就用 Notion 統整了一個 Design Resource Library，這個筆記也有公開連結分享給大家：點此，按下右上角的 Duplicate 也能複製整份筆記，歡迎取用！
而相信大家已經很瞭解 Notion 這個超火紅的筆記軟體，因為我算有點資料整理魔人，所以是資料庫功能的超級愛用者！某天在 instagram 上看到了Ning’s UI Design Resource Library 這個筆記，就也想來自己客製化一個跨平台 Web Design Resource Library！
Design Reference 資料庫
首先在 Notion 中建立一個資料庫，並設置「名稱、網址、標籤、公司」等等欄位。「標籤」欄位的目的是讓我在收藏好看的設計後可以依照他是形象網站或是具有 3D 元素之類的加上註記。在編輯的時候可以使用 Table view 以方便編輯，而為了好看一點也可以在每個 page 中加上一張網頁截圖並轉為 Gallery view 喔。
Chrome extension: Save to Notion
不過身為工程師當然是懶得每次都手動加入，所以想推薦一下「Save to Notion」這個 web clipper 瀏覽器擴充，可以在瀏覽器中直接將網頁的各種資料擷取下來。其實 Notion 官方也有做一個 Web clipper 擴充，但我更推薦 Save to Notion，因為它可以依照你的資料庫欄位客製化。
透過 Save to Notion 連接到自己的 Notion 後，只要像這樣將在喜歡的網站點擊擴充，他就會自動的加入到你的資料庫中，也能在網站中直接編輯資料庫欄位內容，甚至連網站圖片也會擷取下來，超方便！
Design Studio 資料庫
除了收藏一些喜歡的網站作品以外，我平常也會關注國內外的網頁設計公司，觀摩他人的酷酷作品。因此我也建立了給「設計公司」的資料庫，並跟 Design Reference 資料庫建立關聯 (relations)，這樣子在 Reference 資料庫就能看到「這個作品是由哪間公司做的」，而在 Studio 資料庫則可以看到「這間公司有哪些酷酷的作品」。
建立 relation 在 Notion 算是比較進階的功能，好在我有學過 SQL 所以對於關聯式資料庫還算了解，這部分如果有同學不太熟悉的話可以再聯絡我。👌
工具類網站書籤列
除了收藏好看的設計之外，我也會將一些工具類或是學習類的網站使用文字+連結的方式收藏起來，並依照他的用途去做分類，也一併在這邊分享幾個吧～
- Iconify：統整了像是 Material Design、Heroicons、Bootstrap Icons……等一卡車的icon庫，可說是 icon 大禮包
- Color Leap - History's Palettes：根據不同時代做出符合當時風格的色票
- NIPPON COLORS：用日本傳統色所做的色票
- MagicPattern toolbox：可以做出許多像是毛玻璃、漸層、色塊、噪點的 pattern 產生器
