Category Archives: Interactive Design

Interactive Design – week 14

Classroom

Monday

  1. Tutorial: Download files from Using HTML 5 Components
    1. Also download this video
  2. Tutorial: Download files from Using Code Templates
  3. Talk about where you are with the next assignment – interactive graphics for an online story:
    1. Do 2-3 small graphics or 1 big, complex, interactive one
    2. You can make infographics or something more artistic

Wednesday

  1. Look at interactive ads
  2. Tutorial: Expandable Banner Ad
  3. Work on interactive ads

Assignments

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

Interactive Design – week 13

Classroom

Monday

  1. Presentation: Dylan
  2. Tutorial: Making an Animated Pie Chart
  3. Talk about where you are with the next assignment – interactive graphics for an online story:
    1. Do 2-3 small graphics or 1 big, complex, interactive one
    2. You can make infographics or something more artistic

Wednesday

  1. Look at interactive ads
  2. Work on interactive ads

Assignments

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

Interactive Design – week 12

Classroom

Monday

  1. Presentation: Anthony, Aaron
  2. Build Fishgame (pass files around on blue flash drive)
  3. Talk about the next assignment – interactive graphics for an online story:
    1. Do 2-3 small graphics or 1 big, complex,interactive one
    2. You can make infographics or something more artistic
    3. Create mockups for Wednesday
    4. Here are some examples

Wednesday

  1. Look at mockups for interactive ads
  2. Download these files. Adobe Animate infographic tutorial
  3. Work on interactive ads

Assignments

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

Interactive Design – week 11

Classroom

Monday

  1. Presentation: Anthony
  2. View latest ads – make a link that will allow users to download “supplemental content” from your ad (i.e., a catalog, a video, etc.)
  3. Look at how to publish via Lynda.com tutorial
  4. Talk about the next assignment

Wednesday

  1. Look at collaborative ads
  2. Build Fishgame (pass files around on blue flash drive)
  3. Discuss how JavaScript will work with the ads and the pages
  4. Class will end early (around 4pm), so those of you who want to can attend this animation talk at the U of A on Wednesday night

Assignments

  • Beginning – do the next chapter in the book – turn in all work to your Google Drive folder
  • Finish off your collaborative ad

Interactive Design – week 9

Classroom

Monday

  1. Presentations: Liz, Daniel
  2. View latest ads – start thinking about the 500K version of your ad and what you will allow users to download that’s  even bigger
  3. Finish Lynda.com tutorial
  4. Work with your partner on your ads

Wednesday

  1. Look at collaborative ads
  2. Talk about 12 Things You Learned in Art School
  3. Discuss how JavaScript will work with the ads and the pages

Assignments

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

Interactive Design – week 8

Classroom

Monday

  1. Presentation: Aspen
  2. Check in with everyone about grades
  3. View latest mock up of ads – assign next step
  4. Continue work on Lynda.com tutorial
  5. Work with your partner on your ads

Wednesday

  1. Look at next step for collaborative ads
  2. Continue work on Lynda tutorial

Assignments

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

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

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 

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.

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

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