Thursdays 9:10pm - 11:40pm (09/02 - 12/07) Office Hours Signup
The smartphone is not only a primary site for media consumption, it also hosts emerging forms of media production. Let's investigate what the mobile touchscreen offers to creatives. We will explore mobile creative tools through research, analysis, and by creating our own functional mobile web prototypes.
- Develop a shared vocabulary for analyzing user interfaces & creative tools.
- Apply design principles & HCI theory to real world examples.
- Produce fun, creative tools to share with your friends and make artwork with!
This course is a dialog between researching the existing world of mobile creative tools and building our own tools.
Students will document and discuss a wide range of tools, analyzing their designs and sharing through making.
The class will also compare mobile tools to their "mouse and keyboard" counterparts, identify common design patterns, and reflect critically on what the future of mobile creative tools will bring.
Half of class time will be devoted to applying this research towards the design and implementation of new tools.
We'll use web technologies to develop a variety of small shareable touchscreen interfaces, such as meme-makers, musical instruments, typography tools, and digital fashion designers.
By the end of the semester, we'll have built a body of research on the landscape of mobile creative tools, developed theories and principles about this space, and applied those principles towards a set of functional and shareable prototypes.
Examples of coding concepts we'll cover in class:
- Mobile-friendly CSS.
- How to use browser Developer Tools, and how to read error messages!
- Handling touch events and user gestures.
- Structuring code for user interfaces.
- Using Media APIs in the browser.
- Dealing with browser quirks, best practices for building shareable tools.
"UI Design is Fun", Nathalie Lawhead
Wonderful World of Tools Made By Small Teams, Nathalie Lawhead
Open source, experimental, and tiny tools roundup, Everest Pipkin
A *New* Program For Graphic Design, David Reinfurt
A Brief Rant On the Future of Interaction Design, Brett Victor
Stop Drawing Dead Fish, Brett Victor
A Pattern Language, Christopher Alexander, Sara Ishikawa, Murray Silverstein
List of great CSS resources: https://zenith-square-add.notion.site/CSS-Resources-That-Are-Mostly-Comics-or-Games-19ee00f98ac548f486fc292b303209ff
Week 1 (9/2)
On the first day of class, we'll discuss creative tools we've used and also talk about what our goals or questions for the semester are.
Then we'll a relaxed exercise related to phones, creative tools, and getting to know each other. (MSPaint Mixtape)
Brief tour of the browser.
Discussion of Human Computer Interaction, model of the loop
Anatomy of an interface (input, state, and output)
Why sliders are interesting subjects for our first investigation.
Share, playtest, & discuss slider toys
Explore the browser dev-tools
History of the web, plus how that history shapes the browser the mobile web.
Share fantasy homescreen designs & discuss feelings about our real homescreen.
What do Casual Creators teach us about creative tools?
- Designing for fun & designing for flow
- Optimizing the "Grok Loop"
- Sharing of control between tool & user
- Situating Creativity within a Community & Context
- Taking inspiration from physical Casual Creation Tools
- Share & Discuss Casual Creator Protoypes & connect them to Kate Compton's design principles.
- What makes a web tool shareable? (Metadata, visual design, context)
- Check in on our road-map & personal goals for the class!
Present our Mix & Match projects and try everyone's projects!
Mark Making unit:
- Why do people draw? What makes a pencil a good tool?
- Explore the complicated relationship between analog and digital mark making
- Touch events, drawing states, full screen canvases
Pen tool options, raster vs vector, color pickers
Collage, Drag and drop
Collage, Pinch to zoom & rotate.
Under Construction! Check Back Soon