Web Design

Web Design – week 6

Classroom

  1. Advanced – work on database assignment
  2. Beginning – discuss WordPress – general tour
  3. Check out this article

Beginning 

  1. Look at first section of the book

Advanced

  1. Talk about you’ve done to your website and discuss the next steps
  2. Discuss the second 5 pages of the PHP Tutorial
  3. We will start working on the stuff below:
    1. Creating a db with MySQL DB Wizard
    2. Creating a table in their db with PHPMyAdmin
    3. Edit PHP code to interact with the new table
    4. Here is an image of the table structure
    5. I will give you the files you need to do the assignment according to the Instructions page

Assignments

Beginning

  1. Do chapter 3 in the book – upload work they have you do in the book if they have you complete a project (if they’re just demoing something, you don’t have to upload anything)
  2. Start figuring out how to apply the design concepts from your mock ups to your WordPress site

Advanced

  1. Make suggested changes to website
  2. Do PHP database assignment
 
After Effects

After Effects – week 6

Classroom

Tuesday

  1. Field trip – art gallery
  2. Look at examples of cinemagraphs
  3. Do a cinemagraph as a class, using the tutorial below (the video of water being poured into the cup is no longer available, so we will  download and use this video file instead)
  4. In-class exercise: now download a video from a site such as videezy.com and make your own cinemagraph
  5. Work on book chapters

Thursday

  1. No Class – Rodeo Vacation

Assignments

  1. Do Chapter 5 for this week and upload to Google Drive
Interactive Design

Interactive Design – week 6

Classroom

Monday

  1. Presentation: Ryan
  2. View final ads
  3. Work on Lynda.com tutorial
  4. Discuss new project: Collaborative Ads
    1. Team project: work with at least one other person in the class. You are a small design firm. I am your client. You get to pick what business I’m in, or what service I provide (car mechanic, retail shop, poster gallery, etc.).
    2. Design two HTML 5 ads that will go on a website. Link them thematically. One ad will be 300x250px, the other 728x90px
    3. We’ll discuss how to do “polite loading” in the future. For now, make sure you create an extra image of your ad that is 40k, or smaller, to use as a “pre-loader” or “initial” image
    4. Use the ad specs of the HTML 5 standard unit on this page:
      • Rectangle gif, jpg, png, swf
      • 300×250, 728×90
      • File Size:
        • Initial- 40k
        • Secondary- Polite Download: 500k User-initiated: 2MB
      • Audio/Video: Yes
      • 3rd Party 1×1: No
      • Controls:
        • Audio: Must be user-initiated on click and include a “Mute” button
        • Video: May be user-initiated or auto-play; if auto-play video cannot exceed 30 seconds
        • Video: Must include “Play” and “Stop” buttons
    5. Have concepts for both ads on Wednesday

Wednesday

  1. Look at concepts for collaborative ads
  2. Work on Lynda tutorial
  3. Download these files to do the tutorial

Assignments

  • Beginning – do the next chapter in the book – turn in all work to your Google Drive folder
  • Work on collaborative ad
Game Design

Game Design – week 6

Classroom

Tuesday

Thursday

  • No class – Rodeo Vacation

Assignments

  • Work on getting your game to the next stage with your team
  • Look at the next section in the textbook
Web Design

Web Design – week 5

Classroom

  1. Any website mock ups we haven’t seen yet?
  2. Discuss WordPress – general tour
  3. Show class how to FTP into site

Beginning 

  1. Discuss latest  HTML tutorial
  2. Look at first section of the book

Advanced

  1. Talk about you’ve done to your website and discuss the next steps
  2. Discuss the first 5 pages of the PHP Tutorial

Assignments

Beginning

  1. Do chapter 2 in the book
  2. Start figuring out how to apply the design concepts from your mock ups to your WordPress site

Advanced

  1. Make suggested changes to website
  2. Do next 5 pages of PHP Tutorial
 
Animation

Animation – week 5

Tuesday

  1. Cool animation
  2. Work on Cognitive Drawing, download pages 15, 16, and 17
  3. 12 Principles of Animation:  3. Staging
  4. Do example animation for principle #3 – “The Prisoner’s Dilemma”
  5. Finish coloring your background and character. If you’re done with that, let me know and I’ll show you how to start on storyboards

Thursday

  1. Adobe Audition tutorial.  For audio – download this file
  2. Look at Ben’s Sound website and Flashkit
  3. Introduction to Storyboard Pro – start your storyboards

