身為網頁開發者總會不斷重複一些類似的情境，例如協助其他公司製作網站的價目表、購物車、新手上路、網誌、招聘、聯繫頁面等等功能，可能不同公司對於內容的細節要求略有差異，但整體來說主軸不會相差太遠。舉例來說，部落格頁面需要有文章標題、縮圖、作者、內容和分享按鈕，非必要項目則有相關文章、訂閱、發佈日期和留言功能，那麼有沒有檢查清單可以讓開發者參照呢？
網站設計
One Click Test 測試介面設計可否讓使用者快速找到需要的功能或資訊
設計網頁或開發使用者介面有很多「眉角」，可能在文字大小、顏色或按鈕形狀稍作調整就會有完全不同的效果，對於追求完美的設計師來說會找一群人進行 AB 測試（A/B Testing），比較兩種或多種設計中最好的表現結果，而這通常能在最短時間達到最佳的正確性，例如，在購物流程可以準確點選要加入購物車的商品，或是在查詢、註冊或加入訂閱時按下正確選項，可別小看這些設計細節，有時候一點點微小差異就足以造成相當大的影響。
LandingStock 圖庫收錄設計 Landing Page 會用到的免費相片素材
在網路行銷中有一個很常聽到的名詞叫做 Landing Page，中文稱為著陸頁面或到達頁面，簡單來說，就是使用者進入網站後最先看到的第一個頁面，產品通常會以各種不同方式進行宣傳，例如電子報、社群貼文、廣告或搜尋，Landing Page 的功能就是設計內容以引導瀏覽者完成某些動作，像是訂購商品、註冊會員或留下聯絡方式等等，這一連串的過程也被稱為轉換。
Cruip 為新創團隊提供免費 Landing Page 網站模版下載
對於新創公司來說，除了要有很好的點子，一群可實際理想的伙伴，更重要的是如何適當包裝產品，讓它更容易被市場接納，當然一方面也會吸引更多潛在顧客加入，提升大家購買意願。不過新創團隊或早期創業公司可能沒有多餘預算或技術能力設計出好的產品頁面，尤其在最關鍵的「Landing Page」（到達頁或登錄頁）成功抓住使用者目光並不容易，如果你需要一些設計好的免費模版，接下來要推薦的網站可收藏至書籤。
Site Palette 從網站獲取配色，快速產生完整調色盤資訊（Chrome 擴充功能）
最近介紹過一些令人印象深刻的色彩工具，多半都是 Google Chrome 外掛，例如我個人很喜愛的「CSSPeeper 為設計師量身打造，更聰明視覺化檢視網站 CSS 樣式表」，能以更簡單、有組織性的方式呈現網站樣式和各元件，對開發者來說是非常實用的工具。當然瀏覽器可以做的事情也很多，包括一行程式碼將瀏覽器變成網頁編輯器，直接從網頁中修改內容，在開發網站測試時會省時省事很多。
CSSPeeper 為設計師量身打造，更聰明視覺化檢視網站 CSS 樣式表（Chrome 擴充功能）
對於網頁設計或開發者來說，想要改善使用者網頁瀏覽體驗通常會從參考其他網站設計著手，我在發現不錯的網站都會去看一下原始碼或樣式表，雖然 Google Chrome 本身就有強大的開發人員工具可以使用，但如果遇到要查詢某個網頁使用的字型或色彩時還是習慣以 Fontface Ninja、Type Sample 這類工具快速找到我要的資訊。
閱讀全文 » 關於 CSSPeeper 為設計師量身打造，更聰明視覺化檢視網站 CSS 樣式表（Chrome 擴充功能）