50個超實用的設計懶人包,快速完稿的工具箱

新的設計工具和設計素材多數時候都是在新的需求之下誕生的,又或者開發者或者設計師發現了更優的解決方案,它們應運而生。

新的工具和素材讓設計師的工作更為便捷,一些新的設計問題因此而有了解決方案,這也是為什麼這些工具和素材令人著迷。

Duotone Effect Generator

Gogoshark超實用設計懶人包

這款雙色調配色生成器能夠快速幫你生成時尚的雙色調配色。

不僅如此,如果你上傳一張圖片到這個網站上,它能夠一鍵生成特別漂亮的雙色調效果,你可以下載處理后的圖片到自己的項目中使用。

Curtains.js

Gogoshark超實用設計懶人包

Curtains.js 是一款有趣的 WebGL工具,它可以讓圖片擁有行動的窗帘特效。

開發者是這樣說的:「這是一個小型的 Vanilla WebGL JS庫,它可以將包含圖片的 HTML 元素轉換為 3D WebGL 紋理化的對象,你可以通過著色器將它動畫化,你可以通過CSS來定義每個對象的大小和位置。」

Solis

Gogoshark超實用設計懶人包

Solis 是一款實時輸出的應用,可以借助它看到你所輸入的代碼的實際效果。

你可以通過多個窗口,同時獲得 HTML、CSS、Sas 和 Less 的實時預覽。這款工具目前僅支持 Mac 平台。

Cards Webflow UI Kit

Gogoshark超實用設計懶人包

如果你是 Webflow 用戶,那麼 Cards Webflow UI Kit 這款工具對你而言就非常有用了。

這是第一款完全可克隆的 UIKit,並且是完全服務於 Webflow 的。其中包含常用的UI元素,諸如按鈕、標籤、社交媒體圖標,其中的UI元素多是以卡片式的樣式呈現出來的。

BBC Sound Effects

你可能一直在設計項目中使用 Creative Commons 協議下的圖片,那麼聲音素材要從哪裡來呢?

英國廣播公司 BBC 旗下有一個音效庫包含了超過16000種音效,不過它只能用於個人、教育和研究的目的。

ScreenFocus

Gogoshark超實用設計懶人包

ScreenFocus 是一款生產力工具,它包含了一套非常完整有用的雙顯示器設置體系,包括在螢幕之間切換的設置,包括各種屬性的控制,確保多個顯示器的內容能夠被更好的管理,而不會被分散注意力。

Spring is Coming

Gogoshark超實用設計懶人包

Spring is Coming 是一款非常輕量的字體,其中包含花卉的符號,帶有明顯的手寫風格。

Tutorial: CSS Techniques and Effects for Knockout Text

Gogoshark超實用設計懶人包

文字排版設計是目前關注度最高的一個設計趨勢。這篇來自 CSS-Tricks 的文章主要幫你搞明白,如何用好 CSS 屬性來創建時髦而現代的分層文本效果,包括過渡效果和動畫。

React Circle

Gogoshark超實用設計懶人包

React Circle 可以為你生成一個環形進度載入器動畫,它是使用可定製的SVG來實現這一功能的。

Unavatar

想要在多個社交媒體中統一使用一個頭像?Unavatar 這個服務只需要幾行代碼和一個用戶名或者電子郵箱地址就能幫你實現這個功能。

Login Critter

Gogoshark超實用設計懶人包

想讓你的登錄頭像是自定義的可愛的小動物頭像麼?Login Critter 能夠幫你做到這一點,你可以在它的 Github 頁面中獲得它。

Lobe

Gogoshark超實用設計懶人包

Lobe 是一款視覺化的人工智慧工具,它可以幫助你的應用構建深度學習模型,這款工具目前還處於測試階段,可以被廣泛應用。

Blobby Background

Gogoshark超實用設計懶人包

Blobby Background 所生成的獨特的形狀讓它在 CodePen 上瘋狂流行,它的Demo 是使用 SVG 和過濾器來實現的。

HueSnap

Gogoshark超實用設計懶人包

HueSnap 是一款配色方案生成工具,你可以一邊瀏覽各種配色一邊收藏,以供之後使用。

這款配色工具的高效之處在於,你可以一次瀏覽許多的配色方案,在更多的配色方案中作出選擇。

Findshot

Gogoshark超實用設計懶人包

Findshot 是一款全新的、免費的圖片庫,通過電子郵箱註冊之後,可以免費使用其中的圖片。

Pico-js

Gogoshark超實用設計懶人包

Pico-js 是一款僅有200行代碼的 JS 人臉檢測庫,它的簡約和輕量級是優勢所在,它比其他的許多的庫都要小巧得多,保存下來僅僅只有2Kb這麼小。

