And it feels a bit more futuristic than the old nav-bars-of-square-buttons, in a Minority Report/Google Glass sort of way. Eventually, there might be a bunch of buttons hovering over our field of vision, on our car windshields, eyeglasses, wherever. This simulates that heads-up display effect.
Trends subside with time: new ones come out and gain traction, old ones re-surface with refreshed implementations. In the past few months, there seems to be a comeback of fun, entertaining pull-to-refresh animations after Apple’s default take with iOS 6. Two examples: Twitterrific 5 and the just-released Twitter Music.
The iOS ecosystem is now mature enough that we can recognize specific design patterns evolving and changing with time. I agree with Dan’s conclusion.
The central design metaphor that Duarte and the team eventually landed on was one he’d used before in webOS: cards. The cards in Google Now also show up in Google search, when it displays “Knowledge Graph” results on the web. In both cases, cards seem to represent the information Google gives you directly instead of through a list of blue links. Cards are like a digital equivalent to the traditional architectural concept of marrying form and function — so that the way a thing looks is inseparable from what the thing is. “These are objects,” Duarte says, “They feel, not necessarily real, but they feel virtual. They’re not trying to be fake things, not … fake leather, fake wood, fake brushed aluminum.”
Right now, I can count three Google apps on my Home screen: Chrome, Gmail, and Google Maps. I’ve always been a fan of Google’s Search app — the one that was actually well designed and intuitive before Google started redesigning its other apps — but I keep that on my second screen.
I like the design choices Google made in the past months, but I primarily use Google’s new apps for another reason: they work better than Apple’s apps for me. It takes seconds for Google Chrome to sync a bookmark or an open tab; I wish I could say the same for Safari and iCloud. Google Maps works better than Apple Maps in my area. The Gmail app isn’t perfect, but it makes going through Gmail faster than dealing with Apple’s Mail app.
It used to be that if you liked Google’s apps more than Apple’s ones and if you relied heavily on Google services, then you should have considered switching to Android. But I don’t want to switch to Android: I use some Google web services, but I like Apple devices and iOS for everything else. The iOS third-party ecosystem is thriving and a source of continuous inspiration and workflow improvements. iOS is my platform of choice, but Google is behind many of the services that I prefer.
For this reason, I’m glad Google found its design voice on iOS.
Consider walking down a candy aisle at a drugstore. If you have a craving for Reese’s Peanut Butter Cups, you know how to find it. Of course, it’s the bright orange wrapper with a bubbly yellow word on it. Instant. Most candy bars have very distinct brands which can be instantly recognizable at a glance of the entire aisle. This should be precisely how you approach your app icon design.
An ideal app icon reminds users of an app through shape, color, and texture. Take the Phone icon, for instance. It has evolved a tiny bit since Steve introduced it in 2007, but has remained mostly the same. Today, it is a bright green, with diagonal stripes, and a white phone symbol. These three elements together (read: by our powers combined) form an instantly recognizable mark for users. When a user needs to use the phone, it’s a no-brainer.
I may have argued in the past that the iOS Home screen needs improvements, but I would never argue against a well designed icon. I use Alfred on my Mac to launch apps, but I also rely on the dock to quickly reach out to an app and make it visible. On iOS, I rely less on Spotlight (though I use it regularly) and I value the “recognizability” of icons in the Home screen.
Read Louie’s post about app icons here. His suggestions for new Zappos, Amazon, and Apple icons look great.
Craig Dennis on area of app design that gets often overlooked:
Empty states are places in apps that have no content or data. They are empty. A blank page. Traditionally empty states are overlooked as most designers focus on how best to display lots of content or data. It’s common for empty states to be dealt with by developers as they are often caused by exceptions (such as no internet connection). They often write the copy and as a result it can be a little difficult to understand or it is left with the basic styles. Not the best combination. It should be logged as something that needs designing but that doesn’t always happen.
It gets even worse with apps that deal with errors through text that isn’t localized. In fact, I’d argue that proper localization is another aspect of the app economy that shouldn’t be underestimated anymore (as if it ever could be): with apps available in more than 150 countries, designing for the US market alone is a foolish assumption (unless, of course, an app’s only market is in the US — which is the case with many online services these days).
Empty states can be useful and provide context. Whether it’s a way to instruct users on how to get articles into a read-later app or a cute illustration with a link to How-To pages, empty states should find a balance between their lack of content and presenting on-screen guides.
Twelve Twenty, the Dutch maker of the print-size checking OS X app Will It Fit and the iOS calendaring tool Get Together, recently published their third app, Uberlayer. Uberlayer is a small tool for UI and web designers on Mac OS X to quickly overlay images of a new design work onto your desktop.
Let’s say you just designed a mockup of an update to an existing website or application. Drop it onto Uberlayer to bring it on the screen. Using shortcuts you can move it around in pixel steps, make it more or less transparent, and activate click-through options. If you make the design half-transparent and you have the current version of an app or website just behind it, you can easily check how the current design changes will affect the overall look of the whole product. Using the click-through option, it’s easy to select certain parts you want to change to copy or delete them in the “real” version of your product.
I tried Uberlayer on my personal website by trying out a different style for an ad I currently have on it. This is what a half transparent “uberlayed” image looks like:
It’s actually pretty hard to describe how the app works using only words and pictures. If you’re curious, I recommend you head over the Twelve Twenty website and check out their Uberlayer demo video. I think Uberlayer can be a useful tool in a web or application designer’s workflow. Uberlayer is $1.99 on the Mac App Store.
Speaking at the British Embassy’s Creative Summit., Apple’s SVP of Industrial Design Jonathan Ive shared his thoughts on the company’s design process and focus on making better products.
We are really pleased with our revenues but our goal isn’t to make money. It sounds a little flippant, but it’s the truth. Our goal and what makes us excited is to make great products. If we are successful people will like them and if we are operationally competent, we will make money.
What I love about the creative process, and this may sound naive, but it is this idea that one day there is no idea, and no solution, but then the next day there is an idea. I find that incredibly exciting and conceptually actually remarkable.
Thomas Brand has published a detailed overview of Apple’s past skeuomorphic designs in applications for classic Mac OS and OS X. As he notes, the trend towards designing apps that resemble real-life objects didn’t start with iOS at all.
As time progressed, the Aqua interface has evolved to reflect the changes in Apple hardware. Gone are the over the top transparencies, deep drop shadows, and distracting pinstripes. Subtle grays, mute reflections, and soft gradients now fill the retina displays of Apple’s latest portables. Some might say that Aqua is not a skeuomorphic interface because it does not resemble a specific real world object. To them I say Aqua is a mirror reflecting back the design decisions that have made Apple’s hardware so appealing over the last 10 years.
In his article, Thomas mentions old software such as Sherlock, the Appearance Manager of Mac OS 8, Apple CD Audio Player, and the Classic Calculator that Steve Jobs famously designed himself with a “build your own” kit created by a former Apple engineer. iOS may not have reinvented skeuomorphism in software per sè, but it surely gave this way of designing apps a whole new meaning and set of interactions thanks to screen constraints and multi-touch.
Check out Egg Freckles’ article for the full list of apps that influenced Apple’s skeuomorphic interfaces.
Spotify for iPad, released this morning, is a beautiful app. It’s solid, providing fast and reliable access to Spotify’s huge catalogue of songs and artists, and it presents content inside a great-looking package that, as I’ve already written, reminds me of Reeder’s sepia tones.
What follows is a brief examination of the app’s interface and functionalities. I have been using Rdio to completely fill my music listening needs for the past six months, but I was looking forward to trying Spotify for iPad to give it a fair shot. (more…)
It has become a tradition for design studio Teehan+Lax — the minds behind beautifully designed software like Readability for iOS — to release a free iOS GUI PSD on every major iOS or device release from Apple. The PSDs, downloaded millions of times in the past few years, have helped designers and developers mock up their apps and iOS designs using Photoshop, while relying on graphic assets that look just like interface elements and controls of iPhones and iPads.
Today, Teehan+Lax released its updated iPad GUI PSD, updated for the Retina display:
We’re really proud to be releasing our latest version today. It’s based on iOS 5.1 and includes hundreds of retina assets available natively on the platform. In addition to the GUI assets, you’ll find perfectly scaled ‘New’ iPads to help you create the apps we’ll come to love in the future.
This time, the file has been made for Adobe Photoshop CS6, which is available for free while in beta. Weighing at 35MB, you can download the iPad GUI PSD here.
