MAT-125 Schedule (Onsite Spring)

About This Page . . .

Jump straight to the desired date to see what you should be doing.

January: 1/22 | 1/29
February:  2/5 | 2/12 | 2/19 |  2/26
March:  3/5 | 3/12 | 3/19 BREAK | 3/26
April : 4/2 | 4/9 | 4/16 | 4/23
May: 4/30 | 5/7 | 5/14 | FINAL CRIT: 5/21 6pm-7:50pm


Assignments at a Glance

List of Assignments


Organized Chronologically by Weeks/Dates

Week 01 (1/22):

IN-CLASS

  1. Roster (15 min)
  2. Syllabus (30 min)
  3. Assignment outlines with example work
  4. Class Introductions (60 min)
  5. —BREAK (15 min)—
  6. LECTURE.

HOMEWORK

  1. Refer to (skimming okay) related reading of required text, Learning Web Design (Robbins): Chapters 1-4
  2. HTML Principles Lecture
  3.  Lecture/tutorial to get started with Brackets, the free code editor
  4. Start Coding with HTML ***(required video lecture series…you need this to successfully complete your assignment.)
  5. Begin Assignment-1 (A1) HTML (due week 3)
  6. Need to connect to the server from home? Watch the Cyberduck SFTP tutorial.

^ TOP MENU ^


Week 02 (1/29):

IN-CLASS

  1. Review from previous lecture (students must take notes)
  2. Do in-class basic syntax practice lesson/demo (discussing tags, attributes, values, etc.).
  3. Quick HTML Quiz (not graded)

  4. Review Brackets Editor.
  5. In-class work on A1 HTML.

HOMEWORK

  1. Complete A1 HTML. Due at beginning of next class.
  2. READ pp.69-131 of required text, Learning Web Design (Robbins):
  • “Marking Up Text”- Chapter 5
    • NOTE: p.72 : hgroup is deprecated and no longer used.
  • “Adding Links” – Chapter 6
  • “Adding Images” – Chapter 7

^ TOP MENU ^


Week 03 (2/5):

IN-CLASS

  1. DUE: Assignment-01 due
    • Instructor will assist students for first part of class with any problems encountered with first assignment.
  2. Introduce Assignment-02 (Basic CSS).
  3. LECTURE

HOMEWORK

  • Start Assignment-02 (Basic CSS)
  • Read short Texture lesson to think about how texture and patterns are created and how they affect artwork. Consider this when choosing a repeating background for your design when doing the tutorial.
  • Read pp.207-263 of required text, Learning Web Design (Robbins)
    • “Cascading Style Sheets Orientation” – Chapter 11
    • “Formatting Text” – using CSS – Chapter 12

^ TOP MENU ^


Week 04 (2/12):

IN-CLASS

  1. Review previous lecture info and do a demo. Students will follow along in practice, referring to the CSS Properties Compilation list for quick reference.
  2. Students will create a simple layout in class based on a jpg layout file for evaluation.
  3. Discuss Texture and color.
  4. Look at student A2 progress.
  5. INTRODUCE Assignment-03 (Web Images and Positioning: Illustrated Poem)

HOMEWORK


^ TOP MENU ^


Week 05 (2/19):

NO CLASS: PRESIDENT’S DAY HOLIDAY

…BUT, YOU ARE STILL RESPONSIBLE FOR THE FOLLOWING:

DUE: Assignment-02 due on server/Canvas

  • Based on your reading in Chapter 3 of Learning Web Design, write a 2-3 sentence summary in your own words or EACH of the following concepts as you understand them (AND BRING TO NEXT CLASS):
    1. Progressive Enhancement
    2. Responsive Web Design
    3. Accessibility
  • CSS Positioning Introduction / Demo (this link provides video reviews if you missed something in class)
  • To follow along with the lecture above re: positioning, the links are here: lecture | practice page
  • Review Assignment-03 (Web Images and Positioning: Illustrated Poem)
  • Read pp.105-132 AND  pp.507-555 of required text, Learning Web Design (Robbins)
    • “Web Graphics Basics” – Chapter 21
    • “Lean and Mean Web Graphics” –  Chapter 22
  • Find a poem that resonates with you and bring it to the next class with ideas/image resources for ‘illustrating’ the poem. You are also welcome to illustrate and scan work if you feel that drawing and illustration are one of your strong points. Bring all resources to next class.
  • Start A3-Web Images and Positioning assignment. Get as far as you can.

