development

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

Simply B&W Tutorial #1 - Using coloured filters by James Moore

Simply B&W Colored Filters

Simply B&W has recently received a (long overdue) update in the App Store. For many of you who have used the app before, you may already know about the coloured digital filters available to manipulate your images. It's long been standard practice for many Black and White photographers to shoot with coloured filters over the end of the lens. This may seem odd to those of you new to the idea of adding a coloured filter when shooting in Black and White. However such filters can dramatically change or enhance an image as the filtration has effect on certain parts of the image, and the filters too generally are dependent on the subject being photographed.

Within Simply B&W there are simulations of such filters, without the need to process film so you can instantly see how the various colours can have an effect on your images. It's a great way to experiment and find the best filter effect that suits the tone you wish to create. Dependent on subject the variation can be quite dramatic, as can be seen in the image as shown above.

Original image showing vivid colours and texture.
Original image showing vivid colours and texture.

For detail in this particular tutorial, I will use a simple image shot much closer to home here in Scotland. Simple in composition, the palette is limited but there is a variety of textures which will serve well to illustrate the effects of the coloured filters. Shot on a sunny day it has hight contrast, vivid colour with striking white jetstream clouds in the sky.

Yellow filter applied
Yellow filter applied
Orange filter applied
Orange filter applied

Yellow and orange filters

The primary filter of choice when shooting in black and white as it is generally useful for darkening skies and emphasising clouds with increased contrast. Whilst yellow filters darken blues, they will lighten greens, yellows, red and oranges. Orange filters render similar visual effects although slightly stronger yet not as bold and dramatic as those given by a red filter.

Red filter applied
Red filter applied

Red filters

A red filter will markedly increase contrast between certain colours such as blues and greens in relation to lighter tones and highlights. Blue skies will be rendered almost in black with bright white clouds, adding instant drama to skies and landscape images. This increased contrast emphasises texture and detail in buildings and undulating surfaces where there is a degree of tonal variation. Reds too are lightened significantly, so interesting effects can be achieved when photographing strongly red coloured objects such as post boxes here in the UK or red flowers, making them appear lighter in tone.

Green filter applied
Green filter applied

Green filters

Green filters are great for capturing detail in foliage, as they lighten the overall scene and enhance surface details. This is particularly useful for example, on organic structures such as buds and leaves. They make great enhancers to macro photographs picking out subjects such as insects from a natural green backdrop. Portraits too make good subjects for the use of green filters. Blemishes and skin tones are flattened out making for more flattering images.

Blue filter applied
Blue filter applied

Blue filters

Limited in application, blue filters can be used to inverse effect of red and yellow/orange filters. Lightening skies and darkening natural tones they can be used to effect to separate layers of water, sky and foliage in complex landscapes. The darkening effect too can vividly increase contrast in certain scenes or add an interesting effect to a portrait.

Experiment

There is no right or wrong; and while there are recommendations for application above, there are no hard and fast rules on where you should use coloured filters. Don't be afraid to try the range of colours on your images and decide for yourself which enhances to the atmosphere of your image.

The option to create presets or 'Bookmarked Edits' which allow you to enhance images with one-touch has been added, so you can try out a range of tonal manipulations in conjunction to the filters to experiment with interesting effects.

Of course filtration alone won't automatically make a poorly composed photograph better, but the awareness of how light reacts in varying conditions will help you to see shade, texture and tone in a new light (pun intended).  In upcoming posts we can look at ideas for shooting with black and white photography; and essentially explore the ways we can use tone and shape to define our images.

Great points of reference for Black and White photography, where I have drawn inspiration from include the works of  Ansel AdamsHenri Cartier-Bresson, Diane ArbusMan Ray, Don McCullin, Harry Benson, Helmut Newton although there are many more on Magnum Photos

SimplyB&W is FREE on the App Store for iPhone, iPod Touch and iPad.

download_app_store
download_app_store

App Development - Creating a concept and developing ideas by James Moore

Early sketches of the UI for Geló

