Now that your team has created a non-digital prototype, how can you all make this come to digital life? You have a few options for those less comfortable to more comfortable with coding!
Remember: You are not expected to have a perfect finished design at the end of this hackathon! You will not be judged on how “finished” your idea is, just how good it is and how well the judges understand it.
A native application is an app that exists on a smartphone without necessarily being connected to the internet. Examples: Google Maps, Instagram, SnapChat, Uber, etc.
Marvel: This tool allows you to create a prototype of an app with animations, gestures, and transitions without having to code. You can create a prototype directly from their website and test on an iPhone or iPad with their app. What's awesome is that multiple people can collaborate on one prototype. Check out tutorials here.
InVision: This tool is very similar to Marvel but with more capabilities of animations, gestures, etc. but you have to design the screens in a separate piece of software, like Photoshop. Check out their tutorials here.
Thunkable: This tool allows you to create apps for iOS with block-based code similar to Scratch or Snap. It has an accompanying app for iOS that allows you test your app as you go. Sign up for an account and check out the tutorials on their website (you'll need to create a new app, and the tutorials will be on the left-hand side).
AppInventor: This tool allows you to create apps for Android. The programming is quite simple and very similar to Scratch or Snap, and the website is available to use through any browser on any device, but the app you build can only be used on an Android device. Check out some of their tutorials:
XCode & Swift: XCode and Swift are tools used to create apps for macOS, iOS, watchOS, and tvOS. XCode is an IDE and Swift is a programming language developed by Apple that allows you to develop apps for their operating systems. Therefore, you will need a macOS laptop to be able to use XCode and Swift. We recommend the following tutorials to get started:
A web application is an app that can be used in a browser like Safari or Chrome. Examples: Facebook, Google Docs, Google Slides, or any of the Google applications, or something as simple as Adobe's Color Picker.
Marvel: This tool allows you to create a prototype of a website with animations, gestures, and transitions without having to code. You can create a prototype directly from their website and test on any device. What's awesome is that multiple people can collaborate on one prototype. Check out tutorials here.
InVision: This tool is very similar to Marvel but with more capabilities of animations, gestures, etc. but you have to design the screens in a separate piece of software, like Photoshop. Feel free to check out their tutorials here.
Google Sites: You can quickly create a website with Google's no-code interface for building websites.
Glitch: You can use Glitch to create websites with HTML and CSS. What are HTML and CSS?
HTML is the language used to determine the structure of your website.
CSS is the languages used to style your website.
We suggest using W3Schools as your main resource for both of these languages.
Javascript: Javascript is a programming languages that allows you to create dynamic webpages. With only HTML and CSS a webpage is static, meaning it can't react to user input. You can add JavaScript to your webpage on Glitch.
P5.js: This is a Javascript framework that is used mainly by artists. It allows you to treat a webpage like a canvas where you can draw whatever you like! The framework can either be used in your website or you can use the text editor in a browser. We suggest checking out the following tutorial videos; there are many and they are long so you may need to sift through them.
Bootstrap: Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. This is very helpful for creating a web app for smartphones because you don't have to create the responsive HTML, CSS, and JavaScript from scratch. Again, we suggest using W3schools to better understand how to use it. Also, there are some basic, free Bootstrap themes that you can get from here or here.
A device is a physical object that takes in input and produces some output. This can be as complicated as a smartphone, a Fitbit or Google Glasses to as simple as an alarm clock or a thermometer.
Arduino: This tool is a micro-controller, which is essentially a very small computer. Using a few wires and breadboard, you can collect input (a clicked button, a loud noise, a temperature change, etc.) and create some output (LEDs, motors, etc.). It's a very powerful tool, check out the endless projects here.