提升效率！Screen Ruler 網頁尺規工具：前端開發者必備的 Chrome 擴充功能
Screen Ruler 是螢幕上的尺，用以測量網頁上任何元素的標籤名稱、ID、尺寸、距離、邊框間距和邊界等資訊，而且操作上很簡單，只要開啟擴充功能後將游標移動到元…
網站設計
閱讀全文提升效率！Screen Ruler 網頁尺規工具：前端開發者必備的 Chrome 擴充功能
Browser Frame 為螢幕擷圖加入瀏覽器外框，讓畫面更專業有質感
每次在寫文章擷圖時，總會花點時間來研究圖應該怎麼抓才比較好看，畫面及圖片比例要恰到好處，對於一些銷售應用程式、軟體或服務的網站來說又更為重要，如果能…
Gutenberg 開放原始碼網頁列印樣式下載，讓輸出網頁更正確美觀
現今已經很少人會把網頁內容列印出來，PDF 表格表單大多能在線上處理，再加上家裡可能也不太放印表機，其實超商就能列印影印傳真，實在是沒有必要再添購一台機…
FREE LINE DESIGN 免費下載 400 種分隔線圖案，向量點陣圖素材可商用
分隔線在網頁設計裡聽起來好像有點古老，印象中一開始學習網頁時 FrontPage 就已經內建分隔線工具，後來使用的人慢慢變少，不過在一些日本網站中還是很常看到分…
CSSPeeper 為設計師量身打造，更聰明視覺化檢視網站 CSS 樣式表（Chrome 擴充功能）
對於網頁設計或開發者來說，想要改善使用者網頁瀏覽體驗通常會從參考其他網站設計著手，我在發現不錯的網站都會去看一下原始碼或樣式表，雖然 Google Chrome 本…
Site Palette 從網站獲取配色，快速產生完整調色盤資訊（Chrome 擴充功能）
最近介紹過一些令人印象深刻的色彩工具，多半都是 Google Chrome 外掛，例如我個人很喜愛的「CSSPeeper 為設計師量身打造，更聰明視覺化檢視網站 CSS 樣式…
Cruip 為新創團隊提供免費 Landing Page 網站模版下載
對於新創公司來說，除了要有很好的點子，一群可實際理想的伙伴，更重要的是如何適當包裝產品，讓它更容易被市場接納，當然一方面也會吸引更多潛在顧客加入，提…
LandingStock 圖庫收錄設計 Landing Page 會用到的免費相片素材
在網路行銷中有一個很常聽到的名詞叫做 Landing Page，中文稱為著陸頁面或到達頁面，簡單來說，就是使用者進入網站後最先看到的第一個頁面，產品通常會以各種不…
One Click Test 測試介面設計可否讓使用者快速找到需要的功能或資訊
設計網頁或開發使用者介面有很多「眉角」，可能在文字大小、顏色或按鈕形狀稍作調整就會有完全不同的效果，對於追求完美的設計師來說會找一群人進行 AB 測試（A…
Checklist Design 網頁開發者必備參考手冊，助於學習更好的設計方式
身為網頁開發者總會不斷重複一些類似的情境，例如協助其他公司製作網站的價目表、購物車、新手上路、網誌、招聘、聯繫頁面等等功能，可能不同公司對於內容的細…