Over the next few weeks and months I'll be posting a number of articles about my own approach to app development. I'll also try to dish up a bit of insight into the App Store itself and what it's like to be a one-man dev band making apps. Most of it, while related to my app development stuff could actually be seen as part of a creative process that I go through, and not necessarily specific to apps themselves. First off, Fotosyn is not big. You'll have guessed that if we've spoken online, or simply by reading my opening line. It has one employee. Me.

There's no art department, no bank of developers or a marketing team. Again that's me. Any experiences posted here, as well as processes, usually done on a shoestring will be just that, my own personal account and nobody else's. Hopefully this will still maybe prove to be of interest to some of you.

The App Store itself is sort of built on this basis, a burgeoning network of indie app devs making software, not (really) for the money but for the enjoyment that comes with publishing software and getting it out there. From the outset, the making the money part is only a nice aside; and just as well because contrary to the popular belief that we app developers are all millionaires, it's definitely not the case. Well not in mine anyway.

Allowing the millions of iOS users worldwide to buy, download and use your app, and getting feedback and input into the app is what it's all about for many. We'll talk about that later but for now let's enjoy this idea of software publishing democracy in action.

At this time of writing (Feb 2013) I have published photo apps on the App Store. These include Geló, Bleach Bypass and I have just taken on the reigns of another app, Simply B&W.

Developing photo apps has it's own unique set of rewards built in that you maybe wouldn't get with creating a game. Seeing the creative results on Facebook and Flickr and 500px and Instagram from the users who choose to download or buy your apps. It really can't get better than that.

In saying that, a game, with a photography element to it. Now there's an idea...

 

Starting with an idea (and knowing your subject).

In recent years I've heard the saying 'I have a great idea for an app' on many occasions. Looking back maybe 10 to 15 years ago, a similar phrase, 'I have a great idea for a website' was coined. Today, apps are very current; seemingly a currency of progress to many in the digital/creative field. A place that you need to be in. It's very now. Very cutting edge.

And this is where we start. The idea. Many who have an idea, generally derive it from something they are in to. And they're usually pretty good, feasible ideas. An app for Photography. Wine. Running. Dogs. Finding collectible stationery. They've identified that they'd like an app for something they enjoy in their life, and that maybe yet there's nothing out there that quite addresses their specific needs to help them enjoy it more.

And herein lies probably one of the best parts of the process. That heady, early stage of realising you're onto something, maybe that hasn't been done before, or not in the way you have envisaged it. Simple and in a pure, unreworked un-mashed-up form.

It would be right in saying that many things start this way. A business deal. A creative concept for a design project. A short story, plans for an event. Maybe even this series of blog posts. Having this idea is one thing. Writing it down is altogether more useful.

 

Identify a niche.

Like anything, it makes good sense to have a unique selling point. What niche will your app occupy. Is it (another) camera replacement app, and if so what advantages or differences does it have over other apps. Is it a filter app, and again what style is it aimed at. If you have a good understanding of your subject or area, then this maybe isn't as difficult from first thought. being a developer of photo apps, I think in terms of what would I expect this app to have as default. Are all the sharing tools a must have? Maybe. Do I want full resolution? Definitely. Do I want to retain EXIF data, and maybe have geolocation support? Absolutely. It's important that you apply your own values into the app as a starting point. This is important before the shift in thinking moves from 'what do I want it to achieve' into 'what would other people want it to do' 

It's always better where possible to aim to include features you would value as useful features at this stage, and include them in the initial scope which I'll cover in a bit.

 

Write it down. Store your ideas. Keep whatever you find.

Take notes. Make a list of ideas. Make lists of ideas. No matter how trivial; those out-of-the-blue, three a.m. notes. Write them down. If you don't they'll be gone, and maybe later that's when you need them. Of course the way you take notes will be differ from person to person.

Personally I prefer to keep notes in a pocket-sized notebook, like the Moleskine. They're compact, pretty robust, have a handy pouch at the back and come in a variety of page types – blank, squared, ruled. I prefer squared as the gridded layout helps in sketching UI ideas. Of course, it's the quality and relevance of your notes so the best note is the one that's written down and kept. Moleskines are not de-rigeur for successful note-taking, other notebooks are available.

