iamteaching

︎︎︎pennstate


23s

interactive learning and web design

art





joowh@psu.edu

sonifyd.com


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

ART3: 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