從 Figma 到 HTML CSS 和 JavaScript 的 UI UX 設計混合

Contents

了解如何成為具有用戶界面設計、用戶體驗設計、Web 開發、Bootstrap 的全端設計師

從這 31.5 小時的課程，你會學到

設計 3000 個 Figma 互動式組件變體和 FigJam UX 理論
將 Figma 組件轉換為實時 HTML CSS 組件
成為懂設計和程式碼的獨角獸 UI UX設計師
使用 Figma 構建可擴展的設計系統並自動化手動流程
無縫檢查和構建你的 Figma 組件以進行開發移交
使用 HTML CSS JavaScript Bootstrap 5 網格系統進行響應式 UI 開發

要求

無需先前的 HTML、CSS、JavaScript Bootstrap 知識
無需事先的 UI UX 和圖形知識
Affinity Designer 的免費試用軟體
使用免費版本的 Figma

課程說明

從 UX 理論到 UX 工程集中在一處

與我一起構建從 UI 設計到 Web 開發的一切
加入我，成為 Figma 外掛狂熱的超級用戶
掌握行業標准設計和開發流程

創意專案

使用 Figma Auto Layout 創建複雜的網頁設計佈局，並使用純 CSS Grid 和 Flexbox
將 Photoshop 轉換為 HTML 標記並使用 CSS 設置樣式
使用純原生 JavaScript 變形 SVG
使用 JavaScript 觸發 JavaScript DOM 事件並控制 CSS 動畫
使用 CSS 過渡和動畫學習互動設計
使用 Bootstrap 5 Grid 系統開發生產就緒的響應式設計
使用 Figma 作為視覺設計師自動化你的品牌風格指南
通過 Affinity Designer 使用設計原則創建徽標和 YouTube 縮略圖視頻

Udemy 學生評論總結：

Zoe Chin —“Hossein 的教學非常有凝聚力。我是程式設計的初學者，一直被程式碼嚇倒，但這些課程幫助我輕鬆理解 UX 開發中的新概念，我敢說我很享受這整個學習過程。謝謝！:) ” ⭐️⭐️⭐️⭐️⭐️
Ebru Aksoy — “很棒的課程！我已經對 Web 開發的編碼方面有所了解，但我覺得我需要一些 UX/UI 的觀點，所以我最終參加了 Hossein 的課程，我非常高興！他擴展了我的想像力，特別是 SVG 部分和最後的 10 個偉大專案。我還通過他精心結構化的教學風格來提高我的 CSS 和 JavaScript 技能。我一定會把我從這門課程中收到的筆記放在我身邊，同時致力於進一步的專案。絕對推薦你他的課程。非常感謝， Hossein” ⭐️⭐️⭐️⭐️⭐️

Omar A — “我希望我參加這門課程，而不是在其他人身上浪費無數小時。作為一個嘗試學習 UX/UI/前端的人，這太棒了。超級合乎邏輯的課程結構和流程。如果可以的話，我會給十顆星。謝謝 Mr. Hossein.” ⭐️⭐️⭐️⭐️⭐️
Maria Beatriz — “我真的很喜歡這門課程。這是我在網路開發和 UX/UI 方面做得最好的課程之一。內容簡單、原創且超級有用。你必須嘗試一下！” ⭐️⭐️⭐️⭐️⭐️
Darian Brandt — “我喜歡簡單、圖形化和令人難忘的 UI 和 UX 設計說明，它教會了我一些甚至我都不知道我需要知道的東西。整個課程非常容易理解，但其深入的程度卻出乎我意料之外。我學到了很多東西超出我的預期，謝謝”⭐️⭐️⭐️⭐️⭐️
Prem Sager — “這是一個很棒的課程，也是所有前端開發人員的必修課。 UX 部分得到了很好的研究和展示。 HTML 是一個非常好的複習。完成了 CSS 和 JS 部分，這些內容非常棒，真的提高了我的技能。” ⭐️⭐️⭐️⭐️⭐️
 Jayed Mahmud — “我想學習與網站設計相關的程式設計，這在本課程中實施得非常好。本課程從視覺化開始，這絕對是出色的。我仍在繼續，但到目前為止這是一個很棒的課程。謝謝。” ⭐️⭐️⭐️⭐️⭐️
Ebe David Temiloluwa —”在這門課程中，我得到了我在專案中從未遇到過的那種前端開發設計。如果你正在尋找使用良好的 css 和 javascript 製作的新型設計，那麼這就是你的課程。” ⭐️⭐️⭐️⭐️⭐️
Jeisson Zambrano — “本課程的目標正是我來這裡尋找的目標。解釋很清楚，並側重於 UX/UI 開發的商業視角。” ⭐️⭐️⭐️⭐️⭐️
Pratham Bhatter — “這必然是 Udemy 上最好的 UI UX 課程之一。你不僅學習了 UI UX 的基礎知識，還為網頁設計和前端開發打下了良好的基礎。作為一名講師，Hossein 在解釋概念方面做得非常出色，他提供的精美筆記也非常方便。我肯定會向對 UI UX 設計和開發感興趣並且希望在該領域打下堅實基礎的人推薦這門課程。謝謝 Hossein :)” ⭐️⭐️⭐️⭐️⭐️

目標受眾

想要無縫開發 Figma 組件的 Web 開發人員
想要學習如何使用 HTML CSS JavaScript 進行程式編輯的 UI UX 設計師

講師簡介

Hossein Boroji UX 開發者

我是 TD Bank 的 UX UI 設計主管。我擁有平面設計學士學位，以及 2 個交互媒體設計和用戶體驗設計的研究生證書。我還擁有數學文憑，它教會了我如何精確設計。

糟糕的用戶體驗無處不在，我來這裡是為了用我的多學科設計背景來解決它們。在我的設計工具包中，美學起著重要作用，因為我喜歡讓無聊的資訊在視覺上漂亮展現。我喜歡通過創建 UX 流程和 UI 原型來解決問題。

增強用戶體驗是我的主要專業領域。一切都必須像素完美，否則我會發瘋。

英文字幕：有

想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To

點選這個✨優惠連結✨ 課程特價 | Udemy 永久擁有課程 NT330 起( 在電腦瀏覽器登入，點選“優惠連結”後再回想要的課程介紹中點選“報名參加課程”即可取得）
Udemy 現在越來越多課程有中文字幕，請參考 Soft & Share 中文線上課程
手機上點選優惠連結看到的價格比電腦上看到的貴
＄代表當地貨幣, 如在台灣為 NT
點選”報名參加課程”有可能因瀏覽器 cookies 轉久一點或回報錯誤而無法連上，請稍等刷新或重新點選就會出現