免費資源指南，每日網路資訊與科技新知
如何製作出上圖帶有瀏覽器外框的網頁擷圖畫面呢？可能很多人會選擇打開網頁，將視窗調整到適當大小後擷圖即可，這個答案好像也沒有錯，只是相較於使用 Mockup 工具來說會更費時費力，其實只要透過像是 BrowserFrame 或 Mobile Mockup 就能在輸入網址後快速製作出模型圖，看起來會比自己擷取還要更有質感。如果是 Mockup Photos、Smartmockups 還能直接套用免費圖庫提供的高品質相片，免費資源網路社群有一部分的文章首圖都是以類似工具處理，看起來很自然而且能提昇質感。
對於新創公司來說，為產品建立一個好看的 Landing Page 非常重要，但很多時候這個想法不被重視，或是沒有預算在第一時間設計出合適的頁面，可能就會錯失許多機會。雖然網路上搜尋一下就有無數的網站模板網站可供下載，但很多顯得過時或沒有幫助，可能得花許多時間編輯修改才能使用，因此有開發者考慮到新創團隊需求推出 Landing Page 素材資源，例如 LandingStock 收錄設計到達頁會用到的相片素材，還有 Cruip 專為新創團隊提供的免費網站模版。
身為一個文字工作者，我對於文章排版和圖片相當堅持，特別是每篇教學都會用到的螢幕畫面擷圖，要怎麼設定抓取範圍、呈現都經過相當長時間的不斷研究摸索，才能盡力維持甚至改善文章品質。或許你無法花太多時間擷取螢幕畫面，但又希望擷圖能有不錯的效果，考慮為圖片加上好看的視窗外觀也會讓質感更為提升，之前介紹過 Frrames 和 Browser Frame 都是類似服務，或是利用 Screely 將圖片轉為帶有 Mac 視窗陰影效果。
在網路行銷中有一個很常聽到的名詞叫做 Landing Page，中文稱為著陸頁面或到達頁面，簡單來說，就是使用者進入網站後最先看到的第一個頁面，產品通常會以各種不同方式進行宣傳，例如電子報、社群貼文、廣告或搜尋，Landing Page 的功能就是設計內容以引導瀏覽者完成某些動作，像是訂購商品、註冊會員或留下聯絡方式等等，這一連串的過程也被稱為轉換。
對於新創公司來說，除了要有很好的點子，一群可實際理想的伙伴，更重要的是如何適當包裝產品，讓它更容易被市場接納，當然一方面也會吸引更多潛在顧客加入，提升大家購買意願。不過新創團隊或早期創業公司可能沒有多餘預算或技術能力設計出好的產品頁面，尤其在最關鍵的「Landing Page」（到達頁或登錄頁）成功抓住使用者目光並不容易，如果你需要一些設計好的免費模版，接下來要推薦的網站可收藏至書籤。
最近介紹過一些令人印象深刻的色彩工具，多半都是 Google Chrome 外掛，例如我個人很喜愛的「CSSPeeper 為設計師量身打造，更聰明視覺化檢視網站 CSS 樣式表」，能以更簡單、有組織性的方式呈現網站樣式和各元件，對開發者來說是非常實用的工具。當然瀏覽器可以做的事情也很多，包括一行程式碼將瀏覽器變成網頁編輯器，直接從網頁中修改內容，在開發網站測試時會省時省事很多。
對於網頁設計或開發者來說，想要改善使用者網頁瀏覽體驗通常會從參考其他網站設計著手，我在發現不錯的網站都會去看一下原始碼或樣式表，雖然 Google Chrome 本身就有強大的開發人員工具可以使用，但如果遇到要查詢某個網頁使用的字型或色彩時還是習慣以 Fontface Ninja、Type Sample 這類工具快速找到我要的資訊。
分隔線在網頁設計裡聽起來好像有點古老，印象中一開始學習網頁時 FrontPage 就已經內建分隔線工具，後來使用的人慢慢變少，不過在一些日本網站中還是很常看到分隔線蹤跡，尤其是設計很可愛又精緻的日系網站，通常會以圖案來取代單調的直線。當然圖案除了有區分內容的功能外，還能使網站看起來更生動有趣，但這類素材其實並不好找，從日本網站或許可以挖掘兼具美感和功能性的分隔線圖案。
