Designing Assets in a post 4.7" & 5.5" iPhone world

So I spent a great deal of time today getting my brain wrapped around the process of how to design apps for iPhones now that two new iPhone sizes are imminently available.

This asset creation thing just got really complicated. Time to go back to the basics. Everything will have to be drawn at 1x, and then scaled up at export time using a multiplier.  You need at least 3 Artboards for every screen:

    • (320 x 568) for iPhone 5 & 5s
        [At export time you have to render this at 144 PPI, or @2x]
    • (375 x 667) for iPhone 6 - 4.7"
        [At export time you have to render this at 144 PPI, or @2x]
    • (414 x 736) for iPhone 6 Plus - 5.5"
        [At export time you have to render this at 216 PPI, or @3x]

    • (Optional 320 x 480) for iPhone 4s and prior
        [At export time you have to render this at 144 PPI, or @2x]

The first item you should notice is that on the 6 Plus,  414 times 3 is not equal to 1080 (the actual resolution of the iPhone 6 Plus).  In fact, the @3x will result in an asset exported that is 1242 x 2208.  THIS IS INTENTIONAL.  iOS demands the higher resolution so that it can downscale the size. The reason for this is that a point-based @3x equivalent to a 1080p display would be 360 x 640, which is smaller than the 4.7" iPhone's pt based size.  This would be unacceptable because you would get an effectively smaller UI even though you have a larger phone.  Apple needed the display resolution to be 1080p because it's a very popular resolution for devices, video, etc, so they scaled the pt size up and are rendering this magically painful thing called a "Virtual resolution".

There's an excellent explanation over at the PaintCode Blog as well.  The only downside is they don't tell you how to structure your workflow as an interaction designer, so thats why I wrote this post.  Basically, draw 3 artboards of content at the sizes I listed above, and export to scale.

Now you might ask why you need so many artboards, but the reality is that these new render sizes result in various spacing and sizing.  The most noticeable place you can see this will be the UINavigationBar, where you will have much more space between a center logo and the back button or the rightBarButton.  I also notice it a lot in UITableViews, as they will not naturally grow in height as well as width.  For most apps this won't be a big deal, but there could be some serious consequences to the increase in whitespace for your app.

PillAware is available

I'm happy to report my latest project, PillAware, is available for iPhone and iPod touch.  You can download it on the app store today.  PillAware uses iBeacons and reminders to help you remember to take your daily pills.

PillAware is an app that is very personal to me, as I have struggled to remember to take meds daily now for several years.  Additionally, information about accuracy of taking those pills, and remembering when to order new pills has been a big effort.  Version 1 of PillAware starts to solve some of these problems.  I'm confident with future updates I will make big strides in solving everyday pill taking problems.

WWDC 2014 Predictions

Well, we're a month away from WWDC, so it's the time for exciting speculation about what's to come. This year is looking to be the year of Mac OS X updates, most notably a UI refresh to align more with the iOS products.  I'm not going to spend any time covering Mac OS, since I don't develop in that space.  However, I think there's some big potential for what's coming for iOS.

Working with iBeacons

Been working on a project that involves iBeacons as of lately.  Thought I'd share some of my notes here.

Warning: Developer lingo ahead

Discovered somewhat late in the game that you CANNOT search for any and all available iBeacons in the area.  You have to know the UUID before you can interface with an iBeacon. Thankfully, the manufacturers of these iBeacons have been using consistent UUID's and just changing their Major and Minor values of their beacons.  I've compiled a list of common UUID's, which in theory could be used to search for available Beacons.  Note: I'm not sure about each of these items, but I have verified that Estimote is correct.  If you have experience with any of these UUIDs or any that are not listed, please let me know in the comments.

Estimote: B9407F30-F5F8-466E-AFF9-25556B57FE6D

Roximity: 8DEEFBB9-F738-4297-8040-96668BB44281

Raspberry Pi: E2C56DB5-DFFB-48D2-B060-D0F5A71096E0

Android: 5A4BCFCE-174E-4BAC-A814-092E77F6B7E5

ETL: 74278BDA-B644-4520-8F0C-720EAF059935

Dice Tracker for iPad update

earlybird_1261.png

I recently finalized an update to Dice Tracker for iPad, and it's on its way.  The interface and interactions have changed slightly, and the visuals are now more aligned with iOS7.  I added some indicators for alternate dice modes, and also included a "stack" counter for both of the stack dice modes.

Another big update is that all the features of the app will be free going forward.  No more in-app purchases.

I'll post note once the update is live in the app store.

[UPDATE]: Just received app store approval, and it should be live in the App Store later tonight (February 19, 2014).

Working through the hurdles of iOS7

