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

Vera Chang
Oct 23, 2018 · 8 min read

今年我重新設計架設個人作品網站,這篇文章紀錄架站流程、各項線上資源及工具,適合想架設 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

VHS  — Design vitamin for creative mind.

Hearing & Seeing. Design vitamin for creative mind. 這本設計線上誌希望提供更多元的創作靈感,包含視覺設計、品牌與文字閱讀的綜合設計維他命。

Vera Chang

Written by

Visual/ UI Designer & Editor of VHS — Design vitamin for creative mind. 一本視覺設計與閱讀的線上誌|verachang.net

VHS  — Design vitamin for creative mind.

Hearing & Seeing. Design vitamin for creative mind. 這本設計線上誌希望提供更多元的創作靈感,包含視覺設計、品牌與文字閱讀的綜合設計維他命。

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade