Graphic Design Tools that Developers Use

Do any of you developers do your own graphics design?
If so, what graphic design tools do you use?

Guess what: as a developer and content creator, I often do my own graphics design. Mostly because I can’t afford good graphics designers – the ones that can create great artwork and user interface designs based off a few sentences. On the flip-side, if I have to tightly spec out what needs to be done — which is often the case for $5 artists on Fiverr — I might as well do it myself, with the help of a few clip arts and pre-existing samples that I can model from.

My graphics tools of choice at the moment are OmniGraffle 7.10.2 and Affinity Designer 1.6.1. OmniGraffle is mainly used for creating diagrams and wireframes whereas Affinity Designer for the “art”-type works: icons, button glyphs, and banner advertisements. I’ve tried using one app to take on the tasks the other app — with the intention of eventually de-commissioning that other less-used app — but ended up with grief and wasted time. Each app has its strengths and weaknesses and I don’t see one would replace the other very soon.Affinity Designer vs Omnigraffle 2x

When choosing software tools, these are the general criteria that I follow:

  1. Easy and delightful to use on the Mac. Gimp and Inkscape may be free as in beer, but I found them to be eyesores. Not to mention their redraw performance hasn’t been great — often window contents flickers when resized. On top of that, Gimp’s user interface is utterly confusing.
  2. Capable and versatile. Meaning that it has a good feature set that would be useful in many situations. The Preview app may be an easy-to-use drawing tool, but try anything more than a few simple annotations and it begins to pinch.
  3. Supported by a stable company. I had a few instances in which my favorite app became abandoned by the developers and thus I was left with data files that is in danger of being inaccessible if the app malfunctions in coming operating system updates.
  4. Not too expensive. Adobe’s subscriptions has literally priced me out. Sure, if I’m a full time graphic artist making millions of dollars in digital artworks, the combined cost of Photoshop and Illustrator may be justifiable. However my needs are modest and my budget even more so.

Hence the choice came down to OmniGraffle and Affinity Designer. There are cheaper commercial software than these two, but rarely as capable or as supported. Remember that even free apps would require investment in terms of time and brain-juice, which are not free when you consider the grand scheme of things.

OmniGraffle

These are the positive sides of OmniGraffle:

  • Great for diagrams — boxes-and-lines type of drawings are its forte. Thanks to magnets that easily snaps lines to closed shapes, these kinds of drawings are easily maintainable.
  • Also good for blog illustrations, wireframes, and screenshot annotations (such annotated screenshots for use as App Store metadata – since often you need to maintain it across uploads).
  • It can produce clickable PDF, great for semi-interactive wireframes that can be viewed without special software.
  • Free viewer — the Mac App Store version can also work as a viewer without needing to make payment.
  • Has a wide variety of stencils — pre-defined shapes ready for assembly into your own diagrams. Many stencils come with the app, the company also provides many other free stencils available from its web site, and there is a 3rd party marketplace for premium stencils.
  • Optional bundle file format makes the app works quite well with git or iCloud. This is especially useful when your drawings contains embedded photographs or other bitmaps.
  • Has been around for more than a decade, thus likely would be around for another decade, counting on the Lindy Effect. The app is older than iOS and its company has been doing well since the NeXT era, and people have been needing diagramming tools at least since flowcharts were invented in 1921.

Whereas the following are areas of the app that I feel needs improvement.

  • The app can’t be used for pixel-sensitive work such as button glyphs, where you often need to align lines or shapes with pixel boundaries. I tried to use it for this purpose a few times and often find that the lines and shapes are often off by a few deci-pixels in the PNG exports, causing blurry boundaries.
  • Anything freehand would be difficult. Its support for bezier-style paths and shape operations are rudimentary.
  • Similarly there is no stylus support — at least not on the Mac. If you have a graphics tablet (such as Wacom Intuos), the app would treat it as a mouse/trackpad and you can’t use it to draw freehand.
  • Special effects are very basic. You get blur, pixelate, magnify, and that’s just about it. Don’t expect to have Gouraud shading or fine-grained control on gradients and textures.
  • The app can easily slow down when your drawings contain large bitmaps. An eight megapixel photo inside the composition is enough to make the app feels tardy when scrolling and zooming on a 6-core MacBook Pro.

