UI Cloud，這個荒唐的搜尋引擎讓你搜免費UI
有人做了一個搜尋器讓你針對全世界主要在分享免費UI設計下載的網站搜尋，想要什麼元素，就搜什麼元素，例如需要表單，那麼搜尋Form，接著就會列出一堆漂亮的表單設計讓你下載使用！
網站：UI-cloud.com
這真是荒唐！
CSS Arrow Please，無痛製作附有箭頭的CSS對話框
阿！竟然有這種東西。過去用CSS去做一個有三角指標的容器常常要我的命，三角形部份用圖解決就要在改變顏色時開Photoshop再改一次顏色，要是再加上邊框我更頭痛去了。
有個傢伙好像看到我的難處了，做了這個製作器。這真他X的了得，他完全看到我這種用CSS去畫圖有障礙的人到底需要什麼！
網站：CSS Arrow Please
不過可惜他似乎給的設定不夠多，例如我若不要圓角就得自己去改CSS了(雖然這裡簡單到一個不行)。
Screenqueri.es，一定要用的全響應網頁設計測試網站
最強的全響應網頁設計測試網站
我曾經介紹過RWD 是響應式網站設計一定要有的書籤工具，今天要介紹我使用過最棒的全響應設計最棒的線上測試環境Screenqueri.es。直接在瀏覽器上測試超過60個行動裝置
支援超過60個行動裝置解析度，只需要從下拉式清單簡單的選一個裝置名稱即可進入測試狀態，當然你也可以隨時改變解析度看看預覽結果。不單可以測試http網站，就連本地端的連結也是可以直接測試的，厲害吧？不過你必須花一點時間註冊帳號才能使用。網站連結：Screenqueri.es
不只是iPhone, iPad, 主流品牌android…連Kindle或各大廠的平板電腦都可以一併測試了。而且是完全免費的。
Patternify，最好的Pattern生成工具網站
不論是在Photoshop需要一個填色圖案，或設計一個網站用圖騰，Patternify 都可以為你做最棒的工作，直接輸出一個png擋，或者拿到Base64 編碼的語法。
什麼是Base64 編碼？
英文是Base64 Code，這個語法可以使用在CSS上，就是傳說中用語法寫出來的點陣圖呢，通常被用在網頁背景圖。
CSS3 Generator，CSS容器生成器
網址：CSS3 Generator
使用方式：
- 直接使用調整面板，記得面板的右邊有+的按鈕都可以打開進入細項調整。
可以搭配Gradient Generator做出絢麗的按鈕唷！
我也弄了一個範例：
The Responsinator，響應式網站測試工具
有兩個傢伙搞了一個線上測試的網站，只要輸入網址就可以預覽在iPhone3, 4, 5, iPad, android一些主流解析以及甚至kindle上的顯示結果，而且還可以操作喔！
網站：The Responsinator
使用方式：
- 直接在左上角輸入網址，按下GO，就可以了。
而且不只是直式預覽，橫式預覽也一起包辦了。
Gridpak，響應式網頁Grid佈局工具網頁
為什麼做主題要計算呢？因為你必須在一開始就佈局好主題各個部位的寬度，以及在全響應環境下的變化，也因此實際呈現時百分比所影響到的寬度是否合乎主題內容中各個部位所需要的最小寬度或者最大寬度，這部份應該是有工作上實際碰到的前端設計師比較能理解，所以言而總之你既然會來看了這一邊文章八成你也看得懂。
網站：Gridpak
使用方式：
- 非常明顯第一步是拉動畫面中間的工具來決定寬度。
- 然後設定式樣所需要的欄位數、間隔、寬度等等。
- 最後按下方紅色按鈕的Download，就可得到你需要的檔案了，這個檔案裡的東西有夠豐富的，不但可以讓你直接取得一個基礎的html+css範例，還包含了其他我尚未去學習的scss、less，真是酷爆了。
Gradient Generator，CSS製作漸層背景的網站工具
 |
