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

Direct Comparison on iPhone 6S Plus and iPhone 6 Plus Cameras by James Moore

With the iPhone 6s and 6S Plus release yesterday, it's already clear that the 3D Touch technology is a useful addition to the user experience. Another notable development that is of interest is the upgrade to the camera with the jump from 8MP to 12MP, better autofocus and colour accuracy.

In the iPhone 6 and 6 Plus this has always been an impressive imaging device. Coated lens with optical stabilisation ensure that the bulk of pictures taken on it are crisp and sharp. Colours are true with good mapping of tones and exposure. 

In moving on to the 6S and 6S Plus this is very much still the case. With 3D Touch, launching the camera into specific modes is a one-touch process. The handy popup menu allows you to pick shooting mode before launch. This will be really useful, as the scroll selector in-camera is quite fiddly.

I was interested to see differences in the images from both devices using the same settings and subject. The scene here offers up some interesting comparisons. Detail is captured clearly with both the 6 Plus and 6S Plus. The 6S Plus unsurprisingly offers more detail in a larger image.

 

Detail capture

Both images are similar. The 6S Plus image has more heft in file size (4.3Mb v 3.8Mb) and pixel dimension (3024 x 4032 pixels). The 6S also picks out the rust, cracked paintwork and wood grain a tad better..

iPhone 6 Plus

iPhone 6 Plus

iPhone 6S Plus

iPhone 6S Plus

TONAL CAPTURE

Tonal capture has better fidelity. The shadows on the 6S Plus image are denser, yet have similar lattitude towards the mid tones. In the shade beneath the foliage, more surface detail is pulled in with that larger sensor..

iPhone 6 Plus

iPhone 6 Plus

iPhone 6S Plus

iPhone 6S Plus

In summary

3D Touch offers easier access to the camera functions. I can see its benefit in flipping between video and photo modes so it's useful to those who regularly shoot both. 

it was always going to be plain that the new sensor would offer up improvements. For those looking to upgrade from a 6 or 6 Plus, this  won't be as evident as the jump from a 5S or below.


 

Original images

iPhone 6 Plus

iPhone 6 Plus

iPhone 6S Plus

iPhone 6S Plus

Another Raspberry Pi Timelapse by James Moore

Another quick timelapse taken over a 48hr period during a recent visit to the Highlands of Scotland. We stayed in a small, remote lodge on the banks of Loch Broom, directly across from the fishing town of Ullapool.

This was a good test to leave the Pi's out for a sustained period of time; due to the remoteness of the location and to test the waterproofing of the tins themselves.

Scotland, being Scotland, it did rain. There is quite a bit of distortion caused by water over the lens but it cause the devices no problems whatsoever.

Trying something like this yourself is easy. Check out my page at http://fotosyn.com/timelapse/ where there is a full guide to getting started.

iPhone 6 Plus. A week in. by James Moore

6CEBA909-CF24-4D75-A55A-9926C9E52BE0

Last week, after a bit of a wait I received my iPhone 6 Plus. Opening the simple white, de-bossed packaging I was presented with the huge, glossy handset.  After restoring effortlessly from iCloud I was up and running in minutes. Having been a user of iOS8 for quite some time, and seeing the new device up close in the Apple Store already there were no unexpected surprises in the new device. 

At the time of writing, I have used the device now for roughly a week and I thought I'd share with you some of the nuances of the new device and where it really shines.

Things to get used to:

The sheer size of this device. Really has an impact on how you handle it - it feels a tad precarious for one handed photography and I recommend you position the Camera app bottom left of right (depending on whether you are left or right handed).

iphone6-comped
iphone6-comped

The thin-ness of it. Again means you adjust your grip. A case does help add heft but it’s definitely not as angled, weighty or as secure in the hand as say an iPhone 4 or 5. In saying that, after a week of being used and carried in pockets, jackets, trousers or shirt it hasn’t bent at all. No surprises there then.

Great new features:

The camera. It is really really great. Low light is where is comes into its own, or photographing items that need sharpness for total fidelity. Copying sketches from paper and whiteboards in particular shows the hardware lens stabilisation benefits.

BzNxnc2IQAE-_dh
BzNxnc2IQAE-_dh

It’s damn fast. Everything loads in a snap. It responds super quick to app changes, user input and loading in webpages. Image processing shines with real-time editing running smoothly and jitter free.

The sheer size of the device. Have I mentioned this before? Going back to the iPhone 5 renders the smaller 4 inch display in a  new light. It feels tiny. On the 5.5 inch 6 Plus display, apps look great. Even those that scale up to fill the screen. UI orientation feels much more apparent. Safari feels almost like its iPad / OS X equivalents.

The screen. In short, the resolution of this screen is awesome. Photographs look super crisp and fill the screen. Even in apps like Instagram, the detail in the images is exemplary. The whole experience of using apps is much more engaging.

BzN1VP7IAAA9Zcr
BzN1VP7IAAA9Zcr

Conclusion:

In all I cannot fault this device. It looks great. Feels great, if a little... wobbly at times in the hand, yet it performs brilliantly. Those swithering between the 6 and 6 Plus, weigh up your needs, but I would always recommend the bigger device. This is aimed at creatives and image editors. I can’t wait to see some of the iPad titles like Procreate make its way onto the device but the added real estate makes doing things so much easier.

The 6 is a great option too. I have been up close with both units and both feel much bigger than previous models. 6 or 6 Plus it is down to personal choice. When the screen is off, the 6 Plus definitely looks like it belongs in Android territory. Flip the screen on though and you are immersed in iOS8 which really is coming into it’s own day by day with apps updating to take on the new functionality.