網頁設計師的六個實用小工具分享

Photo by Alexandru Acea on Unsplash

筆者身為網頁設計師一半設計師、一半工程師，蠻多時候會花時間在設計稿與 CSS 樣式調整，以下我將分享工作中常用的小工具網站，減少設計稿和網頁切版的落差。

如果你有推薦的工具也歡迎來信和我交流 😉

話不多說，正文開始！

HTML COLOR CODES - 線上配色、選色小工具

HTML color codes 基本的功能除了可以在首頁色盤上選色外，另一個實用功能是 Color Picker ：他可以在色盤上選色後，在下方的選單選擇配色方式，例如 Complementary (互補色) / Analogous (類比色)等，就會顯示對應的色票。

頁面底下也附上這些配色原理，例如 Tetradic Colors (矩形配色) 上相應另外三個顏色[1]，透過這樣的些配色方法，能夠產生出有趣的色彩配色。

筆者較常使用的功能是 Color Chart：

此功能收錄 Flat Design / Material design / Web safe colors 的色票，如果臨時想找一個主色或配色，能夠試著使用 Flat Design 或 Material design 的色票！他們的色彩和諧度很高，使用兩色的配色後，顏色上沒有太大的問題。

CSS Gradient - 線上漸層色與 CSS 產生器

CSS Gradient 提供一個可以線上拉漸層色的工具，讓你可以在網頁上拉出漸層色後，下方產生出 CSS，即可應用在網站上。

想要美麗的漸層色票？分享另一個網站：WebGradients

WebGradients 列出優美的漸層色，並同時提供 CSS / Photosop 檔，讓使用者能夠自由存取，光看到這些漸層色就讓人感覺心情愉快呢！（偷偷說，這裡的漸層色配色也是我很常參考的靈感來源！想像這些美麗的漸層色上面加上白色字，是不是很美呢？ 🌸 )

PX to REM converter | nakoCalc - Pixel 與 REM 換算工具

網頁設計師蠻常會需要確認頁面區塊的距離、單位、大小等，而 Figma 或 一般標註工具使用的單位是 Pixel ，但如果是使用 Tailwind CSS 或 Bootstrap 這樣的 Framework 多是以 REM 、 EM 為單位，這時候可以使用這個網站換算 Pixel 和 REM 單位。換算完 REM 後，再到 Tailwind CSS 查詢對應的距離。（算是筆者在切版時最常使用的網站！）

另外網站還有提供其他單位換算工具喔！

Type Scale - 文字規範制定

在製作網站 Design Guideline 時，會需要制定文字的標題、副標 (H1、H2、H3) 大小；像是需要多大的標題？標題與副標的大小比例？

Type Scale：他提供黃金比例、Perfect Fourth、Augmented Fourth 等比例，可以在選取後立即的看到文章的標題和文章內文的文字比例。

筆者在剛開始建立規範時，也是透過這個網站免去糾結各種標題的大小設定，如果你也在設計規範，不妨試試看使用這個網站喔！

Smoot Shadows - 做出柔和的陰影吧！

同樣是在設計稿轉到 CSS 時，經常會遇到陰影呈現的問題，CSS 提供的 box-shadow 屬性相當多，前端工程師或設計師可以利用數值玩出不同的漸層樣式，只是每次都要條數值有點不夠直覺，這時利用 Smoot Shadows 這個工具，視覺化的拉出陰影的平滑程度、間距等，然後再將結果的 CSS 複製起來利用。

設計師也在網站上，試著調整出想要的陰影樣子後，直接複製中間的 CSS 給工程師，就可以立即地使用。

Design Systems for Figma - 網羅各家 Design System！

此網站蒐集了在 Figma 上各家 Design System ，設計師可以透過這些大量的設計規範，學習到如何制定規範、Components 設計、文字、顏色等。

是一個靈感滿滿的搜集網站～！

以上的工具，歡迎大家試試看！希望對你來說有幫助！

如果有任何有趣、常用的工具也歡迎 來信 或 GitHub 和我分享，或是設計師、前端工程師切版、職涯交流都歡迎～！👋