Process

...via Atomic Design.

Design without direction

is decoration.

Staging vs. production

P1: bio

Style Tile

• As CodePen post
• Example: Swoop

Atoms

• As CodePen pens
• Bio in markdown format
• Style Name with font
• LetteringJS plugin test
• Favicon Generator

molecules

• As CodePen pens
• Name with Image
• Other examples
  • Group of Social Media Links

organism

• As CodePen pens
• Other Example
  • Header
  • Content Body
  • Footer

template

• As a CodePen pen
• 2-1-4 Columns Template
• 1-2-3 Columns Template
• 3-3-3 Columns Square template

application

• Application as a CodePen project
• With Favicons
• A Website
  • Deployed (staged) on CodePen
• ⭐ Template for P1: Bio
  • Fork project, then add Template of your choice
  • Style it. Have fun.

P2: Movie Trailer

Overview

Hall of fame

Student Hall of Fame. 

* Valerie (Fall 2017
* Gordon (Fall 2017 
* Aaron Griffiths (Fall 2017)

...more coming soon

CDN

• Content Delivery Network (CDN) to host and delivery stuff from another server
• Reduces strain on local server
• Examples
  • Google Fonts using CDN concepts
  • YouTube embeds
  • Absolute link paths e.g. http:
  • Embedding remote content into a local page
  • Using server in Liberty Lake, WA vs. San Francisco, CA

poor mans cdn

TL;DR : Hosting video is difficult. 

 

1. See directory listing of files. Go to:

https://github.com/vcd/cdn/tree/master/378 

 

2. Select movie, click "Copy Path". 

 

3. Open new browser tab, type:

vcd.github.io/PASTE PATH HERE

 

4. Repeat for all video formats

Style Tile

Atoms

• As CodePen post
• Example: Swoop

 

> Moodboard is required for Style Tile

As CodePen pens, smallest unit of project. 

• Trailer with `video` element
  • with `plays-inline`

Molecules

Organisms

• Movie Name with Lettering JS
• Overlay Text on Video
• Trailer with Media Element plugin -- unstyled

• Styled Media Element Player
• Actors Names or Bios
• Links to 
  • IMDB
  • Fandango
  • Social Media
  • etc.

template

Don't forget the Favicons

 

• P2: Movie Trailer Template

Application

Website hosted on CodePen

P3: Google doodle

overview

Why dedicate so many people and so much time to a single doodle?

Past google Doodles

• Do Your Research. 
• Repeat, Do Your Research.
• How do doodles differ in: 
  • Topic
  • Dimensions
  • Animation
  • Art Direction
  • Media
• REF: Google Doodles by Google

DESN 355: MOTION DESIGN

This course explores the principles of design through motion, with an emphasis on effective use of typography, graphical elements, sound and motion within time and space. Students learn how to import projects, create narrative structures, storyboard, output for various devices and problem solve moving image concerns.

CSS vs Jquery vs JS 

for Animations

CSS

• More performant, but less feature rich
• Separate state (click, hover, etc.) from animation
• Good for common uses cases across platforms
  • show/hide
  • slide toggle
  • 2D effects
  • Basic 3D effects 
• CSS also has animation libraries
  • Animate.css

javascript

• jQuery effects. Do NOT USE. 
  • not performant
  • does not use modern Web Animations API
  • difficult to modify
• Other JavaScript Animation Libraries are good if use modern Web Animations API
  • Greensock
  • Velocity
  • ...and more.

Concept: States & Events

States

• LoVe (F) HAte
  • :link
  • :visited
  • :focus
  • :hover
  • :active
• :target
• REF: Meet the Psuedo Classes

jQuery events

`click()` and `toggleClass()` methods
Use jQuery’s `click` event to-toggle-classes-on-off. 

* Pen: [`click` event]
* Pen: [`toggleClass` method]
* Pen: [Toggle Class on Click]

Concept: TRansitions

Pens

Transitions on Pseudo Classes
CSS `transition` properties can be applied to any property with a numerical value. 

 

* Do it manually first.
* What is the first frame? What is the last frame?
* Pen: CSS Transitions on Pseudo Classes

CSS Animation with val Head

• REF: Overview of CSS Transitions and Transforms

Concept: 2d Transforms

Concept: keyframe animation

atomic design process

Style Tile

• As CodePen post
• Example: Swoop

Atoms

• As CodePen pens
• Favicon Generator
  • Do not forget Favicons
• Content as
  • text
  • images
  • SVG as files
  • SVG as code

template

• Google Doodle Template

 

Make it your own. Templates are a starting point for efficiency. How have you evolved the template? Again, make it your own.

application

Website hosted on CodePen.

Future forward

...after Web Design 2 (and Web 3).

Modern animation libraries

• Greensock
• Velocity.js
• Snap
• SVG.js
• Map SVG
• ...and many many others. 
• Search for:  "SVG Javascript"

PurE CSS. No Javascript.

CSS animation features are still being developed. Ideal situation is all animations in CSS and states/events in JavaScript.

 

For example: 

Rachel Nabor's Dev Challenger for Mozilla.

 

• CSS Animation Rocks