Week 06 (2/26):

IN-CLASS

  1. You should made significant progress on the A3 demo tutorial. Bring this work to class.
  2. Bring your written notes from last week’s readings to class. Pair up with two classmates and see if you all agree. Groups will then discuss topics as a class.
  3.  Review if time: CSS Positioning Introduction / Demo (this link provides video reviews if you missed something in class)
  4. Instructor shows students how to test pages to load without images, strip stylesheets, view document outlines, etc. for accessibility. Introduction to Firefox Web Developer Toolbar and Chrome Web Developer extensions.
  5. Web Image Preparation Lecture
  6. Demo using Google fonts
  7. Show students resources for images (moreguefile.com, unsplash.com, Google images for reuse, etc.) and discuss Creative Commons and Public Domain issues.
  8. Have a class discussion about the following:
  9. Students will share their selected poems with the instructor.
  10. In-class sketching of layout and functionality ideas.
  11. Demo link

HOMEWORK

  1. Complete all of the base A3 demo/tutorial and bring your work files to class.
  2. Spend time investigating ALL Google fonts and collect the ones you are considering using (you can write the names, styles, and weights down).
  3. Find image resources to use.
  4. If you can get to it, start attempting to put your stuff into code.
  5. Demo link

Week 07 (3/5):

IN-CLASS

  1. Students must bring their homework files to class or access it on the server to discuss progress with the instructor.
  2. Instructor will assist students with coding, debugging, and compositional issues. Assignment is due next class period.
  3. Here’s a link to watch the process of a demo project if you want to review project stages or techniques used in Photoshop and coding practices.

HOMEWORK


Week 08 (3/12):

IN-CLASS

  1. DUE: Assignment-03 due
  2. Critique of “A-3 Web Images and Positioning : Illustrated Poem”
    • Present your A3 work in class to peers for constructive feedback.
  3.  STUDENT SURVEY 
  4. Introduce A-4 Multi-Page Responsive Blocks Site assignment.
  5. Responsive Web Design: an Introduction lecture
  6. Discuss wireframe layouts and flowcharts. Show variety of tools you can use to create them. Show students the instructor-provided project content files to tap into.
    Discuss navigation strategies.

HOMEWORK


Week 09 (3/19):

IN-CLASS

Don’t come to school. Enjoy Spring Break.

HOMEWORK


Week 10 (3/26):

IN-CLASS

  • Break into peer discussion groups to talk about navigation and layout strategies for the assignment.
  • Work on hand-sketched wireframes to get a sense of how they work.
  • Instructor will check on student progress.
  • Discuss “space” as it relates to art and to web backgrounds, multiple box model layers, scrolling, and transparent png transitions.
  • Pixlr demo in class (if necessary).

HOMEWORK

  1. Collect Google font typographical samples for next class. Choose a pair to highlight in your final demo files to show the instructor in the next class.
  2. Collect additional images you will use in the site (moreguefile.com, unsplash.com, Google images for reuse, etc.).
  3. Create digital wireframe to illustrate your site logic, navigation, and layout. DUE NEXT CLASS.
  4. Read pp.265-339 of required text, Learning Web Design (Robbins)

Week 11 (4/2):

IN-CLASS

  • Wireframes DUE in class for discussion.
  • In-class work on A4 assignment, translating the demo into the your own unique website.
  • Start coding in class if you have not already started.

HOMEWORK

  • Complete the A4 assignment. We will have a critique in the next class.

  • Read “Floating and Positioning” – Chapter 15


Week 12 (4/9):

IN-CLASS

  1. DUE: Assignment-04 due
  2. Critique of A4 in class
  3. Introduce next assignment, A5-jQuery Parallax Resume.
    Show previous student work from A5.
  4. Discuss javascript.
    Discuss jQuery.
    Discuss the DOM.

