UI Design Programming 1

In response to a partial history of User Interface design, students will be compelled to situate their work in the context of the development of Human Computer Interaction for art and design. This context will be given via in-class lectures, hands-on exercises, guest lectures, and a workshop*.

The class has three primary goals:

• Enable students visualize their ideas via interactive prototypes
• Introduce students to basic ideas in web programming such as web coding syntax, programming logic, and information architecture
• Help students develop a perspective on UI design based on practical and conceptual knowledge, and is expansive in its point of view

To accomplish this, with support of lectures and class materials, we will do the following:

• Create a prototype for a personal product/app
• Create a website for a public facing product/app
• Complete weekly exercises on coding and design
• Read and discuss technical and conceptual writings on design and tech
• Visit with guest speakers and conduct a workshop with a guest designer
• Create a shareable archive of our work

Note: students will be expected to attend one workshop that may extend to time outside of our normal class time.

Learning Outcomes

• Develop a theoretical knowledge, technical understanding, and historical basis of the internet and design online
• Gain a basic understanding of HCI principles and UI Design fundamentals
• Develop technical skills (HTML, CSS, and JS) to produce functioning websites
• Stimulate critical positions around design principles within networked technologies
• Analyze current digital aesthetics and their historical context
• Understand the social and cultural implications of information flows online
• Explore the Internet as a space that is public and private, and the corporate and political tensions embedded in such condition
• Gain insight into the contemporary landscape of Internet-based art and design practices
• Activate the browser as a form making tool

Material Requirements

• Personal Laptop
• Sublime Text for editing and updating code
• Github Desktop Client for uploading our websites
• Figma for image/media generating, editing, and prototyping
• Glitch for online coding
• Zoom for video calls
• Slack or Kakaotalk (TBD which we use) for text-based communiation
• Phone, digital camera, scanner, screen capture etc.

Readings

• There will be routine readings with discussions taking place in class. All students will be required to engage in reading discussions either by posing one question or responding to another students question about each reading.

Class Activities

Clases will be in a primarily synchronous model. However, some activities will take place at your own schedule outside of class time, conforming to certain deadlines. The following activities will take place online via a number of platforms:

• Personal working time
• Reviewing recorded lectures
• Online supplementary learning

Grading

• 45% ... Projects (P1, P2, Class Archive)
• 25% ... Assignments (Exercises, Reading Responses, etc.)
• 10% ... Workshop
• 10% ... Attitude
• 10% ... Attendance

Letter grades represent the following:

A = excellent;
B = good;
C = satisfactory;
D = unsatisfactory;
F = failure.

A grade of C- or less is considered a failing grade for required courses within the major, and you will need to retake this course if you achieve a grade lower than a C.

Attendance

Students who are absent for over 1/3 of the class will receive a grade of 'F' or 'U' for the course. (Exceptions can be made when the cause of absence is deemed unavoidable by the course instructor.)

Plagiarism

Students are expected to generate their own work. At the same time the nature of the web is inherently build on sharing knowledge and resources, and building upon others work – as such we will get familiar with using pre-existing code, language, and imagery as materials we shape into our own unique projects. We will learn how to appropriate mindfully, and credit work properly.

Code

Remixing existing code is often an important part of learning, but any code you take from an online resource needs to be commented with the source location where it appears in your project. For example:

For HTML

<!-- source: http://cool.biz/cool_code -->
<div id="coolThing">
does a cool thing.
<div id="helpsDoACoolThing">
</div>
</div>

or for CSS

/* source: http://cool.biz/cool_code */
#doesACoolThing {
cool: thing;
}

or for Javascript

// source: http://cool.biz/cool_code
function doACoolThing(){
does a cool thing.
}

Further, when using found code make sure that your use of it is appropriate to your project, and outside code should not dictate the design of your projects as experienced by the user. If the function or style of your site is identical to your source, that is likely a problem. Any snippets of code on the resources page are free to use. If you are unsure if your reuse of code is appropriate, ask!

Design

You may not use graphics, images, video, audio, or any other design elements that you did not create yourself, or that are obvious recreations of others work, under the pretense that they are your work. With the possible exemption of:

• Graphics such as a Facebook or Twitter icon in reference to those sites, etc, and that only in accordance with those organizations guidelines for such an elements use. In such cases those graphics should be a minor element in your design.
• If an assignment requires you to display found imagery and it is properly attributed
• Use of imagery in the Creative Commons that is cited and used based on its license

If you are unsure if the use of a design element is appropriate, ask!

Writing

Unless stipulated by an assignment, or approved by the instructor, all written content should be written by you. If it is approved by the instructor, make sure to cite the text appropriately.