ART101: INTRO TO WEB DESIGN

Description

We live in a world where automatic website builders are ubiquitous, and creating web pages from scratch may sound challenging. However, web design is one of the most important topics in visual communication design because it requires foundational visual design concepts, such as understanding layout, grid systems, typography, and the use of creative images. Moreover, web design nowadays is informed by user-centric design, including user interaction design, user experience design, and user interface design. In other words, web design is a combination 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. Firstly, web coding 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, the HTML/CSS basics we learn 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

Description

This course introduces P5.js, a web-based JavaScript library for creative and interactive coding. P5.js, which is a sibling program of 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

In today's digital age, the internet has become the most accessible and powerful platform for artists and designers to showcase their work. Building a strong online presence through websites and social media is essential for any creative professional. However, to stand out in a sea of content, it's important to have a solid understanding of digital image production tools and web publishing strategies.

In this course, we explore the various methods and techniques used in digital image production, including vector- and bitmap-based image creation, photo editing, and image optimization for the web. We also delve into web publishing, focusing on how to build a portfolio website and effectively promote your work on the web.

Throughout the course, we will be using Figma for wireframing and prototyping, Adobe Illustrator and Photoshop to create and edit images, as well as the web publishing platform Cargo to showcase our work. While this course is primarily focused on self-publishing and not web coding, we will cover some HTML/CSS basics to help you build a strong foundation for customizing your website on Cargo.

By the end of the course, you will have gained a comprehensive understanding of digital expression and how to effectively communicate your artistic identity in a virtual world. You will have the skills and knowledge to create professional-looking digital images and websites, and the confidence to promote your work on the web.

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

ART496:Final By Jake Miller Website 1, Website 2

ART496:Final

By Jake Miller

Website 1, Website 2