MORE EVENTS
Leadership
Exchange
Solutions
Summit

No-Code App Design: App Prototyping With Figma and Onenote

Change display time — Currently: Central Daylight Time (CDT) (Event time)
Location: Room 345
Experience live: All-Access Package Year-Round PD Package Virtual Lite
Watch recording: All-Access Package Year-Round PD Package Virtual Lite

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
  • Students develop, test and refine prototypes as part of a cyclical design process.
Creative Communicator
  • Students publish or present content that customizes the message and medium for their intended audiences.
Disclosure: The submitter of this session has been supported by a company whose product is being included in the session

Proposal summary

Purpose & objective

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.

Outline

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.

Supporting research

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

More [+]

Presenters

Photo
Jessica Pilsner, St. Thomas School

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.

People also viewed

Create a Stable and Secure Google Workspace for Education Admin Console