[one_third]Early sketches of the Bleach Bypass UI[/one_third]

[one_third]Schema and functionality for Geló[/one_third]

[one_third_last]Additional initial sketch for Geló[/one_third_last]

I almost always use a pencil to write notes. They generally always work, they don't bleed or smudge (too much), and you can save paper by rubbing out mistakes if you wish.

The limitation of course is that while you can scrapbook with these smaller books; it's not conducive to taking screengrabs or saving weblinks.To keep notes digitally I also make use of the excellent Evernote. Available for your desktop, notebook, tablet or mobile, you can easily store things you find, jot down notes when your paper notebook isn't handy, in simply when you feel that you prefer to make notes in a digital format.

I use Evernote to store links to images I like, image processing, film effects, pieces of design. There's no rhyme or reason which suits my sporadic style of taking notes. Of course you can index notes with tags and some might find that useful, but it's great to be able to grab something on the camera of my iPhone and it's on my Mac when I get home. I also use tools like Penultimate and Paper, both excellent note-taking and drawing apps on the iPad. In recent months, Penultimate has synced up with Evernote and you your notes or books can be transferred over. I use a Pogo stylus and more recently a Sensu brush to get things down in these apps quickly.

 

Building on the concept and developing your notes.

Making notes is one thing. Acting on them, (not compulsory for all your notes) is another thing. At the stage where I think I have an idea that I can develop further, I progress it to a simple paper based process of prototyping. These take the form of simple sketches, additional lists or diagrams.

I am a big believer any initial piece of development work needs to start on paper if it's at the point of origin. This is the case for either designing say a user interface (UI), some schemas for storing data in an app or mapping out the functionality within an app. Where you may have reusable elements such as design or code patterns and classes used in previous projects fine, keep them in mind and note them down.

When I see designers head straight for the Mac when working on a design project, it despairs me.  It's sometimes seen as a solutions machine. Sure it'll help you rapidly iterate a design concept, but it won't move you on unless you've thought through a lot of the ins and outs of the concept on paper. There's an element of investment when working on the computer. Work feels more tangible, more realised, which is a great thing in a later stage of design, but can leave the designer with too many options or 'precious' about certain thoughts. Same goes for writing code; a basic plan needs to be in place to develop elements of the functionality and how the UI will hang together.

Paper-based allows me to think, and not invest too much time. If an idea is flawed, it's found out relatively quickly, easily altered or shelved. Sometimes, notes from other design activities will merge into other projects - so it's not to say that any idea shelved is discarded and discounted. Finding previous ideas is as simple as flicking back through notes either in notebooks, or digitally.

 

Keeping the scope.

Remain clear on what you want to achieve with your app. Write these goals down, commit to them and try to keep within a scope for the development phase of the app. Be happy that your app isn't all things to all people; it never will be - trust me. There are apps out there that do other things but a key focus is to keep what you want the app to do, to remain defined. If you have this core set of requirements nailed before you begin prototyping and development, it will make these subsequent processes much easier to handle. Inevitably, there will be some changes either through proving something is unworkable in prototyping and testing, or maybe requiring further refinement. But this is a key part of the creative and development process. Mistakes can make you have that duh moment, or seem obvious in hindsight but mistakes and misjudgements should be embraced. This too is the point where you go back to sketching, drawing and taking notes to work through those tweaks.

 

Tools and Apps in this article

Moleskine pocket sized notebook with squared paper | Sensu brush | Pogo stylus | Evernote | Penultimate | Paper

 

Key points

- Find a niche. If you just try to replicate what others have done, without making it better you may face disappointment.

- Know the subject for your app. If you're creating an app for someone else, learn about it as much as you can.

- Aim to keep within a defined scope.

- Embrace mistakes in the initial creative and development stages. Learn from them and progress from them.

- Write everything down, no matter how trivial. Take notes on paper and/or digitally.

- Draw. Draw with pencil and paper. Use iPad sketching tools if you prefer.

- Don't try to be all things to all people. It'll never happen.

- Like any business pursuit, it greatly  helps if you enjoy your topic, and the challenge of developing apps.

 

Next up...

Prototyping from your ideas and notes.