Faculty Showcase Adoption title

Purpose: to help other instructors teaching the same course

Common Course ID:  DES 2405 Application Programming
 CSU Instructor Open Textbook Adoption Portrait

Abstract: This open textbook is being utilized in a design course for undergraduate or graduate students by Taylor Moon at CSU San Bernardino. The open textbook provides students with the ability to program, design, and deploy mobile applications with ease. The main motivation to adopt an open resource was to utilize cutting-edge plugins that help make the application programming process easier than ever. Most students access the open resource from the Anima website link and use the provided promo code to access the resource free of charge.

DES 2405 Application Programming 
Brief Description of course highlights:  A major course

https://catalog.csusb.edu/coursesaz/des/
Semester Prerequisites – DES 1100, DES 1110, DES 1125, DES 2600
Semester Corequisites – DES 2005

Student population:
The class was composed of design majors, as the course is a prerequisite for the major. Students entering this class typically have had no prior coding experience but have taken fundamental design courses. Therefore, students’ incoming strengths will lie with the design of the app interface rather than the programming of the app interface.  

Learning or student outcomes:  

• Understand the basic structure and syntax of React components
• Learn the difference between native mobile applications, websites accessed on mobile devices, and progressive web applications
• Learn how to package an application and test it through the browser and simulators
• Debug errors through the code editor terminal
• Utilize prototyping software(s) to generate responsive designs that adapt to different platform sizes 
• Add prototyping plugins that streamline the conversion of design assets into usable code
• Implement user heuristics to create user-friendly applications 
• Understand the terminology and appropriate layout and sizing for different app components. This involves awareness of standard screen resolutions for different devices

Syllabus and/or Sample assignment from the course or the adoption
Creating a React app for CSUSB’s College of Arts and Letters
   -  Using the web-based coding playground, Expo Snack, students were able to test their React coded apps online. 

Using Adobe XD, Anima, and React to Generate a Map App

Share any curricular or pedagogical changes that you made:  Initially, this course was designed to teach SWIFT, which is an Apple-based coding language. It can only be coded from Mac devices and tested on iPhones. However, I changed the coding language to be a multi-platform language (React) that could be deployed to Android and iPhone devices alike. Secondly, I integrated more design solutions to programming and taught students the basics of prototyping so that they could experience a wide range of Application Design and Programming strategies. 

Describe any challenges you experienced, and lessons learned. For example: incomplete OER/Low Cost materials, lack of printing facilities, bookstore confusion, academic senate support, missing ancillary materials, articulation, other?   One of the challenges that I faced was that course fees are able to be used for “expendable materials.” However, software subscriptions are not considered to be expendable materials that can be purchased by the pro-card for a monthly subscription. 

Textbook or OER/Low cost Title: The free program used to supplement the DES 2405 Application Programming course is called Anima. This tool was created to help designers convert their projects into code more easily. The link can be found at https://www.animaapp.com

Brief Description:  I was presented with the opportunity to teach DES 2405 Application Programming. I was told that the course had only been taught one time prior and, therefore, it was essentially a course that needed to be fabricated from scratch. This course would be the first class in which design students are introduced to coding. Therefore, the content needed to be beginner friendly. I knew my design students would be confident in illustrating the interface elements and layout for the app but might struggle with the code more. In addition to teaching students basic coding, I also provided them with the means to convert design into code. The program, Anima, exports students’ design files directly into usable React code. React is the coding language that I taught students at the beginning of the semester. This language is desirable for its ability to create cross-platform applications, available to Android and Apple devices alike. Anima allows students to send their design’s code to Code Sandbox (an online code playground). From there, students could deploy their applications into live web apps. It was a fantastic opportunity for students to gain real-world experience with application building.

Anima is a plugin for Adobe XD and other prototyping design software, such as Figma. Students already had Adobe XD free of charge through the Creative Cloud. After discussion of the class projects with the sales representative at Anima, the saleswoman provided promo codes that allowed students to access Anima for free.

Student access:  Using the promo code that the Anima sales representative provided, students could obtain a premium Anima membership. Students would then utilize Adobe XD from their Adobe Creative Cloud and add the plugin. In the plugin, students would login with their free membership account.

