2021年初時,我的個人網站首次上架。一年半時間過去,當初上架的網站無論是在程式架構上、視覺呈現上都已無法跟上需求,因此有了本次改版。

需求

2021年版的個人網站其實是倉促設計,欠缺關於字型、色彩、樣式的全面性完整規劃,導致後續在開發階段時遇到未規劃的頁面沒有規則可以參考,從而導致閱讀體驗紊亂。

在程式方面,由於沒有後台管理系統,所有程式碼都是硬刻在頁面上,使得後續維護不易,添加新內容也很困難。這部分雖是因當時程式能力不足導致,但若考慮到將來的新增作品、搜尋排名(SEO)培養,此部分仍是迫切需要解決的問題。

因此,總結現階段需求如下:

  1. 建立可長期維護、培養搜尋排名的個人品牌網站
  2. 擁有方便管理的後台,可專注於新增作品

※ 由於我想將設計、建立個人網站當作是新一個作品,因此傾向於自行開發、尋找解決方案而非利用外包完成。

改版策略

針對第一點需求,可以建立完整的設計系統與擬定設計規範來解決。針對第二點需求,考慮到我沒有足夠的程式能力處理有關網頁後台的複雜邏輯,因此我使用發展成熟且開源的網頁後台管理系統「Wordpress」來輔助。

為何選擇Wordpress?

WordPress是成熟的內容管理系統(Content Managment System, CMS),具 WordPress.org官網 表示,全世界有43%的網站採用Wordpress建置。同時,Wordpress具有高度自訂性、且支援各式功能外掛,能夠滿足我客製化個人網站的需求。

設計風格發想

在進行設計前,我首先擬了幾組我自認和個人印象相符的關鍵字,並以此發展Mood Board。接著我從Mood Board裡擷取了數個關鍵顏色,作為網站主題色,同時將主題色發展為一系列的色階,方便日後應用於元件的不同狀態(如:Default / Hover / Active)。

謝承邑個人網站2022 Design Mood Board
從關鍵字搜集圖片形成Mood Board,再從Mood Board中擷取共通的顏色

資訊架構

在規劃資訊架構方面,我首先將過去個人網站中所需要的內容模組羅列出來,並按照性質相似度、脈絡做歸類,最終歸納出以下四種主要頁面:

謝承邑個人網站2022 Design 資訊架構圖

Wireframe 與 Prototype

謝承邑個人網站2022 Design
鉛筆Wireframe
謝承邑個人網站2022 Design
Prototype
謝承邑個人網站2022 Design
Prototype

主頁

過去個人網站主頁第一幀僅呈現一張插畫且缺乏標題,訪客第一眼無法得知插畫和我個人的連結,且無法得知頁面的用意。因此在新版中,我加入了大標題並將圖片置換為個人形象照,讓人第一眼就能知道這是關於「謝承邑」的網站。

謝承邑個人網站2022 Design
新版更加強調「我」的個人特色,同時明確化網站的意圖

WORK

調整欄位編排由3欄變為2欄,並將作品的封面由自訂的直式規格改為常見的16:9橫式。這使我可以直接運用現有的作品圖當作封面,減輕額外製圖的負擔。同時,增大的封面也能使訪客的視線更加聚焦於作品圖片上,提升訪客點擊的意願。

謝承邑個人網站2022 Design
常見的16:9比例可以省去額外製作封面的負擔

過去的作品頁面設計理念是「展示最終成果」,但身為UI/UX設計師,作品理應著重於設計的發展脈絡,因此新版我以「文章」的概念設計版面,使版面能容納大量的文字闡述脈絡,並將文字外的元素留空,確保無干擾的閱讀體驗。

※ 由於在Prototype製作階段尚未完成個人形象照拍攝,因此是以假圖片代替。

Design Guideline

2024.9更新:因應HCYDS 2(第二代個人網站設計系統)推出,下方的設計規範已全數棄用。請參照此處了解最新的設計規範。

※網站字型方面,由於我已選用一款Google Font字型(Libre Baskerville),若是再載入中文字型可能會拖慢網站載入速度進而影響SEO,因此中文顯示我選擇使用Windows / macOS 平台預設的字型(即微軟正黑體與蘋方體)。

RECOMMEND

READ MORE

承邑的最新文章
PROMOTION

全面釋放設計生產力

集結超過10種以上專業工具的Spaciing(Figma plguin),可幫你省下可觀的寶貴時間。

立即購買

其實...

2022 年 1 月

茶嶼茶語

2023 年 6 月