Assignment

  1. Pick a color palette at one of the websites I showed you last week or design your own color palette and color your background(s) and character
  2. Find some music and sound effects to use in your animation from some of the copyright-free websites I pointed out
  3. Start working on your storyboards
After Effects

After Effects – week 5

Classroom

Tuesday

  1. Look at any remaining Project 1 files
  2. Discuss grades for 1st assignment
  3. Look at some of the shape layer exercises people did (any they care to share)
  4. In-class exercise – Frostiana
    1. Animate the lyrics of one of these Robert Frost poems

Thursday

  1. View in-class Robert Frost exercises
  2. Work on book chapters

Assignments

  1. Do Chapter 4 for this week and upload to Google Drive
Interactive Design

Interactive Design – week 5

Classroom

Monday

  1. Discuss options for interactivity:
    1. Buttons
    2. Audio
    3. Video
  2. Work on finishing up ads up for Wednesday
  3. Discuss what you found out about placing ads on websites

Wednesday

  1. Look at final drafts of ads
  2. Discuss specs for placing ads
  3. Use this time to finish up ads for Monday

Assignments

  • Do the next chapter in the book – turn in all work to your Google Drive folder
  • Finish up your targeted ads 
Game Design

Game Design – week 5

Classroom

Tuesday

Thursday

Assignments

  • Work on getting your game to the next stage with your team
  • Look at the next section in the textbook
Interactive Design

Interactive Design – week 4

Classroom

Monday

  1. Discuss targeted ads – look at where they are with partial animation added (animatics). Suggest the next changes:
    1. Full animation
    2. Options for interactivity – buttons, rollovers, audio, video, triggering movie clips, etc.
  2. Work on next set of changes to ads – create a more complete animation for Wednesday

Wednesday

  1. Look at updates to targeted ads – suggest changes
  2. Work on changes – working towards making full animated ad

Assignments

Beginning

  • Do the next chapter in the book – turn in all work to your Google Drive folder
  • Work on finishing up your targeted ads 
  • Find a couple of websites where you could place your ads. Share the information with the class, regarding how much the ads cost, how big they are, how frequently they will be displayed, their expected “conversion” rate, the “specs” for designing them, etc.

Advanced

  • Work on finishing up your targeted ads
  • Find a couple of websites where you could place your ads. Share the information with the class, regarding how much the ads cost, how big they are, how frequently they will be displayed, their expected “conversion” rate, the “specs” for designing them, etc.
After Effects

After Effects – week 4

Classroom

Tuesday

  1. Click here to view the presentation schedule
  2. Watch 2 short videos for Shape Layers Overview
  3. Do shape layers/masks in-class exercise: create a project using animation shapes and masks. Animate the shapes to synchronize to  an extremely short short snippet of music (a few seconds is fine – you can edit a sound clip using Adobe Audition) from a website such as Bensound.com or Flashkit.com

Thursday

  1. Project 1 due – give constructive criticism of work
  2. Spends some time making changes that were suggested to your project, then turn in the final version of it
  3. Work on book chapters

Assignments

  1. Buy the book – do Chapter 3 for this week and upload to Google Drive
Animation

Animation – Week 4

Tuesday

  1. Presentation dates have been posted here
  2. Work on Cognitive Drawing, download page 9
    pages 15 and 17
  3. Watch video about creating a fox for animation
  4. 12 Principles of Animation: 2. Anticipation
  5. Do example animation for principle #2 – animate a head that uses anticipation
  6. Work on your background, character, and plot

Thursday

  1. Cool characters to check out (Disney Princesses as armored warriors)
  2. Work on Cognitive Drawing pages 11, 12, 13
  3. Look at coloring Wildchord background, before, after, color
  4. Adobe Audition tutorial.  For audio – download this file
  5. Look at Ben’s Sound website and Flashkit
    Demonstrate different ways to do a walk cycle, to create a “attitude walk,” including: adding “accoutrements” and changing the number of frames each pose is held (watch changing weight video)

Assignment

  1. Pick a color palette at one of the websites I showed you last week or design your own color palette and color your background(s) and character
  2. Find some music and sound effects to use in your animation from some of the copyright-free websites I pointed out
Game Design

Game Design – week 4

Classroom

Tuesday

  • Talk about the final games created for the game jam: are you happy with the results? What would you change?
  • Continue to discuss Chapter 1: The Basics (Challenges)
  • Take a look at thegamecrafter.com website. Talk about limitations (board sizes, available tokens, cards, production deadline, etc. and budget – $50, plus tax and shipping)
  • Meet with team to discuss whether you will continue to work on the game you made, or create a new board game to be published

Thursday

