iSchool

Grade 7App Designer

Module 1 : Sketch & Wire

Design Mobile App UI/UXUsing Figma

Explore the psychology of digital products. Students learn key UI/UX principles, master Figma to create interactive prototypes, and build beautiful, user-centered mobile applications from scratch.

3 modules · 12 lessonsUI/UX Portfolio
Grade 7 App Designer hero
Final Project
FurEver Pet Care App
What you'll walk away with

Four Learning Outcomes.One confident product designer.

Real, transferable skills that bridge user empathy and interactive product design.

Master UI/UX Principles

Explore the psychology of user flow, layout architecture, and color contrast.

Wireframe to Prototype

Utilize Figma to transition from basic low-fidelity wireframes to fully interactive, high-fidelity mockups.

Design with Empathy

Incorporate user-centered thinking to build accessible and seamless digital experiences.

Build an E-Portfolio

Publish interactive app prototypes to a professional Behance profile.

Tools & Technologies

Designer's Tech Stack

Learn product design through hands-on work with industry-leading creative tools.

Figma logo

Figma

The industry standard for digital product design. Students use it to draw wireframes, apply visual styling, and build highly interactive, clickable prototypes.

Behance illustration

Behance

The world's largest creative network. Students will curate, publish, and showcase their custom UI/UX design portfolios to a professional audience.

Canva logo

Canva

A creative design tool used to structure highly visual, professional presentations to pitch their mobile apps to peers and parents.

The Learning Path

Three modules.A published portfolio at the end.

From your first wireframe to an interactive mobile app published on Behance.

Module 01

UI/UX Foundations & Wireframing

Discover the psychology behind good design. Master the Figma workspace and learn to map out user flows by building low-fidelity wireframes.

Module 02

Visual Design & Prototyping

Add life to your blueprints! Apply color rules, drop shadows, and high-quality plugins to build stunning screens, then connect them with animated prototypes.

Module 03

Advanced Screens & Portfolio Pitch

Design complex user interfaces like onboarding and login pathways. Conclude the semester by publishing your interactive app to a professional Behance portfolio.

Skills Gained

More than just pixels.

Every graduate leaves with applied design skills, product thinking, and the soft skills to present their portfolio with confidence.

Technical Skills

Figma Prototyping

Build clickable, animated prototypes that simulate real mobile app experiences.

UI/UX Architecture

Structure layouts, hierarchy, and user flows that feel intuitive from first tap.

Smart Animations

Use Figma smart animate to create fluid transitions between screens and states.

Responsive Layouts

Design with auto-layout and constraints so screens adapt to any device.

Soft Skills

User-Centered Empathy

Step into the user's shoes to design experiences that solve real problems.

Visual Storytelling

Communicate ideas and product journeys through visuals, color, and typography.

Constructive Critique

Give and receive design feedback that pushes work forward with respect and clarity.

Portfolio Presentation

Curate and present your design work like a professional product designer.

The Final

The Graduation ProjectFurEver Pet Care App.

By the end of this course, every student designs and proudly presents a fully interactive mobile app prototype, published to their own Behance portfolio.

FurEver Pet Care App

Bring your ideas to life! Students design a fully interactive mobile app prototype featuring animated onboarding, adoption profiles, a clinic locator, and a pet food shop.

  • Animated Onboarding: Welcome users with smooth, smart-animated intro screens.
  • Adoption Profiles: Design detailed pet profile cards with photos and stories.
  • Clinic Locator & Shop: Build connected screens for finding clinics and shopping pet food.
FurEver Pet Care App preview
Student presenting their Behance portfolio on stage

Behance Portfolio Launch

Step into the design industry. Students publish their Figma prototypes to a professional Behance portfolio and present their UX journey to an audience.

  • Behance Publishing: Upload and curate your prototypes on a professional portfolio.
  • UX Storytelling: Walk an audience through your design decisions and user journey.
Module 2 : Prototype Lab

Design your Web AppUI/UX Using Figma

Become a web designer! Students will learn how web design differs from mobile design to create engaging, responsive web experiences. They will master the 5-stage UX design process, component libraries, and gamification to build professional web interfaces in Figma.

3 sections · 12 lessons · Web UI/UX Design
Module 2 hero
Final Project
Web App UI Prototype
Industry-Standard Tools

The Tech Stack.

Professional design platforms and methodologies for young UX designers.

Figma logo

Figma

Used to design responsive web layouts, build reusable component libraries, and craft smooth, animated prototypes that simulate the final web experience.

Behance illustration

Behance

Where students publish their finished Web App UI as a professional case study, documenting their UX process for a global creative audience.

Canva logo

Canva

Used to build polished pitch decks that walk peers and parents through their UX decisions, responsive strategy, and micro-interactions.

What you'll walk away with

Four Learning Outcomes.One Web Designer.

Real, transferable skills bridging creative design and technical layouts.

Master Web UI Components

Design responsive web pages using Figma components, variants, and masking techniques.

Apply the UX Design Process

Follow the 5-stage UX process to research, storyboard, and prototype user-centric designs.

Engineer Micro-Interactions

Use Figma's prototyping tools to build emotional, gamified, and highly interactive touch/click interfaces.

Build a Responsive Web App

Design a complete Web App UI that seamlessly transitions between desktop and mobile environments.

The Curriculum

Your Step-by-Step Roadmap.

From web page fundamentals to a fully interactive, responsive web prototype.

Module 01

The UX Process & Storytelling

Dive into the 5-stage UX design process! Understand the difference between web and mobile, and learn how to use visual storytelling to captivate users.

Module 02

Smart Design & Emotion

Bring your designs to life. Master Figma's Hero sections, masking, and smart components, while exploring how micro-interactions trigger user emotions.

Module 03

Gamification & Responsive Web

Make it fun and functional! Learn how progress bars and badges keep users engaged, and master responsive design so your web app looks perfect on any screen.

Skills Gained

More than just pixels.

Every graduate leaves with applied design skills, product thinking, and the soft skills to present their portfolio with confidence.

Technical Skills

Figma Prototyping

Master Figma's interactive prototyping tools to build clickable web app flows.

Responsive Design

Build layouts that adapt seamlessly across desktop, tablet, and mobile screens.

Micro-Interactions

Add emotional, gamified animations and transitions that bring your UI to life.

Component Systems

Design with reusable smart components and variants for scalable design systems.

Soft Skills

Visual Storytelling

Communicate ideas and product journeys through compelling visual narrative.

Empathy in Design

Understand and design for real user needs through the 5-stage UX process.

User-Centric Thinking

Put the user at the heart of every design decision and interaction.

Gamification Strategy

Use game mechanics like progress bars and badges to drive engagement.

The Capstone

The Final Project.

Showcasing advanced UI/UX skills with a complete interactive web prototype.

Web App UI Prototype

Students engineer a fully interactive, responsive Web App UI in Figma. They will apply the 5-stage UX process, integrate smart components, and build smooth micro-interactions to create a professional user experience.

Web App UI prototype
Student presenting a web app design

Pitch & Present

Students document their design journey, explaining their UX decisions, emotional design triggers, and responsive layout strategies to a live audience.