IDES 212 – Technology Intensive II – Web Design

This 10 week course is an introduction to designing for the web. We will be using Adobe’s new web design programs, Muse and Edge Animate. In the first half of the course we will use Adobe Muse to better understand the properties that make up a web page and ultimately a website. In the second half of the course we will introduce interactivity and animation with Adobe Edge Animate. The course comprises two projects and four exercises.

Week 1 January 13

Introduction to Adobe Muse.
Demo: Creating a simple webpage.
• Examine the structure of a typical webpage.
• Beyond Headers and Footers: Names – Styles – Behaviours
• One Page Love
• Explore principles of UI/UX.
• Content is King!
Exercise 1 – Create a mock-up of a single webpage using Adobe Muse. Due week 2.
Project 1 – Redesign a page from this website. Due week 5.

Week 2 January 20

Introduction to Navigation and Interactivity.
Demo: Creating Menu Navigation
• Introduction to States.
• Introduction to Widgets.
• Using the State Button.
Exercise 1 due.
Exercise 2. Create a Dynamic Menu. Due week 3

Week 3 January 27

Understanding Positioning.
Lecture/Demo: The Well Structured Website.
• Introduction to positioning web elements.
• Responsive Web Design.
• Understanding Scroll Effects.
Exercise 2 due.

Week 4 Feb 3

Extending Muse’s Functionality.
Demo: Adding third party Muse library widgets and embedded HTML content.
• Finding, installing and using library widgets.
• Embedding HTML content.
• Importing and using dynamic media (video, audio, animation etc.)
Review Project 1.

Week 5 Feb 10

Dynamic Interactivity in Muse.
Lecture: Examine sites utilizing dynamic interactivity.
• Creating dynamic navigation.
Project 1 due. Critique.

Week 6 February 24

Introduction to Edge Animate.
Demo: Introduction to animation.
• What goes into an Edge Animate project?
• Exploring the interface?
• What is a Timeline? A keyframe?
• The “Principles of Animation”.
Exercise 3 – Create a bouncing ball animation. Due week 7.
Project 2 – Create a dynamic and interactive “web banner” in Edge Animate.
Due Week 10.

Week 7 March 3

Understanding Symbols and Timelines.
Lecture/Demo: Controlling a timeline with interactive buttons.
• Examine Labels and Triggers.
• Adding “Actions” to our buttons.
• What is a Timeline? A Keyframe?
Exercise 3 due.
Exercise 4 – Adding interactivity to an animation. Due week 8.

Week 8 March 10

Dynamic Animation.
Lecture/Demo: Creating dynamic animation.
• Utilizing nested timelines.
• Introduction to sprites.
Exercise 2 due.
Review Project 2.

Week 9 March 17

Dynamic Media and Advanced Interactivity.
Lecture/Demo: Integrating video and audio into our interactive projects.
Lecture/Demo: A little javascript.
• Understanding video and audio file types.
• Create drag and drop functionality.
Review Project 2.

Week 10 March 24

The Future of the Dynamic Web.
Lecture: Examine dynamic websites and possible future applications.
Project 2 Due. Critique

Evaluation Profile:
Exercises 1 – 4:      20% (5% each)
Project 1:                35%
Project 2:                35%
Participation:        10%