App and Web Prototype Design (Ages 14-18)

We will start the course at the beginning of the design process - ideas.  Then we put the ideas on paper and then the computer.  Students will be able to create their own clickable app or website prototype in this small class.  I highly encourage students to turn on their cameras to participate in discussion, ask and answer questions, and share their work.  Doing so helps students gain confidence in presenting and giving and receiving feedback.  

Week 1:  What are the differences between apps and websites?  What is user experience and user interface (UX/UI) and how do they work together?  View some good/ bad examples of UX/UI design. Brainstorm ideas for app or website.  Introduce the design process using defining questions, thumbnail sketches, wireframes, low and high fidelity mockups, and prototyping.  Assign the mood board (color, imagery, type) and user profile homework. 

Week 2:  Bring mood board and user profile, and present it.  Create a user flow and choose one path to prototype.  Start sketching thumbnails and wireframes. Assign wireframe homework.  (approximately 6-10 frames) Also download Figma and assign Figma video on Youtube.

Week 3:  Present user flows and wireframes for feedback.  Take notes and make changes to user flows and wireframes. Start creating low-fidelity mockups on Figma.  Ask/answer questions about Figma and design.  Homework: Create low-fidelity mockups on Figma (6-10 frames) and test with a friend or family member.

Week 4:  See and discuss the basic concepts of design: hierarchy, balance and alignment, contrast, texture, repetition, white space, and rule of thirds.  See design elements of user interface such as imagery (photos/illustrations), navigation, typography, icons, and buttons.  We will introduce some resources for these elements too. Homework:  Find some design elements that you may use in your app/website and start creating your high-fidelity mockups.  

Week 5:  Share your high-fidelity mockups in progress.  Ask and answer questions from peers.  Learn links for prototyping.  Homework: Finish high-fid mockups and links.  Have a friend or family member try out the prototype.  

Week 6:  Present prototypes, give and receive feedback.  See examples of resources and careers or portfolios.