WebCode: Web Graphics Design, Made Simple

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.

Blank Canvas

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.

Selection Pane

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.

Drawing Tools

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.

Styles

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.

Code Preview

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!


Summary

A graphic designer's solution for the formerly-tedious problem of creating beautiful, responsive web graphics using nothing but HTML/CSS/JavaScript code.

9
  • Andre

    I’m graphics-challenged (I find Adobe products overcomplicated) so I use Sketch and love it. Will give this a look.

  • albertkinng

    a 9??? This app needs a 10 or even a 20. This app is a game changer. I use it all the time, create the elements I need and paste the code right on my web projects. Do you know how much time you save when you are a developer? Do you know how good is to save your color combinations? Are you a developer? A Web designer? I mean… I don’t see why give this app a 9 when the only bad thing is not letting you do the hover art in the same app. really? Any Developer (with any CS suite) will play with this app 5 seconds and immediately will ditch dreamweaver, fireworks and Illustrator. WebCode can do what those three apps are designed to easier and faster plus in a very productive way.

    I really don’t know what’s going on these days, but my design suite has change a lot from Adobe to Mac App Store Wonders!

    • http://twitter.com/Mathazzar Marius Masalar

      Hi, Albert!

      A 9 is a near-perfect score, so I hope you’re not under the impression that I’m being harsh on the app. My intent was to be fair given that I saw room for improvement, as stated in the review.

      More specifically, my criticism was not about hover art but about the lack of an ability to save documents in a format that allows you to keep all assets related to one project in a single file rather than having a number of different WebCode files for each website project. Think of Excel spreadsheets and their multiple tabs — I am hoping for that kind of functionality whereby I could have all the site’s graphical assets in one document with the shared styles library.

      I had the same concern with their previous app and voiced them at that point, and it’s still something I’d like to eventually see. Beyond that, I agree with you that it’s a transformative improvement over previous solutions and said as much in the review.

      Hope that clarifies things :)

      • albertkinng

        Ok. Fair enogh… But please dont get confused about what it does and what it doesn’t do fron scratch. Sometimes we like an app and want to do more with it even if it wasn’t designed for those other needs we wish for. It is just a graphic to css/html code exporter.

        • http://twitter.com/Mathazzar Marius Masalar

          I’m not sure why you think I’d be confused about what WebCode is intended to do…

          My criticism in no way relates to the core functionality; it would merely make the workflow more convenient when dealing with multiple assets for a single site project.

          I should also hasten to point out that it’s *not* just an exporter of graphics to code — the fact that you can import PSD/SVG files and export them as code is only half the story.

          What makes it so appealing is specifically that it does that as well as providing the tools to serve as a vector design studio for the creation of those graphics.

        • albertkinng

          Be cool. I am not in any way attacking your review. I think is an excellent tool for exporting graphics in css code just for that it deserves a 10. True you can design anything on it and also save it in formats compatible with your design suite of choice but again the same goes for Fireworks and people preffer Illustrator for design even tho they can design in Fireworks as well. That’s my point. I will end this saying no offense was intended in my comment so please don’t defend yourself no more. I addresssed my point badly and therefore I think we start a dispute out of the topic. Sorry.

        • http://www.techinch.com/ Matthew

          Just an FYI: we very rarely give out 10′s. For us, 9 means you should really go try it out, it’s awesome. 10 is nearly perfection.

        • albertkinng

          Matthew, that’s a FYI that never needed to go public. If you have a rating method of 10 points you need to use your 10 points were 10 is we recommend it and 1 is we think it sucks. Saying “We don’t use the 10″ is like publicly saying nobody deserves a 10 in our book. Again, it’s your website and you run it how you want. I like your content and I will be visiting every now and then. It’s just that your reply was awkward. Like a Dictor saying “we said we accept anyone but the reality is we only accept people with PPO health insurance… Oops”

        • http://www.techinch.com/ Matthew

          We’re actually pretty public about it. Consumer Reports — as one example — lists complaints about products they otherwise recommend, too.

          At any rate, thanks for reading even if you don’t agree with us here on the number ratings. At least we try to dig into the stuff we review enough for you to make your own decision on the app aside from our numerical rating.

        • http://pauladupont.com/ Paula DuPont

          I’m a latecomer to this conversation, but I think what’s great about Mac.AppStorm is that our reviews are so thorough, you don’t even need to get to the number rating to make a decision about the app as a reader.

          If you read the review, you’ve got a great idea of whether the app’s for you or not. The number we give it isn’t going to change that!

        • albertkinng

          Ratings are for credibility and for sale pitch. We as costumers at the end need to use the app and see if it fits our needs. Sometimes a review let us know if its a solid company and if we can count in good support if something happens. The ease of use depends on how trained the pwrson is on any subject. So if you said an app is a 3 definetly is not going to be in my Mac. If it’s a 9 it needs to justify the missing point somehow. But as you said this conversation ended long ago.

  • http://www.upgraphicdesign.com/ Up Graphic Design

    Interesting interface, will have to take a look at it.

theatre-aglow
theatre-aglow
theatre-aglow
theatre-aglow