Been busy lately working through some design considerations for iOS7.  I can't get into great detail about the inner workings of the updates, but overall the design process is radically different for the latest version of iOS. The above image is a small glimpse of what I'm thinking about designing for the next Dice Tracker update (which will be iOS7 centric)

I think the biggest change is the visual impact that iOS7 apps have.  I am curious to see how many developers follow suit and change their apps to match the latest style, but I'm guessing a lot of big apps may retain design guidelines of versions past.  The minimalist UI works well for some experiences, but the lack of texture and visual direction (for example, the lack of borders around buttons) is going to be a major challenge for apps that target broad audiences.  

Let me be clear though, I don't think iOS7 will fail.  I'm just not sure if that style will be applied as broadly as Apple was hoping it would.

Thankfully, the update is not skin deep.  Apple has added lots of new APIs, and lots of new features are now available to developers that were not available before.  It's an exciting time indeed.

Designing App Icons

Your app's icon is quite possibly the most important design element in your app experience.  If your app icon doesn't attract the eye, and set the right impression, you won't get people to download and explore the features that your app offers.  There are a few trends I've seen lately with app icon design.  In particular, I've noticed that designers are making things more 3D.  I'll show you how to do that and much more below.

Working on a new blog

earlybird_724.jpg

My friend @SamKligerman and I are working on bringing a new blog to the internet that combines web design and mobile app design topics into one place.

The new URL will be www.verticalaligncenter.com, and is also hosted by Squarespace.  I've already added a few blog posts, and we're just working through the issues of formatting, the about page, and other content we want to have.

So feel free to check it out!

www.VerticalAlignCenter.com

Dice Tracker for iPhone Update

Hey there dice fans,

iOS Simulator Screen shot Mar 5, 2013 11.24.33 AM.png

I just uploaded version 1.01 of Dice Tracker for iPhone, and with it comes the Manual Dice tracking enhancement.  

Just like the iPad version, you can access manual dice tracking from the dice settings area.  When you select that option and return to the dice rolling screen, you'll see the updated layout with the options to enter individual dice totals.  To exit that mode, just touch the dice settings button and select the dice type you want to proceed with.

Additional enhancements include:

• Updated dice rolling engine to compensate for Modal Bias. (wasn't a significant problem anyway, but this update definitely corrects for any possible problem)
• Updated a bug where the flat distribution formula for calculating deltas was producing abnormalities.
• General performance enhancements.

Enjoy!

UPDATED 3/12/13: Apple has Approved the update and 1.01 should be available to all devices starting today.

Vector Tutorials

So lately my favorite thing to do has been scour the web for neat designs, and try to figure out a way to recreate them in Illustrator format.  Sometimes the result looks good, sometimes not so much.  Today I had a step by step helper tutorial, and it was mega fun.

Lots of designers are what I call "painters" who make things in Photoshop using a wide array of tools that Photoshop has to offer.  While that's terrific, and I even dabble in Photoshop myself from time to time, I feel the real power of design can be harnessed through vector illustration.

Today's find was a tutorial on how to do a vector security seal - see link

earlybird_691.jpg

I really like the effect that this tutorial creates.  First of all, the attention to detail is fantastic, and ultimately the design really creates a sense of worth to it.  

Only downside I see is that I rarely have use for this level of macro detail, but I could make great use out of some of the patterns this provided.

Dice Tracker for iPhone Submitted!

Hey there UI fans,

Yesterday I uploaded the binary file for Dice Tracker for iPhone.  If the past wait times are still true, we should see it on the app store in about a week.

Dice Tracker for iPhone

The iPhone version is going to cost $0.99 in the app store (I can hear you groaning through the website) and tier 1 pricing throughout the world.  The reason for this is that the iPad version has had quite a few downloads, but almost no one has bought the in-app purchase.  So I'm going to try and make a buck or two this way instead.

For your 99¢, you're going to get a much improved experience, minus one big omission (I'll get to that next).  The improved experience is that Dice Tracker for iPhone supports both portrait and landscape orientations.  You can only roll dice in the portait orientation, and the landscape orientation offers a super-cool interactive explorable graph of your dice distribution.  Also, for your 99¢ you get all of the dice distributions that were locked behind the in-app purchase before.

The big omission left out of the iPhone version is the ability to track real life dice.  There's just not enough screen real-estate to do this on the iPhone (which is why I built the iPad version first).  The iPad version is going to continue to be free, so if this is really something you need to do, get an iPad!  I think the entire experience is a little better on the iPad anyway.

So I'll let everyone know when this bad boy has gone live in the app store.  Happy dice throws!

EDIT - 3/2/2013

Apple has approved Dice Tracker for iPhone and it is currently available on the App Store!

Link to iTunes

Aruba