HOMEWORK

  • Read the following chapters of the required text, Learning Web Design (Robbins):
    “Page Layout With CSS” – Chapter 16 (pp.373-398)
    Review Chapters 19-20 about javascript.
  • Start A5 Demo and get through at least Part 9 so that you have that much work ready in class to show progress to instructor and discuss design ideas for completion.

 


Week 13 (4/16):

IN-CLASS

  • Instructor and students will individually discuss progress and design ideas for A5’s completion. Due next class period.
  • Instructor will assist with debugging in class, as well.

HOMEWORK

  • COMPLETE A5. Critique next class.

 


Week 14 (4/23):

IN-CLASS

  1. A5 DUE : Critique.
  2. Start reviewing Assignment-06: Final Student Project
  3. Research what type of site you would like to create and write a proposal in class for your final project (which you will hand in before the end of class). The proposal should include the following:
    • Topic and goal of the site
    • Total number of pages with a “site map” list
    • Navigational link and file name plan
    • Audience
    • General plan for the aesthetic of the site

       

HOMEWORK

Start Assignment-06, your final project:

  1. Identify at least 2 different types of designs that interest you, and start dissecting how they were accomplished. Take notes (in digital format) on how you think the layouts were achieved, based on looking at the HTML, css, and the visual page itself.
  2. Come up with a minimum of 2 different design theme ideas and make a wire-frame layout (basic digital layouts) of your idea in either Photoshop or Illustrator. You do not have to have all of the artwork fleshed out by the end of this week, but you should at least have started collecting/creating images for the project.
  3. Do a typography investigation with a minimum of 5 different fonts you might want to use in your design, either in the header and/or in the heading levels. Feel free to search for free custom fonts online. While this part won’t be collected as part of your grade, it is crucial in “not settling” on the first fonts you come across in your standard set of fonts.
  4. Create a distinct color palette, identifying the scheme (monochromatic, complimentary, triad, etc.). You are encouraged to use color scheme generator sites listed in the Links section of BB.
  5. Start investigating and collecting textures and pattern that are inspiring or considerations for some portion of your project’s design. A hint: don’t forget that you can also research Photoshop and Illustrator custom brushes for this investigation! You can even make your own custom brushes from scans of natural textures you find or patterns you find in personal photos.

^ TOP MENU ^


Week 15 (4/30):

IN-CLASS

  • Instructor review of samples.
  • Work on mockups in class and get instructor assistance.
  • Create a flattened mock-up of the site in either Photoshop (PS) or Illustrator (AI). Be SURE to save different layout elements and objects in different layers so that you can easily make your background images and transparent pngs (etc.) later. Forgetting to keep things in separate, named layers will slow you down later.
  • Begin outputting your imagery for web via Photoshop or Illustrator.
  • If possible, start creating the layoutstart creating the layout in HTML and CSS.

HOMEWORK

  • Complete mockups to share in peer review next class.

^ TOP MENU ^


Week 16 (5/7): 

IN-CLASS

  • Share your mock-ups with break-out group members for a progress peer review of your work. This way you can get feedback on your design ideas before completing the project.
  • Work on creating the layout for the HTML content by styling your own unique css page.

HOMEWORK

Based on feedback and your own inspiration, continue the coding and styling, adding images to your deign layout. Bring progress work to next class.

  • You should firm up the basic layout template in HTML and CSS.
  • Next, you should make sure that your template page has all navigational elements in it correctly (including what you plan to name the files inside the <a href=”…”> tags).
  • Once you are sure your template is complete, start generating the additional pages from it with correct file names, adding basic content (headings, lorem ipsum, etc.) accordingly so that you can test your links in the ‘skeleton’ site.
  • Once you see that the link and page structure is intact for the site, you can start adding REAL content. DO NOT LEAVE LOREM IPSUM TEXT IN YOUR SITE!

^ TOP MENU ^


Week 17 (5/14):

IN-CLASS

  • Instructor feedback and assistance.
  • Progress, debugging, in-class instructor assistance this week. Project is DUE next class. Work towards completion.

HOMEWORK

  • Project is DUE next class. Work towards completion.

FINAL CRITIQUE (5/21) MON, 6pm – 7:50pm:

IN-CLASS

  • CRITIQUE: Projects due
  • DO NOT BE LATE. Attendance is mandatory. Notice the time difference.

Digital Art, Design, and Communication Education