Copyright © 2025 Cody Squadroni All Rights Reserved.
3x3 Technologies: Creating
Creating With:
Figma
Figma is a browser-based UI and UX design application with excellent design, prototyping, and code-generation tools. It's currently (arguably) the industry's leading interface design tool, with robust features which support teams working on every phase of the design process.
The great thing about Figma is they have a free tier that allows anyone to jump right in. This creation tool is helpful for many things before developing a website, mobile app, or just brainstorming. This allows students to visually create a working prototype that operates just like their website or mobile app would. It gives them a chance to see what things look like and make any changes before programming it or sending it to a programmer to start the development.
Figma is a creation tool specific to those who are interested in designing and prototyping websites. This means the target audience is digital media, user experience, user design, and programming students.
Figma is a tool that has a simple user interface but some advanced options, which means a younger audience could jump into it and start prototyping or designing. Even though it has a simple interface and is easy to jump into, you need to understand the user experience to use the application properly. That is why I would recommend this to high school students to college who are interested in computer science or user experience.
I believe Figma promotes and supports the intended learning outcomes that are expected in the user experience and computer science realm. Figma supports the learning outcomes because it allows students to show their understanding of usefulness, usability, findability, credibility, accessibility, desirability, and evaluability. These are all important outcomes that we look for when a student is learning about the user experience. Figma also supports the learning outcomes for design by allowing students to show their understanding of marketing/communication design, interactive design, page layout, typography, and color theory. With all these learning outcomes between UX/UI students can successfully meet their goals. Figma is also a tool used in the industry so students will be prepared by using a systemic approach. This is great for college students who are graduating and looking for a UX/UI job because they will already have the skillset and knowledge of the tool when jumping into a new position.
Below is a YouTube playlist that demonstrates the significant areas of using Figma. This includes exploring ideas, creating designs, prototyping, and handing off.
Creating With:
VSCode
VSCode (Visual Studio Code) is a customizable code editor supporting development operations like debugging, task running, and version control. It has plugin support to make it customizable to the programmer and allows most languages to be used to develop. It is an all-in-one type of editor that is lightweight, supports all languages, and is customizable. VSCode has become one of the highest-used editors in the industry.
VSCode is a free creation tool made by Microsoft with a lot of support from the community. The support from the community brings in plugins that allow users to customize their editor to do what they need. This editor is lightweight, which means it doesn't bog down the user's computer when creating an application. VSCode allows programmers to develop web applications, mobile applications, or desktop applications which makes it the editor of choice because everything can be done in one area instead of having multiple different coding applications to do the same thing.
The target audience for VSCode is anyone who wants to program. That means it has a wide age range as young children are learning to program up to college students. It has a straightforward interface that includes a file explorer, where all your programming files are located—a search area to search all files for anything specific. Source control for those who are using version control, using git. It also includes a debugger and easy access to the plugin store to customize the program's functionality. That is what makes it so useful for creation because it can be a simple tool or a more complex tool depending on the student's needs.
I have used VSCode in all of my programming classes. It has been a great creation tool because they can take the tool from my class to another class with minimal setup and already understand how the tool works. This is the case even if the language of the course changes. This also allows students to become very familiar with the tool.
I believe VSCode promotes and supports the intended learning outcomes that are expected in computer science students who are learning to program. It is a creation tool that allows them to program and get up and running quickly. It allows us to see that students effectively develop different applications, which is the primary outcome we are looking for. Using this as a systemic tool also provides students with the knowledge of the tool to be successful in the industry. The main goal is to give students the skillset to be prepared for the workforce, and I think introducing students to VSCode and continuing working with it does that.
Below is a playlist I created for getting VSCode setup and how easy the process is. It also goes into plugins we used for a specific course and how easy it is to get those set up.
Creating With:
Adobe Illustrator
Adobe Illustrator is an industry-standard vector graphics application that lets you create logos, icons, drawings, typography, and complex illustrations for any medium. It allows you to capture creativity with shapes, colors, effects, and typography. It allows for you to create scalable vector graphics which can be used on any type of device for opitmal resolution.
Adobe Illustrator is not a free tool, but it has educational pricing, and our university has a license for students for Creative Cloud. Adobe Illustrator has been around since 1987, so it has a large community for support. Illustrator can be easy to jump into and get started but can create as complex items as needed with a student's creativity.
The target audience for Adobe Illustrator is for those who are creative and want to create their items for their websites, animations, or infographics. It allows students to create their visions digitally and use them in all sorts of different mediums. I would recommend any high school student to college student to learn this application which is interested in multimedia design.
I have used Adobe Illustrator in my User Experience and User Interface courses. I chose Adobe Illustrator because it allows students to create SVG's. SVG's are important because there are many different types of technologies that we make content for. Using SVG allows the content to adapt to any device, no matter how big or small the screen. That's why Adobe Illustrator is great for those who are going into the media design realm. It's not just limited to SVG, but you can also create infographics, logos, icons, and typography, which are significant pieces of developing applications, especially for the web.
I believe Adobe Illustrator promotes and supports the intended learning outcomes for students learning design and programming. Using Illustrator allows students to create their vision of anything and implement it into their specific medium. Giving the student the tool to develop an idea plays a significant role in seeing it in action. They can create a logo and implement it into their website and see it first-hand. The outcomes we see here are that students can communicate their design and apply it to another medium they are working with. Illustrator prepares students for digital media and gives them the knowledge of the tool that the industry uses.
Below is an in-depth YouTube playlist for Adobe Illustrator that covers all the tools and has examples to get new students up and going in no time.