ART101: INTRO TO WEB DESIGN

Description

We are living in a world where automatic website builders are ubiquitous and creating web pages from scratch may sound cumbersome. However, web design is one of the most important topics in visual communication design because good web design requires foundational visual design concepts, such as understanding layout, grid systems, typography, and the use of creative images. In addition, web design nowadays is approached by user-centric design such as user interaction design, user experience design, and user interface design. That is, web design is a compound of traditional and contemporary visual communication design theories.

This course is an introduction to web coding and we will learn the elements and structure of HTML and CSS. Web coding first gives the artist/designer access to the foundation of web design and allows them to create a place where they can express themselves. Later, even if we use website builders (such as Webflow or Squarespace), HTML/CSS basics here will give us the ability to further customize our website in more unique and flexible ways.

Course Objective

By the end of the semester, a successful student will be able to:
︎︎︎ Understand the concept of HTML/CSS
︎︎︎ Create layouts, attach images, and use typography on the Web
︎︎︎ Understand responsive layouts
︎︎︎ Think about web accessibility
︎︎︎ Learn how to use online resources

Weekly Plan

1. Get Started
2. Introduction to HTML
3. HTML Elements
4. Introduction to CSS
5. Styling and Decoration
6. CSS Layout 1
7. Midterm Project - Create two column page layout
8. Midterm Project - Create two column page layout
9. CSS Layout 2
10. Flexbox
11. Grid
12. Semantic and Accessbility
13. Responsive Layout
14. Final Project - Create your homepage
15. Final Project - Create your homepage

ART002: INTERACTIVE LEARNING AND WEB DESIGN

This course introduces P5.js, a web-based JavaScript library for creative and interactive coding. P5.js (along with its sibling program Processing) has been widely used for artists, designers, researchers, and educators who don't have previous coding experience because of its easy accessibility. With flexible and extensive libraries (such as sound, geometry, physics simulation, graph, map, vector drawing, 3D, animation, GUI/UI, joystick, etc), you can easily prototype interactive (web) design, generative art, games, data visualization, and many more. P5.js is also compatible with HTML5, so you can publish the results of your work on the web.

This course is constructed to teach computational design approaches to students with special emphasis placed on the aesthetics of creative coding along with Web design. In this class, you will learn about interactive and generative design and presentation of your work on the Web by using P5.js. It will begin with learning how to use P5.js editors and display P5.js code to Web browsers (like Chrome or Safari). You will first learn basic Javascript grammar with examples of simple drawing techniques and then move to applying interaction, physics, data, sound, and motion. During this class, you will be able to interact with your design with mouse or keyboard inputs and use physics simulating algorithms for interactive and generative design. Later, you will learn how to visualize data, like sound visualizer or creative data visualization with numerical data. All work will be shown on the web. This class is created for complete beginners, so previous (web) coding experience is not required.

Course Objective

By the end of the semester, a successful student will be able to:
︎︎︎Learn P5.js (JavaScript) basics
︎︎︎Learn the HTML DOM
︎︎︎Get familiar with computational design in connection with Web design
︎︎︎Learn interactive and generative design
︎︎︎Learn data visualization

Weekly Plan

1. Get Started
2. P5.js Basic Structure
3. Forms (Shapes)
4. Generative Animation
5. Interactive Animation
6. Typography and Working with Data
7. Midterm Project: Making Creative Characters with Basic Forms
8. Midterm Project: Making Creative Characters with Basic Forms
9. Images and Pixels
10. Sound Viz
11. Data Viz
12. Data Viz
13. Final Project: Creating Generative or Interactive Visualization on the Web
14. Final Project: Creating Generative or Interactive Visualization on the Web
15. Final Project: Creating Generative or Interactive Visualization on the Web

ART003: VISUAL IMAGES ON THE WEB

Description

As artists/designers, how do we create digital images and display them on the web? How do we utilize the web environment as a tool to express ourselves? Building websites, making creative images, and publishing them on the web provide the artist/designer with the most effective virtual space to promote their work and these processes are fundamental for all creative professions.

In this course, we investigate the diverse utilizations of digital image production tools and their methods and develop publication strategies for communication. We will learn how to create digital images (vector- and bitmap-based), edit pictures, build portfolio websites, and publish our creative work on the web. In the end, we gain a thorough understanding of digital expression to show our artistic identity in a virtual world.

We will use Illustrator and Photoshop for image production, and Cargo for web publishing. This course is about self-publishing, not aiming for web coding (HTML/CSS). However, we will need to customize HTML/CSS on Cargo, so later in this course, I will introduce HTML/CSS basics to help you build up a foundation.

Course Objective

By the end of the semester, a successful student will be able to:
︎︎︎ Learn HTML/CSS basics
︎︎︎ Learn Figma/Illustrator/Photoshop basics
︎︎︎ Get familiar with (web-based) website builders and learn how to utilize them
︎︎︎ Research a variety of portfolio templates online and make them fit into your work
︎︎︎ Have a nice-looking portfolio website that you can use for practical purposes

Weekly Plan

1. Get Started
2. Digital Tools for Image Production and Figma for Prototyping
3. Raster Graphics
4. Raster Graphics
5. Vector Graphics
6. Vector Graphics
7. Midterm Project: Information Design
8. Midterm Project: Information Design
9. Typography, Website Builder: Cargo
10. HTML Basics for Cargo
11. CSS Basics for Cargo
12. Portfolio Presentation/Cargo Customization
13. Final Project - Image Preparation
14. Final Project - Present your portfolio on the web
15. Final Project - Present your portfolio on the web

iamteaching

23s

ART496

23s

ART002

23s

ART101

22f

ART003

22f

ART101