我們曾介紹過,帶領架站新手解讀企業網站的網頁設計:網頁設計範本-新手如何向網頁範本學習?讀懂企業用網站的成功元素;今天我們來說說建立個人網站,在找尋喜愛的優秀範本時,我們又能從中抓住哪些背後邏輯、應用在自己的網頁編排設計呢?

對於建立個人網站來說,不論有沒有在之中進一步導出商業行為、讓人從網站下單購買你的作品等;我們都應該將網站視為你的個人形象表達,是一個把自我價值化為品牌去推廣經營的外衣。但是對個人品牌經營者而言,在架站中加入下單、合作聯繫等功能,通常是主要目的之一,讓我們以「有商業行為的個人品牌網站」的範本來說說下面的例子。

建立個人品牌網站之前,要知道的小細節:

與之前的企業網站同樣,發揮視覺設計的地方不外乎有 (1)首頁、 (2) 選單(下拉式或橫列式)、 (3)內頁設計,視覺設計上以功能按鈕編排、主副色、排版方式等做變化。比起企業網站,個人品牌在網頁設計時更重視一個人的自我風格和美感,能否得到 TA 的「眼緣」、發揮公關作用幫作品增加黏著度和推廣度。

在初步構想網站之前,要先考慮視覺設計 (配角) 、和發表的內容 (主角) 之間,相互平衡的比率多少;不要在架站時熱血起來做過頭、搶了內容作品的風采。不同性質的個人品牌,拿捏的比例也稍微不同。例如 UA 設計師、視覺設計師的個人品牌網站,那這個網站本身就是他作品,使用搶眼、精緻花俏的動畫多一些是常見的;另外如知識文章部落格、手工藝品牌等,網頁設計的存在性是為了烘托內容本身,那就建議不爭不搶地當個令人舒服的背景。

一起來看看以下設計師的例子吧:

芬蘭籍插畫家,擅長創作繪本、包裝及家具設計,曾為寶格麗等國際級精品繪製櫥窗設計。

網站進入畫面非常簡潔有力,由三張類似全版面的 slide 組成,像是可以自由切換的三張巨大海報。由點擊上方的三個母單元選項:個人簡介、平面設計、插畫作品,直接進入內容。是既能使用方便,又兼顧美觀大氣的呈現;使用這樣的版面時,建議設定成點擊式輪播下一張、不要每隔一、兩秒就自動跳輪播,讓人看圖片到一半就被跳走、無法好好欣賞。

選擇想看的頁面後往下拉,可以很直觀地看到作品選單的每個首圖;身為繪師、一張好圖片勝過千言萬語;例如左上角的櫥窗整體照片、點擊進入後才展示設計細節;在選擇首圖時不一定用得是該系列作品中最美麗的一張,而是最能告訴觀者「這個是什麼作品系列」的照片,讓人一目了然, 點進去再細細品味作品的精彩之處。

編排首圖時,也建議同時計劃排版風格,例如之前文章提及的留白、大小框比例等, Lotta Nieminen 就在 Illustration 頁面使用單一種尺寸的長方形、 Graphic Design 頁面並用直、橫向長方形,這樣讓觀者作區別自己的所在位置,不會眼花撩亂。視覺運用上,有些設計師選圖時會特地選用類似色彩、或是同樣拍攝角度的圖片,排列在一起表達強烈的自我風格;或是原本是黑白圖片、遊標滑過時變彩色等,多製造觀者有互動的印象。

點擊進入其中一作品觀賞, Lotta Nieminen 一樣是「用圖說話」的風格,把這個廚房系列兒童繪本 《 The Cook In A Book 》 的細節一一展現;照片中也不停強調這系列繪本最大的獨特之處:互動性;小朋友透過拉出、推轉繪本夾頁, 讓看食譜像在玩扮家家酒一般生動。

作品文字描述中,把購買連結用同樣風格顏色的字體插入其中,讓其顯得完全不突兀、畫面的質感絲毫不被破壞,值得學習。不過,左右的文字說明可以再放大一些,更利於閱讀。卷軸往下拉到底,還建立了 More Projects 的圖片連結,置入同質性高的作品吸引觀者繼續閱讀,讓不同作品為彼此增加點擊率;這裡為了區分與上方的作品、在背景選用不同顏色區隔開。

風格強烈的新生代日本 UI 設計師,為髮型設計師、髮藝用品建立品牌官網。

身為網站設計的作品集,本身這個網站就充滿了設計師的自我風格;使用大塊、戲劇張力十足的顏色以及圓角、圓形圖案做出滿月之夜的意象。主副色選擇對立明顯,以深藍和白當基底、襯托跳出橘紅色字體。背景用大於網站畫面的底圖、讓底圖與雲層元素隨著滑鼠移動;在卷軸往下拉時,不同單元的頁面除了垂直的浮上來、動畫特效又橫向刷過,十分充滿律動感。

在畫面右上角和左側邊, Kuon Yagi 的網頁設計將功能選單都符號化、呈現元素和橫線,優點是整體畫面的美感可以不受文字干擾;缺點而言,卻容易讓人找不到選單在哪裡、或者點錯要去的頁面,除非是有共同默契的同溫層族群,才能一眼看出設計者的巧思。在架站時,對於自我風格追求和使用者友善之間,如何拿捏就看個人選擇了

