Google UX Design 課外連結整理 Course 6
Responsive Web Design in Adobe XD
- Week 1：Starting the UX design process: Empathize and define.
- Week 2：Continuing the UX design process: Ideate.
- Week 3 ：Creating wireframes for a responsive website.
- Week 4：Creating and testing low-fidelity prototypes.
- Week 5：Creating and testing high-fidelity designs
- Week 6 ：Documenting design work and searching for jobs.
第 1 週：開始 UX 設計過程：同理和定義。根據您選擇的項目提示完成設計過程的移情和定義階段。學習響應式網頁設計的基礎知識，並將開始探索 Adobe XD，將在整個課程中使用的設計工具。
第 2 週：繼續 UX 設計過程：構思。進入響應式網站設計過程的構思階段。要提出設計解決方案的想法，將進行競爭性審核，完成 “ 我們應該如何做 ” 活動，並使用 Crazy Eights 勾勒想法。在設計網站時，了解信息架構和站點地圖的重要性。
第 3 週：為響應式網站創建線框。響應式網站有不同的佈局，具體取決於屏幕大小，因此將創建不同種的線框。首先，將探索常見的網站佈局以獲得靈感，並為您的響應式網站創建紙質線框。接下來，將了解響應式網站設計中常用的一些元素和組件。然後，在 Adobe XD 中創建數字線框。最後，您將更新和優化線框以增強可訪問性。
第 4 週：創建和測試低保真原型。學習如何在 Adobe XD 中構建低保真原型。通過規劃和進行可用性研究，獲得有關原型的反饋。根據研究中的見解對低保真設計進行更改。
第 5 週：創建和測試高保真設計。在 Adobe XD 中創建響應式網站的模型及使用設計系統，並在響應式網站設計中使用來自外部設計系統的組件。然後，將您的模型轉換為高保真原型，並通過可用性研究測試該原型，獲得來自不同用戶的反饋。課程結束時，您的響應式網站設計將完成。
第 6 週：記錄設計工作並尋找工作。完成響應式網站設計後，可與他人分享您的工作。首先，學習如何準備設計並將其交給工程師，他們將構建最終產品。為您的專業 UX 產品組合添加一個案例研究，其中包含您的響應式網站設計。然後，專注於您的大局目標：獲得一份 UX 設計師的工作。學習掃描招聘信息的技巧和竅門，並創建一份引人注目的簡歷，突出您的新 UX 技能。
Adobe XD
- Starter Plan 課程中的學員都可以免費使用
- Single App Plan 完成第一堂課還能參與九個月的免費連結共享、協
- system requirements 安裝系統需求
- Adobe help page 幫助頁面
- iTunes App Store 或 Google Play Store 可下載 app 預覽設計
也可使用Figma製作 （課程彈性）
- set up a free account on Figma 註冊 Figma
- Figma Education account 課程中的學員可以使用教育帳號
- What’s Figma? video
- learn more about Figma toolbar.
同理用戶 empathizing with users ：
為了解同理用戶創造出：
- empathy maps
- personas
- user stories
- user journey maps A complete guide to user journey mapping
定義問題陳述 Define problem statements：
How To Define A Problem Statement: Your Guide To The Second Step In The Design Thinking Process.
建立網站地圖 sitemap ：
常見網站佈局website layouts
- 單列佈局 Single column layout ： UX Planet
- 多列佈局 Multicolumn layout ： the Financial Times
- 盒子佈局 Box layout ： Amazon’s
- 特色圖像佈局 Featured image layout ： Norway’s official travel guide website
- 不對稱佈局 Asymmetrical layouts （眼動追踪模式 eye-tracking pattern）：F-shape web page from Wikipedia 、Z-shape Dropbox’s website
- 卡片佈局網格 Grid of cards layout ： TED homepage
- 分層分層蛋糕佈局 Tiered layer cake layout ： the grocery store website QFC
Think like a UX designer：
article that explains popular website layouts
Responsive web design is great UX
（響應式設計是好的用戶體驗）
響應式設計常見元素：
hamburger menu、Cards、Carousels,、call-to-action (CTA) button
創建響應式設計
回顧視覺設計課程
將圖像加入 Adobe XD
隱藏導覽選單 hidden navigation menus
漢堡選單 Hamburger menus
彈出式選單 Flyout menus
其他文章
- essential patterns of mobile navigation
- creating an animated mobile menu.
- how to make a responsive website in Adobe XD
開發自己的 design system
- how to share design systems with Creative Cloud libraries
- working with Creative Cloud libraries in Adobe XD
- creating a sticker sheet in Figma.
利用現有的 design system
網站可訪性 web accessibility
可訪問標記 Accessible markup
導航順序註記 Navigation order annotations：
分層標題 Hierarchical headings：層次結構 hierarchy
Accessibility labels：annotating your design work、 an introduction to Accessible Rich Internet Applications (ARIA).
顏色和對比度的可訪問性 Accessible color and contrast
需要仔細考慮為設計選擇的顏色組合。色盲的人可能難以區分某些顏色組合，例如紅綠色
使響應網站易於訪問 accessible
參考資料Additional resources：
Adobe XD 遠程協作
- working with a team in Adobe XD
- share designs and collaborate in Adobe XD
- remote collaboration best practices, processes, and pitfalls
尋找UX 設計工作機會
- Jobs on Google Search.
- Indeed.
- Glassdoor.
- ZipRecruiter.
- Job boards for UX designers (Dribbble, Behance, Smashing Magazine, etc.).
- Linkedin.
- Design Gigs for Good.
典型的履歷 UX design resume
- Two-column format：Googler and entry-level UX designer Yang’s resume
- Color： Shabi features in her resume
- Logos：Wenni’s resume on bestfolios
- Bullet points ： Emily Williams Resume
- Type style：Sanat uses typography strategically on their resume、UX designer Emanuel
