五倍紅寶石・專業程式教育

五倍紅寶石 ・專業程式教育機構

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

By Debby・4月 21 2021・技術文章
網頁設計師的六個實用小工具分享

Photo by Alexandru Acea on Unsplash

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

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

話不多說,正文開始!

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

HTML COLOR CODES

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

Color Picker

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

Tetradic Colors


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

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

Color Chart

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

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

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

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

WebGradients

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

PX to REM converter | nakoCalc

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

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

Type Scale - 文字規範制定

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

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

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

文章預覽

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

Smoot Shadows

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

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

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

Design Systems for Figma

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

是一個靈感滿滿的搜集網站~!


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

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


註1:常見的配色方法,可以從色環上找到兩點直線的顏色即是互補色,或是三點等距產生的顏色所產生的三次色。

更詳細的色環與配色,歡迎查閱:設計配色完整攻略:色彩意義、色彩理論、色彩心理學 | shutterstock