Mobile App Prototyping for Designers with Xcode Storyboards

Opener

We’ve used a number of tools to prototype apps over the years to go from initial concept to interactive prototype. Most of them were decent enough, but they were all lacking in some way which kept us looking for better options. Many do not support scrolling, some have chunky screen transitions, and most have awkward UI that is frustrating to work with. We eventually decided not to spend time learning tools that are limited to prototyping and instead to invest in becoming proficient at using Xcode, the de-facto tool for iOS development. Xcode prototypes are easy to get started on, are as simple or as complex as you need, and are a great stepping stone to building the final product. (more…)

Cross-platform App design for iOS and Android

iOS vs Android design

MindSea recently developed the East Coast Music Association (ECMA) app that showcases East Coast artists and the Music Week festival. The timeline meant we had to build versions simultaneously for both iPhone and Android. We’ve ported apps from iPhone to Android before, which usually means trying to shoehorn an existing structure to work on another platform. For this project, it was nice to know up front that we were designing for both.

(more…)

App Localization Case Study: Etchings Goes Global

etchings_language

Apple is a big fan of internationalization and localization and encourages developers to translate their apps into many languages. While it’s clearly good to make your apps available to a larger audience, it doesn’t come for free. Localizing and translating your app is hard work, and you want to be sure it will pay off.
(more…)

Event Marketing On The Go: Bringing Artists & Fans Together

ECMA_Screeshot_homeIn partnership with the East Coast Music Association, MindSea designed and launched an innovative app for iPhone and Android music fans. This case study describes how we worked together and what we accomplished.

The East Coast Music Association (ECMA) has a unique mission: to foster, develop, promote and celebrate East Coast Music and its artists locally, regionally, nationally, and interna- tionally. Its Eastlink East Coast Music Week has grown to become a must-attend event
in the Canadian music scene and includes a five day festival, an industry conference, and awards show.

Download Case Study PDF

(more…)

Infographic: From Mobile Pitch To Market Success

How do you go from mobile pitch to app store success? There’s no single formula, but you can increase your odds of a winning app by following our infographic roadmap and downloading our App Design Checklist.
(more…)

The Second Halifax Instawalk – a Success!

Our second Halifax Instawalk took place Saturday, Feb. 23 at the Seaport Farmers Market. From the market, we travelled to the Westin Hotel, and on to the Via Rail Train Station. We couldn’t have asked for better weather! People came out to explore our beautiful city and we created a unique stream of photos to share with the world. Here’s a link to our photo stream of the pictures taken that day.

instawalk

Here are a few photos that were taken on the Halifax Instawalk:

Don’t know what an Instawalk is?

It’s similar to a traditional photo walk, but people are encouraged to share their photos in real time via Instagram, Twitter or Facebook using a hashtag chosen for the walk; in our case it was #instawalkHFX. Anybody with a camera is welcome – you get to meet new people, take some great photos, and have a unique stream of photos for all the world to see at the end of it!

If you want to start your own Instawalk in your city, here’s a few tips:

  1. Plan in advance. You want people to show up for the Instawalk! Get the word out a week or so ahead of time. Make posters, a Facebook page, a Twitter account – whatever you think will get people’s attention and make them want to show up for your event.
  2. Have a route. You want everybody to take roughly the same route, so drawing up a quick route in Google Maps for people is a good idea. Make the route no more than 2km.
  3. Have the walk around 2pm when the sun isn’t harsh, preferably on a weekend when people have free time.
  4. Have a meeting place for the beginning and end of the walk. Trust me, you’ll want to meet up after it’s all finished to look at everyone’s photos!
  5. Bringing extra power cords is always a good idea. By the time you’re finished many people’s phones will have low battery.
  6. Have name tags – they’re an easy way to remember everyone’s name.

Putting our Instawalk together was a snap: we made a graphic to send around Instagram, Twitter and Facebook, created a Facebook event, and put up some posters. It’s that easy – so go on and start your own Instawalk!

Here are some examples from Instawalks around the world:

Tokyo: http://statigr.am/tag/instawalktokyo/
San Francisco: http://statigr.am/tag/instawalksf/
Raleigh: http://statigr.am/tag/instawalkraleigh/
New York: http://statigr.am/tag/instawalknyc/

Etchings App Photo Contest

Original image by www.overxpsr.com

Original image by www.overxpsr.com

