Illustration by Vera Chang

設計師如何架設作品網站?從規劃到上線 — 流程 & 資源 (上)

--

今年我重新設計架設個人作品網站,這篇文章紀錄架站流程、各項線上資源及工具,適合想架設 RWD靜態網站, HTML、CSS只有基本了解的設計師。

文中將紀錄架站過程的步驟、資源及工具,主要是作為平面圖串連整個過程,相關細節以外部連結方式介紹。

線上作品集架設管道概覽➝ 規劃分析➝ 設計➝ Coding➝ 上線

線上作品架設管道概覽

要建立個人線上作品集的方式,難易度及個人化程度由上往下遞增

有固定版式的設計師社群,如:BehanceDribbble

優點:只需考慮內容,平台既有流量大、已符合適應性網站。限制:版式固定、且平台供常會有各自的偏好的類型。
Behance 單件作品以向下滾動的網頁方式呈現
Dribbble 單件作品以screenshot方式呈現

使用架站平台,如:WixweeblySquarespaceAdobe Portfoliocargo

使用 CMS 內容管理系統,如:WordPress

優點:架站速度快、視覺化的操作介面、不需要會 code、已符合適應性網站。如果已有使用 Behance並訂閱 Adobe CCBehance中的內容可以直接轉為與 Adobe Portfolio網站的內容也不需要重新編排上傳。限制:免費的有廣告及無法使用個人網域,進階功能或個人網域需繳月費,有版型及效果限制。
架站平台的視覺化介面的直覺編輯方式

以 HTML、CSS、JavaScrip等語法寫網頁。

優點:內容架構彈性,可個人化程度大,網路有許多免費資源可運用。門檻:必須會基礎的 HTML、CSS、JavaScrip等語法,並對網站架設有一點基本認知。

設計架站流程

規劃分析

建立網站架構

線上作品網站架構通常很單純,分為作品呈現、背景/經歷/技能等介紹、聯絡方式等。在大項目下可再細分,或是各種衍伸的單元,例如 blog、side project,依照需求調整。

構思作品類型適合的展示方式

其一是先決定版型後,依框架置入圖片內容,像是 Wix等架站平台就是以這種方式思考。其二是依照設計類型展示方式與功能,如:品牌、書籍、展覽、插畫等不同的形式可能會適合不同的展示方法。或是每件作品彼此的設計風格差異,可以依據單個 Project設計,或是依照網站整體風格,都是在這個階段可以思考的主題。

參考相關網站

依照設計類型、產業、風格等都是可以參考的方向,也有綜合的參考網站提供靈感。

awwwards — 有許多技術特效的網站評選。siiimple — 極簡風格的網站選集。Typewolf — 專注於字體的網站選評,會列出網站使用的字體。Bestfolios — 有 GoogleFacebook等實習生、設計師的網站,專注於介紹設計師線上作品集與履歷。
awwwards 有許多技術特效的網站評選
siiimple 極簡風格的網站選集
Typewolf 專注於字體的網站選評,會列出網站使用的字體
Bestfolios 專注於介紹設計師線上作品集與履歷

設計

網站風格 & 內容設計

在規劃部分完成後,就可以開始著手內容與風格設計了,在版式、互動效果、字體、背景、滑鼠游標都是可以變化的設計細節。

  • 針對各區塊 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上最好用的螢幕取色工具,可儲存調色盤並與 PhotoshopIllustratorSketch連結,$9.99美金。neede — UI、色彩、字形等工具搜集的網站。
Google font
Sip Mac上最好用的螢幕取色工具

Coding

開始寫 HTML, CSS

將設計稿轉化為網站,對於非 Dev的設計師,這裡大概是最困難的部分。

我所使用的開發工具是Adobe的開源軟體 Adobe Brackets。有許多免費Plugin,例如自動完成輸入的 Emmet、將整理排版斷行的 Beautify等,並且可以在Chrome上即時預覽網頁設計。

Adobe Brackets 工作畫面
Envato, Bootstrap — 販售 HTML、CSS的Template,可加速開發,且有技術支援,在既有功能開發上遇到問題可以諮詢產品工程師。MDN web docs — Mozilla撰寫的網站開發資源。包含 HTML、CSS等語言學習與網頁入門介紹。有中文與英文等各國語言。
Envato
  • Tip:為了適應Retina螢幕,滑鼠游標也要使用 2倍像素的圖片。
{cursor: -webkit-image-set(url('Yuorimg') 1x,
url('Yuorimg@2x') 2x), auto;}

圖片切版

  • 依照框架尺寸切圖。 Mac最方便快速的工具是 Sketch,免費資源有 WindowsMac通用的 ADOBE XD。這兩款輕量的軟體在處理速度上比起 Photoshop更快,出圖設定也是為了螢幕考量因而更簡潔快速。
  • 多個 Icon可以使用 CSS Image SpritesCSS Image Sprites是一項合併多張小圖的技巧,使用 CSS選擇器,減少多次傳送載入圖片需求,詳細說明可以閱讀這裡
  • 為了之後的網站圖片載入速度,圖片要經過壓縮,線上搜尋 compress jpg,可以搜尋到許多資源。
Retina CSS Sprite Generator — 免費的線上 CSS Sprite產生工具。shrinkme — 免費的線上圖片壓縮工具。image optim — 免費 Mac桌機版圖片壓縮工具。Jpegmini —  Mac桌機版圖片壓縮工具,$59美金。
ADOBE XD 工作畫面
Jpegmini Mac桌機版圖片壓縮工具

由於內容長度,上線的部分就留待下章介紹,有任何建議或是補充歡迎在下方留言,我將更新到文章中。架站愉快!

謝謝你看到這裡,或許你想訂閱一份電子報?

Hello,我是Vera,目前在 IT 產業工作的 Visual Designer。如果有任何建議或合作提案也可以透過以下這些方式聯繫。BehanceDribbbleWebsite

--

--