Web Design Pattern 設計樣板與靈感
Behance （new）
許多UI設計讓我們可以參考，啟發靈感的源泉！
Dribbble
一張圖、許多的色彩、簡單的敘述、好多的 UI 設計就是 Dribbble 讓你充滿靈感的原因！
Media Queres
陳列了好多 Responsive Design 的網站，同時提供不同尺寸的預覽圖，如果你的設計需要 Responsive Design 絕對不能錯過喔！
Pttrns
iOS 的設計師們絕對不能錯過的 iOS 設計靈感來源，放大功能讓你可以更清楚 Retina 的設計細節！
Pattern TAP
裡面有許多網頁和 UI 的設計範例。
Baymard / Check Usability
幫你整理了設計購物網站最重要的結帳流程，可以比較不同的網站結帳流程的步驟和介面。
http://baymard.com/checkout-usability/benchmark/step-type
Premium Pixels
便宜又大碗的質感 UI 介面 PSD 檔，這邊有好多可以讓你盡情下載喔！
-----------------------------------------------------------
Prototype 雛形製作
Jetstrap
拖拉就可以簡單的完成網站的雛形製作，滿酷的 UI/UX 設計工具。
wireframe.cc
簡單輕巧的拖拉雛形製作工具，有手機橫式、直式和網站三種樣板。
-----------------------------------------------------------
CSS 動畫函數產生工具
easings
Easing函數讓你可以指定動畫效果在執行時的速度，使其看起來更加真實。
Ceaser
Ceaser is an interactive CSS easing animation tool. It lets you build any kind of ease you want, and comes with many of the Penner Easing Equations.
http://matthewlein.com/ceaser/
-----------------------------------------------------------
Grids & Layout 格線與排版
Baseline
Baseline 與格線系統所組合成的 CSS 框架，可以簡單的設計出好看的排版架構。
960.gs
螢幕寬度 960 與分割畫面排版框架。
konigi / Graph Paper
常紙上作業的設計師需要的繪圖工具，可以馬上印出來馬上用耶！
http://konigi.com/tools/graph-paper
Sneakpeekit
常紙上作業的設計師需要的繪圖工具，可以馬上印出來馬上用耶！
-----------------------------------------------------------
Typographic 字型
dafont
超級有名的字型網站，幾乎所有的字型都可以在上面找到，還可以線上預覽。
iOS Fonts
快速的查看有哪些字型有支援 iOS，再也不用替 iOS 字型傷腦筋囉！
Lost Type
Lost Type 裡面有好多好特殊的字型，而且居然是佛心的自訂價格！
WhatFont / Chrome Plugin
WhatFont 是一個 Chrome Plugin，安裝之後可以讓你快速的知道網頁所用到的字型，再也不用翻看原始碼囉！
http://chengyinliu.com/whatfont.html
-----------------------------------------------------------
Icons 圖示
Icon Finder
Icon 的搜尋引擎，可以設定大小、背景顏色等等方便尋找圖示。
Icon Guide
Icon Guide 上面有許多的圖示組合，提供給需要的人購買或下載。
-----------------------------------------------------------
Front-end Tools & Frameworks 前端工具與框架
Button Builder
有了 Button Builder 再也不用自己去寫按鈕的程式碼囉！只要輕鬆的設定一下就有千變萬化的按鈕！
http://ui-cloud.com/button-builder/
Animatable
原來 CSS3 支援了這麼多不同的動畫效果呢！一眼可以一次看完的感覺真好！
http://leaverou.github.com/animatable/#
Bootstrap
Twitter 所釋出的前端框架系統，同時包括格線系統、UI 元件和許多 Javascript 操作物件，無論是製作雛形還是正式產品都很好用喔！
http://twitter.github.com/bootstrap/
Bootsnipp
Bootsnipp 上面有許多人貢獻的 Bootstrap UI 資源，加快你的開發速度！
Batch (new)
Batch提供300+的向量圖示下載
http://adamwhitcroft.com/batch/
FontAwesome (new)
Font Awesome是不怕視網膜解析度的字體Icon,本 次更新3.0版本，除了加了一些新的Icon外，還新增了Loading旋轉的spin功能，超酷!
http://fortawesome.github.com/Font-Awesome/
-----------------------------------------------------------
By Desiring Clicks - http://dclick.cc/
關於 Desiring Clicks
Desiring Clicks 裡面包含了行為心理學、視覺心理學、認知心理學、認知神經學、介面設計、資訊架構學、使用性分析與設計等等不同領域的知識。介紹人機互動的領域，藉由表達人與電腦之間的關係，讓我們能更進一步的設計更容易使用、更貼近人性、甚至是更智慧化的電腦設備。
沒有留言:
張貼留言