Week 1: Foundations & Visual Design with Figma & FigJam
Theme: Understanding User-Centered Design, Visual Principles, and Practical Application in Figma & FigJam
Day 1: Introduction to UI/UX & Design Thinking
- Morning (3 hours):
- What is UI/UX? (Definitions, differences, importance, impact on business)
- The Design Thinking Process: Empathize, Define, Ideate, Prototype, Test.
- User-Centered Design (UCD) Principles: Why users are at the core.
- Introduction to HCI (Human-Computer Interaction): Usability, accessibility, cognitive load.
- Hands-on in FigJam: Collaborative brainstorm on a common everyday problem, creating digital sticky notes for "Empathize" (who are the users, what are their feelings) and "Define" (problem statements).
- Afternoon (3 hours):
- LinkedIn Optimization - Part 1: The Basics
- Profile Picture & Headline: Best practices, keywords.
- About Section: Crafting a compelling narrative, highlighting skills and aspirations.
- Experience Section: How to describe non-design roles with a design mindset.
- Homework: Refine LinkedIn profile picture, headline, and draft the "About" section. Research 3-5 inspiring UI/UX designers on LinkedIn.
- LinkedIn Optimization - Part 1: The Basics
Day 2: User Research & Information Architecture in FigJam
- Morning (3 hours):
- User Research Methods Overview: Interviews, surveys, observation, competitive analysis (brief intro).
- Creating User Personas (FigJam): Based on Day 1's problem, collaboratively define 2-3 user personas with needs, goals, and pain points using FigJam templates.
- User Journey Mapping (FigJam): Visualize a user's interaction with a hypothetical product/service using FigJam's journey map templates.
- Afternoon (3 hours):
- Information Architecture (IA): Structuring content for clarity and findability.
- Site Maps & User Flows (FigJam): Collaboratively create a simple site map for a familiar app and then map out a user flow using FigJam's flow charting tools.
- LinkedIn Optimization - Part 2: Skills & Education
- Skills Endorsements: Identifying relevant UI/UX and soft skills.
- Education & Certifications: How to list them effectively.
- Homework: Refine their FigJam personas and user journey. Add relevant skills to LinkedIn, focusing on skills used today (e.g., User Research, Information Architecture, FigJam).
Day 3: Wireframing & Prototyping Fundamentals in Figma
- Morning (3 hours):
- Introduction to Wireframing: Low-fidelity sketching, purpose, benefits.
- Figma Basics - Part 1: Interface overview, frames, shapes, text, basic constraints.
- Low-Fidelity Wireframing (Figma): Translate FigJam user flows into rough digital wireframes for key screens of the product defined on Day 1 (e.g., login, home, profile). Focus on structure and hierarchy, not aesthetics.
- Afternoon (3 hours):
- Figma Basics - Part 2: Auto Layout for responsive design, component creation (simple buttons).
- Prototyping Fundamentals (Figma): Connecting frames, basic click interactions, transitions.
- LinkedIn Optimization - Part 3: Projects & Accomplishments
- Adding Projects: How to showcase even small design exercises (like today's wireframes).
- Volunteering & Publications: Highlighting relevant experiences.
- Homework: Complete the low-fidelity wireframes in Figma, ensuring basic Auto Layout for one section and simple click-through prototyping. Start brainstorming potential "projects" for LinkedIn based on daily activities.
Day 4: Graphic Design Fundamentals for UI & Figma Styling
- Morning (3 hours):
- Principles of Design: Balance, alignment, hierarchy, contrast, repetition, proximity, white space.
- Color Theory: Color psychology, palettes, accessibility considerations (e.g., contrast plugins in Figma).
- Typography Basics: Type classifications, pairing fonts, readability.
- Imagery & Iconography: Purpose, consistency, sourcing (e.g., Unsplash, Iconify plugin in Figma).
- Activity: Analyze a few well-designed and poorly designed websites/apps, noting principles.
- Afternoon (3 hours):
- Creating a Basic Design System (Figma):
- Color Styles: Define primary, secondary, accent, neutral colors.
- Text Styles: Define heading, body, caption styles.
- Component Creation: Build a simple button and input field component using Auto Layout and styles.
- LinkedIn Optimization - Part 4: Recommendations & Connections
- Requesting Recommendations: Who to ask and what to ask for.
- Networking Strategies: Connecting with industry professionals, group participation.
- Homework: Create a simple color palette, typography scale, and 2-3 basic components in Figma. Draft a recommendation request message.
- Creating a Basic Design System (Figma):
Day 5: Visual Design & UI Best Practices in Figma
- Morning (3 hours):
- Grids & Layouts (Figma): Setting up layout grids for consistency.
- UI Elements & Components: Review common patterns (navigation, cards, forms).
- Applying Design System: Use the created styles and components to bring low-fidelity wireframes to life.
- Gestalt Principles: How users perceive visual elements (brief review).
- Hands-on: Convert 2-3 key low-fidelity wireframe screens into high-fidelity UI screens in Figma, applying the developed design system.
- Afternoon (3 hours):
- Advanced Prototyping (Figma): Incorporating more complex interactions (hover states, overlays, scrolling).
- Figma Plugins for Efficiency: Quick intro to useful plugins (e.g., Unsplash, Iconify, Content Reel).
- LinkedIn Optimization - Part 5: Content Strategy
- Sharing & Engaging: Curating relevant content, commenting thoughtfully.
- Posting Original Content: Sharing insights, design process, project updates.
- Homework: Complete the high-fidelity UI screens for the selected screens in Figma, adding advanced interactions. Prepare to share their work.
Week 2: Deeper Dive & Career Readiness with Figma & FigJam
Theme: Advanced UI/UX Concepts, Portfolio Development, Product Management Integration, and Career Launch
Day 6: Usability Testing & Iteration with Figma Prototypes
- Morning (3 hours):
- What is Usability Testing? Purpose, benefits, different methods (moderated, unmoderated).
- Creating a Usability Test Plan (FigJam): Collaboratively define objectives, tasks, and metrics for testing the Figma prototype.
- Conducting a Small Usability Test: Role-playing user and facilitator, observing interactions with the Figma prototype.
- Hands-on: Use the Figma prototype from Day 5 for brief peer usability tests, taking notes in FigJam.
- Afternoon (3 hours):
- Analyzing Test Results (FigJam): Synthesize feedback, identify pain points, and prioritize issues using FigJam's dot voting or swimlane features.
- Iterative Design (Figma): Apply feedback to make improvements to the Figma prototype, demonstrating how design evolves.
- LinkedIn Deep Dive: Workshop on advanced search, job alerts, and company research.
- Homework: Refine the Figma prototype based on the identified feedback. Identify 3-5 target companies of interest on LinkedIn.
Day 7: Introduction to Product Management for Designers
- Morning (3 hours):
- The Product Lifecycle: Discovery, definition, development, delivery, iteration.
- Role of a Product Manager: Vision, strategy, roadmap, backlog.
- Collaboration between PM & Designer: Working effectively, communicating design value.
- Understanding Business Goals: How design contributes to product success.
- Hands-on (FigJam): Outline a simple product roadmap for the project from Day 1, considering business goals and how design fits into each phase. Use FigJam for collaborative roadmapping.
- Afternoon (3 hours):
- Agile & Scrum Basics: Sprints, stand-ups, backlog grooming (brief overview).
- Measuring Design Success: Key Performance Indicators (KPIs), metrics.
- Hands-on (FigJam): Simulate a brief "sprint planning" session, discussing how a designer would contribute to an agile sprint for their ongoing project, using FigJam for task breakdown.
- Resume/CV Workshop - Part 1: Structuring a design resume, key sections, keywords relevant to UI/UX and product roles.
- Homework: Start drafting a design-focused resume/CV.
Day 8: Portfolio Building - Part 1: Case Study Fundamentals & Figma Presentation
- Morning (3 hours):
- What is a Design Portfolio? Purpose, audience (recruiters, hiring managers).
- The Power of the Case Study: Telling the story of your design process.
- Key Elements of a Case Study: Problem, research, ideation, solution, results, learnings.
- Leveraging Figma for Portfolio Presentation: Exporting assets, creating clean mockups (using Figma mockups or plugins), showcasing prototypes.
- Activity: Select 1-2 projects (including the program's main project) and brainstorm the "story" for each.
- Afternoon (3 hours):
- Structuring a Case Study (FigJam): Collaboratively outline a compelling case study narrative using FigJam for structure and content ideas.
- Visual Storytelling in Figma: How to effectively present sketches, wireframes, and high-fidelity prototypes within Figma itself, or by exporting assets for other platforms.
- Resume/CV Workshop - Part 2: Tailoring your resume to specific job descriptions, incorporating design project experience.
- Homework: Outline the first case study for their chosen project in FigJam. Start gathering and organizing visual assets (Figma screenshots, prototypes, FigJam boards) for it.
Day 9: Portfolio Building - Part 2: Execution & Refinement
- Morning (3 hours):
- Hands-on Case Study Creation (Figma/FigJam): Begin assembling their chosen case study. This can be done directly in Figma (e.g., creating a "presentation file" with frames for each section) or by exporting assets from Figma/FigJam to an external portfolio builder (Behance, Notion, personal website).
- Writing Compelling Descriptions: Clearly articulate your role, decisions, and impact.
- Peer Review - Case Study Outline/Draft: Get feedback on the structure, content, and visual presentation of their developing case study.
- Afternoon (3 hours):
- Presentation Skills for Designers: Communicating design decisions, walking through a portfolio.
- Mock Interviews - Portfolio Walkthrough: Practice presenting their work (even if it's just the initial case study) to peers, focusing on telling the story.
- LinkedIn Profile Review & Q&A: Final check of LinkedIn profiles, addressing individual questions on optimization and content.
- Homework: Continue working on the first portfolio case study. Refine visuals and narrative in Figma/FigJam.
Day 10: Capstone Project & Career Launch
- Morning (3 hours):
- Capstone Project Presentations: Each member presents their refined Figma prototype and their drafted portfolio case study (or at least the detailed outline with key visuals from Figma/FigJam). Focus on the design process and learnings.
- Constructive Feedback Session: Peers and instructors provide feedback.
- Afternoon (3 hours):
- Job Search Strategies for UI/UX: Where to look, crafting cover letters, networking in the Figma community and beyond.
- Freelancing & Side Projects: Exploring other avenues for experience.
- Continued Learning Resources: Figma community files, Figma's official resources, Friends of Figma events, online communities, blogs.
- Final Q&A and Wrap-up: Addressing any remaining questions, encouraging continued engagement with the Figma ecosystem and the Friends of Figma Nairobi chapter.
- Group Activity: Create a shared "Figma Power User Tips & Plugin Recommendations" board in FigJam.
- Homework: Refine their portfolio and LinkedIn based on feedback, and start actively engaging with the design community!
Top comments (0)