Supplemental resources:  To better describe the Anima plugin interface while breaking down the React code, I provided students with instructive slides (https://docs.google.com/presentation/d/1qhTMyxGu7XNysTYXvzOLi 70y0_50Kmt23sto1-eueX8/edit?usp=sharing). I would post these slides to Canvas so that they were readily available. Additionally, I created tutorials that students would follow along to when building their applications.

Cost Savings:  Anima Pro memberships are priced at $39 per month or $372 annually. The free membership allowed each student to save the above amount in monthly or annual fees.

License:  Anima is a service that is available to members. Due to the partnership created with Anima, our students were able to use this service free of charge and deploy their apps with full ownership.

OER/Low Cost Adoption Process

Provide an explanation or what motivated you to use this textbook or OER/Low Cost option. I remember how it expensive it was to be a student. I also wanted to give students access to the most

How did you find and select the open textbook for this course? I researched popular programming plugins for Adobe XD within the design community and watched YouTube reviews and tutorials for this plugin. I then went to their website to learn more about its features. Through working with the department Visual Resource Specialist, we were able to contact the sales representative and arrange free promo codes for the students

Sharing Best Practices: Teaching a class for the first time is one of the best opportunities to implement low cost materials adoption. You are then able to structure the course projects, slides, and activities around these new resources. I would research these materials a semester before teaching the course and then speak to your department chair and ASC about the feasibility of adopting the new materials. The use of new software in a curriculum (when used on university devices) usually involves filling out a ICT form for accessibility prior to use.

Taylor Moon Castagnari 
Assistant Professor of Design
California State University, San Bernardino

https://www.csusb.edu/art/our-team

Describe your teaching philosophy and any research interests related to your discipline or teaching.    My teaching is grounded upon the pillars of skill-based demonstrations, problem-solving and critical thinking, and client-based design projects. As design is advancing rapidly with the development of new technology, learning the newest software and code is an important part of my teaching, as I prepare students to enter the competitive design market. I see this aspect of self-teaching as more pertinent to my teaching philosophy than my research statement, as it is not directly a published outcome. Instead, it is a means by which I grapple with challenges of mastering skills and then translate to students how I overcame those obstacles to use a platform with ease. 

I work with students individually to create thumbnail sketches, conduct research, and submit proposals of their designs prior to committing them to vectors. I help them compile a professional progress document for each project that highlights their design process from concept to completion. The revisionary process of submitting drafts and receiving critiques throughout a project’s lifetime has become essential to my curriculum development. Understanding that my students are visual learners, I recreate illustrations of the tools in each of the design softwares and then enlarge and define their functions. I record software and code tutorials in which I go through creating a project while narrating and explaining why I have chosen particular methods. I post these tutorials in addition to the live demonstrations that I do in lecture. Supplementally, I create slides that break down each step of the project and embed them as interactive slides within Canvas. I pause during instruction to ensure that all students are staying on pace with the demonstrations and understand the process. I hold extra office hours to accommodate student schedules, holding as many as 10-15 extra office hours per week. Additionally, I cater to visual learners by providing visual feedback to their designs. Instead of simply leaving comments when grading their designs, I edit their designs to visually show them how they could enhance their designs moving forward and then describe how they can execute and recreate those changes.

In order to implement the latest trends in Graphic Design and UX and UI practices in the classroom, I have paired my own professional experience with supplemental courses and professional certifications. While I had already taught Interaction Design, Intro to Web, and Advanced Web courses, I completed Cal Arts’ four-course UX and UI Specialization in order to compare the ways in which other universities have taught topics of strategy and information architecture, prototyping, wireframing, and interface and experience fundamentals.

By having a front-end knowledge of programming, I was able to understand the limitations and possibilities of what can be done when designing for web and mobile media. I gained a certification from CodeAcademy in HTML and self-taught CSS, Javascript, and p5.js to help enhance my web design courses. While UX and Web designers often hand off their prototypes to developers, I had experience working for smaller companies that could not hire both a designer and programmer. Instead, these small businesses expected the designer to have a working knowledge of both practices. Upon learning that I would be teaching DES 2600, I became certified through Codecademy in React-Native, which is a cross-platform coding language for Android and iOS app programming. I wanted to accommodate students with Mac and PC computers, as teaching in certain languages, such as Swift, can only be programmed and tested on Mac. I believe engaging in active teacher development is just as important as one’s teaching methodology.

I learned that CSUSB’s Design program has a concentration in 3D Design and primarily uses Cinema 4D in the curriculum for teaching 3D animation and rendering. I had some basic experience with Maya from taking a Lynda 3D modeling course to supplement teaching Motion Design courses previously. However, I was committed to switching from Maya and learning Cinema 4D in preparation for teaching DES 2600 – Digital 3D and Time-Based Media. I consulted with the head of animation at Pixar, Renato dos Anjos, and brought him in as a guest speaker to the course to describe to the students how different portions of the animation are distributed amongst the animation team. While my invitation of guest speakers is relayed in my Community Service sections of my FAR, I felt that this example best demonstrated how I seek to create a dynamic classroom through bringing in industry professionals.

 
While I go more in-depth on community partnerships in my Community-Service Narrative, I wanted to iterate how essential obtaining design clients for classroom projects is for my teaching. My belief that course projects can equitably provide all students participants with resume-building experience has led me to gain the Getty Museum, Allegiant Airlines, The Los Angeles Maritime Museum, the Santa Barbara Maritime Museum, Health Nut LA, and Hayden Los Angeles as community partners. Our students have created projects around these organizations’ brands. This culminated in the organizations posting the students’ work on official media channels and crediting the design student. Ultimately, I see my own learning and problem-solving as intrinsically tied to my students’ education. My goal as a faculty member is to make students as prepared as possible for their careers through projects with regional clients and detailed explanations of the design tools at their disposal.