Programming for Designers
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
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 training course 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
You will need the ability to download and install the p5 Editor (free from p5js.org/download)
About your instructor
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.
The timeframes are only estimates and may vary according to how the class is progressing
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.
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.