Modular

Gogoshark超實用設計懶人包

Modular 是一款免費的 Android 平台的 UI Kit,其中包含了大量的 Material Design 風格的自適應元素,其中涵蓋了13個類別的78種元素,總計167 個項目。

Tutorial: Responsive Knockout Text with Video

Gogoshark超實用設計懶人包

這個教程來自CSS-Tricks 的 Giulio Mainardi,他為你展示了如何使用影片構建炫酷的剪切蒙板文本效果,這個效果的實用性非常高,適用範圍也非常廣。

Semantic Experiences

Gogoshark超實用設計懶人包

語音搜索正在成為越來越流行的一種交互,這也是Google 團隊研發語義表達式的原因,它能夠幫助開發人員更好的在產品中利用自然語言。

Design Systems Repo

Gogoshark超實用設計懶人包

這個網站包含大量關於設計系統的文章、工具和案例。整個資料庫非常的龐大,是搜集靈感、獲取素材的好地方。

Science of Color Codes

Gogoshark超實用設計懶人包

Color Codes 不僅僅是一個能為你輸出配色代碼的工具,它的背後有專業的配色系統(RGB、HEX、CMYK、Pantone)作為支持,還有專門的配色專家將它作為一門科學來進行鑽研。

Fontisto

Gogoshark超實用設計懶人包

Fontisto 是一個巨大的SVG 圖標合集,你可以使用 CSS 對它進行自定義。

它是一款快速響應的工具,無需 JavaScript 就可以輕鬆使用,另外, Fontisto 可以免費商用。

Aloja

Gogoshark超實用設計懶人包

Aloja 是一款免費的手寫字體,字體風格顯得拙稚有趣,非常適合用來展示。

MD Tall

Gogoshark超實用設計懶人包

FirstSiteGuide

Gogoshark超實用設計懶人包

FirstSiteGuide 是一個資源、教程和工具的大合集,它可以在你獲得第一個網站之後,進行有效的引導,提供有用的資源和工具幫你測試、優化。

ThereGogoshark超實用設計懶人包

There 是一個遠程的團隊協作效率工具。

它會記錄全世界各地不同的團隊成員所在時區的訊息,這樣避免了在不合適的時間打擾到對方休息,也可以更好的安排產品的研發設計測試的時間週期。

AI Color Wheel

Gogoshark超實用設計懶人包

這個名為AI 色輪的應用非常有趣,此處的AI 應該指的是人工智慧。你可以上傳一幅僅有灰階的圖片,然後它會生成配色方案並且為之著色,幫你尋求配色的靈感。

Driver

Gogoshark超實用設計懶人包

Driver 是一款輕量級的JavaScript 引擎,它可以幫助設計師更好地引導用戶在不同的頁面之間穿行。

它能夠幫你突出顯示特定的元素,創建功能介紹,並且以多種形式進行自定義提示互動。

Tabler

Gogoshark超實用設計懶人包

Tabler 是一款包含響應式儀錶盤模板所需要源代碼的工具,它的模板看起來很棒,並且可以針對項目進行自定義。

它當中帶有大量現成的組件,並且代碼是完全開源的,它使用Bootstrap 進行構建,並且使用了CSS3 表單組件。

Wormco

Gogoshark超實用設計懶人包

Wormco 是一款簡單的動畫狀態指示器,非常有趣,你可以在 CodePen 上找到它。

UI Faces

Gogoshark超實用設計懶人包

UI Faces 是一個用戶頭像聚合器,其中包含許多「真實的」用戶頭像。

在設計視覺稿的時候,UI Faces 能夠讓視覺稿看起來更加真實,可以使用 API 或者 Sketch 插件來實現。

Trueface

Gogoshark超實用設計懶人包

Trueface 是一個基於人工智慧的身份驗證系統。可以用於 OCR、數據提取、文件驗證、面部識別和用戶驗證。

Cloud Text-to-Speech

Gogoshark超實用設計懶人包

這個是測試版的 Google Cloud 的文本轉語音工具,可以將文本轉化為30多種不同音色的多種語言。

根據Google的說法,這款工具「將DeepMind 和 WaveNet 在神經網路中的開創性的研究應用到文本轉語音當中,確保音頻輸出高保真。
有了這個API,許多應用和服務能夠提供更為逼真的語音交互。」

Storyboarder

Gogoshark超實用設計懶人包

Storyboarder 可以幫你將草圖編程實際的動畫故事板。這樣的故事板可以輕鬆的分享,展示。

在實際使用的過程中當中,你可以進行編輯繪製,也可以導入圖形,可以添加對話和行為來實現它。StoryBoarder 與 Photoshop 集成,可以更好地編輯。

