Designers Code Differently

Should designers code? Yes, but not like developers.

Meng To
Design+Code

--

The answer to the famous question “should designers code?” is a little deeper than just a nod. First, let’s get some context.

We’re rapidly shifting towards a mobile-dominated world. From Sketch to Pixate, to Framer, the designer’s toolbox has become increasingly simple and efficient for prototyping ideas. The cost of making an app has never been this low. And it’s never been this quick.

For developers, this means that they can finally get onboard with learning design. It’s a significantly smaller jump than learning Photoshop. They’re no longer distracted with tools for illustration, photo editing and 3D. Instead, Sketch has a familiar OS X user interface with a Toolbar, Navigator and Inspector. The Sketch UI is incredibly similar to the Storyboards in Xcode. If you hide everything else, you’ll find the same Navigator on the left, content in the center and Inspector in the right. Xcode even has the same functions for smart guides and distances. Familiarity is a good thing. It allows you to jump between tools with ease.

Developers are becoming better collaborators. They’re just waiting for designers to do the same.

Then there’s Swift. No other programming language in history has gathered this much interest from designers, except perhaps Ruby on Rails. I can say this with confidence because I’ve written about Swift for designers and it’s a topic just as popular as Sketch, which is completely mind-boggling. And most of my Swift workshops are completely sold out. Make no mistake, designers want to build apps. They want to create the next Uber, Airbnb or YO. They just need a little push.

As I try to solve this problem, I keep questioning myself, why don’t more designers learn code? Every designer that I’ve talked to is looking for the next prototyping tool. Well, the obvious reason is that there are not enough coding resources tailor-made for designers. An example of this problem is the Swift book. You’re not going to learn how to draw rectangles or change colors there. You’re not going to learn how to manipulate assets so that they’re perfectly adaptive to every device like the iPhone 6 Plus. You’re not even going to learn how to animate screens.

Before I discuss about the solutions, let me explain how designers work.

Designers focus on results

Designers are not unfamiliar to typing. They tweet, they write emails and often work with numbers. But unlike writing, coding typically don’t show results until you check your syntax, debug the error (if any) and build the app.

Something like Swift Playground is a great solution. It just needs to be even better, like PaintCode.

Designers focus on the UI

A designer spends close to 8 hours a day moving shapes until they make sense. They work tirelessly to provide the most perfect assets until the developer is happy. Unfortunately, some designers still just dump the PSD and call it a day. Those should be fired.

The perfect tool should look similiar to their design tool. Storyboards for example is a drag and drop interface that allows you to draw shapes, measure distances and preview for multiple devices. If designers learned Autolayout, they can literally own the UI aspect of an app and let engineers focus on what they do best, which is making the app functional and bug-free.

Designers focus on animations

Many developers I’ve talked to rarely touched animations. Asking a developer to animate your design is like asking a designer to write documentations for your code. They’re not traditionally trained for that. Tools like Pixate, Framer and Form are ideal since they focus on animations and provide results that can be replicated in code by the developer.

Final thought

There’s no doubt in my mind about one thing. It’s never been this easy to learn new skills. There are tons of new courses, tutorials and tools shared every week. Many may complain that they have too much to learn. But if the tools are simpler, wouldn’t it be just as easy as learning how to use the chopsticks?

--

--