We want to recognize the best images made with Etchings (www.etchingsapp.com) by holding a contest on Instagram! Use the Etchings app on iPhone, iPad or iPod Touch to create amazing images and win!

 First Prize: Polaroid Z2300 10MP Digital Instant Print Camera and an 18″ print of your winning etching printed on glass by Fracture (www.fractureme.com).

Second Prize: A 14″ print of your winning etching printed on glass by Fracture.

Third Prize: A 12″ print of your winning etching printed on glass by Fracture.

 

To Enter:

1. Use the Etchings App for iPhone, iPad and iPod touch with your original photo to create an amazing image.

2. Upload your image to Instagram using your own account and include the contest hashtag #EtchingsAppContest in the caption.

3. Follow @EtchingsApp on Instagram (so you can follow the contest, see if you have won and we can contact you).

4. Enter as many images as you want during the contest period.

5. The more people who like your image on Instagram the more likely you are to win a prize.

 

Contest Dates: February 8, 2013 to February 22, 2013.

The Winner: The prizes will be awarded to the entires that best meet the criteria above and are deemed most creative by the judging panel.

Full contest details see:  The Etchings App Contest on Statigram

Etchings 1.5 – Smoother Lines Through Science

We love the images that Etchings 1.0 produces, but for some types of photos there were a few things that just didn’t feel right. Here is a sample image that Etchings 1.0 works very well on, but has a few of these odd effects.

Shuttle Launch, Etchings 1.0click to enlarge

Notice how the sky in the top right is segmented and feels almost posterized. Similarly, some of the etching lines in the lower left corner are distracting due to their abrupt ends.

Now have a look at the same image processed with Etchings 1.5. Much nicer! To achieve this look we needed to start from scratch and come up with a new way of etching. We ended up with a technique that is much more flexible and allows fine-grained control over the entire process. We can now adjust line thickness, colour, tapering, direction and density of the lines for each level of brightness.

Shuttle Launch, Etchings 1.5

We adjusted these attributes to smooth out the line transitions in the mid-tones of images to avoid a posterized appearance. We also added tapers to lines so that they don’t stop as abruptly. This eliminated a lot of artifacts in areas that had rapid brightness changes. The result is that transitions from shadows look smoother and have more depth, and photos of smooth surfaces such as glass, water, and everyday objects will have much a more natural look.

Here are some comparison shots of the top-right and bottom-left corners of our shuttle image where you can see these enhancements have changed the feel of the image significantly.

ShuttleComparison_2
On the left, the gradient in the sky is broken into three separate intensities by Etchings 1.0, producing hard lines cutting across the sky that just aren’t there in the original image. On the right you can see the results of the new smooth tapers; this follows the original image much more closely and reduces the posterization effect considerably.

Shuttle_bottomLeft1.0
On the left, the billowing plumes of exhaust there are some rapid transitions between light and dark; this is almost completely gone on the right. Also, in Etchings 1.0, some subtle noise in the original image causes speckled patterns in the etching lines. (Click on the image to see a larger version.) While we haven’t totally eliminated this effect in 1.5, the lines look much more natural throughout this area.

As a result of our new etching technique we can also start to experiment with different line styles and engraving techniques. Here is an example that uses a circular line pattern instead of waves.

IMG_5625

Pretty cool, huh? We plan on rolling out new line styles in Etchings 2.0, so stay tuned!

Downscaling Huge ALAssets Without Fear of SIGKILL

With the latest release of Etchings, we wanted to support high resolution output. This means reading high-res versions of images from the camera roll, but not blowing our memory limits if the user selects a 30MP monstrosity. We came up with a way to get a smaller version of any ALAsset without having to first uncompress the whole image into memory, and since we couldn’t find this technique anywhere online[0], we’re sharing it here.

By default, the UIImagePickerController hands you a UIImage, but since we want to control the size more closely, we have to make use of the UIImagePickerControllerReferenceURL it provides to get access to the underlying ALAsset. The asset already provides several versions of the original image:

  • A thumbnail: [asset thumbnail];
  • An aspect-correct thumbnail: [asset aspectCorrectThumbnail];
  • A full-resolution image: [[asset defaultRepresentation] fullResolutionImage];
  • An image suitable for displaying fullscreen: [[asset defaultRepresentation] fullscreenImage];