Just got back from an awesome week in Aruba.  It was my first time to Aruba, and this trip showed me what I've been missing.

earlybird_682.jpg
earlybird_681.jpg

My friend @SamKligerman helped me make this awesome lizard sand thing.  We made a bunch of different sand constructions during the week we were there.  The first one was a huge pair of feet for us to put our actual feet in for pictures.  The next day was this lizard, followed by some pyramids.  Ironically, the pyramids were the hardest to perfect, since they're a geometric shape and we didn't have anything larger than a flip-flop to smooth things out with.  This is what happens when you get two designers on a beach.

Most of the time we just hung out on the beach, went swimming, and sat by the pool.  I'll leave you with an awesome picture of Sam and I jumping into the ocean.

earlybird_683.jpg

Dice Tracker

It's been a week and a half since my last post.  I've been very busy.  The weekend before my last post, I was playing a game of Settlers of Catan with my friends.  I've played the iOS version many times, and I have grown quite fond of the chart feature they include as a part of the game that shows how many rolls there have been of specific totals of dice.

dicetracker_HugeAppIcon copy 2.png

You see, in Catan you place houses at the intersections of hex pieces, and every time the number on a hex next to your house gets rolled, you get resources.  It's a really brilliant game design, and my hat goes off to the people at Mayfair games.  It really is terrific.  I started playing an iOS knockoff of the game called Kolonists back when iPhone apps first came out.  Same concept, terrible execution.  Then I found out some of my close friends actually played the real game that the terrible iOS knockoff was based on.  Thats when I got hooked.  I downloaded the actual "Settlers of Catan" iOS app and played it like a thousand times.  It was terrific.

Anyway, enough backstory.  I was playing with my friends, and I severely missed the ability to see how many rolls had been made of the specific totals.  So I decided to do something about it.  Originally the app's name was Catanion (like companion, but with Catan, clever I know...) Once I built the app I realized that people that play all types of dice and board games could be interested in this app, so I made it more generic.  The hex background is definitely Catan inspired, however.

I started the project because I have been running into some severe roadblocks with my tower defense game lately, and I really want to get something on the App store so I can beat my chest and say "I'm a real man" er... developer.  Anyway, this concept seemed simple enough at the time, and the existing offerings on the app store are TERRIBLE.  A week and a half later and its on its way to approval.

I'll let everyone know on here when the app gets the go ahead, until then, keep your fingers crossed the Apple folks don't decide to lay the hammer down on me :-)

UPDATE:  The app is live in the iPad app store! Download away!

Isometric Design