點入作品頁面,可以明顯感覺出來與首頁不同得是, Kuon Yagi首頁注重第一印象、強烈的「我」的展現,而作品說明頁面就非常直觀及使用者友善,只要順著往下拉看作品照片和說明即可。背景是閱讀舒服的白色、照片排版在清楚大方之於,適時利用斜角增加活潑度、標題也加入一點橘紅劃重點;活潑的程度僅少量使用,不像首頁這麼誇張。而說明字體則使用與首頁統一風格,讓整體同調。另外,卷軸拉至最底,貼心加上 BACK 往左箭頭、並且設計也風格統一,也是很不錯的小巧思。

來自羅馬尼亞的視覺設計師、插畫家。具有細膩的筆觸和敏銳的觀察力,用童趣溫暖的設計元素表現大眾生活中的酸甜苦辣和微小的情緒、渲染觀者撫慰人心。

與 Lotta Nieminen 同為視覺設計與插畫家, Paula Rusu 在被景色選用一樣是讓眼睛沒有負擔的白色配單一淺色;但我們會發現 Paula Rusu 的排版比 Lotta Nieminen 活潑一些:選單的字體胖一點、帶有可愛感;右上方和左下方分別有不同選單,右上針對該網站連結不同子網頁(還加入了放大鏡搜索功能)、左下則刻意直式排列出社群連結(FB、IG、Dribbble、Behance等),用直、橫做出選單的性質區隔,在不影響閱讀的情況下,可以當成是文字排版的選擇之一、凸顯變化。與 Lotta Nieminen 同為視覺設計與插畫家, Paula Rusu 在被景色選用一樣是讓眼睛沒有負擔的白色配單一淺色;但我們會發現 Paula Rusu 的排版比 Lotta Nieminen 活潑一些:選單的字體胖一點、帶有可愛感;右上方和左下方分別有不同選單,右上針對該網站連結不同子網頁(還加入了放大鏡搜索功能)、左下則刻意直式排列出社群連結(FB、IG、Dribbble、Behance等),用直、橫做出選單的性質區隔,在不影響閱讀的情況下,可以當成是文字排版的選擇之一、凸顯變化。

卷軸下滑出現的作品目錄排版錯落有致,與 Lotta Nieminen 對比, Paula Rusu 的照片是左右穿插地排列,配合每件作品不同,照片以最適合其作品的大小呈現;整體不會制式化。作品日期故意垂直倒在側邊,當游標滑到想看的作品時,照片內會出現半透明的方框顯示作品的名稱;這個小設計建議用半透明的,讓觀者在考慮點選哪個時,游標滑過還是可以看到這張照片是什麼,同時兼具趣味性語易讀性。

打開其中一個作品介紹頁面,文字說明中置入與作品相關的連結 Fast Company magazine 、及標題下方的兩個分類 : EDITORIAL 、 ILLUSTRATION ,能夠當作快捷找查的功能,強化網站的結構性;讓觀者在逛網站時,能更方便連結到自己喜歡作品類型,繼續閱讀。

排版設計上,說明文字的第一個字母放大、置於背後當 highlight ,可以抓住人的眼光。說明文字不需要多,若能精準地用兩、三句話打中設計的核心是最好的;其他的延伸意義,就讓觀者透過圖像去連結、感受。 Paula Rusu 在選用圖片時,除了設計/繪畫本身的圖片,也加入製作完成的商品照(例如雜誌),讓觀者了解該創作最後的模樣、增強自己創作的說服力。

卷軸最下方,與 Lotta Nieminen 一樣會連結相關作品,還加上了「前一個作品」、「後一個作品」選項,增加點擊率。最後, 身為接案創作者, Paula Rusu 和 Lotta Nieminen 都會在網站上放上知名客戶清單,為自己的實力背書

做一名創作者,我們自然希望作品都能被細細地品嚐;因此建立作品集網站時,如何拿捏讓人眼睛一亮、和閱讀不吃力之間,就是一門學問。除了平時多逛逛各家設計師/創作者的網站做功課,別忘了也在艾格的網頁設計知識區挖寶。當然也能與我們艾格設計的設計師和 PM 做諮詢,了解一般大眾在逛網站時,會注意到那些小細節,日益精進自架網站的成熟度,成為自己專屬的網站設計大師吧。

疫情期間,讓你的事業逆勢成長。
了解更多艾格網頁設計解決方案:
網頁設計首選艾格|全程遠端網頁設計,即刻數位轉型

相關文章:
網頁設計範例怎麼看?教你如何找到理想的網站範例
品牌官網的重要性:為什麼你應該要有一個品牌官網?

相關文章
Yoast SEO和Rank Math我該怎麼選擇?

當你好不容易將 WordPress 網站的主機和個人網域完成申請,接著就是要思考該選用那些外掛來提升自己網站的 SEO 排名。如果你正因為市場上琳瑯滿

網頁設計常見問題有哪些?

目錄 若要成功銷售一個品牌,首先得讓自己愛上它。然而,正因為太過沉浸在自家品牌的經營,容易讓換位思考的能力失靈、陷入一廂情願的溝通模式。資訊爆炸時代,