web

Course Objectives


The aim of Graphic Design for Web is to apply principles of typography, layout, color theory and symbol design to create and develop user-oriented interactive content for the internet. The course is designed to learn HTML5 and CSS3 languages in order to better understand front-end (designer) and differentiate from back-end (programmer) design terminology and processes. While learning code will be a necessary portion of this course, our main focus will be the designing of content for the internet including web pages, social media, and app design and development. Additionally students will learn how the internet functions, types and styles of websites, key landmarks in the development and history of the internet, and how the internet can be used as a tool for social change.


This course meets from 1:00 - 3:30 on Mondays and Wednesdays in AAB room 204





This course is designed as a studio course in which students will complete a number of challenging assignments while learning the basic principles and standards within the graphic web design industry. At the completion of this course, students will:


  • Become familiar with essential web design terminology and HTML and CSS code languages
  • Become technically proficient using industry standard software applications as they apply to web design, including Figma, Adobe Photoshop, Illustrator and Sublime Text 4 and other code editors
  • Focus on craftsmanship and professional presentations of web design projects
  • Apply principles of formal design aesthetics to graphic web design projects to create effective visual communications
  • Strengthen creative problem solving and critical thinking skills
  • Learn to analyze and discuss your design concepts and the work of peers and professionals

AUG - SEP 2024

Mo AUG 26

Introduction to course

Syllabus

NOTES1

NOTES2

NOTES3

NOTES4

We AUG 28

THE SANDWICH

H1-H6 P, IMG, STRONG, EM, UL OL, LI, IMG, A, GOOGLE FONTS

Characters

Directory

Recipe due next class

Mo SEP 02

LABOR DAY-No Class

We SEP 04

Recipe Due 01_name_recipe(directory title)

Build new page in class

Linking multiple pages and mailto

Multi-page site due next class

W3C

Mo SEP 09

Review Multi-page sites

Introduction to CSS

Selectors and properties

3 Grid layouts Due next class

css notes

We SEP 11

Review grid layouts

Create multi-page Personal page of your work

CSS TRICKS

Mo SEP 16

Responsive Web Design

Responsive images

Design one responsive page for next class

We SEP 18

Review RWD assignment

Uploading files to the host server

Adding logos and Icons

HOST SERVER

SEP - OCT 2024

Mo SEP 23

RWD PAGE DUE UPLOADED TO SERVER

Discuss responsive type

Corrections due next class

We SEP 25

No Class Day

Mo SEP 30

Review Project 1

We OCT 02

Introduce project 2: GIF ANIM

Demonstration: GIF Anims

Animation demo

Mo OCT 07

CODE EXERCISE DUE

Review animations

Mograf with Text exercise

Sketches and concept next class

We OCT 09

Review sketches and concept

Mo OCT 14

CODE EXERCISE DUE

Review Gif drafts

Gif Ad Sizes

We OCT 16

GIF ANIMATION DUE IN A WEBPAGE, UPLOADED TO SERVER

Critique Gifs

Introduce Project 3

Brief and sketches due next class

OCT - NOV 2024

Mo OCT 21

CODE EXERCISE DUE

Review concepts and sketches for project 3

Begin animating

We OCT 23

Review progress on GIFs

Mo OCT 28

CODE EXERCISE DUE

Demo on how to upload to Giphy.com

Introduce Project 4:Illustrated home page

Brief and thumbnails due next class

We OCT 30

Review Concepts and Thumbnails

Begin Illustrating

Mo NOV 04

CODE EXERCISE DUE

Progress Critique for home Page

We NOV 06

Review Progress, work in class

Mo NOV 11

home Page in a page DUE end of class

We NOV 13

Brief with concept sketches

Begin developing user flow charts

APP PROCESS NOTES 1

APP PROCESS NOTES 2

LinkedIn Tuorial

App Inspo

NOV - DEC 2024

Mo NOV 18

Review Lo-fi sketches

Material Design System

Android

Apple Standards

We NOV 20

Review Mid-fidelity Wireframes

Work in class

James' Wireframes

Mo NOV 25

ZOOM

Critique App Design

Introduce final project

We NOV 27

THANKSGIVING BREAK

Th NOV 28

THANKSGIVING BREAK

Mo DEC 02

Finish critique

Work in class, develop website

We DEC 04

Work in class, develop website

Instructor/Course feedback

LAST CLASS DAY

Mon Dec 9

FINAL 12:30 - 2:30

FINALS

PROJECTS


All Projects are due in the dropbox before class begins on the due date, always


All files must be properly labeled: Project Number_YOUR LAST NAME
example: 01_Dunlap.pdf

In Web design, files maintenance and proper labeling are the difference between the project working and not working. Projects not properly labeled will be automatically failed.