So I just finished this awesome illustration of a McDonald's restaurant.  I finished it using Adobe Illustrator, and I patterned many of the objects off of various isometric building animations I have seen over the interwebs.  I've discovered two things: one, Adobe really needs to improve their perspective grid to offer an isometric version (or if they have it already, I couldn't find it) and two, it's extremely tedious work to create this type of a drawing.

McD-01.png

I'm using the graphic as a header banner for my McDonald's web portfolio page.  I wanted to have something that really captures viewer attention and conveys a soft sense of the sort of work I do for McDonald's, which is typically preparing presentation materials and telling a larger story that involves user interface.

I think my next one of these may be a drawing of my house like this.  I really like they style, and I wish I had more opportunities to create this in my day to day work.

Finally Got It Framed

DSC05732.jpg
DSC05733.jpg

I had been holding onto this poster since late June of 2011.  When I ordered it from Naplab, I had this image in my head that I would just throw it up on the wall and it would magically stick.  I found out shortly after I received it that this was not the case at all.  The poster was too heavy to use poster tape, and plus it curled enough from being in a tube that you'd need something stiff and clear on top of it anyway.  So I shoved the poster away in a closet and forgot about it.

Fast forward to November 2012,  my friend @samkligerman and I are at an IndyUX meetup with some fellow designers. We see this poster hanging up on the wall at the Speakeasy, which is a design incubator here in Indianapolis.  Sam made a comment to me that he has the poster at home in a tube because he never found an efficient way to hang it up on the wall.  "Funny, I have a similar story", I said.

I didn't think much about it, but Sam's on a big kick to get stuff done before his baby gets here in April (congrats btw) and about a week later Sam texts me that he found a plastic supplier for a piece of acrylic.  So we split the cost on a big piece of Acrylic cut in half, and I get busy doing what I do best... making a solution out of the misc. parts and pieces I have in front of me.

The frame is made from 2 separate 2"x1"x10' poplar pieces I bought at Lowes.  I took a table saw to the 1" side and cut a 3/8" groove for the poster, acrylic, and backboard to go into.  Then I just had to cut the pieces with a radial saw at the proper length, brad nail them together, and voila, we have a poster.  The construction didn't leave much to hang it with, but it turned out that mirror hanging hardware worked just right with the size groove I had on the back.

I used a dark stain to match the wood in my office, and put two coats of polyurethane on it to smooth it up and protect the finish.

I'm pretty happy with the final result.

Making the New Year better

With CES 2013 underway, its easy to see that digital interface design is going to be a huge industry this year.  Many companies are using touch interactions on both large screens and small to captivate their clients.  What many of these products use are sideshows created from R&D software, booted up for a tradeshow experience.  Very few use tried and true software with actual interaction design expertise and experience applied to it.

So here's my challenge to companies demoing new products this year.  Create an experience that people are actually going to use.  Many of these products are neat, convincing, useful, etc... but fail to get off the ground because not enough thought was put into their UI.  Lets change that.  Together.

The need for a Passbook style app for Sandwich shops

I have a pet peeve for the sandwich shop industry.  Each time I order my sandwich, I have to go through the same rigamarole of telling the cashier what sandwich I want, that I want it on wheat bread, that I don't want tomato, and I want yellow mustard instead of their nasty spicy mustard.  This whole system is prone for error, as today I got a sandwich on white bread (which was surprisingly delicious).

Enter technology - what if I could just scan in my frequent flyer card at Firehouse subs and my previous order is automatically populated to the screen.  This could be done with old fashioned plastic cards, HID cards, QR codes, Passbook, or even facial recognition.  No more yelling over the crowd or racking my brain to figure out what else I forgot to mention.  Bam --> sandwich.  Just like it ought to be.

Sandwich people, you know who you are.  Make this happen.

iPad Minnnnay!

Just got an iPad mini last month, and I LOVE it.

I'm not a big fan of the original iPad.  My wife has had it since the iPad 2 came out, and she's frequently not using it, so I've had plenty of time to use it myself.  I never found myself reaching for it.  It was just too big.  I mostly read books from my tablet (I had a Kindle Fire before I bought my iPad Mini).  My reading occurs at night, in bed next to my wife.  She's asleep, so I can't turn the lights on.  I actually have to turn the tablet down to the lowest possible brightness setting to keep from going blind in the middle of the night usually.  With the full sized iPad, i'd have to hold it with two hands, and even then my arms would get tired after 20-30 mins of holding it.

Enter the iPad mini.  It's shockingly light, and the size is spot on for most of the interactions you do with an iPad.  I know, I know, it doesn't have the Retina display, but its still very readable.  The Kindle app is completely unphased by the lack of Retina support.  I'll admit the web browsing experience suffers, but even that is manageable on most sites.  I certainly wouldn't trade that for the weight though.  It's so quick to pick up, and it feels solid enough to hold tight.  The proof is in how much reading I've done lately.  Last month I read 3 books, all on the Mini.  Two John Grisham books (the Litigators, and the Racketeer, which I recommend just the Litigators) and 50 Shades of Grey.  Just last week I read one more book by the world's greatest Sci-Fi author, Hugh Howey (Second Shift).

Also battery life is excellent, and if you're in the lightning connector camp with an iPhone 5, you'll appreciate the universal connector (and how easy it is to use).

Anyway, enough with the praise.  Go get an iPad mini.

Interactivity at Disney

This week my family and I are at Walt Disney World in Orlando Florida.  We've done this trip many times before, and it always amazes me the level of interactivity and user interface that a typical visitor encounters at Disney.

earlybird_645.jpg

This year we rode on the new and improved Test Track ride, which has been completely redone (they said we were there on opening day)  To make your wait time more bearable, they have riders design a car at a kiosk while waiting in line, and then the car you design continues to show up throughout the ride experience.  The ride doesn't change based on the car you select, but it is fun to see the experience customized a little bit to acknowledge you are there.  The users take the car with them by scanning in an HID badge, and then scanning their badge in at various locations throughout the experience.  During the ride your car's "stats" are compared against the test car that you are riding in.

The system worked for me rather well, although my fellow riders could not seem to get their car to show up during the ride.  The interactivity area at the end seemed to have several glitches, especially with the "racing" kiosk.  I would scan my badge in, but nothing seemed to happen.  Then I moved on to another station to see if it was working, all the way around this racing pit.  Eventually 5 version of my car showed up on the screen, but by that time I was already moving onto another activity.  I bet a few lines of code could fix most of those problems.

I'm also a huge fan of the Buzz Lightyear Space Ranger spin.  On this ride, you zap targets throughout the ride, and your score is tabulated on your space ranger vehicle.  I didn't do as well as my father this year, but nevertheless it is a ton of fun.  I would like to see them add some sounds to that ride so you know when you've successfully pulled the trigger on your zapper.

Anyway, Disney is far improved from my childhood, and every year it seems to get better with additional interactivity.