PaintCode: Draw Your UI Code

There’s nothing easy about app design. Despite Apple’s best efforts to make the tools for OSX and iOS development as intuitive as possible, anyone who has done it knows that there’s a lot more to creating a terrific user experience than simply using fancy graphics and assembling the code.

For one thing, the interaction between the visuals and the code is important to manage well so that the app doesn’t grow unnecessarily huge in size. PaintCode, a new app from PixelCut software, aims to ease this aspect of production by providing you with an environment for drawing interface elements that are instantly rendered into raw code — so you can have fine visuals without the bloat.

Though it serves a complicated niche, PaintCode could revolutionize the way developers handle in-app graphics in a way that has implications for all app enthusiasts, so we dive in to see how well it rises to the challenge.

Overview

Traditionally, custom interfaces tend to be designed using raw image elements, like in web design, but the problem is that having too many of these quickly clutters up an app’s internals and makes the final file size larger than it needs to be, especially at Retina resolutions. One solution to the problem is to generate certain interface elements via code. This process is hardly new, but because it requires hands-on coding it was often too daunting or tedious for more casual development teams to attempt.

This is where PaintCode comes in. Rather than having you up to your elbows in Objective-C, PaintCode is a vector drawing environment that will be immediately intuitive to more artistically inclined developers. Its aim is to let you draw interface elements using the tools you’re used to from apps like Adobe Illustrator, and then it does all the legwork for you in translating those graphics into code that you can simply transfer into your Xcode project for use.

Interface

Familiarity is key in PaintCode’s interface design, and while the layout is necessarily a bit different from software that is focused only on drawing, you’ll see a lot of recognizable tools available to you along the top bar, including various polygons, a rounded rectangle (instant button!), an ellipse tool, as well as a text tool and — most dynamic of all — a very handy bezier tool.

The interface is largely divided into 3 sections: the Tool bar up top, the Objects bin and selection Inspector in the left panel, the Preview bar along the bottom, and of course the Canvas — your work environment — right in the middle. Each element is fairly self-explanatory, with the Tool bar containing your main creation utensils, the Preview containing an image of the final graphic as well as a look at the code output. The left panel is more dynamic; though the Object bin remains the same (think of it like Photoshop’s layer bin), the Selection Inspector’s contents will change depending on what you have selected in the Canvas.

Every element is intelligently placed, and navigating through PaintCode during the creation process is quick and painless. I’d like to point out that the app’s own interface graphics are exquisite and unobtrusive, which serves as a perfect built-in demonstration of the software’s capabilities since, as you would expect, they were all designed with PaintCode!

Features & Functionality

Because of the inherent limitations of code-based graphics, it’s worth mentioning right off the bat that certain fancier drawing tools and effects are not available in PaintCode, so don’t be disappointed. It’s important to note that PaintCode isn’t trying to entirely replace pure graphics in app design, it’s simply attempting to help you minimize the number of interface elements that you need to create as images.

Tools of the Trade

Along the top you’ll find the aforementioned polygon drawing tools as well as some other interesting controls. For each drawing tool, you’ll be able to place the shape and manipulate it on the canvas in the exact same way as you would in other drawing apps, using the standard transform handles.

The one drawing tool worth mentioning individually is the Bezier tool. Although it is incredibly useful, many people are likely shuddering at the mention of this tool because in some other apps it can be quite challenging to use without some practise. In PaintCode, you needn’t worry because the Bezier tool works as simply as can be, not unlike the Pen tool in Photoshop, allowing you to draw your own custom shapes point by point and then tweak the angles and curves of sides freely using control points that you can place wherever you like.

For working with non-standard button and element shapes, nothing beats the Bezier tool, and since you can quickly convert any standard shape into a bezier shape with the click of a button (just right click the shape), you are free to be very creative with your design decisions. In fact, as of the 1.1 update, you can even convert text to a bezier shape and select multiple control points at once!

The rest of the tools along the top bar are geared toward helping you work with the shapes once you’ve created them. There are buttons for moving Objects forward and backward in the canvas drawing order, as well as for flipping them along either axis, and contracting/expanding them. You’ll also notice a Frame button, but we’ll get to that a bit later. It’s the final three, known as the Boolean Operators, that require some explaining.

These three, Union, Intersection, and Difference, allow you to combine multiple Objects into new ones to facilitate the creation of compound shapes. Each Boolean option governs how exactly PaintCode will render the resulting compound shape. This can save you some time, and is a feature well worth exploring once you’ve got a handle on the basics.

Also note that compound shapes will automatically inherit the visual style and attributes of the lowest layer among the constituent Objects. Those styles, along with every other aspect of your Objects, are created and modified within the powerful Selection Inspector.

Selection Inspector

The largest of the three components in the left panel, the Selection Inspector, is a dynamic area that contains all the controls you will need to design and refine your shapes once they’re created. Clicking on any Object in the Canvas will bring up the relevant controls in the Selection Inspector, allowing you to quickly access just the tools you need.

