Duration 3 days – 21 hrs
Overview
This hands-on training course equips participants with essential UX/UI design skills using modern, accessible tools such as Make (AI workflow automation), Google Drawings, Google Slides, and Google Sites. The course emphasizes building and managing design systems, governance best practices, and effective developer handoff. It is ideal for cross-functional teams aiming to scale design consistency and streamline collaboration using lightweight, cloud-based platforms.
Objectives
- Create and manage design systems with consistency and scalability in mind
- Utilize AI tools (like Make) to automate and enhance design workflows
- Develop interactive prototypes in slides to showcase user flows and interface behavior
- Use Draw for graphic and illustration creation
- Build, maintain, and present UX/UI content using Google Sites
- Implement governance and documentation for design consistency
- Facilitate effective developer handoff through documentation and prototypes
Audience
- UX/UI Designers
- Product Designers
- Business Analysts
- Marketing and Creative Teams
- Web Developers collaborating with design teams
- Anyone involved in prototyping, design governance, or digital experience delivery
Prerequisites
- Basic understanding of digital product development
- Familiarity with tools like Google Workspace (Docs, Slides, Drive)
- No prior experience in Figma or Adobe XD required
Course Content
Module 1: Introduction to Modern UX/UI Design Principles
- UX vs. UI: Defining roles and responsibilities
- Overview of design systems and their importance
- Building scalable and consistent UI patterns
- Governance in design systems: Why it matters
Module 2: Using Make for AI Workflow Automation in Design
- Introduction to Make (Integromat) for design automation
- Automating repetitive tasks: alerts, design system updates, and content uploads
- Integrating Make with other tools (e.g., Sheets, Drive, Forms)
- Best practices and real-world workflow examples
Module 3: Graphic and UI Elements Using Google Draw (Drawings)
- Using Draw for UI components and illustrations
- Creating reusable assets (icons, buttons, mockups)
- Exporting and reusing components in slides and sites
- Tips for visual hierarchy and clarity
Module 4: Prototyping in Google Slides
- Designing interactive prototypes
- Creating storyboards and user journeys
- Simulating user flows with hyperlinking and animation
- Embedding prototypes in Sites or Docs for stakeholder feedback
Module 5: Building UX/UI Knowledge Hubs with Google Sites
- Using Sites to document and showcase design systems
- Embedding prototypes, visuals, and guides
- Collaborating with stakeholders via Sites
- Managing access, updates, and change logs
Module 6: Governance and Developer Handoff
- Documenting design guidelines and style guides
- Linking visual components to code (basic design-token mapping)
- Tools and formats for dev handoff (PDFs, embedded sites, exportable specs)
- QA collaboration: aligning designs and builds
