設計師如何架設作品網站？從規劃到上線 — 流程 & 資源 (上)
今年我重新設計架設個人作品網站，這篇文章紀錄架站流程、各項線上資源及工具，適合想架設 RWD靜態網站， HTML、CSS只有基本了解的設計師。
文中將紀錄架站過程的步驟、資源及工具，主要是作為平面圖串連整個過程，相關細節以外部連結方式介紹。
線上作品集架設管道概覽➝ 規劃分析➝ 設計➝ Coding➝ 上線線上作品架設管道概覽
有固定版式的設計師社群，如：Behance、Dribbble。
優點：只需考慮內容，平台既有流量大、已符合適應性網站。限制：版式固定、且平台供常會有各自的偏好的類型。
Behance 單件作品以向下滾動的網頁方式呈現
使用架站平台，如：Wix、weebly、Squarespace、Adobe Portfolio、cargo。
使用 CMS 內容管理系統，如：WordPress。
優點：架站速度快、視覺化的操作介面、不需要會 code、已符合適應性網站。如果已有使用 Behance並訂閱 Adobe CC，Behance中的內容可以直接轉為與 Adobe Portfolio網站的內容也不需要重新編排上傳。限制：免費的有廣告及無法使用個人網域，進階功能或個人網域需繳月費，有版型及效果限制。
以 HTML、CSS、JavaScrip等語法寫網頁。
優點：內容架構彈性，可個人化程度大，網路有許多免費資源可運用。門檻：必須會基礎的 HTML、CSS、JavaScrip等語法，並對網站架設有一點基本認知。
設計架站流程
規劃分析
建立網站架構
線上作品網站架構通常很單純，分為作品呈現、背景/經歷/技能等介紹、聯絡方式等。在大項目下可再細分，或是各種衍伸的單元，例如 blog、side project，依照需求調整。
構思作品類型適合的展示方式
其一是先決定版型後，依框架置入圖片內容，像是 Wix等架站平台就是以這種方式思考。其二是依照設計類型展示方式與功能，如：品牌、書籍、展覽、插畫等不同的形式可能會適合不同的展示方法。或是每件作品彼此的設計風格差異，可以依據單個 Project設計，或是依照網站整體風格，都是在這個階段可以思考的主題。
參考相關網站
依照設計類型、產業、風格等都是可以參考的方向，也有綜合的參考網站提供靈感。
awwwards — 有許多技術特效的網站評選。siiimple — 極簡風格的網站選集。Typewolf — 專注於字體的網站選評，會列出網站使用的字體。Bestfolios — 有 Google、Facebook等實習生、設計師的網站，專注於介紹設計師線上作品集與履歷。
設計
網站風格 & 內容設計
在規劃部分完成後，就可以開始著手內容與風格設計了，在版式、互動效果、字體、背景、滑鼠游標都是可以變化的設計細節。
- 針對各區塊 Nav、Main Content、Related Case、Footer… 再作細部思考規劃，例如 Nav的互動效果、Related Case要以多個專案並置或是
NEXT這樣單純的文字 link？專案頁面要呈現多少作品？什麼樣的訊息是重要的？ - 主版面區塊如何呈現一件專案的設計過程 ，從專案背景介紹、任務 、解決方法，到靈感、版型、設計原素、色彩與最終成品等。
- 字體的層級 h1, h2, h3, paragraph, BTN, link。
維持網站整體的一致性 Consistent，可以讓使用者容易預測他將找到的內容與找到他所需要的內容，在 Coding時也會更加輕鬆，此時設計系統的規劃訂立就顯得重要了。這時候可以再回到上一階段的參考相關網站，以區塊的方式分析好網站區塊間的關聯與設計方式。
Google font — 提供免費的線上字型，可以嵌入網頁中。Fontpair — 以 Google Font為基礎的字體搭配建議。Sip — Mac上最好用的螢幕取色工具，可儲存調色盤並與 Photoshop、Illustrator、 Sketch連結，$9.99美金。neede — UI、色彩、字形等工具搜集的網站。
Coding
開始寫 HTML, CSS
將設計稿轉化為網站，對於非 Dev的設計師，這裡大概是最困難的部分。
我所使用的開發工具是Adobe的開源軟體 Adobe Brackets。有許多免費Plugin，例如自動完成輸入的 Emmet、將整理排版斷行的 Beautify等，並且可以在Chrome上即時預覽網頁設計。
Envato, Bootstrap — 販售 HTML、CSS的Template，可加速開發，且有技術支援，在既有功能開發上遇到問題可以諮詢產品工程師。MDN web docs — Mozilla撰寫的網站開發資源。包含 HTML、CSS等語言學習與網頁入門介紹。有中文與英文等各國語言。
- Tip：為了適應
Retina螢幕，滑鼠游標也要使用 2倍像素的圖片。
{cursor: -webkit-image-set(url('Yuorimg') 1x,
url('Yuorimg@2x') 2x), auto;}圖片切版
- 依照框架尺寸切圖。
Mac最方便快速的工具是 Sketch，免費資源有Windows與Mac通用的 ADOBE XD。這兩款輕量的軟體在處理速度上比起Photoshop更快，出圖設定也是為了螢幕考量因而更簡潔快速。 - 多個 Icon可以使用
CSS Image Sprites，CSS Image Sprites是一項合併多張小圖的技巧，使用 CSS選擇器，減少多次傳送載入圖片需求，詳細說明可以閱讀這裡。 - 為了之後的網站圖片載入速度，圖片要經過壓縮，線上搜尋
compress jpg，可以搜尋到許多資源。
Retina CSS Sprite Generator — 免費的線上 CSS Sprite產生工具。shrinkme — 免費的線上圖片壓縮工具。image optim — 免費 Mac桌機版圖片壓縮工具。Jpegmini — Mac桌機版圖片壓縮工具，$59美金。
由於內容長度，上線的部分就留待下章介紹，有任何建議或是補充歡迎在下方留言，我將更新到文章中。架站愉快！
