完整的 Web & Mobile 設計課 : UI/UX、Figma + 更多

成為 UX/U 設計師，掌握行動和網頁設使用者介面 + 使用者體驗(UI/UX 設計)、HTML 和 CSS

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

運用頂級公司使用的現代工具，為你的客戶設計精美的網路和行動專案
被聘用為一個設計師或成為一個可在任何地方工作的自由職業設計師，設計師的需求量很大！
包括100多個資產和優質的設計模板，你可以保留並使用它們為你未來的所有專案做客製化
精通 Figma 運用到你的設計，並學習將你的設計轉成一個活生生的 HTML 與CSS 網站
你將有一個令人驚豔的設計組合檔案，在課程結束時客製化且專業地完成(課程安排!)
掌握網頁和行動設計原則，以及如何從草圖到成熟的高保真設計，讓客戶驚歎不已
學習使用 Figma 和世界頂級設計師使用的其他工具為所有類型的裝置設計
學會使用 HTML5 和 CSS3，讓你的設計變得生動起來，並建立完整作用的網站
學習設計行業中需要多年學習的最佳實踐
學會為所有品牌需求製作專業的標誌和設計選擇
使用行業的最新趨勢學習 UI/UX 最佳實踐
學會同時成為一名設計師和一名網頁開發人員(這是一個高需求的罕見技能組合)

要求

沒有要求。我們從零開始教你並向你展示一切! 從零到精通
準備好愛上設計，讓你接觸到的一切都成為美麗的專案，在你未來生活中實現

課程說明

現代設計必備的所有現代設計工具和最佳實踐！加入一個超過 90 萬學生的線上社群，並參加一個由行業專家教授的課程，這些專家實際上都曾在矽谷和多倫多為頂級公司工作過。一位很好的設計師越來越難找，現在也不難找到設計師能掙16萬美元以上的薪水，因為這是一項非常有價值的技能。我們將教你如何到達那境界！

採用在網頁設計和行動設計以及 UI/UX 最新和最佳的實踐，本課程的重點是有效地讓你從零到一個高點 – 你可獲得聘僱或贏得自由職業者的合同。我們將使用 Figma 這樣受歡迎的工具，向你展示從開始到結束的完整工作流程。 Andrei 課程的畢業生現在在谷歌、特斯拉、亞馬遜、蘋果、 IBM、 JP 摩根、 Facebook 和許多頂級科技公司工作。

本課程還包括 100 多個資產和優質設計模板，你可以保留並使用它們為你未來的專案進行客製化。我們保證這是最全面的線上設計技能資源！

課程將讓你親自動手參與，因為我們會從頭到尾帶領你完成設計師的工作，一路學習如何建立最終的專業設計，然後將它們轉換成使用 HTML 和 CSS 的實際網站或應用程式。

本課程涵蓋的主題

00 網頁與行動設計原則 + 設計與網頁開發
01 入門指南－草圖繪製、靈感來源及結構
- 1. Sketching
  - Introduction To Sketching
  - The Sketching Process
  - Sketching User Flows
  - Sketching Tips
- 2. 靈感
  - How to stay inspired
  - How to find inspiration online
- 3. Figma 基礎知識
  - Plans and Signup
  - Where to Use Figma
  - Figma UI — Structure
  - Figma UI — Files
  - Figma UI — Toolbar
  - Figma UI — Left Sidebar
  - Figma UI — Right Sidebar
  - Shapes and Tools — Frames
  - Shapes and Tools — Groups
  - Shapes and Tools — Basic Shapes and Boolean Operations
  - Designing in Figma — Images
  - Designing in Figma — Getting Started with Text
  - Designing in Figma — Constraints
  - Designing in Figma — Using Auto Layout
  - Designing in Figma — Auto Layout Properties
  - Resources and Collaboration — Community Files
  - Resources and Collaboration — Community Plugins
  - Resources and Collaboration — Sharing and Comments]
  - Project — Creating a Logo Using Basic Shapes
  - Project — Auto Layout Buttons
  - Project — Creating a Responsive Navigation
  - Project — Responsive Text
  - Project — Imagery and Gradients
  - Project — Strokes and Shapes
  - Project — Layout and Responsiveness
- 3. 使用者流程
  - Getting Ready For This Section
  - The DOs and DON’Ts
  - User Flows in Figma — Onboarding
  - User Flows in Figma — Search
- 4. 網站地圖
  - Introduction To Sitemaps
  - Creating A Basic Sitemap
  - Reusable Sitemap Assets
  - Figma Check In — Basic Components and Variants
  - Sitemaps in Figma — The Top Layer
  - Sitemaps in Figma — Digging Deeper
  - Tips for Creating Great Sitemaps
02 探索與迭代－線框圖、原型設計與回饋
- 1. 線框圖( Wireframe )
  - What Is A Wireframe?
  - How To Create A Wireframe
  - Figma Check In — Basic Button Component]
  - Figma Check In — Variants
  - How to Use Our Wireframe Components
  - Wireframes — Home
  - Wireframes — Cart
  - Wireframes — Profile
