DH 07: CATHEDRALS AND ARMS 10/18/19

Review: Major Project No. 1. Present – 11/01
Pride before the fall
Change
Byzantine architecture and Art
Roman sculpting
The Devil is in the Detail
Light inside
Temple vs Church
Basilica to the Cross
Hold up, now!
Domes to domes
Back to the cross
Massive and delicate
Gothic Arches
Let there be light
Many Examples to see
The best Jewel in the Crown.
My personal favorite – Mt. Saint Michel

Romans and Post Roman
Like the Movies
VIDEO: Crecy
The only Winner?
Can and opener
Move around
VIDEO: Armor

ASSIGNMENT:
READ: Medieval Architecture
VIDEO: Armor
Review: Major Project No. 1 – Due 11/01

WDS 08: More P5 and Prototyping 10/16/19


REVIEW:
Current Unit:
4.a. PROTOTYPE: User testing – Iteration. Content Planning (Inventory)
4.b. Mood board, Mock-ups (Start gathering material)

4.a PROTOTYPE
– finish site maps (follows your usability map)
– finish wireframes (follows your usability map)
– Finish Low- Res Prototype
>> Present (Class Critique)

4.b. Moodboard, Mock-ups (Status)
Finish Moodboard and the first version of the high-resolution mock-up.
Present Next Week.

Planning: work on your content inventory. User testing.

LAB 08: Prototyping
1. Make sure your Lo-Res Prototypes are complete. Test them out and send the link to me for feedback.
2. the following are due NEXT WEEK:
a. Fully functioning and DETAILED lo-res prototype WITH feedback worked in (implement suggested changes) – Test it with others.
b. Final mood board and the first draft of your mock-up

NEXT WEEK: P5.js
What is it?
Practice: If needed, review 1 – 4.
Uncover the variables
Code Along

CAS 07: Midterm + Streaming 10/14/19


REVIEW:
DUE TODAY:
01 Research. What are you planning, who is it for? How will users interact with it?
02 Empathize. Usability. Sketches – User Scenario. UIX map.
03 Create. Wireframes Sketches and Digital versions. Moodboard
04 Test. Lo-Res Prototype (User test!)
05 Final Moodboard
06 Build: Create Final Prototype (Hi-Res)
– Final should be “clickable/functional”
– MUST INCLUDE ANIMATION
– Cross-Platform: Will work on PC, or MAC OS.

The process must be followed in order. Provide links to all the material on your blog and send me the URL. Due by tonight at 11:59 PM. No late work accepted.

STREAMING MEDIA:
Combining Audio, Video content on a global publishing platform with real-time capabilities. That is a T.V studio in a laptop, but with interactivity, that traditional T.V. does not have. Think of the possibilities!

We approach streaming media in two primary flavors – Serialized content and live streaming.

Serialized Content:
What is it?
Some Examples
Web Series
Who needs Youtube?
Some Student Examples

Live Streaming:
1 Periscope
2 Facebook Watch
3 YouTube Live
4 Instagram Live
5 Twitch
Why Live?
This used to be common with sites such as justin.tv, ustream.com, etc.
But, technology evolves and streaming is quickly becoming a core service.
Facebook Live
Youtube: Same deal.
A “how to”…
Privacy Issues? Use filters on FB
Ideas and examples

LAB 07: Midterm
Complete your midterm. Due tonight. Make sure your Prototypes and “stand-alone” and clickable.

DH 06: ANCIENT TO MIDDLE AGES 10/11/19

Greek Gears
Roma
First the Greeks, then Romans to roads and Incas as well.
When in Rome, remember to do as Romans do…. WATCH
The center of the WORLD
Time
The Dome and more.
Arch Vs Post
Architecture book
VIDEO: Roman Armor/Tactics
Roman Protection
VIDEO: Roman Army Structure
And the NAVY?
VIDEO: Roman Siege Weapons

All good things, come to an end….
Church & Knights
Older Churches & older knights?
In between?. StartArrival.
A new Style?
Mudejar Example
The reverse also happens

Assignment:
READ: The Roman Forum
READ: Famous Historic Buildings
READ: Greek vs Roman

WDS 07: Prototyping + P5.js 10/09/19


REVIEW:
1. Hosting: make sure you are up and running with hosting. If you are still having trouble, now is the time to figure it out.
2. Is FTP still working?

Present:
a. Create: Structure (site map), Wireframes, Prototype,
b. Start thinking mood board, and Mock-ups

Please remember to create an organized “splash page”, linking to your work.

Next Steps:
4.a. Mood board, Mock-ups
4.b. PROTOTYPE: User testing – Iteration. Content Planning (Inventory)

Dont like XD?
More
Options
available

RESOURCES:
Screen Sizes
Browsers
Mobile sizes are helpful.

