Virtually buttonless experiences can delight but that only works when you eliminate not just the buttons but the functions as well. Imagine if Clear attempted to include even half of the functionality of power-user apps like OmniFocus and maintain a relatively buttonless interface; it’s impossible.

I agree with this, but maybe we can make buttons feel less button-y. A great example is Figure, a .99 music making app by Propellerhead (makers of Reason).

Figure is more complex than other gesturing apps like Clear. The use of buttons is necessary, yet it feels less button-y by using flat UI. But the really nice thing about Figure is the great use of animations. When you touch a flat knob button, the animations signal there is some gesturing involved to “turn” the knobs. The mix of levers, buttons and gestures that make this app really fun to play with. This is ‘The Happy Medium’ to me.

If this Figure followed the skeuomorphism theme, it would probably look more like Propellerhead’s other product, Reason. The realistic knobs feel dated and it doesn’t feel nearly as modern or fun.

[see part I]

This flat UI is a perfect solution for retina screens and increased app sizes. The developers can draw the flat UI in code, keeping the size of apps down, as well as, making it easier to upscale the app for those higher res screens. It’s also less iPhone-y, which will make the leap to an Android or Window Phone a less painful redesign.

I also find it interesting that most of these apps with the flat, colorful UIs are very gesture heavy. (Paper is also gesture heavy but not flat. There’s an acceptable small amount skeuomorphism with a greater superhuman interface) Gestures feel very modern, Apple has been good at pushing this trend. Gestures started out as an “easter egg” of sorts, allowing a user an alternate way to do the same action as a button. Instagram allows users to either double tap on the photo to “like” it or press the like button. Path allows users to swipe the left or right to expose the menu options, or press the buttons in the top left and right corner of the tab bar.

Since the release of Lion, gestures have become more common and encouraged. Users have gotten use to using simple gestures on their iPhone and iPad, so it was a natural progression to move them to the computer as well. Sometimes they mimic how we interact with real world items. The swipe to remove is like crossing something off a list.

This increased knowledge & familiarity has allowed apps to use more gestures. The absence of buttons encourages users to explore the navigation with gestures. Some apps have made the mistake of overwhelming the user with too many directions. It’s better to teach the user more complicated gestures with simple animations to indicate how to use them or that there is something more to explore.

Clear was the first that I noticed with flat UI and completely void of buttons. Although it had mixed reviews, I was extremely excited to see an app that took such a leap for something so dramatically different. Scorekeeper has been out longer, but Clear had more advanced gestures. Rechner Calculator and Bit Timer are some others that have followed.

Why I find this fascinating: In the beginning, the main problem with the touch interfaces was the flatness of the device itself. So to make users more comfortable, the interfaces started out mimicking those real world things (skeuomorphism). I think we’re finally past this, we are comfortable with these devices, maybe too comfortable. We can’t live without them. Now we must progress, get away from skeuomorphism and start doing something really new and cool. Great design was a differentiator for how apps got noticed, but now the bar has gotten way higher. We must push it and start exploring things that have never existed before.

[see part II]

I’ve had trouble finding resources that are just about mobile app design (opposed to mobile web) as it’s still a growing field of design, so I thought I would put this out there for people like me. I feel like I’ve been hording these links away for just me and my co-workers and they need to be on the web to share. So here we go..

Jenni’s big ole long list of mobile app design resources:

Blogs with tips and tricks
Bjango also @marcedwards: The best blog I have EVER found with lots of relevant articles on how to prepare your files, photoshop actions, workflows and general knowledge on the best way to do something. Marc’s twitter is also full of little tips and tricks as well. It would be wise to follow this man on twitter!

The ustwo™ Pixel Perfect Precision Handbook : A free to download (an iBook version is available) guide book of tips & tricks. “From Junior to Creative Director we’re confident there’s a process or tip that can be picked up in there! And as employers, we’d love for some of the information here to make its way into university courses as graduating students are often strong in ideas and motivation but haven’t been taught the finer details.”

Mobile Tuts: Lots of great tutorials on how to design for mobile. Explore the site and find things for programming as well. (iOS & Android). Also check out PSD Tuts and Veerle Graphic & Web Design tutorials for more design specific tutorials.

Neven Mrgan aka @nevenmrgan: You may know his work from the iphone/ipad game, The Incident. Neven is someone I follow on twitter who puts alot of thought in apps. He posts many of good resources and workflows that I admire. He’s pretty entertaining too.

Josh Clark aka @globalmoxie: I think Josh goes to just about every conference out there spreading his love of gestures and hatred of buttons. I recommend following his twitter as he live tweets from said conferences and has great links to whats out there now. He also wrote the book, Tapworthy. Josh is more a UX guy than design, but he still has good information.

Other UI designers that I follow on twitter/dribbble, they either post their work or post really great thought provoking articles (I also follow alot of other designers but I wanted to post only mobile app designers here):
@maxvoltar / dribbble.com/maxvoltar : Tim Van Damme – Instagram, formally at Gowalla