| Gradient Generator |
Gradient Generator是個強大的CSS漸層色生成工具。
有時候想把按鈕做成漸層的，所以會去翻書籤裡的網站找一個來改色對吧？現在用Gradient Generator可以線上調校生成了，用法跟Photoshop的漸層工具幾乎一樣！不論是條透明度還是漸層位置完全可視化調整。
網站：Gradient Generator
使用方式：
- 非常直覺，直接拉動調整，然後右邊框框裡的就是CSS語法了。
筆記：這語法支援到IE8，但是若要支援IE9，請在框框右下角把IE9打勾，並且把下方的IE9宣告放在你html的<head>之上。
特殊功能：Gradient Generator還能支援從你上傳的圖片中抓取顏色！只要在右邊面板下方按Import from image即可上傳。
下面是我玩玩做成的DEMO按鈕：
Easing函數
你是個前端設計師嗎？承認吧你就是要與一些語法的東西為伍。
俄羅斯一個高手把Easing函數全部都做成了開源範例，並且提供js、css、scss的語法讓你可以直接取用，真好這下子專業性直接提高一個擋次。
網址：http://easings.net/zh-tw
作者：https://github.com/ai
使用方式：
- 直接選擇一個曲線進入內容，可以看到動態線條與動態，如果想再看一次，直接點選該曲線圖即可。
- 然後下面就是可用的函式了，部份相關支援性也會有相對應的說明。
cubic-bezier，CSS動態編輯器
你經常需要使用CSS編程嗎？
http://cubic-bezier.com 這個工具網站可以協助你編譯最適合的動態預覽，直接輸出成CSS語法。
立刻看看這是什麼請直接按GO。
使用方式：
- 直接在網頁上編輯，首先拉動曲線，其次調整一個做動時間，例如設定動態時間為0.5表示0.5秒，然後按下GO就可以預覽。
- 按IMPORT輸入你自己的語法，再依樣進行編輯調整。
然後按EXPORT就可以得到語法了。
網頁設計必備，測試全響應網站的小工具
響應式網站很不好設計，尤其是測試很麻煩，現在這個網站讓你的瀏覽器立刻變成一個測試環境。
網址：http://responsive.victorcoulon.fr/
哈哈，我明白一下子是看不懂的，因為這工具實在是太專業了，所以一定要往下看使用方式。
使用方式：
畫面中央RWD Bookmarklet是個工具，直接把他拖到你的書籤上，如圖(我是使用Chrome)：
 |
| 以Chrome為例的範例，讓RWD變成你的瀏覽器工具 |
如何測試呢？
畫面上方那一排就是測試工具了，畫面中間顯示的是你想要測試的網站，直接按下畫面中間上方的那一排任何一個按鈕，都可以看見全響應網站的預覽結果。
Fontfriend，不必重寫網頁就可以直接預覽各種字型的書籤工具
想隨時檢視網頁上最適合的字型預覽嗎？有Fontfriend 不必換字型也可以即時在任何網站上檢視了。(包含Google Font！)
使用方式：
- 到網址http://somadesign.ca/projects/fontfriend/，把畫面上FontFriend紅底色看似按鈕的連結拖拉到書籤列上，就可以開使用了。
- 在任何網頁上按這個書籤即會開啟一個面板，你可以透過面板上的所有設定來預覽該網站上的文字換成Google font後的結果。
- 開啟面板後，首先從Selector選擇想要改變字型的標籤，預設有body, 標題文字(h1h2h3h4..), p, 或者自訂標籤。
- 再來是開始改變文字字型了，可以看到當前網頁使用的文字字型，也可以改變成系統預設的字型，或者使用最右邊的Google Font！當然也可以改變文字的行間和其他css中對文字的屬性控制。
不過這對於我們中文使用者來說似乎幫助並不大，如果你經常承接一些外文語系的網站，這可能會是一個好工具。
Brand Colors，品牌顏色色票
有時候需要找大品牌的顏色嗎？有個傢伙做了一個網站把收集全世界的大品牌主要使用顏色，讓你可以直接取得色碼。
網址：http://brandcolors.net/
瀏覽時下方有一個搜尋器，直接輸入品牌名稱可以直接翻出色票(前提是已經收錄)
CSS3 Click Chart，CSS的特效範例
網站：CSS3 Click Chart
使用方式：
- 無，應該沒有什麼需要說明的。但下面有一個直接去取回的範例可以玩玩。
Color Hexa，色彩研究工具網站
網站：Color Hexa
使用方法：
沒有！因為Color Hexa已經甚至把使用方式都帶進各種關聯裡了，任何在這網站上出現的顏色都可以點選直接成為索引色，然後進入這個顏色的數據世界裡。
ColorSchemeDesigner，數據化色彩配色工具網站
你對色彩的需求和細膩度較高嗎？或者你所開發的專案需要一套邏輯性的色彩布局試算嗎？Color Scheme Designer可能是你想像不到的工具，而且是免費的！
透過使用這個工具網站，你可以邏輯性的整理出一套配色讓工程師順利的程式化一個顏色的配色邏輯，這可不是蓋的。
網站：ColorSchemeDesigner
使用方式：
- 首先在面板左上選擇需要的顏色色相組，選擇一個到四個的色相組，內容還可以細分出不同的配色邏輯變化方式，有點複雜解釋，這應該是色彩學研究所在理解的深度了。
- 其次左下方是改變色相、色彩彩度、明度和對比等。
- 再來是精彩的，右下方的面板可以直接在一個DEMO站預覽配色，很神很神有木有！
- 還沒完！最後還可以透過右上方的一堆工具分享配色或者輸出成Html+css檔案！
Color Ramp Creator，找出一套合宜色彩的工具網站
網站：Color Ramp Creator
使用方法：
- 進入Color Ramp Creator網站
- 在色版的上方選擇16色、8色或者4色，來決定你需要的顏色數量
- 在色調、色相、亮度上看著預覽的圖片調整出自己想要的結果
不過可惜目前是不能讓使用者放上自己的圖片的。
 |
| 非常特殊的工具對吧，我也做了一組覺得很不錯的應用 |
