App Development - Top Ten Tools for Design and Development / by James Moore

Having recently completed a series of updates to one of my photo apps Bleach Bypass, got me thinking about the tools that I use on a regular basis. 

I am a big protagonist on process over tools. While my process remains unchanged, it's become clear that the tools I use has widened in range. This may be down to the fact that there are more devices to contend with in the iOS sphere; mixed with a development of my own skills too.

Fresh in my mind, I thought I'd share with you the top 10 tools I've been using with some background.

 

1. Adobe Illustrator

When it comes to creating in app assets like icons or vector artwork, Illustrator is still the boss of them all. It's a mature app - I've been using it for nigh on 20-odd years and Illustrator still has a growing feature set. The original vector manipulation tools and pathfinder sets are more than enough to create sets of icons for the UI or identity of apps.

I've always used Illustrator to craft out such icons, create shapes and vector artwork. Artwork that was rasterised into the relative @1x, @2x and @3x sizes.

The advent of multiple artboards made this much more straightforward. Yet with each icon or piece of artwork, having the varied resolutions in pixel format bulked everything out times three.

App thinning aside, this started to become tedious to manage. 

A newer approach was needed that capitalised on the vectors themselves. XCode and the iOS SDK don't support SVG formats out of the box. Initially the best option was to compile all my icons into a font file using Glyphs.

So the step of rasterisation was replaced with font creation. This gave me the flexibility of asset sizes for the various resolutions but made the process of managing font files a new headache. And given that a font file is just one big thing, a black box if you like, made it tricky to handle in version control.

Roll in another tool, PaintCode which complements Illustrator beautifully. Using vector assets in illustrator, PaintCode generates bezier Swift code classes that are pulled in to any codebase I am working on. 

With this relatively new component part of my process, Illustrator is still as important as it ever was in my design process for apps.

adobe.com/Illustrator‎/

 

2. Sketch

Back in the day if you were bashing out icon concepts or screens, or doing anything at all at a pixel level with layers, you used Photoshop. It really was the only medium that offered the right tools for the job. As we moved into a new era of varied screen resolutions and artwork size requirements, Photoshop started to look a bit long in the tooth. 

The optimal route was to create the largest format required and downsample to the other required sizes. Not an ideal approach when all your master screens are created @2x. Roll forward a couple years and iPhone 6 drops with its @3x screen resolution and you get what I mean.

Indeed vectors are a viable solution. Yet to use Illustrator in place of Photoshop, to fine tune colour gradients and blend modes, while possible can be tricky. What was needed was a tool that offered the best of both worlds. Vector editing capability in an editing environment that offered the control over colour, image and blending at a pixel level. Enter Sketch. 

Now I have to admit, I was a late adopter of Sketch; but after initial use it's established as a key member of my toolset. Like Illustrator it offers (more easy I might add) the option to build documents with artboards, or canvasses. Sketch goes further still. You can organise groups of canvasses into pages. Great for exploring options and narrowing down. With multi resolution export options, pieces of artwork can be exported to different size formats in a few simple steps.

The canvas / page option makes Sketch a great tool for app icon design. A process in itself that warrants a separate article. Iterating concepts derived from drawings and Illustrator artwork has definitely been of value to me. Fine tuning tools to tweak gradients and tones to give your icons polish is better than anything else I have used. 

Simply put, Sketch is a great place to experiment and work iteratively and quickly.

Having settled on a concept; this can then be output in the resolutions and sizes you need for iOS as a canvas set. My preference is to output as a 1024x1024 pixel iTunes master icon file that is then passed to another tool I use for app icon creation – Prepo.

Sketch is a great place to start realising concepts, and putting them into screens or layouts. The opportunity to create canvasses for most devices from its diverse range of presets is a bonus. So too is the integration that Sketch provides with popular prototyping tools like FramerJS and Principle.

sketchapp.com

 

3. Principle

One area that I will touch upon here is prototyping. Many UX and UI designers out there will know the value of this process and we all do it in different ways. Prototyping is a great way to communicate the concept of an app or user experience. Prototypes are generally aimed at clients or potential users. Or to internally test flows through a set of views or steps in a task.

Now there are plenty of tools out there to build prototypes. The key to choosing the right tool is a personal or subjective one dependent on platform, time and technical ability. 

Let's cover off the last one first. Several tools out there allow you to create prototypes using languages like Javascript or Coffescript. In some cases these can be the best option when building something that applies logic or data as part of the prototype. In turn, you can code out dead ends that need moderation or reset in user testing.

Yet working with code can be a difficult transition for a designer. In turn the code itself can become convoluted and a tangled mess as a prototype evolves.

There are other visual tools cater towards web experiences. Tools that do not capture the gestures and behaviours found in native mobile apps. Where they work best for certain applications, elements are lost when capturing the look and feel of a prototype app. Others are cloud based, and not viable in some cases where confidentiality is important.

Principle is one such tool that does allow designers to create offline prototypes that retain some of that appiness. Support for device deployment and gestures, gives a native feel to many of its actions. It's a great way to build convincing prototypes.

Principle also integrates with Sketch. Porting layer for layer from a Sketch file can complicate things. Despite this minor quibble, both applications compliment each other well. 

Many designers of a certain age may have a background in Flash. You'll immediately get the concept of tweening, albeit with name based references and layers instead of a timeline.

I have used Principle to prototype and test full end to end journeys. And indeed to map out the changes to a sepcific part of a user task in my apps. It's a great way to iron out creases, see how things 'feel' and simplify things before moving to code.

principleformac.com

 

4. XCode

