No-Code App Design: App Prototyping With Figma and Onenote |
Explore and create : Creation lab
Jessica Pilsner
Programming an app can be complex. What if you could design an interactable app without code? In this session, attendees will learn to use Figma, a code-free prototyping tool used by designers, and OneNote to develop an app design project related to your content area.
Audience: | Library media specialists, Teachers, Technology coordinators/facilitators |
Skill level: | Beginner |
Attendee devices: | Devices required |
Attendee device specification: | Laptop: Chromebook, Mac, PC |
Participant accounts, software and other materials: | Create and account on Figma. https://www.figma.com/ |
Topic: | Project-, problem- & challenge-based learning |
Grade level: | 6-12 |
Subject area: | Career and technical education, STEM/STEAM |
ISTE Standards: | For Students: Innovative Designer
|
Disclosure: | The submitter of this session has been supported by a company whose product is being included in the session |
This session is designed to give educators both the skills to teach app prototyping using Figma and how to integrate it into effective learning experiences in a variety of subject areas.
Tool learning will include: Creating working application prototypes in Figma, wireframing in OneNote and creating physical paper prototypes. Figma is a digital prototyping app used by designers to prototype apps and does not use programming. It has a simple structure for creating designs and connecting wireframes together to make the design interactable.
Models employed: This session will focus on the Human Centered Design Cycle looking at how it can be applied to the design of everyday things, as well as apps. When applied to apps, attendees will learn to help students create user tests to research and get feedback on their apps and how to apply common app design heuristics to their work.
Lesson Plans and Resources: Attendees with receive a OneNote notebook with project resources and student project pages that they can edit and adapt to fit their learning targets.
Evidence of Success: Attendees with get to see student created work and real project documentation from my own experiences teaching app design. They will also get to hear about my experiences working with these tools as a visiting scholar working with these tools when I spent a summer doing game design.
Session Outline:
5 min: Intro-(Game) -
Engaging hook with a Norman doors game show challenge to demonstrate the importance of Human Centered Design. Norman Doors are a huge conversation piece often related to digital design and making design intuitive.
10 Min- Answers: What is app prototyping? How does it look in school? Unit examples and student created projects shared.
5-min Introduction of app design challenge attendees will do and how to create sketched wireframes
30 Min- (mini in session group project) Rapid App creation ( wireframe, and create in Figma)
8 min. Ideation and sketch
2 min. How to build sketches in Figma
10 min. Time to build sketches in Figma
3 min. How to connect buttons to make interactable.
6 min. Time for attendees to add interaction
10 min. Remaining time to share and reflect
10 min-(peer to peer conversation) Best practices and connecting back to content and Learning goal.
Work collaboratively in like subjects to come up with ways developing as app prototype would be a meaningful way to construct knowledge and present mastery related to content specific learning objectives.
Research on Knowledge Construction (focus of app design) -https://education.microsoft.com/en-us/course/2423b96f/overview
Figma for Education-
https://www.figma.com/education/
Design of Everyday Things- Don Norman
Jess Pilsner is a Technology Teacher and Coordinator at St. Thomas School's Center for Leadership and Innovation. With a degree in Elementary Education and Master's in Human Centered Design and Engineering she has a broad background that supports her interdisciplinary teaching. She has experience as a core subjects teacher and recently spent a summer as a visiting scholar on the Minecraft Education Team developing her design skills. Interdisciplinary learning and the design and usability of educational technology are her passions. Currently, she leads the Seattle Ed Tech meetup and enjoys hosting events like hackathons to connect creators and educators.
Create a Stable and Secure Google Workspace for Education Admin Console