Programming for Designers
Published by O'Reilly Media, Inc.
Learn to express your ideas in code with p5 and JavaScript
Designers who can code are in demand. Learn the basics of programming and add a valuable tool to your skill set.
Many experienced UX and UI designers feel limited by traditional tools, such as Photoshop, Illustrator, or Sketch. Learning even a little bit of programming can eliminate a lot of the rote work involved in creating mock-ups and interface concepts, and those skills can help you communicate better with developers on your team. This course will help designers work more efficiently and effectively by learning to express their ideas in code, opening up a whole new realm of creative possibilities.
What you’ll learn and how you can apply it
Over two days, in three-hour interactive sessions blending lectures, hands-on exercises, and Q&A—plus a little bit of homework—you’ll get an introduction to the fundamentals of programming using p5.js. This free and open source JavaScript-based language was created for artists and designers; p5 eschews jargon in favor of language you already know—like fill, stroke, hue, saturation, and brightness—making it friendly and accessible for designers learning about programming for the first time. Since p5 is all JavaScript, you’ll be learning the language of the web. In addition, the core programming concepts you’ll learn are applicable to nearly all other languages, which will help you communicate with other coders and developers, or branch out to other programming tools on your own.
By the end of this hands-on course, you’ll:
- Learn how to write code to create visual systems; you’ll be able to draw lines and shapes, change fill and stroke colors, and define logical rules for simple interactivity
- Gain basic knowledge of the possibilities and challenges of coding, making you a better member of collaborative, multidisciplinary teams
- Add a skill that brings you closer to being a full-stack designer. As O’Reilly’s 2016 Design Salary Survey has shown, knowing even a little bit of code can have a big positive impact on your salary
This live event is for you because...
- You’re a skilled designer, well-versed in design principles and practice, who wants to understand the basics of coding so you can automate repetitive tasks, explore more complex visual forms, and prototype interactive works
- You’re working in collaborative, multidisciplinary teams and want to better understand the work and language of coders and developers
Prerequisites
You will need the ability to download and install the p5 Editor (free from p5js.org/download)
Recommended Preparation:
Schedule
The time frames are only estimates and may vary according to how the class is progressing.
Day One
9AM–10AM Putting p5 in context. Where did p5 come from? Who is it for? What can we do with it? We’ll open the p5 Editor and make our first drawings with code. You’ll make your first visual compositions and share them with others on the Slack channel.
10AM–11AM Drawing so-called primitive shapes (rectangles, ellipses, triangles, points). Styling fills and strokes. Using color and alpha transparency, as well as different color modes (such as RGB and HSB). You’ll create another visual composition, which we’ll make interactive later.
11AM–12PM Conceptual principles of motion and interactivity. Using mouse input for interactivity. Variables and simple math! You’ll connect values in unexpected ways to make your composition interactive. Optional homework exercise in computational thinking will be assigned for overnight. The conversation continues outside of class on Slack.
Day Two
9AM–10AM Introducing computational thinking, or algorithmic thinking, in the context of design systems. Introducing randomness and noise—mathematical tools for variety in your compositions. Introducing logical rules for interactivity. You’ll create a simple piece that responds to input from the mouse and share your creation with others on Slack.
10AM–11AM Working with logical variables and randomness (two things that don’t sound like they should go together). Introducing principles of iteration—repeating steps over and over. You’ll create a grid of elements by telling the computer to repeat the same step many times and you’ll share the result on Slack.
11AM–12PM A live coding demonstration, pulling together all of the concepts we’ve learned so far, applying a design process of computational thinking to solve a specific problem. The final code will be shared with all participants. Brief mentions of where to learn more and how to get help once the course ends. (The Slack channel will remain open for a week so participants can continue the conversation.)
There will be two 10-minute breaks each day around 10am and 11am, during which time the instructor will continue to answer questions.
Your Instructor
Scott Murray
Scott Murray is a designer, creative coder, and artist who writes software to create data visualizations and other interactive phenomena. His work incorporates elements of interaction design, systems design, and generative art. Scott is the author of Interactive Data Visualization for the Web and the forthcoming book Creative Coding and Data Visualization with p5.js: Drawing on the Web with JavaScript (working title; to be published by O’Reilly in 2017). He has presented two video courses on D3.
Scott is affiliated with the Visualization and Graphics Lab at the University of San Francisco, where he has taught data visualization and interaction design. He is a Senior Developer for Processing and teaches workshops on creative coding. Scott earned an A.B. from Vassar College and an M.F.A. from the Dynamic Media Institute at the Massachusetts College of Art and Design. He recently joined O’Reilly Media’s Learning Group. Scott’s work can be seen at alignedleft.com.