- 2. 原型製作( Prototyping )
  - Figma Check In — Prototyping in Figma
  - Prototyping in Figma — Flows and Starting Points
  - Prototyping in Figma — Connections
  - Prototyping in Figma — Interactions
  - Prototyping in Figma — Animations
  - Prototyping in Figma — Prototype Settings
  - Prototyping in Figma — Prototype Presentation
  - Project — Navigation
  - Project — Removing an Item from Your Wishlist
  - Project — Finding a Product
- 3. 獲取回饋
  - Why Is Feedback Important?
  - Constructive Feedback
03 視覺設計－設計理論+無障礙設計
- 1. 間距和網格
  - What Is A Grid?
  - Grid Basics
  - Figma Check In — Fixed and Fluid Grids
  - Figma Check In — Breakpoints
  - Figma Check In — Grid Style
  - Project — Mobile Layout Grid
  - Project — Desktop Layout Grids
  - Simple Rules to Follow
- 2. 排版
  - Serifs
  - Sans Serifs
  - Display & Mono
  - Picking Typefaces
  - Figma Check In — Text Properties
  - Exercise — Elevating a Brand
  - Exercise — Typeface Scenarios
  - Exercise — Google Fonts
  - Project — Typeface Exploration
  - Project — Pairing Font Families
  - Project — Headings, Body and Labels
  - Project — Typeface System
  - Figma Check In — Text Styles
- 3. 顏色
  - Color Schemes
  - Important Questions To Ask
  - Creating Color Palettes
  - Figma Check In — Paints
  - Exercise — Expanding Upon a Strict Color Palette
  - Exercise — Creating a Color Palette
  - Figma Check In — Color Styles
  - Exercise — Using Color Styles
  - Project — Primary and Neutrals
  - Project — Accents
- 4. 圖像與圖像學
  - Visual Assets Introduction
  - Figma Check In — Image Plugins
  - Figma Check In — Image Styles
  - Figma Check In — Masks
  - Exercise — Image Exploration
  - Exercise — Text and Imagery Working Together
  - Figma Check In — Illustration Plugins
  - Exercise — Adding illustrations to your designs
  - Figma Check In — Icon Plugins
  - Figma Check In — Pen Tool
  - Exercise — Custom Icons with the Pen Tool
- 5. 表單 + 使用者介面元素
  - What Are Forms + UI Elements?
  - Best Practices — Forms
  - Best Practices — Basic and Advanced Inputs
  - Best Practices — Inputs
  - Best Practices — Buttons
  - Figma Check In — Component Properties
  - Properties vs. Variants
  - Figma Check In — Button Component Properties
  - Figma Check In — Button Variants
  - Figma Check In — Combining Components
  - Figma Check In — Form Component Possibilities
  - Project — Registration Flow
- 6. 無障礙設計( Accessibility )
  - What Is Accessibility?
  - Assistive Technologies
  - Visual Patterns For Accessibility
  - Tools To Make Your Design Accessible
04 設計探索－應用設計 + 設計系統
- 1. 設計模式
  - What Are Design Patterns?
  - Why Are Design Patterns Valuable?
  - How To Apply Design Patterns
  - Analyzing Design Patterns
  - Dissecting And Choosing Design Patterns
- 2. 行動設計
  - Mobile Design Best Practices
- 3. 視覺風格與探索
  - Design Fidelity
  - Visual Exploration — Navigation
  - Visual Exploration — Buttons
  - Figma Check In — Effect Styles
  - Visual Exploration — Product Cards
  - Visual Exploration — Text Cards
  - Screen Design — Home
  - Screen Design — Product Page
- 4. 運動與微互動
  - The Importance Of Motion
  - Why Microinteractions Are Important?
  - What Is A Microinteraction?
  - Figma Check In — Intro to Smart Animate
  - Figma Check In — Smart Animate Properties
  - Exercise — Parallax
  - Exercise — New Message
  - Exercise — Overlays
  - Figma Check In — Interactive Components
  - Exercise — Interactive Buttons
  - Project — Parallax Welcome Screen
  - Project — Drag Onboarding
  - Project — Cart Overlay
  - Project — Button Microinteraction
05 整合所有內容－使用我們的設計系統和 Figma 進行高保真原型設計
- 1. 設計系統
  - Foundational Styles and Components vs. Product Specific Components
  - Building Fidelity and Organizing Potential Components and Styles
  - Foundational Styles and Components
  - Components — Buttons
  - Components — Cards
  - Components — Headers
  - Components — Inputs
  - Components — List Items
  - Components — Navigation
  - Components — Misc. Elements
- 2. 執行
  - Working Towards Our Final Designs
  - Execution — Introduction Screen
  - Execution — Onboarding Screens
  - Execution — Registration Screens
  - Execution — Home Screen
  - Execution — Wishlist Screens
  - Execution — Profile Screen
  - Execution — Cart and Checkout
  - Prototypes — Registration
  - Prototypes — Adding to Cart
  - Prototypes — Checkout
  - Prototypes — Lottie Files Plugin
  - Prototypes — Search and Filters
