[設計師的作品集網站設計策略]Adobe Portfolio 可以做啥?如何將 Behance 做成好看作品集網站!(圖文詳解教學)

本篇原文刊載於 RAR 設計攻略:https://www.rar.design/adobeportfolio

淺談 Behance 網站

Behance 有著像是社群網站般的介面設計
💡推薦關注設計師
Crystal Kung:https://www.behance.net/crystalkung
Yi-Hsuan Li:https://www.behance.net/yihsuanli
Ting-An Ho:https://www.behance.net/tinganho
Behance 的文字編輯器元件相當多種可用(連 NFT 都有)
順帶一提現在 Behance 個人頁面也可以放上你所鑄造的 NFT 們 *僅持有不會顯示
Behance 的作品頁面可以呈現完整的概念與過程介紹
同時也能夠放上 GIF, MP4 等媒體格式

Adobe Portfolio 使用教學

在 Adobe Portfolio 首頁登入
選擇主題樣板
可以預覽不同裝置尺寸的介面
選到想要套用的 template 後就會建立網頁
自動生成作品集網頁了!

頁面

在「頁面」裡可以設定網站選單上的項目,並替作品專案排順序與分類,同時也可以新增新的頁面來放上想放的內容。

點擊頁面旁的小齒輪可以指定頁面為首頁
點擊左上角的 + 號可以新增頁面與相簿,以及外部連結等等。
頁面在此處指的就是網頁,除了作品頁之外可以額外去設計新的頁面

整合

在「整合」裡可以選擇要匯入的作品庫,如果你是攝影師,也可以將 Adobe Lightroom 上的相簿,或是 Adobe Stock 的檔案自動串連到網站來。

優秀攝影師的作品相簿排一起相當舒服
上面用電腦的是我😁

主題

而如果想要更換剛選擇的網站主題,可以在「主題」這裡更改。

設定

如果介面上不是中文,可以在「設定」裡面的 帳戶和地區 調整,那若想要追蹤網頁的瀏覽與互動數據,則是在 分析 這邊輸入 Google Analytics 的追蹤程式碼即可。

設計 Adobe Portfolio 網頁

而在替網站同步好 Behance 或 Lightroom 上的專案後,我們可以接著來進行網頁設計的步驟。

刊頭背景

刊頭這翻譯實在是比較少見一點,不過我想就是與一般網頁設計裡的 Hero image 是類似的存在,我們可以先在這裡定下網站的主視覺,可以用滿版的圖片去呈現,也可以用個人形象照來排版等等。

深色/淺色背景

整個網站 的設置處,可以先大範圍地將網站調整成自己喜歡的樣子;例如說可以將網頁改成深色背景(如果作品專案字數很多,可優先考慮)。

網站容器 (Container)

網站容器 點進來後,可以設定網頁 container 的數值,比如說想要將網頁弄成滿版呈現,那就在內容的地方設成 100%;如果想要窄一點(有雜誌感)則可以將數值調小,同時左右邊界的數值可以分別設定。

可以直接連到不同專案的頁面看看效果

作品牆

基本上 Adobe Portfolio 的定位上是快速建立作品集網站,所以在整體介面設計的調性上,需要在一開始的 主題 就決定好,其中最核心的還是作品的陳列方式。

網頁欄位佈局

除了從 Behance 自動匯入專案成頁面之外,我們也可以自己手動來建立網頁,而在頁面裡可新增的網頁元件其實跟 Behance 的拖曳式模組基本上差不多。

在元件左右 + 號可變成兩欄佈局
中間這個拉桿可以調整欄位左右兩側的比例

預覽 RWD 裝置尺寸

而我們在頁面編輯好網頁要放的內容之後,要記得透過左下角的 預覽 來看看頁面在不同裝置尺寸間是否正常顯示,如平板、手機與手機橫放等等。

目前已知的 Adobe Portfolio 缺點

  • 不支援完整 HTML/CSS 等網頁語法

發佈 Adobe Portfolio 網站

在作品集網站弄得差不多之後,就可以來準備發佈網站,這邊有幾個一定要做的基礎步驟:

fav icon

這是會放在瀏覽器的索引標籤上的小圖示,Adobe Portfolio 裡可以在 設定 找到 最愛圖示 (Favicon) 來上傳,記得要選擇正方形且背景為透明的 PNG 檔案。

頁尾 (Footer)

網頁最底端的 Footer 預設有一行 Powered by Adobe Portfolio 的文字,這我們可以在 整個網站 > 頁尾 的地方透過簡單的 HTML 語法來更改,比如說以下程式碼:

Designed by <a href=”https://riven.design/" target=”_blank”>Riven</a>

自訂網域

Adobe Portfolio 可以將網域換成自己想要的網址,我們能在 設定 > 網域名稱 中進行更改,如果你是要長期經營自己的網站,這個步驟相當重要!

社交分享縮圖

設定 > 社交分享縮圖 這邊我們可以手動設定一張縮圖,這是讓你之後分享網站連結在臉書、LINE 等等地方的時候,所顯示的網頁封面圖片,攸關於在進入網站前的第一印象,可以謹慎地製作或找到適合的圖片。

Adobe Portfolio 使用體驗

整體操作體驗來說,不僅中文化相當友善,在編輯網頁內容時也不太會有反直覺或卡卡的時候,如果用過其他架站平台應該懂那種煩躁感。

--

--

是數位遊牧型態的設計師💻 喜歡邊旅行邊工作的生活,逐網路、插座與咖啡而居。期待能夠將艱難的設計與開發技術,用麻瓜都能夠聽得懂的話,說給每一個人聽。更多關於我:riven.design

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
林育正 Riven

是數位遊牧型態的設計師💻 喜歡邊旅行邊工作的生活,逐網路、插座與咖啡而居。期待能夠將艱難的設計與開發技術,用麻瓜都能夠聽得懂的話,說給每一個人聽。更多關於我:riven.design