No Projects are accepted after deadline. You have remote access from any computer anywhere to the dropbox through:

remote access

Instagram


Consider each project as a creative or conceptual puzzle to be solved. Graphic design is arrangement, organization and communication, which often require experimentation and revision to find the best choice for the particular idea. Being a creative person is an active process, so revising projects and making many iterations and exploring all of the possibilities around an idea are encouraged and ideal.

These projects are all exercises in creativity, focus on creative problem solving and technical understanding of the tools.

Projects begin with thumbnail drawings in a sketchbook (or ipad, other) to develop concepts, and then these concept drawings are presented to small groups to brain storm ideas in order to optimize the concept and image.



MATERIALS

There is no text for this class, notes and reading material will be uploaded to this site and students will be informed when assignments are on the site. You will be required to back-up your projects with an external harddrive or USB stick. Additionally, you will need a sketchbook no smaller that 5 x 7 and no larger than 11 x 14 and a pencil or pen each class to work out ideas.Ipads with pencil or graphics tablets are also acceptable. We will use your free www.lynda.com/linkedin-learning subscription for at home tutorials, the link can be found on your student homepage on the Bloomu site


Instagram

Lab Hours

EVALUATION


Attendance

Attendance is mandatory and crucial to be successful. Please make sure to look over the academic calendar to schedule any appointments or travel arrangements during breaks or outside of class meeting times. Even though this course meets online, students enrolled in studio courses are expected to attend all class sessions, as interaction and class participation are important aspects of the total learning process and should be valued as such. Students are responsible for all material presented in class and should contact the instructor for any information they may have missed. Additionally, there will be no makeup critiques, lectures, demos, or exams for unexcused absences.

If circumstances occur that cause excessive absences, the student will need to meet with the professor outside of class to discuss the situation. It will be the responsibility of the student to withdraw from class if it becomes necessary. Failure to do so could result in a poor academic standing and financial obligations.


ART DEPARTMENT POLICY ON ABSENCES:

Attendance will be taken at the beginning of each class. If you are absent, it is your responsibility to find out what you have missed and what you need to prepare for the next class. In addition to contacting the faculty member, you should also contact one of your classmates to find out about any assignments not indicated on the course outline.

PUNCTUALITY:

  • 1. Three (3) Tardies (arriving late or leaving early) = One (1) Absence
  • 2. Tardiness of One (1) Hour or More = One (1) Absence
  • ATTENDANCE:

  • 1. Three (3) Absences (Excused or Unexcused) = One Letter Grade Reduction * (i.e. a “B” would become a “C”)
  • 2. Each Additional Absence (Excused or Unexcused) = Another Letter Grade Reduction
  • 3. Five (5) Absences (Excused or Unexcused) = Mandatory Course Failure

Due to the circumstances surrounding Covid 19 if you are not feeling well, or suspect you have been in contact with someone who has Covid 19 you are required to work from home. Contact the professor for the class and attend class via Zoom if possible. Prompt communication to develop a plan will not incur grade reduction. It is up to you to keep track of your absences.

Grading

For each project you will be sent a Google form that details the individual requirements for that project and you will answer either "yes" or "no" questions regarding the tasks and knowledge you are expected to learn and be able to implement at each interval. For each question you earn a "1" for "yes" and "0" for "No" answers. Accurate self-assessment is a key factor in working successfully, so be honest with your answers. I will be there to help with answering those questions if needed, and will potentially ask you for justification for your assessment if I see a discrepancy. Your assessment involves four criteria: Technical, Formal, Professional/Craftsmanship, and Critical Thinking. These criteria are explained further:


Evaluation Criteria


(1) Technical proficiency - use of software applications

(2) Formal - Use of accepted practices and a visible understanding of concepts and principles

(3) Craftsmanship, presentation, deadlines and participation in critique

(4) Concept, critical thinking and revision


You can earn 5 points per criteria for each project, for a total pf 20 possible points per project. You will know when the project is assigned exactly what is expected of you for that project. Each overall rating is given a grade equivalent based on the standard 90%, 80%, 70%, 60% grading percentages.


  • 20-19 points = A
  • 18 points = A-
  • 17 points = B+
  • 16 points = B-
  • 15 points = C
  • 14 points = C-
  • 13 points = D
  • 12 points = D-

Art majors at the sophomore, junior, and senior level are required to participate in the departmental annual review. Specific details including portfolio requirements and review dates will be provided during the semester. Non-participation will lower your final grade by 1/3.


SELF-ASSESSMENTS

CONTACT


James Dunlap

jdunlap@commonwealthu.edu

Office: A&A 260

LINK TO ZOOM OFFICE HOURS

Office Hours:

Mon & Wed 12:00 -1:00 and 6:15 - 7:15

Thurs 3:30 - 4:30

or by appointment

My Work