嗨囉，我是設計師 Riven 🙂
這幾年關於打造個人品牌、自媒體經營等相關的討論很多，加上或許是今年疫情影響，大家待在家的時間更久了，有更多思想的餘裕去重新思考關於工作與生活的本質，因此許多朋友都開始經營了自己的網路形象，可能是更頻繁的臉書發文、寫部落格，或是積極演講等等，期待透過影響力的累積，來提高個人事業、副業，甚至是創業的更多可能性。
如果說要把自己當作一人公司品牌來經營，那麼弄個官方網站、或是說個人網站，就成為首當其衝該面對的主線任務。
今天這篇文章，我將以網頁設計師（同時也是內容創作者）的角度，跟大家一起討論「如何設計個人品牌網站」這件事情。而如果想要得到更好的閱讀體驗，可以到我的個人網站進行觀看 👇
為什麼會需要做個人網站
這年頭如果想要提高專業領域的知名度，我們很幸運地有相當多種途徑可以選擇；你可以開一個 Facebook 粉專來與粉絲互動，可以開始好好地拍照、製圖來經營 Instagram，更搞剛一點還能夠拍影片上傳 YouTube 頻道，或靠聲音錄製 Podcast 來跟聽眾交流等等，目前網路上視線可及的努力方式有很多種。
那麼，在這麼多社群平台撐起的網路世界中，我們還需要去架設一個網站嗎？
這題的答案我想只有你自己能夠回答 — — 更客觀地說，全看你想做到什麼程度。
試想今天如果是一位 IG 數十萬追蹤者的網美，那可能光是那個 IG 帳號就足夠她豐衣足食好幾年了，但如果我們今天想做的是個人「品牌」、一人「公司」，那架設網站就是必須的，可以去想想那些我們喜愛的品牌們，比如說穿搭衣服的愛牌、習慣戴的耳機品牌、喜歡吃的巧克力等等，是不是都有自己的官網呢？
相對的，怎麼樣的品牌會沒有自己官網？冒牌的、無人知曉的、地下販售的⋯⋯這些關鍵字是你想要經營的方向嗎～
如果說到這裡讓你稍微動搖了，接著我條列幾個之所以要用有個人網站的十個常見具體理由：
- 有自己的網站能與使用者（潛在客群或粉絲）建立信任感、提升形象。
- 自己做的網站可以有高度的設計彈性，滿足控制欲強的朋友。
- 懂了網站開發可以去客製一些小功能，提升使用者體驗。
- 建立搜尋引擎排名堡壘，防止未來意外引發的網路公關危機。
- 可以在名片印上自己網站的網址，這還挺帥的。
- 長期建立 SEO 搜尋能見度，大家可以更容易認識你。
- 能將多種類媒體放在一起，比如說文章、影片、照片及履歷，方便整理與瀏覽。
- 不用被平台（惡房東）演算法與規矩影響，開心做自己，並吸引相投氣味的人們。
- 產出的內容可以累積，而不會被社群平台的時間軸稀釋掉長尾流量。
- 使用者造訪會留下數據，這可以讓你分析、並追求更好的境界。
當然啦，每個人都會有自己想做網站的理由，但如果目前還沒想到，也可以先試著做一個看看，相信我們都聽過這樣的成功故事 — — 「剛開始沒有想太多，而在過程中逐漸找到方向，最後遇見想都沒想過的機會。」
我覺得經營網站就是這麼一回事，你永遠不會曉得這個網站會在將來帶你到什麼樣的地方、遇見什麼樣的人，以及碰到什麼預料之外的機會與資源。
聽起來夠刺激的吧，你準備好了嗎？
客觀地去設計個人網站
試著想想看，通常在幫一個品牌設計網站，上面會有哪些內容呢？
常見的有關於我們、產品資訊、最新消息與聯繫方式等等，而我們今天要做的，就只是將這個「品牌」轉換成「個人」來準備網站，那需要有哪些資訊就很清楚了，要怎麼樣讓讀者、追蹤者與粉絲等使用者族群更好地認識你，並更進一步產生互動，就是我們設計個人網站的主要目標。
而作為 Web UI/UX 設計師，我想先分享一下網站大概的前置準備流程：
- 規劃網站地圖 (Sitemap)
- 定義使用者 (User Persona)
- 擬定網頁線框稿 (Wireframe)
當然啦，以真正的數位產品設計的 UI/UX 開發流程來說，網站設計的步驟肯定是更複雜的，但如果只是自己一個人要設計個人網站，這三個步驟做好做滿，足矣。
壹、規劃網站地圖（Sitemap）
個人網站設計的第一步，就是先將網站的資訊架構做出來，可以透過簡單的紙筆來規劃，或是透過像 Whimsical 這樣的線上圖表工具來製作。
網站架構的話，可以選擇 Flowcharts 來以樹狀的方式來逐步長出網站結構。
一般來說，最常見的網站都是呈現樹狀結構，也就是可以從網站本體開始去延伸長出各個分頁的內容，我們在這邊就可以規劃到時候各個網頁要放的資訊，比如說關於我、部落格、聯繫方式與產品資料等等。
以我的 個人網站 來舉例，我就是先把自己想要放上去網站的資訊蒐集好，再依序做分類，然後才整理定案成各個要分別做的網頁。
而如果是想做 Landing Page 一頁式網頁的話，則是規劃出由上至下垂直的資訊區塊即可。
每個人的個人網站一定都是擁有不同架構的，而這也是最自由的部分了！在這個網站專案中，沒有客戶或主管能夠指使你做這個做那個，你想怎麼做就怎麼做。當自己家
而如果剛開始規劃還是找不太到架構方向，可以試著參考一些做得不錯的網站，像是你的理想 Role Model 人物官網，或是研究同行的網站，然後把該網站的架構練習自己規劃一次，說不定能夠洞察到一些有用情報。
而在架構好網站地圖的過程中，也請反覆思考這個網站要達成的目標有哪些？要溝通的事情是什麼？如果有任何想法或靈感，要趕緊註記在旁邊，這些都對於之後建構網站有很大幫助。
貳、定義使用者 (User Persona)
當我們規劃好心中理想的網站架構後，要努力意識到一件重要的事情 — — 「這個網站不是給自己看的。」
從網站上線後的那天起，可能每天會有幾百、幾千個人來瀏覽，等做起來之後，每個月甚至能有數十萬、百萬的觀看人次，而你身為網站的作者、設計者，在數字上僅僅是所有使用者裡面的其一，說實話基本上可以無視。
但這並不代表要達到 無我 的境界才能夠設計網站，這個人網站當然要有你個人的風格、特色，但做好的網站終究是給 別人 看的，因此我們要做的事情是盡可能地設身處地幫瀏覽者著想，他們會想看什麼？喜歡什麼？什麼東西有用？怎麼樣的網頁能夠留下印象？⋯⋯等等。
而這件事情，其實就是 UI/UX (User Interface & Experince) 最初始的構想 — — 「以使用者 (User) 為核心。」
而使用者究竟是誰、他們想看到什麼？我們可不能透過在電腦前面空想來得知，那樣的話跟通靈沒兩樣⋯
設計師能夠透過 研究 與 調查 來理解使用者（潛在瀏覽者、讀者們）的輪廓，並進一步做出他們有興趣的酷東西。
而最簡單的「使用者輪廓」，我們可能可以從 Facebook 粉專或社團後台的洞察數據得知，像是年齡、性別或興趣等等基本資訊，去推斷我們想要觸及的受眾族群是哪些。
但如果想更進一步去描繪「使用者素描」，可以補上更多細節，比如說平常工作上面對的挑戰、對於職業發展的看法等，愈完整愈好，如果有時間的話可以去面訪那些潛在的使用者，並詳加以記錄下來；又或者如果你曾經收過讀者來信或遇到學生找你給予指導，也能夠大概知道每個人都會遇到不同的人生課題，而這些使用者 痛點 如果能夠在網站建置前期就被發現，就有更大的可能性可以觸及更多潛在使用者，並製作對他們來說實用且感興趣的內容。
而我們也可以透過筆記工具軟體來整理這些預設使用者資料，上圖即是利用 Notion 來彙整的使用者頁面，並還能夠過表格去整理多位使用者素描，這樣一來日後在設計個人網站時，就會是很實在的依據。
做個人網站啊，萬萬不可落入做自己爽、自己開心，不管別人怎麼看的自我中心裡面，在我過去的教學經驗看到許多同學都容易犯這個錯誤，這樣到時候網站上線的流量不好的話，真的是一件令人心疼又難過的事情呢！
參、擬定網頁線框稿 (Wireframe)
經過前面兩個準備階段後，相信我們都對現在要做的這個網站有了一定的想法，並且也清楚自己在幹嘛了！這很重要噢，如果新手一股腦兒地直接動手做起網站，很容易弄到一半就產生「我是誰？我在哪裡？！」的想法，常常想架網站的人都是在這樣混沌的狀態下放棄了。
我們只要一步一步按部就班地將我們對個人網站的想像，逐一具象化就可以了，而在這個 擬定網頁線框稿 的階段，可以視作來初步嘗試繪製網頁的草稿，大致去安排一下每個網頁底下要放置的內容，以及想要的呈現方式等等。
跟前面兩個步驟一樣，如果你習慣用紙筆作業就用手繪就好，那如果是喜歡用電腦做事的話，我們則也可以繼續使用 Whimsical 來繪製 Wireframe 線框稿。
當然啦，如果你上網去查這個 Wireframe 關鍵字，會有很多是我們設計師在專業上比較嚴謹的方法，但如果今天我們是自己一個人要做個人網站，我的建議是，只要想像著你自己做的網站，邊動手撇一下，帶著開心又認真的情緒完成就好，並不要把它想那麼難！
而如果你已經有一些平面視覺的電腦繪圖軟體操作經驗，比如說 Adobe Photoshop 或 Illustrator，則這邊建議可以直接使用 Adobe Xd 來畫網頁介面，這樣在排版、編輯與設計上都比較好處理。
而線框稿（網頁草稿）完成之後，我們就可以趕緊將網站架起來啦～～
如何架設個人網站
推薦可以使用的架站軟體有 Webflow 以及 WordPress，而如果是想打造個人品牌網站的話，這邊會推薦使用後者的 WordPress 搭配主機與專屬網域。
申請你的專屬網域
當設計好了自己的個人網站，接著我們就可以來選一個自己喜歡的專屬網址！可以透過像 GoDaddy 這樣的平台來購買網域授權，通常一年的費用大概是幾百元，貴一點的幾千到幾萬都有。
而網域的選擇則是只有一個重點：「愈好記愈好。」
可以盡可能地短一點，或是就取特別一點的網址，這樣可以讓使用者留下印象。
以這個網站 riven.design 來說，十個字母以內都很不錯，而且 .design 目前也是相對少見，卻也是很直觀易懂的網域名稱，我們可以在網域平台商那邊用關鍵字找到相關可用的網址，並從中挖掘出適合的網域。
購買網站使用的主機
現在要架設網站變的滿容易的，我們可以使用 CLOUDWAYS 來購買租賃主機，然後一鍵就可以安裝架設 WordPress 系統。
而對於個人網站來說，網站載入速度非常重要，需要特別去針對主機設定與網站最佳化做加強。
選擇適合的設計主題
而架設好 WordPress 網站之後，則是可以選擇一個適合的佈景主題，這邊則是推薦使用 Divi 來做網頁的設計，彈性大且美觀。
建立個人網站的基礎內容
當作多網站連結縮網址
不知道你有沒有注意到許多國外 IG 熱門帳號，在個人檔案的地方都有置入 linktr.ee/XXX 這樣的網址，這是由 Linktree 提供的短網址服務，可以在上面放上你想要曝光的多個網站連結，而台灣也有本土新創團隊開發的 SocialVIP 可以用，都相當適合創作者用單一網址來串連自己的各平台帳號。
而在個人網站做好之後也可以做到這樣的效果，我們可以開一個網頁並自定義網址，然後將各平台按鈕都放上去，比如說你還有經營 YouTube、Instagram 等社群，如此一來用手機打開此網址的時候就能夠一覽無遺你的相關社群管道了。
而其實這樣的做法，除了源自於 Instagram 個人檔案只能夠放一個網址之外（而且貼文也不能放超連結），另一個初始原因也是因為現在的人使用手機瀏覽網站的比例 佔大多數，我們在設計網頁的時候，一定要把行動裝置的體驗優先考量進去。
而除了多平台網址之外，個人網站最下方的 footer 區塊也能夠好好利用一下，放上合作聯繫方式可以讓潛在顧客更好找到你，同時也還可以補上各社群帳號連結等等，讓瀏覽者隨時都可以找到你的社群（用不那麼刻意的方式置入）。
打造 MAP 網站
如果你看過最近很熱門的韓劇《Strat Up：我的新創時代》裡面的第 15 集，除了韓常務的笑容讓我徹底融化之外，更值得注意的是那集呼應的標題「最簡可行產品」(MVP)，這在新創圈可說是相當熟悉的產品作法，如果你對這個有興趣，可以買 Eric Ries 著作的《精實創業》(The Lean Startup) 來看，這本創業者人手一本的創業聖經，將 MVP 的精神徹底執行在新創公司的策略上。
但今天我想聊的是另一個更適合個人網站的設計策略 — — 「Minimum Awesome Product」最小讚讚產品（中文我自己翻的😅
簡單來說，我們今天可以不用把整個網站做到完美的狀態才釋出公開，那樣會有一些風險，像是自以為無懈可擊但現實市場不接受、自己覺得會紅但使用者其實不感興趣等等最悲觀狀況發生，而且將網站做到完美這件事情，以一人公司獨立製作的個人網站來說，不合乎現實時間與金錢成本等考量。
那麼，最好推出網站讓世人看見的時機是什麼呢？就是我們可以將製作完成度可能 60% 左右的及格狀態，但已經具備足夠資訊溝通能力、且會讓瀏覽者感到興趣的網站狀態上線，並嘗試推廣、分享與累積內容，並從中得到寶貴且真實的使用者回饋，並以此進行迭代再開發、再設計。
舉個例子，滿常會有企業教育或學校單位來邀請授課，但教學的主題每次都要反覆來回溝通，所以我就開了 合作邀約 頁面在我的網站上，上面有演講主題一覽，詳細描述了個主題的資訊，以及邀約講課的合作事項等等，可以讓窗口在邀請你之前就能夠了解詳情，在訊息或信件溝通的時候就能直搗重點，同時我也有另外開了 講師資料 來彙整一場授課活動需要給予的資料，像是講者照片檔案、簡介與經歷等等，來加速雙方的工作效率。
老實說，我在一開始想做這兩個網頁的時候，都只是覺得「啊～每次都要找資料好麻煩啊～」的心情，那簡單做了網頁之後，之後窗口要東西就只要瀟灑地貼上一串網址就好了，超快而且在外面用手機也能即時回覆，而屢次獲得了對方「好專業！😲」的回覆，除了合作上更愉快之外，我們也能夠將這些回饋，持續更新在原本的 MAP 網頁上。
用部落格長期發展網站內容策略
欸問你噢，你怎麼看現在寫部落格這件事情？會不會覺得有點過時，現在大家平常都在用臉書跟 IG 了，有人還會看部落格嗎～
那你現在看的是什麼⋯⋯ 😗
部落格雖然行之有年， 但隨著圖文、影像、Podcast 等多種類媒體的興起，文字本身的地位仍然屹立不搖，喜歡看長篇文章的讀者大有人在，我之前在 Medium 上的文章幾乎都是超過 10 分鐘閱讀時間的長文，但從後台數據來看，看到最後的人真的佔了不少比例呢！因此我大膽推測，現在留下來在部落格看文章的讀者，是能夠更專注且更喜歡在這樣媒介上的人，而離開的人是則是對圖片、影片、聲音呈現更有興趣，也就是媒體內容達成了分眾 — — Medium 歸 Medium，YouTube 歸 YouTube，Instagram 歸 Instagram。
但重點是，現在的部落格可不是只能夠寫文字而已，我們還能夠輕鬆地將 YouTube 影片置入文章當中，也能夠將 Instagram 原始貼文嵌進來，而 Podcaster 的 Soundcloud、Firtstory 等播放器也可以放進來當播放器，部落格可以承載現代各種網路的媒體內容，超棒的！
所以我們的個人網站 — — 如果你是用 WordPress 架設的，那就更適合了！來開始經營並撰寫部落格吧，除了能夠累積讀者，還可以增加搜尋引擎能見度，接著還可以發展電子報訂閱，還能更進階的做成付費訂閱與電商系統或線上課程平台，讓這個人網站有無限種可能。
https://riven.design/blog
✅ 個人網站重點資訊清單
個人品牌網站會因為擁有者本身的專業領域不同，而需要不同的架構與內容去編輯，但總歸來說有一些是屬於通用型區塊，以下整理給大家有哪些東西或通常一定會有，可以作為製作自己網站時的檢查清單。
- 在關於我的地方放上清楚且簡短的個人職涯介紹，讓不認識你的人可以用最快的速度知道你是誰。
- 乾淨且具有專業感的形象照，請一定要排預算去找攝影師正式拍攝，禁放生活照。
- 羅列過去經歷的事蹟、獎項、紀錄，建議可以條列式以方便日後持續更新上去。
- 各個社群平台的連結，以及聯繫信箱。
- 職業工作情境照片，以及可以代表你日常職場環境的紀錄照等，提升信任感與沈浸感。
- 合作品牌 LOGO 一覽（或課程學員評價、邀請朋友寫一段對你的看法）
- 關於你個人的媒體報導、轉載、刊登紀錄，或是維基百科跟受邀專訪等。
- 產品或服務等業務項目的資訊。
- 部落格或影音等創作內容，以及電子報訂閱系統。
- 版權宣告。
後記：做一個網站，然後把這一生放進去。
現在網路社群呈現的樣態，會讓想經營個人品牌的人陷入焦慮與慌亂，既想經營 Facebook 粉專，也建立了臉書社團，同時間可能還要更新 Instagram、發送 Email 電子報，還有 YouTube 頻道、部落格、Line@、Telegram.., 等等，我們都曉得這樣全平台的社群媒體佈局，可以更好地得到不同受眾族群的關注，但在起步階段要把這些平台顧好，真的很累⋯
也許你需要的，就是這麼一個屬於你的網站，上面承載了你所有辛苦製作的內容，還能導流到各個社群平台上。
同時，也能夠將關於你的這一生，包含你的價值觀、做過的事情、累積的成就，透過網站好好地完整紀錄下來，化做名為「About」的網頁。
也許我們還會因為各種理由去猶豫要不要開始去經營個人品牌網站，但我想除了這篇文章提到的務實理由之外，最重要的是如果你想要擁有、你想要做這件事情，就趕緊開始這趟冒險吧，現在的科技幫助下我們可以很容易地解決技術問題，剩下的就是享受這個像家一樣的網站，並持續地經營它。
我是 Riven，我們下次見。
