A big part of how we teach our iOS Weekend classes is to focus on building a real-world application. The application is called Count’em Up and it contains a host of features that appear in a typical iOS application.  The version we have been using for the past 2 years is starting to show its age since Apple updated from the skeumorphic design to the newer flat design in iOS 7.  

Anticipating Flat Design

The initial design for the Count’em Up app was done during a time when everyone was speculating about how iOS apps would change in iOS 7.  Lots of rumors were swirling around about how the new look would be flat and people thought it might look very similar to the Windows Phone “Metro” UI.  With the design for the counter app we tried to go as flat as possible while still maintaining some semblance of the current iOS 6 look.  We were really happy with how it turned out. The UI was modern, sleek and felt like it pointed to the future.

As a reminder, here is what the UI for Count’em Up v1 looks like:

CounterAppImage

When iOS 7 emerged we knew the UI would need to be updated at some point.  The message from Apple was that “iOS 7 embodies the themes of deference, clarity and depth”. 

The Face Lift

This summer we have been working with our designer (O’Holloran Design) to give the app a face lift.  Today I wanted to give you a sneak peek of what the new UI is going to look like.  Here are three screen shots from Count’em Up v2.  I hope you like it as much as we do. 

CounterUpdateMock1

The first thing to notice about the update is the use of transparency.  Counters are organized into groups, and you can now set a background image for the each group of counters.  This image is then blurred behind the main user interface views to give the group a unique personality.  Here you see the Youth Soccer group “Add a Counter” view.  Notice also how the app now makes use of tint colors in more subtle ways to tie the different counter types together visually.  Previously we used strong, bold colors to indicate each counter type and carried the use of these colors throughout the interface with opaque backgrounds.
CounterUpdateMock2

The main counter list uses control of transparency levels to help each counter stand out while still letting the personality of the group (from the background image) show through.  This has the effect of unifying all the counters in a group while still making it easy to identify the individual counters.  We also moved the add button to one side and made it transparent. 

CounterUpdateMock3

Finally, we updated the slide out menu for managing counter groups.  Instead of having the menu simply slide in from the left we now animate the counter list to the side as the menu floats into place seemingly from in closer to the user.

The overall goal achieved with this UI face lift is to help the app feel more at home in iOS 7 and iOS 8.  Along the way we have used a number of new UIKit features.  We can’t wait to share this update with you during an upcoming iOS Weekend class.  It this sounds like something you would be interested in please check it out over at http://www.iosweekend.com.