6月的設(shè)計圈干貨如期而至！這一期的設(shè)計干貨有不少非常有用的實用小工具，對于喜歡鉆研前端的設(shè)計師而言，這一期的工具和素材會非常的好玩：

6月精選工具

CODEWELL

Codewell 是一項獨特的服務(wù)，可以幫你借助真實的模板快速學(xué)習(xí)、練習(xí)和提高 HTML 和 CSS 的技能。在真實的模板之下來進(jìn)行練習(xí)帶來的好處是顯而易見的，這款工具包含免費和收費的進(jìn)階的版本，所有的練習(xí)都在響應(yīng)式的環(huán)境下進(jìn)行。

LOOMSKD

如果你需要向你的產(chǎn)品當(dāng)中添加視頻，那么 LoomSDK 是一個相當(dāng)可靠的工具，它是完全免費的，并且能夠讓用戶直接在 Web 應(yīng)用中進(jìn)行錄制、嵌入、查看 Loom 視頻，非常方便。

PINTR NEW IMAGE

Pinter New Image 能夠?qū)?照片 快速轉(zhuǎn)換為時髦有趣的線條圖案，不過你需要上傳有著良好的對比度的圖片。下載生成的素材的時候，可以是 PNG 或者 SVG 格式。

TERMS & CONDITIONS APPLY

這是一個非常反常規(guī)的游戲，它會出現(xiàn)大量的彈出框和小窗口，而你的任務(wù)是不要接受這些條款，拒絕通知，并且不要使用這些 Cookie，你能做到嗎？

KHROMA

Khroma 是一個使用人工智能算法來了解你喜歡什么顏色，并且創(chuàng)建配色方案的工具，這款測試版的工具非常容易上手。

6款網(wǎng)絡(luò)工具

MMM

MMM 是一款完全不同以往的網(wǎng)站搭建工具，目前尚且出于 Alpha 階段，它讓用戶可以以更加方便的方式來拖拽搭建網(wǎng)站。這款工具的頁面是響應(yīng)式的，你甚至可以在手機(jī)上完成搭建的任務(wù)。而它更為有趣的一點在于，它鼓勵凌亂的設(shè)計。

LIGHTGALLERY

LightGallery 是一款清涼級和模塊化的 JavaScript 圖片和視頻圖庫插件，它可以和 React.js Vue.js Angular 以及 TypeScript 進(jìn)行聯(lián)動，大量的演示文稿和文檔確保你可以充分地利用這款工具。

VANDAL

Vandal 是一款適用于 Firefox 和 Chrome 的漂亮的瀏覽器插件程序，讓你可以在不更改標(biāo)簽的情況下快速導(dǎo)航。Vandal 的效果是讓用戶可以輕松快速地訪問所有的 URL 的快照。

CSS LAYOUT GENERATOR

CSS 布局生成器是用來創(chuàng)建布局的構(gòu)成要素的 CSS 工具，它也是一個學(xué)習(xí)工具，可以教你如何在瀏覽器中定位不同的元素。

ALPACA DATA API

Alpaca Data API 是一款易于使用的工具，可以讓你快速引入股票市場的數(shù)據(jù)來進(jìn)行建模，并且進(jìn)行回溯和測試。

MOBILE PALETTE GENERATOR

Mobile Palette Generator 是一款顏色選擇工具，它可以幫助你為移動段設(shè)計項目選擇最合適的配色方案，確定包含主色調(diào)、次要色和強(qiáng)調(diào)色的全部規(guī)格。

6款圖標(biāo)和 UI 套件

ICONOIR

Iconoir 是一個開源的圖標(biāo)庫，包含有 900 多個 SVG 圖標(biāo)，你可以通過搜索，快速地瀏覽獲得你想要的內(nèi)容。

PMNDRS MARKET

Pmndrs Market 是一款搜集 300 多個不同的 3D 元素和物品的項目，整體渲染風(fēng)格比較粗糲而逼真。

BORING AVATARS

Boring Avatars 是一個有趣的半定制化的頭像素材合集，這些頭像因為沒有面孔而顯得頗為「無聊」。

SPARK

Spark 是一款面向 Figma 的入門級網(wǎng)站設(shè)計工具，其中有大量的組件是預(yù)先準(zhǔn)備好的。

VENUS DESIGN SYSTEM

Venus Design System 是一款質(zhì)感不錯的 UI Kit，其中包含有共 2000 款不同的 UI 組件和相關(guān)狀態(tài)，可以讓你快速進(jìn)行設(shè)計，其中還包含一個演示版本共你在購買前進(jìn)行測試和體驗。

READYUI

ReadyUI 包含 超過 200 個面向機(jī)構(gòu)、開發(fā)者、初創(chuàng)公司的設(shè)計模塊和功能，你可以借助 Figma 和 Bootstrap 來進(jìn)行編輯和修改。

5個教程

CREATING GENERATIVE SVG CHARACTERS

這是一個非常有趣的教程，教你使用 JS 和SVG 快速繪制有趣的人物角色，使用一些簡單的形狀和代碼就可以飛快上手，你會在這個教程當(dāng)中學(xué)會如何繪制平滑的線條，創(chuàng)建多邊形，添加有趣的形狀，在 Codepen 上有完整的演示。

5 STEPS TO FASTER WEB FONTS

這個教程教你如何在設(shè)置網(wǎng)頁字體的時候，對字體組合進(jìn)行精簡和優(yōu)化，Iain Bean 在教程中教你部署的方法，確保代碼片段可以快速加載。

THE PERFECT LINK

Perfect Link 可以帶著你從 A11Y Collective 快速完成可訪問性檢測，為你演示整個最佳實踐。有很多你可能認(rèn)為是「正確的事情」，你會發(fā)現(xiàn)它們和你想的不大一樣。這篇教程涵蓋了從設(shè)計到語法方方面面你需要知道的事情，相當(dāng)全面。

READSOM

Readsom 是一個精選的設(shè)計和技術(shù)向內(nèi)容的郵件訂閱合計，你可以在線閱讀，也可以注冊訂閱。它的口號是「發(fā)現(xiàn)你想閱讀的內(nèi)容」。

FAMOUS FIRST WEBSITES

Famous First Websites 本身并不是教程，但是它是一個非常適合學(xué)習(xí)設(shè)計的地方，你在這里可以看到你感興趣的一些網(wǎng)站從最初的設(shè)計逐步演進(jìn)的過程，直到最新的版本。