06 從 Figma 到網站（使用 HTML 和 CSS 將 Figma 設計轉換為實際網站）
07 HTML + HTML5

08 CSS + CSS3 – CSS 基礎知識, CSS Grid, Flexbox, CSS Animations
09 將您的網站上線

這個全新的課程將帶你從最基本的平面設計原理和基礎開始，一直到創造出漂亮的產品，學習 UX/UI 和互動，並奠定你完整的設計流程知識，供你在未來的專案和客戶服務使用。我們幾乎涵蓋了所有這些，所以下次你負責設計一個產品的時候，你有一步一步的大綱和指引做所有一個專業設計師的工作。

我們將教你一些技能，這些技能可以讓你放大你的時間回報。不是為了在一些隨機的自由職業網站上爭奪幾美元一小時的外快。我們的目標是給你一個頂級設計師的技能，在這個過程中，我們將為一個公司設計一個實際的產品，你將能夠新增到你的作品組合。

這個課程不是讓你在沒有理解原則的情況下看過去，以致當你完成這課程，你不知道要做什麼除了看再找另一課程來上。不會是這樣的！本課程將推動你和挑戰你從一個絕對的初學者到某個頂尖設計師，獲得聘用！設計是一種有價值的技能，不像大多數技術技能那樣容易過時。趨勢是會改變的，但是你在這門課程中學到的技能和基礎知識將會讓你在未來很多年都用得上。

這個課程是為你如果:

你是一個完全的初學者，希望成為一名設計師和自由工作者
你是一個設計師誰並想要收取更多
你是一個希望提高自己設計技能的開發人員

目標受眾

任何想兼職做網頁或手機設計的人，或者在一家公司做設計師
想要在工具技能組合上增加另一項有價值的技能的 Web 開發者和行動開發者
任何想要成為網頁設計師、行動設計師、使用者介面/使用者體驗設計師的人
任何想了解最新 CSS3 特性比如 Flexbox、CSS Grid 和 CSS Variables 以及 HTML5 的人

講師簡介

Andrei Neagoie 由高階軟體開發人員轉為講師 ( 更多講師主講課程介紹 )

Andrei 是 Udemy 網頁程式開發課程評價很高的教師，也是成長最快的教師之一。他的畢業生已經進入世界上一些最大的科技公司工作，比如蘋果、谷歌、摩根大通、 IBM 等等。 . 多年來，他一直在矽谷和多倫多擔任高階軟體開發人員，現在正在利用他所學到的一切，來教授程式設計技能，並幫助你發現作為一名開發人員在生活中所能提供的驚人的就業機會。

作為一個自學的程式設計師，他知道有大量的線上課程、教程和書籍過於冗長，不足以教授正確的技能。大多數人在學習一個複雜的主題時會感到麻痺，不知道從哪裡開始，或者更糟糕的是，大多數人沒有20,000美元用於程式設計訓練營。 程式設計技能學習應該是所有人可以負擔的起，並且對所有人開放。教材應該教授現代生活技能，不應該浪費學生寶貴的時間。 Andrei 從為財富500強企業、科技創業公司工作中學到了重要的經驗，甚至開創了自己的事業，他現在 100% 地投入時間教授其他人有價值的軟體開發技能，以便掌控他們的生活，在一個充滿無限可能性且激動人心的行業中工作。

Andrei 向你保證，沒有其它課程有這麼全面和詳細的解釋。他認為，為了學習任何有價值的東西，你需要從基礎開始，發展樹的根本。只有從那裡你才能學到與基礎相關的概念和具體技能(葉子)。當以這種方式建立時，學習將會呈現指數級的成長。

以他的教育心理學和程式設計經驗，Andrei 的課程將帶你瞭解複雜的主題，你從來沒有想過是可能的。

課程中見！

Daniel Schifano 產品設計@ Up&Up 負責人

Daniel 是技術領域的設計領導者，在幫助創業公司構建和迭代他們的產品方面有著豐富的經驗。Daniel 熱衷於教授和賦能設計師，並廣泛運用其他學科，以建立有目的的產品，滿足使用者和商業目標。

他的設計方法總是經過深思熟慮和反覆的。Daniel 經常發現自己與他的團隊協作，無論是草擬概念和流程或領導設計策略，與團隊領導和外部利益相關者合作。

Daniel 是一個多面的設計師，他的專業知識跨越了多個設計學科。這包括使用者體驗和視覺設計、使用者研究、產品策略、精益和敏捷設計方法等等。他的工作是幫助各種行業，如住房、區塊鏈和健康，形成不同的解決方案。

當 Daniel 不在開發產品的時候，他在不同的聚會和活動上演講和指導。他的目標是將他已經學到和持續從中學到的東西回饋設計界。Daniel 的目標是對許多設計師的職業生涯提供幫助、教導和支援。