BREAK —-|
Review JavaScript
Do you have this book?

Intro to P5
What is it? P5 is a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.
Get Started
View examples.
What can you do?
Try this!

Time to learn?
Time to play?

LAB 07: PROTOTYPING
– finish site maps (follows your usability map)
– finish wireframes (follows your usability map)
– Finish Low- Res Prototype

CAS 06: Animation + Midterm 10/07/19


REVIEW:
Make sure you have material to show (see below). The feedback you get here should inform you High-Resolution Prototype due next week –

Present:
01 Research. What are you planning, who is it for? How will users interact with it?
02 Empathize. Usability. Sketches – User Scenario. UIX map.
03 Create. Wireframes Sketches and Digital versions. Moodboard
04 Test. Lo-Fi Prototype

ANIMATION:
1. GIF (Example:)
2. Ai to Ae
3. Animate in XD
4. Text Animation in Ae?

Screen capture?
PC?

LAB 06: Final Prototype – Midterm
DUE NEXT WEEK:
01 Research. What are you planning, who is it for? How will users interact with it?
02 Empathize. Usability. Sketches – User Scenario. UIX map.
03 Create. Wireframes Sketches and Digital versions. Moodboard
04 Test. Lo-Fi Prototype (User test!)
05 Final Moodboard
06 Build: Create Final Prototype
– Final should be “clickable/functional”
– MUST INCLUDE ANIMATION
– Cross-Platform: Will work on PC, or MAC OS.
07. Test

WDS 06: Process + Prototyping 10/02/19

REVIEW:
1. Hosting: make sure you are up and running with hosting and a domain name. If you are still having trouble, now is the time to figure it out.
2. Is FTP working?
3. Put up your site (What I did last summer). Did it work?

Process:
1. Gathering Information: Purpose, Main Goals, and Target Audience (Requirements)
2. Research: UXD – User Experience Design. User Scenarios, Usability maps, Competitive Analysis, User Testing
3. Create: Structure, Wireframes, Prototype, moodboard, Mock-ups
4. User testing – Iteration. Content Planning
5. Develop: Code. Add functionality. Testing. Launch

Due Today:
1. Requirements
2. Research: UXD – User Experience Design. User Scenarios, Usability maps, Competitive Analysis, User Testing

LAB 06: Process + Prototyping
Review above. WORK ON USABILITY!!
Get ready to present drafts next week. Post to your site. Critique – collect feedback.

Process:
1. Gathering Information: Purpose, Main Goals, and Target Audience (Requirements)
2. Research: UXD – User Experience Design. User Scenarios, Usability maps, Competitive Analysis, User Testing
3. Create: Structure, Wireframes, Prototype, moodboard, Mock-ups
4. User testing – Iteration. Content Planning
5. Develop: Code. Add functionality. Testing. Launch

Next steps:
3. Create: Structure (site map), Wireframes, Prototype,
3a. Start thinking moodboard, and Mock-ups

CAS 05: Lo-Res Prototype 09/30/19


REVIEW:
– Work towards finalizing Usability (Are your scenarios complete. Think about the entire process such as finding and using your proposed UI – on Steam, downloaded, on Apple Store., etc)
– Work towards finalizing Wireframes. Complete all the interfaces needed
– Moodboard – Show next week
– Start Prototyping (Select software)

Present

PROTOTYPE:
Refer to this Process:
01 (Research) thought out. What are you planning, who is it for? How will users interact with it? You had an idea last week. Create a “Requirements Document”.
02 Empathize. Usability. User Scenario. UIX map. Talk about options.
03 Create. Wireframes and Moodboards
04 Test. Lo-Fi Prototype (DETAILS)
05 Develop. High Resolution, Functional prototype
Add animation?

Work on the first version of a UI Prototype. As detailed as needed.

LAB 05: Usability + Prototyping
Next Class, be ready to present:
01 Research. What are you planning, who is it for? How will users interact with it?
02 Empathize. Usability. Sketches – User Scenario. UIX map.
03 Create. Wireframes Sketches and Digital version. Moodboard
04 Test. Lo-Fi Prototype

DH 05: Ancient Machines 09/27/19

Stamps + disc
Smaller?
The Bronze Age is not just metal
Ancient Calculator. Still used?
Numbers?
The Greeks
Art: Painted Pottery, Architecturestill here, Sculpture in time, Painting, and mosiac.
And all they created
Steam power
The Maker
Environment influences design
And now, VIDEO: Ancient Computer
Complex Mechanism in action

ASSIGNMENT:
READ: Amber
READ: Abacus still used in Japan
READ: Daedalus
READ: Antikythera-Mechanism
READ: Oldest Computer
READ/WATCH: Model

1 2 3 41