最受歡迎的頂級設計資源(上)

作為一個用戶體驗設計師,有一件事情是需要不斷提高的。那就是認識各種模式,我把我經常會用到的一些帶給大家,如果你之前沒有見過它們,希望它們也能對你們管用。當然你也可以告訴我一些你知道的資源。

每個人都有屬於他自己的一套工具,它讓我們的生活更容易,工作更快速。所以讓我們來發掘那些好用的設計工具。

顏色、顏色、顏色

色彩搭配對於視覺來說是如此的重要,單憑顏色本身就可以讓設計改頭換面。下面是我在尋求色彩搭配靈感的時候最喜歡的4個工具。

Coolors

Generate - Coolors.co

如果你想得到一個關於美麗色彩的調色板,你真應該試試這個。你甚至可以在其中輸入你自己的顏色,你可以保留你喜歡的顏色,改變其中的一種或者幾種等等。

Color Safe

Color Safe - accessible web color combinations

你可以選擇一個背景色,然後網站就會根據你選擇的背景色給粗不同的文字色彩搭配方案。

Colllor

Color Palette Generator

你可以得到一種顏色50種以上不同維度不同深淺的選擇。這才是真正的色彩,非常好的一個工具。

Materialpallete

Material Design Color Palette Generator

如果你是扁平化設計的粉絲,它是一個非常好用的工具。

Color Calculator

Color Wheel - Color Calculator

這個網站可以幫助你很方便的建立對比色,鄰近色,等各種模式的色彩搭配。

字體

我相信不需要我多說,字體可以使一個網站富有吸引力並且易於閱讀。他們自己就可以創造出一個美好的視覺體驗。設計師們都非常喜歡字體,至少他們應該去喜歡。

Font Flame

Font Flame - Tinder for font pairing

我們是如此喜歡字體,以至於有些人專門做了一個網站來尋找字體搭配。

Font Pair

Font Pair - Helps designers pair Google Fonts together. Beautiful Google Font combinations and pairs.

另一個字體搭配的網站,你可以實時查看字體搭配的效果。

以上是我經常使用的字體資源,雖然關於字體的資源還有很多。此外,我一直在尋找著新的字體,你的字體庫是永遠都不會滿的。

資源庫

圖片、icon、矢量、你們這麼命名它們。大多數的設計師都有自己的圖書館,或者收藏夾。資源庫可以讓我們生活更方便,並且節省時間,特別是有些時候對於自由職業者,資源庫可以幫你省掉買版權的錢。

Unsplash

Unsplash | Free High Resolution Photos

免費的圖片庫,我最喜歡的資源之一。

Flaticon

Free vector icons

你很可能會在這裡找到一個你可以使用的圖標,或者你可以從中得到些靈感去創造一個你自己的。

Iconfinder

Iconfinder - 1,150,000+ free and premium icons

另外一個圖標資源,雖然它今天已經側重於付費模式了,但是你仍然可以在裡面找到很多優質的免費的資源。

Freepik

Free vectors, photos and PSD Downloads

你可以在這裡找到任何東西,再次提醒,注意查看版權信息。

網頁設計資源

我想我們可以很輕鬆的創建出一個關於免費網站設計資源的百科全書。但是這裡我只舉幾個最喜歡的。

Zurb University

ZURB U | Library

網頁常用的基礎模塊在這裡都能找到,非常珍貴的資源。一點都不開玩笑。

Coveloping

CSS Animation Generator

可以自定義、測試和生成自己的CSS動畫,它好幾次把我從困境中解救出來。

CoDrops

CSS Reference

我用這個網站去參考CSS的相關內容,他們的教程和playground非常的棒!如果你沒有用過這個網站一定要去試試,你會被震驚的。

Codepen

CodePen - Front End Developer Playground & Code Editor in the Browser

Codepen大部分的情況下會讓我更沮喪而不是更開心,三更半夜的時候我會對著屏幕喊道「他媽的他們怎麼會想到這樣做?」

其它資源

Design Patterns

Design patterns

Uplabs

uplabs.com/

下一期請戳 最受歡迎的頂級設計資源(下)

推薦閱讀:

ui作品集,實習?
設計乾糧 02:用戶界面40年演變史
Axure常用部件庫有哪些,尤其是畫線框圖,非高保真?

TAG:设计 | 交互设计 | 用户界面设计 |