But there’s no obvious way to get an arbitrary size. There is a suggestive method named CGImageWithOptions:, which looks like it takes flags related to the desired size of the image, but if you read the docs carefully, those particular values (kCGImageSourceCreateThumbnailFromImageAlways and kCGImageSourceThumbnailMaxPixelSize) can only be passed to CGImageSourceCreateThumbnailAtIndex, not CGImageSourceCreateWith[Data|URL], which is what CGImageWithOptions: uses.

OK, so, how about dropping down a level? The aforementioned CGImageSourceCreateThumbnailAtIndex method looks like it will do exactly what we want. (Don’t let the word “thumbnail” distract you; here it just means “smaller than original resolution.”) To use this method, we just need to get a CGImageSourceRef for the asset. Normally, you’d create these from a file URL or block of raw data, but what we have is an ALAssetRepresentation.

To connect these things together, all it takes is a bit of glue code to wrap up the ALAssetReprentation as a CGDataProviderRef, and wrap that into a CGImageSourceRef. We use CGDataProviderCreateDirect, passing a small set of functions used to retrieve the image data[1]. Like so:

(This is designed to live in an existing class; you’ll also need to add the AssetsLibrary and ImageIO frameworks to your project. This code is ARC; if you need non-ARC code, just remove the two __bridge annotations.)

To test this out, we ran some experiments with a 6019×6019 image from NASA. (You know this is serious stuff because it’s from NASA.) Fully decompressed, this image uses 138 MB, which is plenty to get your app killed by the system on older devices. We ran a simple test app using the allocations instrument and looked at the dirty memory size[2] using the full-size image versus loading a thumbnailed version with the above code.

On an iPhone 5, when we load the above image at full resolution, we see a jump in our dirty memory of 138 MB, just as we’d expect. When we load the above image, requesting an image of size at most 2500×2500, we see only a 24 MB bump, which is what we were hoping.

On an iPhone 3GS, the app is immediately killed in the first case, but works just fine in the second case. Core Graphics (ImageIO in particular) is doing what we want it to do; it’s downscaling the image without first uncompressing the whole thing.

So, if you need to get an image from the Assets Library at a particular resolution, don’t load the original image first; use this code instead to avoid crashing and leaving your users wondering what happened.

[0] Though people have certainly asked. (back)

[1] We could create an NSData from the ALAssetRepresentation‘s getBytes:fromOffset:length:error: method and create a CGDataProviderRef around that, but using a callback as we do in our sample ensures that if ImageIO is smart and can decompress the image piece-by-piece that we don’t even load the entire compressed version in to memory at once. (back)

[2] I highly recommend the iOS Application Performance: Memory video from WWDC 2012 for more about dirty memory and memory usage in general. (back)

Etchings update adds new filters, improved output and iPad support

EtchingsiPadMarketingShotHalifax, Canada, December 13, 2012 — The latest version of Etchings
allows users to create even more impressive works of art from any photo. The app now emulates etching and engraving techniques even more beautifully, with richer lines, higher-resolution output and many more options to experiment with. Etchings now supports eight languages and takes full advantage of the larger screens available on iPad and iPhone 5.

The incredibly supportive Etchings user community have been vocal both in their love for the unique effects the app can create as well as the new features they wanted to see. Users asked for higher-resolution output: the new version of the app can export the original image size exactly (up to 3300×3300 px). Etchings enthusiasts wanted more options for their photos, and the latest version allows the user to fine-tune the brightness and contrast of the source image, and includes four stunning new filters.

ScreenshotWeb_1“We’ve been awed by the incredible demand for Etchings, which is why we’re very pleased
to give our loyal users just what they need to make even more amazing works of art. We’re especially happy to let our customers experience the app in their native language and on their favourite devices,” said Bill Wilson, the leader of the team behind Etchings.

In addition to the free improvements, Etchings now includes six brand-new handcrafted filters in the Florence FX Pack, which you can purchase from within the app for just $0.99 USD or local equivalent. From the soft tones of the “Alice” filter to the funky rainbow “Sorbet” filter, this pack opens up even more possibilities to amaze your Instagram followers.
Etchings 1.5 is now available worldwide on the App Store for $0.99 USD or local equivalent. Etchings is compatible with iPhone, iPad and iPod touch devices running iOS 5.0 and later.

Please visit http://www.etchingsapp.com/ for more information, screenshots and samples.

MindSea makes beautiful, integrated mobile apps. Find out how.

Toll Free: 1 (888) 390-5150
hello@mindsea.com

Contact

1668 Barrington St, Suite 400
Halifax, NS
B3J 2A2
Canada