@miekd / dribbble.com/miekd: Maykel Loomans – Instagram

@JulienRenvoye / dribbble.com/Justalab: Julien Renvoye – Justalab and dribbble superstar)

@dtrinh / dribbble.com/dtrinh: Danny Trinh – Path, formally at Digg

@markjardine / dribbble.com/markjardine: Mark Jardine – Tapbots

@willw / dribbble.com/will: William Wilkinson – Everyday App

@teehanlax / dribbble.com/gteehan: Teehan+Lax – most recently, Readability (but have done TONS of things)

(and if you want to add me) @thoughtbrain / dribbble.com/thoughtbrain: I’ve designed the UI for many iPhone, iPad and Android apps.

Sites with great Mobile App UI inspiration
dribbble: Everytime a new amazingly designed app comes out, I can always find the designer on here. Also, since everything is tagged, it’s pretty easy to find other great mobile app (and other kinds) of designers. If you don’t have an invite, I suggest at least signing up cause sometimes dribbble will just give you one randomly (how I got mine).

UI Parade: If you are overwhelmed by searching on dribbble, this takes posts from there and organizes them in neat little sections (buttons, forms, icons, etc) and “parades” the best of the best.

Beautiful Pixels also @beautifulpixels: Showcases all the newest, most beautifully designed apps, UIs, websites, icons, wallpapers, etc.

Colour Bookmark: They describe it best, “Drag the Colour Bookmark link to your toolbar to find out the colour palette of the website you’re currently on. Then simply: copy, paste and use the colours you choose.”

Ultra UI also @UltraUI: A great gallery of well designed iphone, ipad and android apps, updated fairly regularly, opposed to many other sites I’ve found with all the same apps featured.

Mobile Patterns, Android App Patterns, Lovely UI and Pttrns: This is great when you need to see examples of how another app has done a screen; like user profiles, maps, forms, feeds. It helps get you started on what is out there and what they have in common that make them work.

Android Design guide: A must read for anyone designing for Android, and surprisingly easy to read (opposed to Apple’s HIG, which was updated after Android’s redesigned guide came out).

Sites with great Mobile App UI freebies/helpers
Teehan + Lax: These guys have saved every UI designers ass by painstakingly creating templates that mimic of all of the common iOS and Android elements, giving us a base to start a design mockup.

Premium Pixels: This site has a bunch of PSD freebies, which allow you to open those psds and figure out how those amazing UI elements are built. This site is what taught me how to make super crisp shadows and highlights, the perfect pressed button and gradients (something I shunned as a print designer).

Subtle Patterns: All those cool, not flashy backgrounds and textures can be found here and download. If you click on the giant thumbnail, the background of the site becomes that pattern, allowing you to see it in action better before downloading.

SliceExtractor: My co-worker showed me this AMAZING shortcut action. I’m calling it, SliceExtractor. Download it and save it in your Photoshop Presets. It saves alot of time cutting up your designs. Instructions are included in the link.

Android UI downloads from Google: straight from the horses mouth, check out the guide too. It get’s updated pretty often, which is really nice.

Actionbar: The most up to date Android UI PSD freebies aka the most difficult UI to stay up to date with. (There’s lots of old out-of-date Android PSDs out there) Plus some UI tricks for designing for Android.

The Noun Project: There are oodles of places to find icons, Meagan Fisher (@owltastic) has a great big list of them already made, but this one in particular allows you to download them for free (with CC Attribution).

Dev Rocket ($10) is a plug-in that contains a collection of actions made into a photoshop panel. “A simplified solution to working between display resolutions, breaking down full ui designs into separate elements ready for Xcode and saving for the Retina display are just a few of the awesome features DevRocket brings to iOS designers currently using Photoshop.” Definitely check out the video in the link for more info.

Mobile App design tools & prototyping software
I use both LiveView (free) and XScope ($30) for looking at my iOS designs and Android Design Preview (free) to look at android designs.

How these work: These apps provide a frame/window that you line up over your psd file as you’re designing and allow you to see the design on your device, live. Some people take screenshot, upload it to dropbox and then view it on the device, but if you need to compare which font size looks best, this is WAYYYY faster.

LiveView is super simple to use and also allows you to interact with the device. You can place the layers palette in the viewing window and press the layer on/off while showing someone your design on the device. This has also been updated to use with the iPad 3 retina screens aka the NEW iPad.

XScope has a TON of features: zooming, rulers, color picker as well as the remote viewing to the device. There are so many , it’s best to just check out the video, but this is why it’s $30 as oppose to free. These tools are also great for developers. I do not think that they have updated for the iPad 3 as of yet.

Most of the prototyping sites are in beta and require an invite, these are handy for explaining how an app flows to clients. None are perfect, but they are kinda handy. Usually you just upload your comps and apply hotspots to different areas to simulate a working app. Most of these site will give a mobile friendly link to a webpage where users can test the app.

