If you self-identify as an illustrator or graphic, visual, UI, UX, motion, mobile, web, or game designer then this is for you. Other non-coders will benefit too, but self-identifying designers are the focus. This book–the one I wish existed when I began coding–is also for an earlier time-slice of myself. He will not reap the benefits of its existence, but you will.
Many claim that designers need to learn to code. I disagree. Yes, learning to read and author code is a powerful ability, but so too is visually manifesting ideas and information. I want only to empower you further.
In reading this book, you will:
This book is not for you if you want to jump straight into code though. We cover many ideas, topics, and concepts before diving into actual programming code. This intentionality helps frame why certain programming concepts exist as they do. It also encourages a beneficial mindset with accompanying techniques for reading, navigating, and understanding code.
The goals of this book are:
The former enables the latter. Neither goal is efficiently achievable with the traditional approach.
The plan of attack is simple. In chapter one, Breaking Barriers, we will demystify a series of concepts that intimidate most designers and non-coders. From the seemingly magical ones and zeros, to the code you will soon write, we will see simple, repetitive, and reusable concepts at play.
In chapter two, Structure, Style, and Behavior, we will cover the three codeable features that enable computers to render our dynamic and interactive creations. We will do so from a 2D context with the web platform and a 3D context with the Unity® platform. These perspectives will solidify the distinct role that structure, style, and behavior play regardless of dimensionality.
Chapter three, Programming and Visual Design, will cover the Elements, Principles, and Constructs of Visual Design relative to programming’s counterparts. This work will help shape a mental model tuned specifically for designers.
In chapter four, Interactive Code, we will introduce many concepts that are invaluable when reading and authoring code. We'll explore many topics including frame rate, the event loop, interfaces, and code anatomy. In exploring them you will further improve and shape your mental model.
Finally in chapter six, Deconstructing Designs, we will put everything we have learned to practice. We will do so by analyzing and deconstructing Twitter's Tweet Box user interface. We will then reconstruct a majority of it to learn how to design and implement a popular and non-trivial interactive application.
Let’s do this.