不小心就學會！用 UI 設計方法製作網站

此課程因合約年限到期，預計於 2025/04/23（三）中午 12:00 正式下架、並停止於 Hahow 平台繼續販售。
已購課同學請不用擔心～ 仍可不限次數、重複觀看完整課程影片！完整說明與後續上課流程可參考：https://bit.ly/2BkmNTo。
而若你尚未購買課程、且非常有興趣的話，也歡迎把握最後機會，於 04/23（三）中午前一同加入課程呦！
（小提醒：課程下架後將不保證享有老師回覆問題、與作業批改服務）

「不懂做設計也不會寫程式，該怎麼學習設計網站呢？」

這堂線上課程企劃是給完全無基礎的朋友，一起領略設計的美好，讓 製作網站 這件事情，成為大家下班後或在週末時候的小興趣。

課程內容並不只有單單設計網頁而已，而是還要你真正的學會製作網頁，並且靈活運用設計技巧，定位上難度會剛剛好，課程將觸發你的興趣、提供成就感，但不會難到入門就放棄。

並且能透過系列教學熟稔從 0 到 1 的網站設計開發流程，可以藉此展開「Digital Product 數位產品」的設計技能，根據這張藍圖之後不論想成為設計師或開發者，都是個很棒的起點。

而課程中提供的網路資源，也能幫助你之後繼續強化設計技能，不論是接 商業專案、轉職設計師、自媒體品牌或為創業公司弄形象網站，通通都很可以！

嗨囉，你好！我是設計師 Riven 🙂

去年被 Adobe 邀去美國洛杉磯參加 Adobe MAX 設計師年會的時候，我發現了未來軟體的設計趨勢 ——「Creative For All」。所謂的設計軟體不再是以設計師為主要使用者，而是要讓每一個人都能夠發揮創意、在設計裏玩耍，這間接觸發了我想製作一堂適合所有人的網站設計線上課程。

而在過去在大專院校、企業機構教授 UI 設計的時候，總覺得同學們好不容易完成的設計稿，卻無法親自將其化為實際的網頁而感到可惜；而且啊，其實以業界的設計流程來說，UI 設計師如果能略懂一些前端開發的觀念，在設計上更能夠有發揮的創意可能性。

因此，我想透過這堂完整的線上課程，來讓對於網頁設計、UI 介面或網站開發都有興趣的同學，一次親身體驗一個網站的製作流程，我們可以從中理解介面設計的技巧以及程式運作的概念，讓大家從中體會到設計的美好，並為將來不管是擔任設計師、開發者或自由接案，都能夠想起這堂課所給予的「設計世界觀」。

本次課程內容將使用目前非常熱門的 UI 設計軟體 Adobe Xd 與網頁架設工具的 Webflow 來結合實現我們的第一個網站，讓你可以在剛開始的階段免費使用，降低學習門檻。

而在課程結束後，你將完成親手設計的 UI 介面設計稿，並親自架設出一個網站！

而在過程中，你將會學到 Adobe Xd 的軟體使用技巧，並藉此瞭解 UI 設計方法；並接著使用 Webflow 來架設第一個網站，重點目標是好看又好用，而不只是很陽春的網頁而已。

我的理想是讓架設網頁的方法簡單到跟週末去學做乾燥花藝、烘培甜點一樣，在享受動手做樂趣的同時，也可以學習到實用的技能，而且不需要任何的基礎，每個人都可以做到。

本堂線上課程的章節，預計將直接拆解網站的設計流程，一共分為五個步驟：

第一章｜從網頁的歷史說起、鑑古知今，並解析現代網頁的構成與趨勢，建立基本網站建置觀念。

第二章｜接著就進入到 Adobe Xd 學習軟體操作，一切歸零開始，甭擔心沒有電腦繪圖基礎。

第三章｜教導 UI 設計的方法與解構設計流程，從視覺技巧到排版理論都要會才行噢！

第四章｜將剛做好的 UI 設計稿用 Webflow 架設完成，可視化的程式編輯相當有成就感呢～

第五章｜從專案來示範設計師是如何從零開始建構出網頁並靠自己製作出來，也有一份小作業！

第一章：現代網站的構成

第一章節是歷史課！我們將從網站的起源開始說起，請同學們乖乖坐好～

