Designing an Android app using Sketch 3 Designing an Android app using Sketch 3 Nov. 21st, 2014 Joe Tower
Designing Lightbomber for Android using Sketch 3

Designing an Android app using Sketch 3

November 21st, 2014

When I take off my Web Chef hat, I can be found executing design and web-related work for a small startup called Lightbomber.

Lightbomber, as a company, is two things. On one hand, it’s an iOS application that you can use to create long exposure image captures; the goal being to paint with light and capture this action in one image. On the other hand, it’s a photo booth experience business. Lightbomber will come to your special event and facilitate an experience through a specially designed, company-branded photo booth. You’ll end up with awesome pictures of you and your friends being silly.

Moving forward

To appeal to more than just iOS users, the time has come to design and build the application for Android. What a great time to be designing for Android!

Today I will be talking about designing Lightbomber for Android; highlighting platform considerations, the tools chosen to execute user interface design, and supplying a downloadable PDF of the final design.

In a follow-up post (or posts), I will dive into building the application using Polymer.

Android

Since the release of Ice Cream Sandwich (V 4.0), the vanilla stock version of Android has received a radical design overhaul. Lollipop (V 5.0) has done this once again, and pushed the bar much further. They are redefining Android as a cross-platform application solution. Rather, through using Polymer as an application foundation, the line between a device-specific native application and an in-browser application is further blurred.

Considerations: iOS versus Android

When designing for Android, especially aiming to port an existing iOS application to Android, there are a few gotchas and major considerations.

Screen resolution

Designing for iOS is a bit more straight-forward – in that, there aren’t as many screen ratios to consider or aim to accommodate. Most applications should scale perfectly fine, whether you’re using an iPhone 4, iPhone 6+, iPad Mini, or iPad Air. Apple controlling the hardware should always ensure a relatively developer-friendly approach to development and design.

With Android, Google is better than ever at also thinking about developers. Through adopting Polymer and devising the awesome Material Design guidelines, the foundational level of design aesthetic is better than ever. This is good news because let’s face it, Android has been criticized for fragmentation problems and poorly designed applications. With Lollipop, developers have little excuse for designing poor applications. Though, just because an application looks nice, doesn’t mean it functions well or is considered user-friendly.

UI Conventions

Android has an interface convention called the back button which is commonly used to navigate to a previous application/screen instance. iOS has the physical home button. Android has 3 always-present on-screen buttons – back, home, multitasking.

The difference in convention is important because you should be aware of these common patterns when thinking about your application’s design and navigation interface. Google is, after all, very much obsessed with removing the obstacles that divide browser and device. For example, an internet browser also has the back button as an interface convention.

For an iOS application, I would include a navigation back button as an interface requirement, depending on the application. For Android, I can probably skip this, as Material Design accounts for this convention.

So, given all this awesomeness, what can we, as designers, use to design our awesome new app?

Sketch 3

To get rolling with designing Lightbomber for Android, I decided to ditch the typical Adobe suite in favor of trying out Sketch 3. There has been significant pros & cons debate regarding Sketch 3. Sure, it’s still plagued with bugs, but it is quickly becoming production ready. There is a significantly lower barrier to entry in getting started with Sketch versus Adobe’s products.

For application design

Sketch undoubtedly excels at designing for user interfaces and applications. This specialty can be attributed to a few fundamental differences in how it works and how you think about using it. Or rather, maybe doing a bit of unlearning from decades of using Illustrator. Don’t get me wrong, Illustrator isn’t going anywhere. Sketch isn’t replacing the need for Illustrator. I see them existing in parallel and thriving for different reasons and project application.

These are a few of my favorite Sketch 3 features:

UI Kits / sketch resource files

Sketch has a pretty awesome community that seeks to make your life a bit easier. Community-driven UI Kits (Sketch Resource files) are a prime example of this. All the available UI kits and resources give you, as an application designer, a solid starting point.

For this project I used these:

Artboards

The way you manage artboards is very similar to Illustrator, but a bit more intuitive to interact with and manage. Creating new artboards is as easy as clicking the add/plus symbol to insert a new element onto your canvas. Moving a whole artboard is as easy as clicking and dragging the artboard name on the canvas. I’m hoping that in future releases, Bohemian Coding will take moving artboards one step further and allow you to rearrange artboards in a similar way. Maybe while moving the whole artboard, if you overlap another artboard they will swap places? Or perhaps, the order of grouped layers dictates the artboard order, left-to-right. Something like that would be nice.

Symbols

In designing an application, wouldn’t it be great if you could re-use common project interaction patterns? Symbols do just that.

Slicing for the future

My biggest pro for using Sketch 3 for designing an application is the power of the export functionality. With a few simple clicks, I can effortlessly export a single component for 1x,2x,3x, xx resolution, or the more preferable SVG scalable option. Let’s face it, the internet is no longer built on bulky and gross slices. We design smarter, and with modern awesomeness, like SVGs and sprites. Sketch makes slicing intuitive and application-friendly. Below are the start and stop capture buttons, nicely exported as transparent background PNGs.

Lightbomber - start capture buttonLightbomber - stop capture button

Lightbomber final design

Our aim for the initial application release is something like this Lightbomber Final PDF (39mb).

Screenshots:
Lightbomber screenshots

Going further

I plan to take this Android application design and build the application using Polymer. Over the next few months I will track my progress in a series of blog posts about using Polymer.

Comments