Assignments

  • Work on getting your game to the next stage with your team
  • Look at the next section in the textbook
Web Design

Web Design – week 4

Classroom

  1. Discuss Homepage Mockups (Project 1a)
  2. Go over the concept of mobile-first (minimalist to profligate) design

Beginning 

  1. Demonstrate how DiffNow website works
  2. Discuss HTML5 Tutorial
  3. Look at first section of the book

Advanced

  1. Begin applying your Website Mockup design to your WP website

Assignments

Beginning

    1. Access your WordPress website via the link I provided (I will send it in e-mail)
    2. Join the wpbeginner website and take a brief look at their intro to WP videos
    3. Do the next five pages of this HTML tutorial. Test yourself as you go
    4. Make suggested changes to your Homepage Mockup (Project1a) and upload it to the Google Drive

Advanced

  • Access your WordPress website via the link I provided (I will send it in e-mail)
  • Create a homepage for your website with text and graphics. Put a title/logo on your homepage
  • Go through the first 5 pages of the PHP Tutorial and test yourself as you go

 

 
Web Design

Web Design – Week 3

Classroom

    1. Attendance, introductions and review syllabus
    2. Create a Google Drive folder called “DAR256 your name” or “DAR257 your name” and share with me (gjloumeau@pima.edu). Talk about presentations
    3. DAR256 students will need the book for this class. You are going to have to download the lesson files. You will need access to the Dreamweavaer software.
    4. Cintiqs and pen checkout process
    5. A brief history of web design
    6. History of web design infographic

Beginning

Resources for you to check out on your own time

Advanced

  • We will watch the following video in class when there is time: PHP video
  • Review the PHP tutorials up to and including PHP 5 Variables
  • We will watch the following video in class when there is time: MySQL databases

Assignments

Beginning

    1. Buy the book for class (Adobe Dreamweaver Classroom in a Book 2018). You can get it on Amazon or at the bookstore.
    2. Look at the first chapter in the book. You will need to be at a computer that has Dreamweaver on it when looking at the book. Download the lesson files for this book.
    3. Do the first chapter (5 pages) of this online tutorial and then do the five simple exercises at the end of the chapter:

  • Project 1a: Create a website mockup using this Photoshop template,  Show what the page will look like in three formats: a mobile phone, a tablet and on a desktop computer. I suggest you do the mobile phone layout first. We’ll look at these next week.

Advanced

  • Access your WordPress website via the link I provided (I will send it in e-mail)
  • Create a homepage for your website with text and graphics
  • Put a title/logo on your homepage

 

 
Game Design

Game Design – week 3

Classroom

Tuesday

Thursday

  • Discuss and make final changes to Game Jam. Take notes about what we discuss in class and make the appropriate changes
  • Submit your projects today by going to this link and clicking the “Join Jam” button and following the instructions (you will need to sign up for a free itch.io account)
  • Go through how to submit your files on itch.io

Assignments

  • Game Jam 
  • Look at next section in the textbook
Animation

Animation – week 3

Classroom

Tuesday

  1. Do Cognitive Drawing – first exercise – together. Download pages  5 and 7
  2. Discuss story summaries and character turnarounds we haven’t seen yet
  3.  On your own time, check out the Artstation website
  4. Look at this video about drawing backgrounds. Do a background together and pick a color palette. Look at Adobe Color Wheel and Colourlovers websites, and associated features in Adobe product
  5. Work on backgrounds, plot summary

Thursday

  1. Check out these cool character designs
  2. Discuss how 3D Printing has changed stop-motion animation
  3. Watch 12 Principles of Animation video: 1. Squash & Stretch
  4. Introduction to software: ToonBoom Harmony Advanced – do ball animation
  5. Look at how to do perspective (formally) and how gray scale and color are added to backgrounds
    1. How to do 1, 2, and 3-point perspective
    2. Animation background layout
    3. Using gray scale to paint backgrounds as a way to determine lighting
    4. Hand-painted animation backgrounds
  6. Work on backgrounds, plot summary

Assignments

  1. Finalize plot summary and background
After Effects

After Effects – week 3

Classroom

Tuesday

  1. Do sample Project 1 together. Download these:
    1. American Flag video
    2. Here’s the JFK quote
    3. And some stirring music (the President’s March)
  2. Start looking at Chapter 2
  3. Class time to work on Chapter 2 and Project 1

Thursday

  1. On your own time, look at this post explaining frame rates
  2. Do Audition tutorial. For visuals – download this file. For audio – download this file.
  3. Work on Project 1 – animated text, which is due next week