In most cases, the contents are self-explanatory: an Identity section for naming the element (be sure to give it a descriptive name so you don’t get confused later when looking at it in code form); a Fill section for designing the interior, adding gradients, etc.; and finally a Stroke section where you can define the outer lines and add shadows.

The controls for each are quite granular, and one of the smartest features is the ability to Extract Attributes. This allows you to pull a particular variable ‘out’ of the main code, so that when you’re integrating the graphic into Xcode you can easily fiddle with the parameter. This is very handy when you know that, for instance, the width of a button might have to fluctuate depending on other choices you make. Having the width attribute extracted makes it simple to zero in on the variable without having to find it, buried somewhere in the graphics code.

Objects Bin

Once you’ve started making more complicated graphical elements, you’ll find that you have to work with quite a few different shapes. To help keep you organized, PaintCode has the Object bin, which lives at the top of the left panel.

In here, you can quickly click to go to any element in your Canvas, and you can even select multiple shapes at once to, for instance, facilitate combining them via the Boolean Operator tools or pushing certain items backward or forwards to a different layer. It would be nice if one could create folders or otherwise have a bit more organizational control over Objects in the bin, but it may not significantly impact your experience since many users won’t be wrangling too many Objects for any single graphic.

With the 1.1 update, a very important addition has been made to the capabilities of Objects, and that is the ability to make them dynamic. Where previously their values were fixed, using the new Frame tool we mentioned above, you can create a frame around any Object and then define behaviors for how it should react to resizing, giving you ultimate flexibility in designing for responsive screen environments.

Library

The final element in the left panel is the Library, right at the bottom. This deceptively unobtrusive area is extremely powerful, offering a storage place for all your pre-defined or commonly used visual attributes.

Using the Library, you can define a visual style of Color options, Gradients, and Shadows once at the beginning of your project, and then simply select the style options from the Library to apply the same look to every other graphic you create. You can even copy them across different PaintCode documents if you like, though the real beauty of the system is that if you’ve applied a Library style to several different Objects, modifying the Library style will automatically apply the changes to all affected Objects within the document.

Preview Pane

When you’re ready to take your graphics into production, you can have a look at the results of your effort in the Preview Pane, where you’ll find the code itself as well as a small preview of the rendered image.

A few things to note here include the Retina button, which allows you to flip between standard and Retina resolutions with one click to make sure your design looks fine at both levels of visual fidelity. Remember that since PaintCode graphics are entirely code-generated, they’re also resolution-independent, so there’s no more need to render two separate image files and bloat up your app — one snippet of code and your graphics are looking sharp no matter what device they’re on.

Another important set of features is the row of options along the top of the code area. As of version 1.1, PaintCode allows you to grab the code in Objective-C for OSX, iOS, and even MonoTouch (the native C#/.NET development platform for Apple programming). Once you’ve done that, you also have the option of selecting an origin and picking your preferred memory management protocol.

Although it’s not prominently mentioned anywhere, hitting Command+C (copy) while selecting any shape in your Canvas will actually copy the code for just that element to your clipboard, in case you want to quickly pop a single part of your drawing into Xcode to double-check something before completing the design.

Looking Forward

Although it is already an incredibly powerful tool, especially after the 1.1 update and its various refinements and new features, PaintCode has room to grow.

One of the primary annoyances that cropped up in my testing was the inability to have PaintCode documents behave like projects or container files. The paradigm of one graphic per PaintCode document isn’t as efficient as it could be, given that the majority of use cases for the software are likely to be situations where an app’s entire interface is going to have graphics designed in PaintCode (wherever possible).

In this case, rather than having 15 different PaintCode documents, it seems like it would be much more organized to have the option to save as a ‘project’ document, wherein all 15 individual graphics could be contained and accessed via a tabbed interface (like multiple workbooks in an Excel document). With some expansion to the Object bin functionality, as mentioned briefly above, this would allow for a more efficient workflow — especially since Library elements could then remain consistent between an entire project’s graphics and be easy to modify.

Conclusion

PaintCode’s development has been swift and decisive, with the 1.1 update demonstrating a dedication to progress and enhancement that is encouraging for users. With any luck, future versions will continue to take into account feedback like ours and help refine PaintCode.

Regardless, this application is without a doubt the finest solution to the problem of easily working with interface graphics via code. It offers artists a way to design in a way that makes the programmers’ job easier, and it makes it easy for all manner of development teams to take advantage of the significant benefits offered by code graphics, even if they don’t end up using them exlusively.

PaintCode’s sleek, native-feeling user experience is good enough that I wouldn’t be surprised to see Apple scoop them up for a future version of Xcode, but in the meantime we can all eagerly await further developments from PixelCut and benefit from their time-saving app.

Have you used PaintCode or code-generated graphics for your app? Do you prefer another solution? We love to hear your thoughts, so tell us about it in the comments!