在全球資訊網出現的早期，網站還只是單純的文字呈現；經過三十年的發展，圖片、影像、動畫、聲音，甚至 3D 或 VR 技術開始在網站上流行起來，網站也從簡單的佈告欄用途，漸漸發展成為品牌形象、線上商店、部落格，以及數位平台等多種型態，而設計的關鍵目的，也從「有東西看就好」一步步發展到了「使用者體驗最高」。

而所謂的 UI/UX 到底從何而來？使用者介面與體驗設計究竟是什麼？說來話太長了，我們開課之後再聊吧⋯⋯

➢ 本章節內容包含：網頁的歷史與發展、網站設計趨勢與工具、設計與開發網站的流程、現下 UI 設計軟體介紹、UI 設計該點的技能樹分析

第二章：Adobe Xd 軟體入門

Adobe Xd 是一個專門為 UI/UX 設計的軟體，一次滿足專案團隊中設計、原型、協作的流程，我們可以在上面設計各種尺寸的 Web UI 介面，利用繪圖、文字與排版等工具做好完整設計稿。

Adobe Xd 徹底整合以往僅用 Illustrator、Photoshop 的設計流程，你可以在 Ai 畫好插圖後複製貼上到 Xd，也可以直接打開 .psd 檔案，更酷的是日漸強大的 Adobe Xd 現在還可以將設計稿直輸到 After Effects 做動態設計。

從 Adobe Xd 出現至今，一直持續不斷地更新，隨著功能愈來愈強大跟完整，加上免費入門與友善介面，Xd 成為了學習 UI 設計最適合的軟體，而現在也成為了許多公司內部開發的使用工具。

➢ 本章節內容包含：如何操作「設計」面板、「原型」面板、「協作」面板、元件化設計模式及實用 Plugin 推薦

第三章：用 UI 設計思維設計網頁

同學注意噢 ⚠️ 要學會 UI 設計，不是只會軟體就可以！

在學會基本軟體操作之後，我們會接著來講講 UI 使用者介面設計的概念理論，要知道 UI 設計跟平面設計最大的差別，就是網站這東西是要給人操作使用的，多了互動成份以及資訊架構在，設計上不能只有視覺好看，資訊清晰傳達、瀏覽流程與體驗等都會是設計師要關注的重點。

放心！我以前高中也超討厭照著課本唸的老師，所以在這堂課程中的所有知識與方法，都會實際用舉例以及電腦畫面來解釋，同時也會要求同學們必須跟著一起做，真的做完才可以點下個單元噢！

➢ 本章節內容包含：UI 設計師在團隊的角色定位、UI 設計的視覺技巧、介面設計上的通用法則、設計師私藏的素材資源及關於網頁排版的潛規則

第四章：用 Webflow 架設網頁

在製作好 UI 設計稿之後，一般來說會交付給前端工程師來開發網站，但在這堂課程中，我們將一起體驗擔任開發工程師的角色！

我們會把規劃的好網站介面，一步一步地架設實現，而 Webflow 這個炙手可熱的架站軟體，將可以更直觀、直覺地協助我們製作網頁，不用再傳統上瞪著程式碼發愣，而是可以像疊積木那樣，一層一層地將我們的網頁做出來，而且是已經上線的網站。

➢ 本章節內容包含：初探介面與使用設計工具、認識前端程式語言、理解區塊與巢狀結構、開始建置網頁架構及製作響應式網頁

第五章：手把手帶你設計網站與實作

經過前面幾個章節，相信大家都已經知道網站的設計與開發流程；而在最後的幾個單元中呢，我將會示範幾種不同網站的誕生，從網站架構規劃、UI 設計到網頁開發，除了能夠複習前面學習到的內容之外，也可以順便學到許多不同的應用技巧。

並且，我們在這裡安排了一個小作業，需要各位同學分享自己設計與製作的網站，並與大家一同討論與交流，而我也會嚴格地給予設計與製作的最佳化建議，加上各種浮誇吹捧跟加油鼓勵 :)

➢ 本章節內容包含：設計公司品牌形象網頁、製作設計師作品集網站、架設個人自媒體部落格及扎實的實戰演練！

1⃣️ 示範｜設計公司品牌形象網頁

設計師接案或上班很常會接到製作 形象官網 的需求，這類型的網頁該如何企劃，又怎麼設計比較好呢？我們將在這個單元中實際走一遍。