Assignments

  1. Buy the book – do Chapter 2 for this week and upload to Google Drive
  2. Work on Project 1 – due next Thursday
Interactive Design

Interactive Design – week 3

Classroom

Monday

  1. Discuss targeted ads:
    1. How targeted ads work
    2. Targeted Ads – definition
    3. Targeting Your Ads – Google
    4. Wired article about targeted ads

Wednesday

Assignments

Beginning

  • Buy the book, read the introductory pages and do the second chapter – turn in any work to your Google Drive folder
  • Work on targeted ad we discussed in class 

Advanced

  • Work on targeted ad we discussed in class
Game Design

Game Design – week 2

Classroom

Tuesday

  • Dynamics, Mechanics, Aesthetics definitions
  • Consider using something like this template Game Design Document as a guide for creating your game summaries
  • Talk about strengths and challenges of Game Jam  summaries
  • For the four teams we formed last time – elect a team captain, pick a team name and let me know this information
  • The Pima game club is called the Game Development Guild and their e-mail address is gamdevguild@gmail.com. They meet in this classroom. Contact them for meeting times
  • Download and read Chapter 1: The Basics in textbook (Challenges). We’ll discuss it next week
  • Time to work with team on Game Jam

Thursday

  • High school students visiting. We will add a couple to each game design team today
  • Design a simple card game which is a new take on an existing game. For example, “Go Fish” could become “Glow Fish” and the goal could be to form the strangest combinations of fish features (like a shark fin on a gold fish) possible (due to the fact that the fish live near a leaky nuclear power plant).
  • To make your game: draw with colored pencils on index cards
  • Work on Game Jam – due Jan. 31st

Assignments

  • Game Jam – work on it with your team
  • Read chapter 1 in textbook
  • Write down the day your presentation is due
Animation

Animation – Week 2

Classroom

Tuesday

  1. Look at turnaround characters assigned in previous class
  2. Look at famous character silhouettes 
  3. Take a look at these tips on character design
  4. Discuss character drawing issues
  5. Do a character drawing exercise (create four views of a new character from scratch, using guide lines)

Assignment

  1. Work on updates to your character turnaround. The final character is due Thursday. Upload it to your Google Drive folder

Thursday

  1. Discuss the software we’ll be using (Harmony Advanced & Storyboard Pro), plus online resources (http://www.toonboom.com)
  2. Here’s where you can get the Harmony animation program for $9/month
  3. Critique final character turnarounds (for those who have made significant changes).
  4. Discuss plot-writing strategies for animated scene and how to use the 12 principles of animation to build your story
  5. Talk about backgrounds and look at this article
  6. Do background drawing exercise
  7. Watch this animation while you work

Assignments

  1. Upload final character turnaround file to Google Drive
  2. Write a short summary of the plot of your animated scene (a couple paragraphs) and turn it in on Tuesday
  3. Start sketching out a background for your scene
After Effects

After Effects – Week 2

Classroom

Tuesday

  1. Load book exercise files on all computers from USB drive
  2. Discuss the After Effects interface
  3. Go over how to animate text, import audio/video, how to render files
    1. audio
    2. download video from here
    3. image
  4. If there’s time, start looking at Chapter 1

Thursday

  1. Discuss Chapter 1 in textbook
  2. Demonstrate  how to use shapes/masks, how to render projects
  3. Discuss and assign due date (Feb. 7th) for Project 1

Assignments

  1. Buy the book – do Chapter 1 for this week, and Chapter 2 for next week
  2. Work on Project 1
Interactive Design

Interactive Design – weeks 1 and 2

Classroom

  1. Attendance, introductions and review syllabus. Sign and turn in  press release form
  2. Create a Google Drive folder called “DAR252 your name” and share with me (gjloumeau@pima.edu). Talk about presentations
  3. Check out Bannersnack
  4. HTML 5 banner ad examples
  5. Article about creating banner ads in 2018
  6. 50 tips for designing the perfect web banner ad

Discussion (we’ll talk about some of this in two weeks)

  1. Presentation
  2. Discuss Multimedia Formats & Funding Options (we may discuss these topics next week, if we run out of time today)
    A. Web apps
    B. Mobile platforms, Mobile apps, Proprietary
    C. Crowdfunding: Kickstarter, IndieGoGo, Patreon (Jason Brubaker), TLC

Assignments

Beginning

  • Buy the book, read the introductory pages and do the first chapter – turn in any work to your Google Drive folder
  • Work on targeted ad we discussed in class 

Advanced

  • Work on targeted ad we discussed in class

 

    1.  

Lecture

Lecture video

Instructor: Greg Loumeau