I like these two the best so far:
Field Test App
Invision App

This one looks promising but I’m still testing it out:
Prototypes

These are others, but they don’t quite have the features the ones above have:
Mawk Mobile
Refine.io
Fluid UI
Proto.io

Le Voyage Dans La Lune (A Trip To The Moon) is a classic silent film by revered French director Georges Méliès. Released in 1902, this legendary 16-minute film is widely considered one of the most important works in film history, and the very first to use science fiction as its theme, incorporating special effects that were very state-of-the-art at the turn of the 19th century. It was loosely based on two popular novels of the time: Jules Verne’s From the Earth to the Moon and H. G. Wells The First Men In The Moon.

In 1993, a long-lost hand-painted color print, the only one known to exist, was rediscovered in Spain. It was in desperate condition, and so in 1999, two foundations—Fondation Groupama Gan and Fondation Technicolor—began the highly delicate preservation work of rescuing and digitizing the elements of the film. After many years of painstaking work, a magnificent restoration of the film was ready to be launched, allowing a 21st century audience to rediscover this major cinematic work.

Eager to put a contemporary spin on this classic silent film and reach a new audience, the foundations decided to approach AIR’s Nicolas Godin and Jean-Benoit Dunckel, to compose an original modern soundtrack, an enormous honor for French musicians, considering the film’s place in the canon of French cinema. With the aim of premiering at the 2011 Cannes Film Festival, AIR set themselves a tight deadline, locking their studio doors and working around the clock to serve these classic images with brave new sounds. Complete with a new soundtrack by AIR, the film debuted at Cannes on May 11, 2011 to immediate and unanimous acclaim.

Spurred on by their work on this short movie, AIR decided to develop the project into a full album inspired by the film. Expanding the original musical themes beyond cinematic instrumentals, the album also features the vocal talents and lyrics of Au Revoir Simone and Victoria Legrand (Beach House). The band’s lunar fascinations have been evident since the beginning of their career with the release of the seminal 1998 classic Moon Safari. Now in 2012 Nicolas and JB have returned to explore the further regions of their very unique musical “space.”

Nicolas explains: “‘A Trip to the Moon’ is undoubtedly more organic than most of our past projects. We wanted it to sound ‘handmade,’ knocked together’, a bit like Méliès’ special effects. Everything is played live … like Méliès’ film, our soundtrack is nourished by living art.”

The three producers of the restored version have agreed to let EMI release a special Limited Edition version of the AIR album Le Voyage Dans La Lune, which will be released on February 7, 2012 on Astralwerks. This will consist of the album plus a bonus DVD or digital download of the restored colorized film with AIR’s original film score, strictly limited to 70,000 global copies.

The documentary also touches on how the polaroid works and develops the photos, including close up on the gears and the slow-mo ‘how things work’ shots. I love those.

My co-worker showed me this AMAZING shortcut action. I’m calling it, SliceExtractor. Download it, save it in your Photoshop Presets > Actions folder, Load the Action in your Action Palette. And you’re set to go.

How To Use:
1) Select the layer(s) you want to slice
2) Press play on “trimmers” (I like silly names)
BAM! POW!
Your slice is extracted in a new window, including the most subtle of shadows.

This is truly the biggest time saver I’ve ever seen. Enjoy!

Little Printer lives in your front room and scours the Web on your behalf, assembling the content you care about into designed deliveries a couple of times a day.

You configure Little Printer from your phone, and there’s some great content to choose from — it’s what Little Printer delivers that makes it really special. We have an incredible group of launch partners, and in the run-up to shipping we’re working with them all on custom publications.

You can read a bit more about it on the BergCloud Blog.

**Edit**
There is an interesting article by Berg, predating the Little Printer, talking about turning receipts into ‘paper apps’.

As well as this post by Tom Taylor about microprinting.
********

(credit: @preciousforever)

iOS transition effect in slow motion from Lim Chee Aun on Vimeo.

This is screen-recorded using Quicktime Player.

Protip: This uses the ‘Toggle Slow Animations’ option in the iPhone Simulator, under the Debug menu.

**Edit**
A friend, just showed me this article, “A closer look at iPhone transition animations” with more in-depth thoughts behind the transitions.
********

(credit: ★cheeaun)

The Shrine / An Argument from Sean Pecknold on Vimeo.

Music: Fleet Foxes
Album: Helplessness Blues
Director: Sean Pecknold
Animators: Sean Pecknold & Britta Johnson
Character Illustrations: Stacey Rozich
Art Assistant: Natalie Jenkins
Producer: Aaron Ball
Multiplane: Greg Pecknold
Post/Edit : Sean Pecknold
Particle FX: Britta Johnson
AE Assist: Austin Wilson
Sound FX: Shervin Shaeri
Story: Sean Pecknold
Labels: Bella Union & Sub Pop
Made in Portland, Oregon
friendlondon.tv
Made with Dragonframe

(via my co-worker PPWalker, esquire)

(credit: ★hectocotyli)