Without a doubt, XCode is the hub to all these tools and the process itself. It's where everything happens - code compiling, interface layouts, use of frameworks and APIs. If you want to leverage the full potential of the iOS, macOS or tvOS environments, you use XCode.

I could talk about Swift v Objective-C or Object Oriented programming. There are plenty of articles out there that would cover this far better than I ever could. Only until recently was all my code written in Objective-C having now moved to Swift. This might not be for everybody but since this move over, I have never looked back

One area that has proved of value to get to grips with is Interface Builder and Storyboards. Back in the day, I would try to manage a lot of the various device sizes and orientations. Even the creation of UI elements programatically. For many this is still the way to go; and sometimes still the the most efficient. 

Storyboards and Interface Builder handling the bulk of UI work has made things so much easier. In turn ViewController classes and subclasses are now so much shorter.

From a CSS/HTML background, many may find it tricky to dispel the notion of explicit sizing in favour of layout constraints. Once you get to grips with the approach, it makes designing for multiple screen sizes so much better. Size classes too will drop reams of tedious code allowing you to cater for UI behaviour on various devices and orientations.

While XCode definitely has it's strengths in opening up so many opportunities, there are areas that could be improved. Getting back to Interface Builder, the UI itself has become quite busy. When using previews or size classes on say a 15-inch MacBook screen the layout start to get tight.

There is a curve to learning iOS development and something that needs commitment. Interface Builder, ARC and Swift is definitely making the route of entry for front end developers and less bumpy.

developer.apple.com/xcode/

 

5. PaintCode

Teamed with Illustrator, PaintCode is the missing link, or perfect sidearm to XCode. PaintCode quickly takes vector artwork to construct drawing classes. These then allow for rapid deployment and updating of assets right inside XCode. It's a seamless way to render your icons assets conveniently using code.

Throw in StyleKits and you have a great way to manage shadows, fills and outline styles. Change any instance within a StyleKit has a holistic effect on the elements that use those styles. Essentially it's styling and drawing code all bundled into one.

Need to make a change? Simply re-output the classes into your target folder and rebuild. Voila, your changes will be implemented right there in your app. Where vector masters are stored in your PaintCode files, the output drawing code itself becomes part of your app codebase. PaintCode classes in turn are conveniently managed within version control.

paintcodeapp.com

 

6. QuartzCode

 QuartzCode allows you to build smooth animated effects, adding a new dimension of personality to apps.

Sparingly used in the right places for subtle transitions on icons and intro screens, animation runs independently in it's own thread. While looking great on screen, there's little impact on app footprint size or performance. Everything's packaged up in neat reusable classes.

Using a simple timeline editor view, you can pull in vectors and images, tween them between states or use some of the effects within the editor. A personal favourite is Stroke Start and Stroke End that allows for a drawn line effect. 

Standard animation completion handlers easily traverses to other animations which keeps timelines short and effects neatly organised. 

The feature set takes some getting used to and could do with a bit of finessing. There are some definite quirks that need to consideration when using this tool. 

Later versions will probably iron these bugs out of an invaluable piece of software.

quartzcodeapp.com

 

7. SnippetsLab

SnippetsLab has helped me to manage chunks of code or entire classes for reuse within my apps. I've found it to be really useful for building up a range of CoreImage methods that I can then import into any XCode project I am working on. And it's great too for those animation and drawing classes from QuartzCode and PaintCode.

The editor is pretty simple, although it does have code syntax highlighting for a number of languages. Batches of code can be grouped into folders, tagged and pieces of code can be split acorss fragments. This is particularly useful where you're using headers, protocols or delegates in your code.

Another handy feature is the menu bar item so it's always available while working in XCode.

renfei.org/snippets-lab/

 

8. PREPO

Since iOS 7, followed by the arrival of the iPhone 6, icon sizes have proliferated to form a hefty list. Spotlight gave rise to smaller representations of your app icon across three resolutions. It's easy to miss smaller sizes and sometimes icons need tweaking to make them work across all sizes.

Throw a single master file into the processing window within Prepo and it will instantly generate all the icon sizes you need. This makes it easy to adjust icons and re-output them. An accompanying .plist helps with managing the assets folder.

It also takes care of watchOS and macOS icons. 

wearemothership.com/work/prepo/

 

9. ADOBE PHOTOSHOP

Like Illustrator, I'm a long time user and fan of Photoshop. While it's eclipsed in some areas by Sketch, there's just some jobs where you need its heavyweight capability.

I always find myself coming back to Photoshop to handle App Store screenshots. Whether it's to tweak the time in the status bar, tidy up a glitch or sharpen images up, Photoshop is still my go to app.

Newer tools like Smart Fill are proven time savers. Quick Mask and the clone tool have been a regular feature of my workflow for years. 

adobe.com/Photoshop/

 

10. Launchkit

Launchkit offer a number of tools for App Developers, yet one of the best is their App Store Screenshot Builder.

Until recently, Apple were pretty strict on the screens needed for App Store submissions. These included iPhone 3.5, 4, 4.7 and 5.5 inch; iPad 9.7 and 12.8 inch. A raft of screenshots from Simulator with the app in a variety of states. 

Launchkit takes a lot of the leg work out of this process to manage these images in a web-based front end. Like Prepo, it will churn our the required assets needed for App Store submission.

In Launchkit, where you have 5 screens for the app, you supply the dervative screengrabs in each device format. It's easy to get everything as accurate as possible.

To add appeal, or context many of these screengrabs can be framed with a device or with text and a background. Devices are rendered for you, and you can even select your preferred finish.

launchkit.io

Download the app

Bleach Bypass is free on the App Store and compatible with iPhone and iPad