fbpx

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

了解如何成為具有用戶界面設計、用戶體驗設計、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

報名參加課程更新 coupon code

Sponsored by Udemy


讓 LN+ 協助你提升 udemy 線上課程的使用體驗

LN+ 會幫助你將課程影片與 notion 筆記關聯起來,所以你也不用去煩惱筆記在哪裡?或是要如何整理寫過的筆記

來自使用者的真實體驗

除此之外, LN+ 也可以幫助你提升觀看 udemy 課程體驗,有興趣可以參考以下的文章說明

LN+ 是 chrome 瀏覽器的外掛程式,是 Soft & Share 針對線上課程平台不足的地方所開發出來的輔助工具,可到 chrome 應用程式商店安裝安裝後不需要輸入信用卡,可以免費測試一週如果覺得好用再決定是否付費,收費方式可以參考這個網頁說明

以下的影片示範你會看到透過 LN+ 的幫助,讓 notion 筆記視窗跟你在觀看的課程影片同步切換

追蹤 Soft & Share

✍ 不受社群推薦演算法影響,建議 Telegram/Discord/e-mail

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料

Powered by WordPress.com.

Up ↑

%d 位部落客按了讚: