Web development remains one of the areas in which the Mac app ecosystem shines brightest. As the technologies underpinning the internet continue to evolve, we’re thrilled to see eager developers providing new tools to take advantage of those technologies and simplify formerly arduous tasks. Like producing graphics code, for instance.
Last year, I reviewed PaintCode, an app that facilitates the creation of Objective-C interface graphics using natural graphic design tools. PixelCut has expanded their reach with the brand new WebCode, an app that offers the same tools geared toward the creation of code-based graphics for the web.
After the jump, let’s dig in to see if the tools are as useful for web design as they were for app development.
Overview
So what are we talking about, exactly? Well, when a web developer is bringing to life her design, she must contend with the fact that some viewers will be accessing the final site on mobile devices, or limited bandwith connections. As a result, while it’s tempting to just slice up your Photoshop document and have big images wherever you need them, it’s not very practical to do so, especially with the competing challenges of designing for Retina displays (which need high-res graphics) and slower, capped mobile broadband (which need anything that’ll reduce loading time).
The alternative is to replicate as much of the graphical content as possible using code rather than actual image assets. The advantages are clear: significantly smaller filesize, faster loading times, resolution independence, and easy modification. On the flipside, creating graphics using code tends to be very tedious and antithetical to the creative flow — that’s where WebCode comes in.
By offering the same graphics tools that we’re used to in our design programs but having the output be code rather than a standard image file, WebCode offers the best of both worlds.
Interface
If there’s one thing PixelCut is consistently amazing at, it’s interface design. WebCode is both beautiful and functional: the ideal intersection at the heart of all good design.
A clean, blank canvas: ready for drawing!
Once you’ve loaded up a blank document, you’ll be presented with a well-organized collection of panels and areas, including the prominent canvas in the middle and the code preview panel at the bottom.
Similar to PaintCode before it, WebCode presents its various design implements in the tool bar along the top, and then arrays various panels around the main canvas, each dedicated to a specific aspect of the design.
For instance, the left side of the document window features a Shapes & Groups panel that contains each separate graphical element — be it a polygon, or a text box — and allows you to select them for editing. Immediately below it is a large pane that contains editing parametres appropriate for whatever item you have selected.
Tools of the Trade
Your toolbar contains the same exact items that were described in my PaintCode review, so rather than repeat myself I’ll zero in on the key functionality.
Like in any vector design app, you have a series of basic polygon shapes that you can work with, including rectangles (and rounded corner variants), ovals, polygons, and stars. The polygon and star items seem identical at first since they both allow you to choose the number of sides, but the crucial difference is that the star tool also allows you to adjust the “radius” of the shape to get everything from a dimpled oval to a circle of sharp spikes.
The same tool set from PaintCode returns.
You can then use these shapes as building blocks to assemble more complex forms. This assembly process is aided by a set of boolean tools that allow you to unite shapes in three ways: union, difference, and intersection. If you’re not quite ready to combine them yet, you can also simply group them.
Besides shapes, you’ll also find the text tool, which gives you access to your computer’s type collection, with the added advantage of having a sub-menu dedicated to iOS fonts if you’re working on a responsive design — very handy!
The Styles Library: Evolved
One of the most convenient features of PaintCode was the presence of a sort of bin where you could collect colours, gradients, and shadow presets that could be easily applied to whatever objects you were working on in your design.
This functionality has made its way over to WebCode, but the interface has changed a bit. Each type of style now has its own permanent panel dedicated to it along the right side of the window, and a little plus button allows you to quickly add a new style to the collection.
Selecting and modifying styles is a breeze in WebCode.
As before, each style can be applied to multiple objects, and subsequent modifications of the “master” style will affect every object in the document to which it has been applied.
The Final Product
Since the purpose of WebCode is to provide you with the HTML/CSS/JavaScript, the Preview pane will allow you to keep an eye on how your code is being formed as you go along. WebCode produces supremely clean and organized code, and I found it trustworthy and standards-compliant for the test documents I produced with it.
You can choose between three different rendering modes for the code. The first of which is the standard HTML + JavaScript Canvas. For different kinds of projects, it may be preferable to use HTML + CSS, though you lose the ability to create polygons and stars if you go that route (a fact that WebCode helpfully alerts you to with a warning area above the code Preview). The final option is for SVG rendering, which is a very flexible graphics format that can be modified easily using a basic text editor and is able to include both vector and raster elements, along with text.
Preview your final output, and address any warnings before export.
Above the Preview area, it’s nice to see the same buttons allowing you to customize the canvas (show grid, change size, etc.) as well as toggle Retina mode on and off. When you’ve finished, you can also use the Export button to package everything up.
When you’re ready to take things to the web, WebCode’s export options will give you a wide choice of avenues. Files can be exported as code, as PNG files (in both Retina and standard resolutions, or both at once), as well as SVG, TIFF, and even PDF formats.
Another Winner?
WebCode is a magnificent app, there’s no doubt about that. But there is always room for improvement.
There are a few issues with the software, ranging from the persistent lack of any project-based file format (allowing for multiple tabs within one master file) — something I complained about initially with PaintCode — all the way to minor things like there being no cursor change to indicate that you can actually resize the height of the code preview by dragging it (the horizontal resizing cursor appears just fine).
None of the issues detracts from the fact that WebCode will become indispensable for web graphics work. It follows very closely in the footsteps of its cousin, PaintCode, but its focus on web graphics will make it more appealing to the huge community of Mac-based web developers out there.
Conclusion
While there are tools that enchroach upon its territory somewhat, including Sketch, the now sidelined Adobe Fireworks, and even Photoshop plugins like CSSHat, there’s nothing that comes close to the level of polish and focused functionality that WebCode delivers.
The fact that the app features full iCloud integration and supports OSX’s fullscreen mode is icing on the cake, ensuring that it feels and operates natively.
Everything from its interface to its toolset are designed to streamline the process of creating beautiful and standards-compliant web graphics code without the headache of doing it by hand. The fact that it makes it easy for non-coders to work this way helps the internet as a whole benefit from better designed websites that are built to take advantage of the modern web.
Take the trial out for a spin and let us know what you think in the comments!
     |