Affinity Designer

These areas makes Affinity Designer really shine:

  • Great for art-type drawings — such as icons and banner advertisements.
  • Great for pixel-type work. You can draw pixel-perfect button glyphs in 1x resolution and the app can generate the appropriate 2x and 3x variations exported at maximum sharpness since it’s essentially a vector drawing app.
  • Full support for graphics tablets (also known as digitizers). Including pen pressure sensitivity when the hardware supports it and variable stroke widths.
  • Rich special effects — including things like emboss, noise fill, texture fill, fine-grained gradient controls, etc.
  • Fast. You can have vector and bitmap compositions with special effects at over 500MB file size and the app didn’t have any problem at all in scrolling and zooming with a 4-year old laptop.
  • The app has been around for over four years and still getting improvements. Furthermore the company behind it has a longer history, albeit mostly on the Windows platform.
  • There are Windows and iPad versions as well, making a it possible to collaborate on an artwork with your non-Mac colleagues.

However there are some negative areas of Affinity Designer:

  • The user interface (UI) doesn’t really comply with macOS’ conventions. There is a “cross-platform smell” in the UI, somewhat similar feel of using Microsoft Office on the Mac, as most widgets seems to be custom-coded.
  • You would need to draw just about everything from scratch as the library of pre-made assets are rather limited — both the built-in (or bundled) assets and the community-provided ones. This makes drawing architecture diagrams, flowcharts, or even floor plans more challenging that it needs to be.
  • There are object snapping, but no magnets that attaches lines to polygons. Without this feature, diagrams would be more difficult to maintain and update.
  • You can’t have multi-paged documents, the app is strictly one drawing surface per file. Hence don’t try to use it to replace Keynote or make books.
  • Data file sizes increases dramatically if you add bitmaps — it seems that the app doesn’t keep it as the original JPEG or PNG instead decompress the image internally. This and the single-file structure makes the app’s data files a poor fit for differential version control systems.

Conclusion

There’s a balance between “use the best tool for the job” and “when all you have is a hammer, everything looks like nails” — between many task-specific tools and just use one tool for all tasks. This balance is mostly a function of how many tools you are willing to learn (and expense) versus how diverse of the tasks that you need to do.

If you draw architecture diagrams (whether it’s Garret’s IA or TAM), flowcharts, or other blobs-connected-by-lines graphics, then OmniGraffle is the way to go. However for making icons (whether its application icons or button images), banners, or very custom artwork, then Affinity Designer is the better tool. Nevertheless when it comes to creating wireframes, both apps are equally capable — although I find that OmniGraffle is slightly easier due to its shared layers feature. As far as static visuals go, those two software packages are complementary enough to earn their places in my brain-space and the combination of the two are sufficient for 99% of the graphics work that I do.



Avoid App Review rules by distributing outside the Mac App Store!


Get my FREE cheat sheets to help you distribute real macOS applications directly to power users.

* indicates required

When you subscribe you’ll also get programming tips, business advices, and career rants from the trenches about twice a month. I respect your e-mail privacy.

Avoid Delays and Rejections when Submitting Your App to The Store!


Follow my FREE cheat sheets to design, develop, or even amend your app to deserve its virtual shelf space in the App Store.

* indicates required

When you subscribe you’ll also get programming tips, business advices, and career rants from the trenches about twice a month. I respect your e-mail privacy.

5 thoughts on “Graphic Design Tools that Developers Use

  1. I used to work for a graphics design firm that offered a variety of photo editing services. I am quite glad for the opportunity to benefit from your expertise. It will aid my career development in the future. Keep up the excellent work.

  2. You have done a great job on your website. In this article, you share so much information about graphic design. I worked at a graphics design company that provides all kinds of photo editing service. I am really grateful to benefit from your knowledge. It will help me to become more professional in the future. Keep it up the good work.

Leave a Reply to Neil ZepedaCancel reply