Visual Communication II

HTML5 Structure

• HTML Css reading and ask any questions: Text and Lists
• Talk about the Iterative Process and see two examples: Pharmacy Access Project and World Translation Foundation
• Show and Tell some of our favorite best or worst website finds
• Discuss what a prototype is
• Begin phase on of paper prototyping

Homework

• Read: What do Prototypes Prototype
• Read: HTML&Css Chapter 4 on Links
• Create paper prototype of all four pages and decide what will be on each
• DOUBLE HAMBURGER MENU!

Wireframes and Links

• HTML Css reading and ask any questions: Links
• Quiz on What do Prototypes Prototype
• Create Digital Wireframes for each page of your site (4 pages).

Homework

• Read: HTML&Css Chapter 18 on Process and Design
• Finish Visual Website Comps for Thursday's Critique
• For Tuesday Please read this article on Moore's Law as well as Jaron Lanier's Who Ownes The Future Reading on Canvas.
• Also finish revising your chosen website homepage design and populate your website with content.

Boxes

• Write five questions about and discuss the readings
• Learn about and play with Boxes
• Image optimizing and Slicing lesson
• Google Fonts lesson

Homework

• Read: HTML&CSS Chapter 13 on Boxes and Chapter 5 on Images
• Read: The Grid and Composition Article on Canvas
• Start putting text and images into your website using code.

CSS and Tables

• Presentation about CSS and Tables
• Learn about and play with Tables
• What's wrong with this Fox News Data Viz?
• Keep putting text and images into your website using code.

Forms, Color, Text

• Presentation about CSS and Forms
• Learn about and play with Forms
• Free downloadable Metropolitan Museum Art Books!
• Keep putting text and images into your website using code. The Final review is Next Week!

Homework

• Read: HTML&CSS Chapter 11 + 12 on Color and Text for Thursday
• Keep putting text and images into your website using code.
• Sign up for a March 1st meeting time, this will replace class that day.

Color and Type

• Hamburger Menu example
• Color and Type Presentation

Logo Design and Biography Assigned

• Finish Presentations
• Lets all play with Google Creative Lab 5 Application
• We will review the Interactive Documentary Assignment
• Logo Creation Lecture and Symmetry Exercise

Homework

• You need to create at least nine small thumbnail drawings by hand of your logo design and two larger ones (can be made in Illustrator) from your favorites. Use this Thumbnail Template.

Images and Postitoning

• Present Logos
• Images and Positioning Lecture -Link to the slideshow
• Learn about and play with Positioning

Homework

• Please read: Tubes a Journey to the Center of the Internet (on Canvas)- There may be a quiz next class!
• Research and decide on your Bio/Documentary subject. We will discuss them next class.

Text Interaction and Research

• Quiz on Tubes: Journey To THe Center of The Internet
• Check out my visit to the Cooper Hewitt and their cool web gallery you can make when you visit
• Play with this -Hover State Demo

Homework

• Create hand drawn paper wireframes for the 10 pages of your website
• Have at least five sources of information/videos/images to show me next class.

HTML5 Layout

• Review the Wireframes you have made
• Learn more about the html5 Layout code
• Create your Adobe CC Mockups.This should include a color pallate and Google Font Choice.
• Begin coding the wepage, it is due in one week!
• All of These Ebooks on Technology are Free Today Only!

Homework

• Have your first page coded in html and css for next class.
• Write up the copy for your Interactive Doc in a Word or Google doc that will be on the website.

Interactive Doc Workdays

• Review Code That Students Request
• Learn how to Fade up Text over Images with overlay
Here is a Handy Transition Guide

Homework

• Keep Coding Your Site!

Begin Motion Project!

• Finish Presentations
• Creative Brief Presentation
• Brainstorm Social Change issues
• Break into groups based on Social Change Issue choices and start research

Homework

• Read Design Anthropology on Canvas and prepare for a quiz on Tuesday
• Research the Social Issue and finish Creative Brief for Tuesday. Turn it in on Canvas.

Iteration for Motion Project!

• Talk about the reading!
• Watch The Cativated by Her video and discuss
• Look at Senti8, Made in the Future, and Wearable Sensorial Diary
• Brainstorm design solutions to Social Change Issues
• Explore MindMaps as a brainstorming tool. Here is an article about using them
• Visit Grey Area Show on Thursday
• Create a Coggle of your social change issue solutions and post it to the Discussion board on Canvas

Homework

• Read Alone Together by Sherry Turkle
• Create paper prototypes of three design solutions from brainstorming sessions and Coggle. Post both to discussion board on Canvas for your Group by Thursday- 10 points

Making Animated Gifs

• Lets learn to make a video into a GIF
• Lets learn to Use layer masks on images. Here are the workfiles for the excercize.
• Lets learn to Create Custom Animated GIFs

Homework

• Create a color pallate and choose fonts for the design of the site
• Have all the images and text written for the website by Tuesday's class and submit to canvas.