Embedded Files
Build an App Prototype!
Build an App Prototype!
Mobile Apps have become part of our everyday lives and help solve problems within our society. In this tutorial, you will learn how to build an App prototype in Google Slides aimed at solving a potential community or schoolwide issue--and do it without any coding! Prototyping is an essential part of App design incorporating creativity, collaboration, and iteration. In addition, I will be giving a quick glance at some of the awesome coding platforms Google provides such as Grasshopper, CSFirst, Applied Digital Skills, and Google's Digital Garage. There are multiple ways in which you can build an App prototype. One way is using Google Slides to develop your mock App. Do this by linking shapes/buttons to other slides to get the feel of moving through a phone app. Check out the Google Slides below for a quick sample/tutorial. Scroll further down to see how to do this with InVision. In addition, check out the following link for information on Challenged Based Learning--this framework goes hand-in-hand with building an App.
Build an App Prototype with Google Slides.webmCoding Platforms
Coding Platforms
Google's Grasshopper
Google's Grasshopper
Learn to code using Javascript in this free coding platform for beginners. Complete each lesson and continue to level up your coding skills! Unlock more courses as you move along. Courses include: Fundamentals, Fundamentals II, Animations, Animations II, Array Methods, Automation, Intro to Interviewing, Intro to Webpages, and Using a Code Editor!
Google CS First
Google CS First
CS First is a free computer science and programming curriculum that makes coding fun and easy to learn. CS First allows teachers to set up a class and invite students, assign lessons, and monitor their progress. No CS experience is needed to get started! Lessons include 1-hour lessons, multi-day units, and most are also offered in Spanish and support ELA!
Google Digital Garage
Google Digital Garage
Through this platform, there are 58 computer-related courses. Each comes complete with videos and work that for many can lead to a Google created certificate of completion. Many have multiple modules and up to 20 hours of online work. Click the image above to browse all of these courses. Categories range from Data and Tech to Digital Marketing, and to Career Development. Click "Data and Tech" to filter the categories for coding courses!
InVision App
InVision App
The Invision App allows users to build one prototype for free. If you wish to build additional prototypes you will need to pay for an upgrade (or create a second account under a different email). Below you will find the "how-to's" and tips to creating your very own App prototype that you can either embed on a website, share a link, or send to your phone to see it in action! There are a few other sites similar to this (Marvel App, Wireframe), but I found this to be easy to use with no real limit on "pages". Below is a few sample apps folowed by the tips and tricks to using InVision.
All of the images for each of the screens within the App Prototypes above were created in Google Drawings, downloaded as a PNG and then uploaded as a screen in the inVision App. However, it took a little time but the size of the image has to be exact in order for it to fit within the phone frame. Follow these rule and you will be fine:
Once you open Google Drawings go to "File" => "Page Setup" => click on the "Standard" box and change to "Custom" => change "Inches" to "Pixels" => set your size to 1065 x 1900 pixels. This will change your canvas to the appropriate size.
Fill the entire canvas with the images, color, layout of your app prototype. Insert images, shapes, and text as needed. Use the "grouping" feature to group items to make them easy to move as a group.
When you create your project in the inVision app, be sure to select the iPhone 6 as the phone frame of this coincides with the size parameter set in your Google Drawings.
NOTE: You can also use Google Drawings to create your App Prototype. Simply click the following linkg to create a copy of a Template I've created, add your pictures and link them to the desired slides.
Report abuse