PART I
�Welcome to Doc Day 2019
Doc Day Overview
WiFi
use nyu
login with your netID and password
Part 1: Documentation
Photos, video, writing, drawings, audio recordings, code iterations…
Anything that helps
show your work and your process
Share your work and interests with others
Get an internship / job after graduation
Apply for opportunities (grants, prizes, residencies, festivals)
Your classes require it
Future reference for yourself
Why document?
You may think you know what
you’re going to do after IMA / ITP…
but you never know...and you might change your mind!
Keeping a record of what you are doing �will help you find the themes that will emerge in your work.
And most importantly, �it will become your knowledge repository!!!
Also...
“I don’t know how to ___ well.
I’ll do it some other time
When ___ is around
to help!”
“Documenting takes time… that I don’t have. The work will speak for itself!”
“This is not my best work.
I don’t even want
to remember this!”
‘I’m in the flow.
I’m not going to interrupt
just to go get a camera…’
Common Obstacles
Do it now, not later.
A little is better than nothing.
Quick and dirty, use your phone.
Helpful for physical installations that aren’t up anymore
e.g. Heart Sync
Because it might not work tomorrow!
Tips
You don’t know what will �end up being important!
A small project might turn into a bigger project later.
i.e. Capstone Project or Thesis!
Final Work
polished and portfolio-ready
Process
quick and dirty
Take pictures of your sketches
Process
Take screenshots of the program
A picture every so often �goes a LONG way
Pictures, video, gifs, live sketches, hand drawings, screenshots…
Anything that captures the process and result of your creation and helps you explain your ideas, AND HOW YOU OVERCOME YOUR MISTAKES.
Final Work
Get multiple angles
Show the interaction
Cover different parts of a project
Give proper credits
Press links
Examples
Joao Costa http://joaocosta.co/selected-works.html
Melanie Hoff, Decodelia http://melanie-hoff.com/DECODELIA/
Dalit Shalom http://dalitshalom.com/
Rosalie Yu https://rosalieyu.com
Nicholas Hubbard, Through Various Hazards http://varioushazards.com/
Firewall http://aaron-sherwood.com/works/firewall/
More Examples
Capturing Images/Videos
We have lots of equipment in the Equipment Room (ER): Cameras, tripods, lights, microphones…�
Check it out at: https://itp.nyu.edu/er/ �(log in with your netID and password)
Portable Cyclorama
Lazy Susan
GIFS
Simple way to make things look great
�Direct way to show the process��Good for spreading out on the Internet
Resources
Remember to give credit, especially if you use others’ code!
Where do I document?
1 Choose a blog platform � semi-permanent?�
2 Choose/buy a domain � e.g. www.iamawesome.net �
�3 Choose a host
To Set Up a Wordpress Site
To Set Up a Static Site
For Hugo, follow the Hugo tutorial, �then follow the tutorial on Hosting Hugo sites on Netlify
For Gatsby, follow the Gatsby tutorial �then Hosting Gatsby sites on Netlify
For a custom domain, �follow the Netlify guide on custom domains Automatic DNS Configuration is the easiest
�Use git and terminal
Customizable
Free
“sub” url of existing domain
Catblog.tumblr.com,�myrtlesblog.hosting.nyu.edu janesblog.wordpress.com
Paid��Custom Domain
www.catblog.com �www.iamawesome.net �www.funtimesblog.pizza
Requires purchasing a domain �from a registrar���
Choose/buy a domain e.g. www.iamawesome.net
The domain can change, �and you can choose it later!
The most important thing is to get a blog up and running. �
*Once your blog is up, �please fill out this form �with a link to your new blog!
PART II
�Accessibility @ITP
Accessibility
Cognitive
Sensory
Mobility
Speech
Situational
The design of products
for people with disabilities.
Inclusive Design
Permanent
Extending design benefits across a spectrum of needs
Temporary
Situational
A.D.A.
Americans with Disabilities Act (1990)
Screen Readers
Assistive technologies that make screen text readable.
Guidelines
Perceivable
Operable
Understandable
Robust
P.O.U.R.
Guidelines
Include alt text
Add headings
High color contrast
Use bold instead of color to give meaning
Audio descriptions and video captions
Clear wording for links
P.O.U.R.
Alt Text
√
X
Adding image descriptions
<img src=“braille.jpg” alt=" ">
<img src=“braille.jpg” alt="Close up
of a hand touching the raised surfaces
of a refreshable braille display">
Alt Text
Adding alt text to your blog pictures is required at ITP!
Adding image descriptions
Alt Text
Image description exercise
Headings
Adding tags
Headings
Adding tags
√√√
X
Contrast
√
The more the better
#d9d9d9 = 1.41:1
#757575 = 4.5:1
#000000 = 21:1
Color & Meaning
√
X
Shape > color
Classes begin 9/2
Classes begin 9/2
Descriptions & Captions
Make videos more watchable for everyone
Link Wording
√
X
It should make sense out of context
Click here
Products
Tactile Graphics
For non-visual design
Tactile Graphics
How-to
Tactile Graphics
Design tips
Tools
Accessible Wordpress templates
Tools
General diagnostics:
Contrast checker:
Voiceover:
NYU Accessibility:
webaim.org/resources/contrastchecker
System Preferences > Accessibility > Voiceover
Nothing beats user testing, but start here!
lauren.race@nyu.edu
We are here to help!