Electronic Prototyping#
Where software prototyping is required for GUI’s, tangible user interfaces or TUI’s require additional skillsets in electronics. These skills elevate not only your design projects but also your value as an interaction design in industry. It is highly recommend to explore electronic prototyping skills as part of your time in this course. Some programming knowledge will be required for more complex interactions, but most electronic interfaces can be accomplished with simple circuitry and a power source. Tasks in this section will aim to teach you both approaches and steadily will get more advanced as they continue.
Do I have to learn to code?#
Programming is a valuable skillset and while not needed as an interaction designer, it will most certainly make you stand out! Some of the tasks in this workbook will require programming though the code is provided in places. Students are recommended to explore Codédex (https://www.codedex.io/) or Coddy (https://coddy.tech/) as a way to learn programming skills in a fun and playful manner (more information provided in Learning to Code). What kinds of programming languages to learn will depend on the kind of skillsets you wish to acquire and industry you wish to work in. Below is a break down of popular languages and their applications for you to decide a pathway you wish to explore as an Interaction Designer. For the purposes of this workbook and any programming involved in tasks, the language used or recommended will be mentioned in the task.
Note. Difficulty levels are subjective
| Programming Language | Difficulty | Description | Where it’s used? | Useful for prototyping? |
|---|---|---|---|---|
| *Python | 🔴🔴 | General-purpose programming language for web development, scientific computing, data analysis, artificial intelligence, and more. | Scraping data from the Internet, data analysis, machine learning, and many other applications | Python is widely used in robotics and microcontrollers with MicroPython a variant dedicated for microcontrollers that is perfect for rapid prototyping. |
| *Javascript | 🔴🔴🔴 | Scripting language for web development, game development, and mobile apps. | Client-side scripting on websites such as animations and interfaces, mobile app development, and web-based game development | JS is used for IoT projects and home automation and is the primary language for microcontrollers like ESP32 and Arduino. |
| *C/C++ | 🔴🔴🔴🔴 | Low-level programming languages for operating systems and embedded systems to make high-performance applications | Widely used in software development for operating systems, medical devices, and high-performance software such as games or simulations. | C++ is the language of choice for working with microcontrollers and specialised hardware. While it has a steeper learning curve, it is more rewarding to learn for electronic prototyping. |
| HTML/CSS | 🔴 | HTML (Hypertext Markup Language) is used for structuring content on the web, while CSS (Cascading Style Sheets) are used for styling and layout on the web. | Primarily used in web development but also for designing interfaces on the web and web-based applications like Electron. | Very easy to learn and prototype visually for the web, it is used best with Javascript. Only useful for electronic prototyping if combined with JS to make a web-based interface that can connect with a microcontroller. |
| Swift | 🔴🔴🔴 | Dedicated programming language for Apple systems. | App and software development within Apple hardware. | Not directly relevant to electronic prototyping. Swift and Java (it’s counterpart for Android) are useful to learn if you wish to become a mobile developer. Designers will rarely need to learn these languages. |
| Touch Designer | 🔴🔴🔴 | Visual programming language for creating interactive experiences. | Useful in a variety of interactive applications from exhibits, installations, data visualisations, interface design, to simulation trainings and more. | Being node-based it is a very easy way to program and a great way to make interactive projects that involve sensors, cameras, and other electronic components especially for artists and designers who want to make immersive experiences. It can also be integrated with AI for generative outputs but with a steeper learning curve. |
| p5.js | 🔴🔴 | A JS library for creative coding, visualisations, and generative art. | Widely used in interactive artworks like interactive installations and exhibitions, generative art and design, and also data visualisation. | Because it uses JS, p5.js can work with microcontrollers programmed used JS to make unique prototypes on a screen, audio, or other hardware. This is a more playful form of prototyping but requires prior knowledge of JS. |
* Recommended for electronic prototyping