Egg Shape Background Gradients

Gogoshark超實用設計懶人包

Egg Shape Background Gradients 是一個全新的漸變生成工具,不過它展示的外輪廓是蛋型的。

找個你喜歡的漸變色彩,複製色彩或者 CSS 便能使用。

Sheet2Site

Gogoshark超實用設計懶人包

Sheet2Site 是一款付費的工具,可以將你的 Google Sheet 轉化為一個網站,在此過程中無需編寫代碼。

對於簡單的或者基於數據的網站而言,這種方式還是蠻好用的。

Crunch

Gogoshark超實用設計懶人包

Crunch 是一個Mac 平台上優化 PNG 圖像的軟體,雖然它速度並不快,但是在功能上非常完善,也非常強大。

Papaya

Gogoshark超實用設計懶人包

Papaya 是一個著陸頁的模板大合集,可以用於多種不同的項目。這個合集獨一無二的地方在於,每個設計都是快速的、響應式的且可定製的。

Pixelify

Gogoshark超實用設計懶人包

Pixelify 是一款不斷更新設計素材的合集。這個網站是一個設計共享社區,你可以上傳並且針對設計進行評分。有些素材可以個人使用,有的可以商用。

Site Palette

Gogoshark超實用設計懶人包

Site Palette 是一款Google瀏覽器插件,它可以從網站中提取配色方案,用來創建配色方案。

Medical Icons Set

Gogoshark超實用設計懶人包

Medical Icons Set 是一個使用醫療相關的矢量圖標合集,合集中包含 PNG 和 SVG 兩種格式。

200 Vector Icons

Gogoshark超實用設計懶人包

這是 Henrik Ostergaard 所創建的200個矢量圖標的合集,合集是 AI 格式的。這套圖標包含普通的樣式和線性圖標兩種。

Deck

Gogoshark超實用設計懶人包

這是 InVision 所創建的一個有趣的卡片式 UI Kit,可以免費下載。Deck 中所包含的 UI 元素都是矢量的,便於定製。

Bootstrap Templates & Themes

Gogoshark超實用設計懶人包

想要 BootStrap 4 的主題或者模板?這個合集當中包含了從儀錶盤頁面模板到輪播圖各式各樣的免費素材。

Variable Fonts

Gogoshark超實用設計懶人包

可變字體是一種看起來如同包含多種字體一樣的字體。目前它還是 Beta 版本,它可以作為素材進行使用和測試。每種字體的描述當中都包含了相關的設計,許可證,以及在哪裡下載、預覽和相關的更多訊息。現在,想找到一個可變字體還是很容易的。

AlterGogoshark超實用設計懶人包

Gogoshark超實用設計懶人包

AlterGogoshark超實用設計懶人包o 是一款全大寫的展示性字體,字體是完全免費的,可個人使用還可以商用。

Bimbo

Gogoshark超實用設計懶人包

Bimbo 是一款具有獨特風格的手寫字體,這款字體有6中不同的字重和300個不同的字元。

East Border

Gogoshark超實用設計懶人包

East Border 是一款非常厚重的模板字體,帶有完整的大寫字母、數字和常用的標點符號。

Dank Mono

Gogoshark超實用設計懶人包

Dank Mono 是一款看起來很整齊簡約的等寬字體,用來顯示代碼頗為不錯,它的細節非常到位,適合視網膜螢幕的顯示。

Element 120

Gogoshark超實用設計懶人包

Element 120 是一款有著完整字符集的略粗的襯線字體,字體展示性很強,免費版為演示性的版本,有一定的限制。


 

【想讓你的網站其他人優秀嗎?這些設計趨勢一個都不要錯過!】

1.9種讓你的網頁很專業
2.預測2018網頁設計趨勢
3.2018年手機應用UI設計趨勢
4.這3個設計趨勢是網頁設計師的最愛
5.2018必看設計懶人包手冊
6.高手進擊懶人包影片-設計師與開發者推薦的精選影片


 

以下幾點請你深思一下

給你最好的網頁設計Gogoshark|鯊魚邦不私藏分享

 


Also published on Medium.

GogoShark 小編主要分享: 網頁設計, 數位行銷, SEO, 品牌策略...等領域。是你的數位行銷解決方案專家。提供數位行銷知識、分析工具、解決方案與資源夥伴;精準蒐羅數位網路行銷懶人包、關鍵字行銷、社群行銷、內容行銷等。GogoShark 是間位於台北的網頁設計公司

客服支援

您的問題,由我們來解決 - 位於台北的專業網頁設計服務 GogoShark 可協助您拓展事業版圖,透過更加簡單快速的方法將一切數位化