2⃣️ 示範｜製作設計師作品集網站

如果想要有自己的設計作品集網站，但又不想用一般的套版網頁，可以利用這堂線上課程所學到的流程與工具，親手做出來，而在這個單元我也會分享其中該注意的重點。

3⃣️ 示範｜架設個人自媒體部落格

想寫文章、想做自己的部落格嗎？不論是經營個人品牌或要開始自媒體，擁有自己的網站通常都是最重要的第一步！而剛剛好這堂課程所規劃的設計流程，也能夠滿足到你。

在募資期間（5/28 12:00 - 6/26 23:59），募資達成率突破以下目標，將會直接贈送第五章節「手把手帶你設計網站與實作」中所製作的網站專案檔，提供給支持這堂課程的同學可以直接將網站專案拿去分析與拆解，輕鬆弄出課程單元中相同的網頁。

募資達標 200％ ➢ 提供網站專案「設計公司品牌形象網頁」

募資達標 300％ ➢ 提供網站專案「製作設計師作品集網站」

募資達標 400％ ➢ 提供網站專案「架設個人自媒體部落格」

「解鎖的網站專案檔」將於開課後的一個月內開始提供。

Riven 林育正

是數位遊牧型態的設計師，喜歡邊旅行邊工作的生活。在多間大專院校與社群機構擔任顧問講師，也是與 Adobe 官方合作的設計師，共同推廣 Xd (Experience Design)與環島舉辦設計工作坊，並在 2019 年獲 Adobe 邀請代表台灣以 Insider 身份飛往美國洛杉磯參加 Adobe MAX 設計師年會。

常在 Medium 上寫作分享設計上的技巧與觀察，累積超過 5K 位讀者追蹤，同時也是 Medium 官方認證 #Design 領域 Top Writer，當中熱門文章【UI 設計師轉職之路】獲得大量社群媒體轉載分享。

製作線上課程已累積超過 2000 位學員參與，同時積極經營 UI/UX 設計師社群（Adobe Xd Taiwan 目前為六千多位活躍成員）並主辦過百餘場主題小聚活動，期待能透過真實交流凝聚台灣在地的設計師能量。

近期也開始拍攝新的 Youtube 影片頻道，嘗試以影像媒材濃縮關於設計的知識，期待能夠將艱難的設計與開發技術，用麻瓜都能夠聽得懂的話，說給每一個人聽。

• Riven 個人臉書
• 關於 Riven

（經營設計師社群並與 Adobe 及 Microsoft 等企業合作聯合舉辦 Adobe Xd Meetup。）

（受邀於全台各地社群機構、大專院校與公司企業舉辦 Adobe Xd 與網頁設計工作坊）

回答問題頻率

對於大家想了解的課程內容等提問，我會最晚於一週內答覆你的提問！
學習過程中軟體相關操作問題可發佈至 Adobe Xd 臉書社團 與大家一同交流討論。

批改作業頻率

• 作業相關說明：本堂課程作業是學員需親手製作完成並上線的網站，上傳作業將會給予設計與製作的最佳化建議。
• 作業批改頻率：課程中如需老師給予回饋指導，可以將作品網站上傳至作業區，預計固定會在每週五批改 5~10 位學生的作業。

如何購買三人同行？

詳細的教學請詳閱《3 人同行方案購買與兌換課程方式》

STEP 0｜首先，你需要先找好另外 2 位學習好夥伴，並選出一位夥伴作為「購買人」
STEP 1｜購買人請於課程頁面點選「馬上預購」，進入「課程購買頁面」
STEP 2｜選擇付款資訊第二項「兌換 3 人同行 一人 NT$ 1,280 」
STEP 3｜填寫「收取另外兩組課程兌換序號的 Email 信箱」（購買人信箱）
STEP 4｜選擇「付款方式」與「發票選項」並按下「送出」
STEP 5｜完成付款後，購買人即可進入「我的課程」頁面，於「我修的課」區塊，確認課程！
並請千萬記得另外 2 位好夥伴還在等待他們的課程兌換序號喲～快去信箱收信吧！

註：三人同行方案為特殊優惠方案，僅限募資期間，無法與 Hahow Point 或 Coupon 併用。

➢ 教學影片： 影片1
➢ 購買三人同行優惠方案之後要怎麼兌換：影片2