7月超實用設計工具大合集,包含色彩、網頁、字體等,快碼起來!

隨著工作場景的變化，我們很清晰地看到如今的設計、開發和協作開始全方位向著遠程協同這一場景靠攏。這種情況在這些新晉的設計工具上體現得非常明顯。無論是最新的設計資源合集Webdesign Toolbox還是新晉的開發協同代碼工具 Code Stream，都體現出這樣的特點。在這一期的設計圈乾貨大合集當中，還有很多有用、實用的設計工具，比如色彩管理工具 Litur，超強大的網頁主題編輯器 Blocksy Theme，最新的字體，等等等等。接下來，我們就一起來看看吧 ~

Webdesign Toolbox

網站連結：https://webdesigntoolbox.com/

Webdesign Toolbox 是一款針對設計師和開發者的實用工具和資源合集，它最大的優勢在於，其中的內容都是經由專業人員精心挑選，並且其中的工具都是經過驗證的可靠選擇。這個合集當中，工具涵蓋了設計、開發、版式、UX、工作流等多個領域，並且還在不斷地增長中。

Litur

網站連結：https://litur.app/

Litur 是一款實用性超群的顏色管理工具。使用它來查找和收集顏色樣本，創建自定義配色方案，甚至根據可訪問性標準檢查來檢查配色是否易用、可用。這款應用可在移動端和 Mac 上使用。

Pure CSS Halftone Portrait from JPG

網站連結：https://codepen.io/thebabydino/pen/LYGGwrm

Pure CSS Halftone Portrait from JPG 是來自 Ana Tudor 的一款工具，它展示了如何更改圖像的視覺效果，如何將圖片變幻成真正的半色調視覺效果。這段代碼適用於彩色和黑白的圖像。

Formbutton

網站連結：https://formspree.io/formbutton

Formbutton 是一款簡單且可自定義的彈出式表單。現在很多網站都會使用彈出式表單來連接不同的服務，例如Google Sheets和MailChimp，這款工具非常實用並且設置簡單。

Oh My Startup Illustrations

網站連結：https://ohmystartup.club/

Oh My Startup Illustrations 是一項矢量插圖服務，分為幾個類別，主要針對初創團隊，並且貼合當下流行的風格。

Blocksy Theme

網站連結：https://creativethemes.com/blocksy/

Blocksy 是為非開發人員設計的 WordPress 主題。這是基於最新的古騰堡（Gutenberg）平臺設計的視覺主題，它可以與其他編輯器一起使用，並允許用戶在視覺上自定義幾乎所有內容。

1mb

網站連結：https://1mb.co/

1mb是代碼編輯器你可以在其中創建一個包含自定義域和SSL的靜態網站。這個編輯器主要在瀏覽器中使用，所有內容都保存在雲端。

Editor X

網站連結：https://www.editorx.com/

Editor X 是一款仍然處於測試階段的網站搭建工具，將先進的設計和原型設計功能與安全的主機託管和業務解決方案結合在一起。在非常直觀的設計工作區中，將想法直接轉化為生產力。

Grid Cheatsheet

網站連結：https://yoksel.github.io/grid-cheatsheet/

Grid Cheatsheet 是基於W3C CSS網格規範的視覺和代碼的自查手冊。它另外一個好處在於，你可以通過這份手冊來了解這些準則，讓它更易於理解和使用。

CodeStream

網站連結：https://www.codestream.com/

CodeStream 是專門 為Web設計人員和開發人員當下全新的工作流而設計的工具。它是為遠程團隊設計的，它可以在集成開發環境中直接檢查代碼而不會中斷開發流程。

Tutorialist

網站連結：https://www.tutorialist.io/

Tutorialist 匯集了網絡上能找到最佳的開發類的教程。所有教程都是 YouTube 上的免費視頻（所以你需要梯子）。

VoiceText for Slack

網站連結：https://voicetext.presence.so/slack

VoiceText for Slack 是另外一個能夠提高你在家辦公生產力的工具。它與Slack集成在一起，並使用你的頻道來轉錄的文本發送消息。這是一個免費的工具，支持18種語言。

Feature Peek

網站連結：https://featurepeek.com/

Feature Peek 是一個給開發者的工具，可幫助你按需獲取前端環境信息，並在開發過程中儘可能收集團隊反饋。它是與GitHub一起使用的，還可以與其他各種工具一起結合起來發揮作用。

Linear

網站連結：https://linear.app/

Linear 是一個給團隊使用的問題跟蹤應用，主要在 Mac 平臺使用。它旨在幫助團隊簡化軟體項目，進行設計和開發衝刺，執行任務，並且可以與Github，Figma和Slack等工具集成。

Hosting Checker

網站連結：https://www.rishavapps.com/hosting-checker/

Hosting Checker 解決了一個常見問題–讓客戶知道誰在託管網站。Hosting Checker 會顯示用戶託管服務的提供商和網站使用的IP位址，以及其伺服器計算機的位置以及主機的聯繫方式。它比其他類似工具快82％。

Spike

網站連結：https://spike.sh/

Spike 會在客戶聯繫你之前就提醒你網站事件，創建警報並立即提供電話、簡訊、電子郵件或Slack通知。這款工具提供了很多不同的提醒類型，您可以在問題出現苗頭的時候就獲得通知。

Magnus UI

網站連結：https://magnus-ui.com/

Magnus UI 是一個可以幫你在 React 中構建高度一致的用戶界面的 UI 框架。它帶有大量的組件，可以自定義設計。

SpreadSimple

網站連結;:https://spreadsimple.com/

SpreadSimple 這款工具可以使用 Google Sheets 中的數據來創建有樣式的網站，這些網站具有過濾，搜索，排序，添加購物車，通過表單收集訂單等功能。更新表單就可以並立即在網站上查看變化。

WebP vs. JPEG

網站連結：https://siipo.la/blog/is-webp-really-better-than-jpeg

谷歌開始建議你使用的 WebP 圖像格式來減少加載時間，因為這個格式的文件尺寸更小。但是WebP是否比傳統的JPEG更好？開發人員Johannes Siipola測試了不同大小的文件類型來回答這個問題。答案有些複雜，但看看會對你設計和開發更好。

Oh Dear

網站連結：https://ohdear.app/

Oh Dear 是一個網站監視工具，可以幫你對網站進行檢測。

Airconnect

網站連結：https://www.airconnect.tech/

Airconnect 是國外大熱的 Zoom視頻會議的替代產品，它的工能更加豐富，可用於你的企業和品牌，並提供自定義標題，顏色和界面。這款工具不僅包括視頻通話功能，還包括客戶訪問其數據監測並提供全自動的新用戶引導流程。

Free Faces

網站連結：https://freefaces.gallery/