Before the iPhone came out, phones looked like this:

Different shapes and sizes. Flip phones and sliders. Candybars and decks of cards. Lots of hardware buttons. A hundred takes on the D-pad. A small screen (or two). This is what mobile phones looked like from the time I bought my first in the late 90s till early 2007.

But since the iPhone debuted, they all look like this:

They're all rectangular with a screen that fills up nearly the whole front face of the phone. Some still have physical keyboards, but that's a vestigial tail that will certainly fall off at some point in the future. All have only a few hardware buttons. All have nearly the same dimensional proportions. All have nearly the same thickness, give or take some tenths of an inch. All have nearly the same weight and feel in your hand.

Why is this?

Because the future of mobile hardware design is for it to fade away completely and have the focus be the OS and apps it runs.

Nokia's Windows Phone 7 Concept

Engadget recently posted a concept design showing a new Nokia phone that would run Windows Phone 7. Predictably, it looks like an iPhone and every other smartphone that's been manufactured in the past year or two: rectangular, a huge screen, small outside bezel, thin.

It looks good, or, I should say, the tiny amount of surface area not dedicated to the screen looks good. It will probably feel good in a person's hand, but what phones don't feel good in a person's hand nowadays? They all do, because they're all designed to look the same. They're all designed to look like the iPhone. A glowing rectangle surrounded by a thin strip of material that sends data to the rectangle.

The Future Of Mobile Hardware Design

I've looked into the future and have seen what mobile devices will soon look like. I know, it sounds impossible, but here it is.

All screen, no bezel, no chrome, just interface.

Look at the mobile hardware trends in the last few years: the screens are staying about the same size but the hardware around them is shrinking. Thinner phones, thinner bezels, more focus on the screen. At some point in the future all we'll have is the screen and the software that it's running because that's all that matters.

The iPhone started the trend of the focus being on the software. Your phone becomes the app that it's running. How many people focus intently on the bezel around the screen while they're using their phone? No one does. You stare at the screen. As technology advances and miniaturizes, everything will get faster and smaller. The hardware will fade away and software will be the only thing people care about.

And it's all because of the iPhone.

Your app has too many settings, too many things to tweak. API endpoints? Colors of the rainbow? 100 different fonts and font sizes? Temperature in Kelvin? Switch the app to use Esperanto?

Kill the settings, kill them all.

Your Vision Is Your Software

You're the developer, build what you want. Your app should be an expression of your opinions. Jason Fried from 37signals shares this thought as well. Here's what he had to say in his first book Getting Real:

Some people argue software should be agnostic. They say it's arrogant for developers to limit features or ignore feature requests. They say software should always be as flexible as possible.

We think that's bullshit. The best software has a vision. The best software takes sides. When someone uses software, they're not just looking for features, they're looking for an approach. They're looking for a vision. Decide what your vision is and run with it.

And remember, if they don't like your vision there are plenty of other visions out there for people. Don't go chasing people you'll never make happy.

His company has made millions of dollars leaving out the fluff that others love to include. They built their first application Basecamp to satisfy their own needs and left out the features they didn't think were important. Jason considers his team software curators, continually trimming and editing features down to their essence. They build opinionated software.

Trim The Fat

If there's a choice between setting a value to A or B, and you always choose A, why not just make A the main, unsettable, unchangeable choice? If you think A is the best decision, why even let people choose B? Well, in App Store land, people like to whine about B. They'll post 1-star reviews asking when B will exist and say that they'll bump it up to a 5-star review when B is implemented. Others will see that review and ask about C, or D, because they think those are equally important.

This is all bullshit.

You're the developer. Everything is up to you. Apple doesn't listen to users and they're the most successful technology company in the world. They have a fearless leader who's not afraid to piss people off by removing floppy drives or buttons on a mouse. He's not afraid to scrap successful, acclaimed products and start over from the ground up. He builds what he wants because he knows he's building great stuff. That's what you should do, too.

Recently, Iconfactory announced that they're rewriting and rethinking their flagship Twitter application, Twitterrific:

The previous design ended up being overwhelming for normal users (and even some experienced ones) and became very confusing for people with multiple accounts since it was unclear which account was performing a search or looking at trending topics. There were also three different areas to set preferences and many of the options in the preferences were unnecessary and confusing to most users so they were avoided or left to defaults anyhow. So we took a leap and removed the preferences completely, only adding them back in when we found something that absolutely needed it.

Here's a comparison screenshot between the old Settings options and the new, completely slimmed-down version. They gutted their Settings; they're nearly gone. This takes a lot of guts and you can only do this if you really know what kind of software you want to build. You've gotta have the big picture in your head and you have to know where you won't compromise. Inevitably some power users may be upset but the Iconfactory is looking at the overall user experience and that matters more than what some tech bloggers think.

Power Users Don't Matter, Build For The Masses

Feature lists and pages of settings get a small segment of power users excited, not regular users. Regular users want elegant, smart software that just works right without having to fiddle with any additional settings. A perfect example is multitasking in Android vs. iOS 4.0. Apple waited to introduce multitasking because they didn't want to build a system where background apps drain the battery. Compare this to Android: just a few weeks ago Larry Page said that some background apps will drain your battery if you let them. Multitasking in Android was built solely for power users who are expected to force-quit apps and manage their phone's radios in order to maximize battery life. (Here are 20 tips to improve an HTC Evo's battery life.) Jobs made the call to build multitasking the way he saw fit, not the way the tinkerers and phone hackers wanted.

Don't compromise your vision, don't compromise your opinion. If you think 12px font looks best in an interface, don't allow people to move it to 10px. If you could never picture yourself changing a setting to anything else but A, don't even give the option to change it to B. Just don't do it. Build software for you. There are many, many people out there just like you who will appreciate it.

Build what you want.

Our last roundup included the best designed apps of the year 2009. Well 2010 is almost finishing its first quarter, and we already have a few apps showcasing some amazing work. Time to dig in… Here, File File! A way to remotely access all your files on all your Macs, Here File brings in wood finish, dark textures, and vibrant icons, designed by Adam Wulf, also its developer. The icon however has been made by Sebastiaan de With, the story of which has been told here. Quoting from Brandon’s review: You set up a server on your Mac that runs in the menu bar, and you can get your IP address that you need from there. I love how the iPhone app will show your specific model of Macintosh and the actual wallpaper you have on it. It’s totally unnecessary, but it’s the icing on the cake of an already great package. The first tab in the app starts at the root directory of your hard disk, and you can drill all the way down to get plist files in the library if you need them.

Billings Launched in the first week of 2010, Billings Touch is a sign that everything’s going to be beautiful in 2010. Designed by Brandon Walkin, Billings Touch is a mixture of simple, beautiful, and powerful. You can time your work, manage expenses, and keep track of all your clients and projects on your iPhone. The client is a free download, but you need to shell out $15 for invoicing and sync capabilities.

TaskPaper Good is as little design as possible. Or something like that. Jesse Grosjean has been heading the minimal camp for years now—with Writeroom and TaskPaper on the Mac—and has brought his simple to look at but powerful to use task manager to the iPhone. Enter tasks as simple lists and have them sync over to your desktop over the air, using the SimpleText.ws service.

Vlingo 2.0 The jury is still out on Vlingo. On one hand I just love its vibrant background and excellent typography. But on the other hand, there’s too much clutter on the screen for a speech to text converter. It’s free though, so it can’t hurt to try it out.

Bills Kind of the reverse of financial tracking apps, Bills let’s you keep track of bills you need to pay. It could be a monthly gym membership, or your credit card, and even access it via a web browser. Bills will then notify you via Push notifications when payments are due, so you don’t get locked out of your building for forgetting to pay the rent. In terms of pixels, Bills comes with a brown wood finish, with vibrant shiny labels on the dashboard, and general indescribable UI goodness throughout. $2.99 at the App Store.

Reportage A new way to interact with Twitter, Reportage lets you ‘tune in’ to specific Twitter feeds, mimicking a radio tuner. Granted it’s not a 2010 app (what is doing here then!) but it’s new to me. Reportage has got some really well placed pixels. The pulsing loading bar, the sharp profile screen, the grid of user icons, the timeline of tweets; it’s all done to perfection. And even apart from its gorgeous looks, it’s actually a useful app to keep track of some special twitter feeds. I’m still trying to understand the app for what it is, and will soon have my proper review up on SA. Till then, it’s $2.99 at the App Store.

Cinema Times We’ve already been spoilt by Movies Now! by Kodagu, when another local movie listing app shows up with some stunning pixel treatment. Before you say anything, yes, it’s been designed by Iconlicious, and I suspect Marcelo Marfil had a large part to play in this. Everything from the tab bar, to the tabs, are custom, yet feel completely at home on the iPhone. There is one caveat to this app however—it’s currently only available in the UK store, and is UK specific.

Attic The most beautiful way to catch up with music you haven’t paid attention to. Attic automatically pulls your least played tracks from the iPod library, and allows you to play the album by dragging its disc into the slot. So fucking cute. The design has been a joint venture between David Ross of Tapku Software, and Taptivate. At just $0.99, it’s quite an experience, even if it’s not going to be an app you launch every day.

Flickit Pro Mike Bernardo has taken his free Flickit app, which was just cute Flickr uploader, and transformed it into a full blown app that rivals even Flickr’s own application. A beautiful tiled dark background makes images pop out of the screen. Bernardo has implemented some amazing ways to browse images, his list view is like nothing I’ve seen before, and I couldn’t recommend it enough. Read Brandon’s review, if you want to know what it’s all about.

Headquarters for Basecamp Basecamp users are gonna love this. Another dark UI, much like the Squarespace iPhone app, Headquarters brings with it a major part of Basecamp’s functionality. We’re still evaluating it against other apps (Outpost for instance supports offline access while Headquaters does not), but in terms of pure UI goodness, Headquarters is without question the winner of the Basecamp apps.

Seen any new apps we might have missed? You can always email us at our ‘anything email address‘.

The underlying secret to beautiful user interface design is realism: making 2D objects on your screen appear to sit in 3D space with volume, surface properties and undulations that might appear in real life. These faux 3D objects have highlights and shadows just like objects on your desk might have, and they have textures that emulate real objects from glass to sandpaper and everything in between. Designing beautiful user interfaces has more to do with the why than the how.

Thinking in 3D

If you're trying to design a realistic-looking user interface element then you have to think about what that object would look like in the real world. What's the easiest way to do that? Look at it from the side. What would a button look like if you viewed it from the side of your monitor? Let's take a look.

Here's a button-shaped panel that's designed to look slightly raised and have a matte surface. It's thin, has a subtle convex shape, and has a small edge that goes around the outside. In a 3D space, the light source would illuminate the edges (slightly brighter on the topmost edge) and would not fully illuminate the bottom slope of the panel past the apex. The object would cast a small shadow since it's not raised off the surface very much.

Pastebot, the new app from Tapbots, has a table view filled with panels that look similar to the one from above. Let's see what it'd look like with multiple panels next to each other.

This looks like a realistic series of panels because of the Top Edge Highlight up against the Inset Shadow which, from the side, would look like this: <. The Inset Shadow appears because the light source does not illuminate that area but then the next panel starts and pokes out, catching the light and showing a highlight.

Design elements that we think look great are usually the ones that look the most realistic, as if they could be in front of us on our desk or on the wall. Paying close attention to how light would strike the object as if it were real is crucial to executing a realistic user interface element.

Designing The Material & Surface

In my internet globe icon tutorial I stressed the impact an object's material has on its overall look. Not accustomed to thinking about an object's material? Get used to it! It adds a new dimension to your design and keeps the object's realism in the front of your mind. If you're designing an interface element and can't immediately name what type of material you're emulating then how can you execute it with perfect realism?

I recently linked to some beautiful Dock replacements for your Mac and many of these illustrate how important the material is to your overall design. In one named Phantom the designer uses two different materials to make the Dock: a textured, grainy surface coupled with a semi-transparent glass edge. The textured surface seems like the back of a notebook pad or a heavily-used wallet whereas the front edge looks like a clear, solid block of lucite.

Apple has been using shiny, gloss-laden user interface elements in Mac OS X for awhile but recently there has been some chatter that they were gearing up for a total interface refresh using matte elements. This full refresh never happened but matte interface elements have been steadily making their way into Mac OS X for a number of years.

With the latest version of iTunes, many user interface elements like scrollbar sliders and buttons have been given the updated, matte look.

Apple's also been using the matte look in some of their Pro software, most notably Final Cut Server. In that application's interface, Apple's removed the gloss from nearly everything and kept convex buttons close to flat with only a slight highlight on the edge. Also, the icons on buttons are not set into the button (accomplished via a thin, white drop shadow on the bottom, a style used throughout Mac OS X) but instead sit on top of the button through the use of a dark drop shadow on the icon. The entire interface pane is slightly raised and looks like dark, textured steel, making the application look like the instrument panel to a high-tech piece of equipment.

Here's an assortment of icons that all show how different surface materials contribute to the overall look of the element:

Next time you want to create something shiny, think about what type of material you're really executing: is it plastic? Glass? Reflective aluminum? If you're designing a matte element, think about just how grainy and textured it should be. Paper or sandpaper? Cardboard or anodized aluminum like an iMac? Is there transparency? Are you emulating something in real life or creating a material that's more hyperrealistic?

Tips For Execution

It's one thing to look at beautiful interface elements, icons and illustrations and quite another to build them yourself. Here are some ways that I build designs using Photoshop.

Noise LayerMatte interfaces are hot right now and one of the key elements of a matte surface is that it's not perfectly symmetrical, it has some texture and grain to it. The easiest way to accomplish this is by creating a layer of one flat color and then using the Noise Filter to add some texture. The key is to keep it subtle and barely noticeable.

Radial HighlightsThe main light source comes from the top but that doesn't mean you can't introduce a secondary light source for emphasis. Below I've created a custom navigation bar for an iPhone application that uses a subtle radial highlight for added dimension and detail. The Blend Mode has been set to Overlay to brighten and saturate the overall color and the transparency has been knocked way down to keep it realistic. Also note the edge highlights to make it look more like a raised surface.

Creative Layer StylesLayer Styles are a key part of my design workflow, I use them for everything. Usually I'll draw a vector object, set the Fill to 0%, and design the entire thing using Layer Styles. Anyone can add a Drop Shadow to something, but if you get creative with Layer Styles then it enables you to really transform what you're working on. For example, you can only apply one Stroke but you can emulate 3-4 different stroke styles through creative use of the Inner Glow and Outer Glow styles if you crank up the Spread and Choke sliders and turn your glows into solid lines.

Once you turn glows and drop shadow styles into solid lines you can achieve a lot of effects with minimal effort. Below are some Layer Styles applied to rounded rectangles that use 1px glows and shadows. The PSD file for the following examples is released under a Creative Commons license: Button Examples

Reality Is Subtle

When something looks "off" in an interface, it probably looks fake, like it wouldn't exist in the real world. How do you keep your interface elements looking real? Here are some things to always keep in mind:

Keep it crisp. No blurry lines or edges. Always adjust opacity. Nothing is totally black or white, dark or bright. A semi-transparent black or white line, glow, shadow or shape goes a long way. Go vector when you can, it can be resized later. Don't Free Transform vector objects: use the Direct Selection Tool to move individual points. Experiment with Layer Styles. White Inner Glow makes shapes pop. Use Overlay blending mode to liven up and saturate colors. Drop Shadows will ruin your design if you don't do it right. Things should be right up against their surface which means using a 1-3px Drop Shadow size. And 0-3px distance. This isn't WordArt. To save a complex shape as a PNG or GIF, turn the layer into a Smart Object first, then Rasterize it. This preserves color blending modes. When using type within an interface element, it either sits on top (dark 1px drop shadow) or is inset (white 1px drop shadow), it's never at the same surface as a button or widget. Real-world objects rarely have perfectly square corners. Use subtle rounded corners to make objects look real. In real life, everything casts a shadow. Unless you're drawing vampires, if you intend your object to have depth and be resting on a surface then it better have a drop shadow, even an incredibly subtle one.

For the past two years, the elegant iPhone has housed some of the most poorly designed applications you could imagine. The hype surrounding iPhone has prompted many designers across the globe to try their skills with the new mobile medium. The result are literally thousands of various iPhone-applications that are often hardly usable and counter-intuitive. However, some designers invest a lot of time and efforts into creating usable and original user interfaces (yes, there are usable and creative UIs). This article explores the ways in which designers use graphical elements and screen interactions to create iPhone-applications that are easy on the eyes and mind. The aim of this article is to display common trends and design approaches in iPhone app design – please notice that they are not necessarily optimal ones from the design or usability point of view. 1. Mirroring Native iPhone UI Elements “Tell them what you’re gonna tell them, tell them, and then tell them what you told them.” Creating a whole new OS within your app can be fun, but when you’re dealing with the mobile medium, people just want to get stuff done. Getting stuff done means that the designer has to get into the flow of the OS and create an app that requires zero explanation for the end user to operate. Mirroring the layout and UI elements that the user is already familiar with saves time and energy. So it seems quite convenient to use this approach when designing iPhone-applications. Facebook (iTunes Link)In the new Facebook 3.0, you’ll find a grid layout that users can swipe left and right to access more categories. Because it mirrors Apple’s native UI, users do not have to “learn” how to use it all over again. A similar approach exists in Web design: users expect to see a logo in the top left, navigation along the top, etc. Facebook has taken this concept mobile, using large buttons that are easily distinguishable and tap-able.

Where (iTunes link)Where has a similar concept, allowing users to swipe left and right to access more data.

Tweetdeck [iTunes link]Tweetdeck is a good example of user interface design on many levels. Notice how the design highlights recent updates. The application could display the updates in a new window, with a categorized or tabbed list. But it doesn’t. Instead, a more familiar dialogue menu is displayed — it serves as a springboard to jump to a specific category or to clear the messages altogether.

1. Simplifying The Interface Simplifying user interfaces may sound like a mechanical task, but what lies beneath the surface of user interface design? The answer is simple: users. And what do users want? What makes them all warm and fuzzy? How do you deliver what they want so that they don’t even notice how they are consuming information? Facebook’s first release did a great job of fitting a lot of core functionality into a small space. The problem, of course, is in laying out all that data and creating an intuitive interface. Compare 3.0 with the first release, and you’ll see how they took a “springboard” approach to streamlining the interface, keeping it intuitive and maintaining functionality.

Flickr [iTunes link]Flickr is another example of how to achieve a good balance between functionality, visual design and the small display area on mobile devices. Think about it: what is at the core of Flickr? Photos. Its users probably do not want to look at big clunky navigational elements; instead, they are looking for pictures. Flickr has managed to fit all of its core functionality without heading down the highway to navigational hell. In fact, most elements in the navigation are handled by interacting with the photos themselves. Simple and smart.

1. Hardware-ish Look Many utilities are breaking out of the conventional iPhone UI to take advantage of the device’s unique ability to respond to finger gestures. Many of these have hardware-ish interfaces that users are familiar with but come with perpetually shiny exteriors and clicks and pops that maintain their newness from the first to one-thousandth click. Next up, though: an app that gets dirtier the more you play with it. Convertbot (iTunes link)Convertbot reminds us of the proportion wheel we all used in grade school, except it’s more distinctive, original and creative.

Little Snapper (iTunes Link)Little Snapper mimics the wheel that you turn on a typical digital SLR.

iHandy Level (iTunes Link)iHandy Level simulates the look and functionality of a real, well-used leveler.

Where To? [iTunes Link]This application looks like it belongs in a Mercedes. Plush leather, matte-finish tactile buttons: quality craftsmanship. We can just imagine how each button press feels solid, requiring the perfect amount of pressure.

1. Rich, Padded And Pretty List Views You know that you are a geek designer when you get excited about the latest trends in list view design. And what do people do when they encounter a list view? Of course, they skim. And how do we make it easier for people to decide what interests them? That’s right: more visual cues! Essentially, users are asking for a snapshot of what’s next, and then decide if they want more information. One way to do this is with big pretty buttons. Large and in charge, elegantly designed big buttons give the user a lot of information through their color, icons and typography. Delivery Status Touch (iTunes Link)Check out how Delivery Status uses appropriate colors on its big buttons to identify each brand. And it uses typography well to establish a hierarchy of information.

Be Happy Now (iTunes Link)Be Happy Now’s big buttons convey the “be happy” mantra through a mellow color scheme and light, calm and clear typeface.

Next Read [iTunes link]The Next Read application allows friends to share books. Here all books about a particular topic are presented, including the title, cover image, review rating and number of people who have recommended it. Notice the padding and a lot of white space for each navigation option; this makes the areas easily clickable and easier to navigate.

Nike [iTunes link]Nike’s workout application for women includes a nice visual treatment and illustrations that match the brand. It breaks out of the traditional UI just enough to communicate the brand without making it difficult for users to understand the interface and how to use it.

Borange [iTunes link]Borange is a “social availability” application that helps you coordinate meetings with friends. The list view presents a lot of information: friends you want to hang out with, the meeting location and a nice visualization of friends who are available.

1. Layered Interface Several applications take advantage of the iPhone’s capabilities by layering the interface and making some elements stationary and others vertically or horizontally scrollable. This approach has several benefits:

It reduces the number of traditional navigation elements that are necessary (i.e. fewer buttons help to avoid a cluttered interface). It gives users a faster route to the information they want. More screen space is available for information.

Tweetie (iTunes Link)Tweetie uses layers to organize information specific to each of your Twitter friends. Just look at all of the information packed into this one screen!

Barnes & Noble [iTunes link]Barnes & Noble has a layered interface that allows you to quickly slide through new releases at the top or dive into more categories below.

USA Today [iTunes link]USA Today takes a slightly different approach to layering the interface in its “Pictures” section: it uses sliding panels to display blocks of information. While the interface may look cluttered at the first glance, one can easily get around it. The interesting part is that within each panel you can slide thumbnails left and right to view more images.

myPantone [iTunes link]Would we expect any less from Pantone? The color picker shown above is a layered interface that lets you pick from a range of colors, sort and scroll as well as open and close detail screens, all without too driving you crazy.

1. Icons For The List View Icons aren’t just for springboard-loving folks. On small screens, icons can give a huge boost to an application’s usability and navigation. Let’s now take a look at some examples of applications that use icons to their advantage. iStudiez (iTunes Link)This application uses various educational metaphors as icons to clearly communicate the purpose of the application. Excellent visual cues tell the student what’s happening today at a glance.

Top Floor (iTunes Link)Top Floor uses simple and easily recognizable icons to quickly guide users to their category of choice.

New York TimesIsn’t it great when applications just let you do whatever you want to do? For an app with as much information as the New York Times’, users are bound to have their favorite sections. Well, guess what? The New York Times cares: it lets you customize the tab bar’s navigation to include only your favorite sections of the paper. Drag an icon down the tab bar and you are set. The downside of the design is, of course, its lack of visual appeal.

Filemaker [iTunes link]Here is another example of beautiful icons that aren’t obscure or confusing. Designers should never use icons just for the sake of having icons. As designers, we want icons that illustrate what users are actually going to get when they choose a particular path. Nicely done, Filemaker.

1. Illustrations in use Applications that rely on graphics not found in the standard user interfaces are increasing in popularity, as developers try to set their apps apart from the crowd. Sometimes it works, but often it doesn’t. The more unconventional a design is, the more likely it is to have usability problems. Please always conduct usability testing before releasing a product with a “creative” user interface. Magnetic Personalities (iTunes link)An excellent example of how buttons don’t have to look like standard buttons.

SugarSync [iTunes link]This interface could have easily followed the traditional list-view route. Instead, the designers played with the concept of “connectivity” to create a visual treatment that communicates the purpose of the app. It is unusual and requires some time to get used to.

Mom Maps [iTunes link]Another example of how illustrations do a great job of pulling together the whole concept of an application.

1. Using Gestures Classic linear navigation may look boring: a button that links to other buttons, which leads you to a list of something, which leads you to such-and-such an interaction. Not really spectacular. The possibilities for creative interaction in utility apps are huge and largely untapped (no pun intended). Mover (iTunes link)Mover exemplifies how to use gestures for sharing contacts, photos and bookmarks. Open two devices, and flick the shared files from one handset to the other.

ABC Animals [iTunes link] This application teaches while it entertains. Being able to trace a letter with your finger is another example of how the iPhone responds to touch and movement.

All Recipes [iTunes link]This applications allows you to mix in various elements to create your next meal using gestures.

Something is missing? We missed some common design approach or trend? Please let us know in the comments to this post! About the Author Jen Gordon is the owner of Atlanta-based iPhone app design studio Clever Twist, which will release its latest app Farm Friends in just a few days. She specializes in usable interfaces, beautiful design and straight talk. She loves her family and the iPhone and periodically dreams that she’s close friends with Dolly Parton. Follow her on Twitter or drop her a line to say “Hi!”. (al)

© Jen Gordon for Smashing Magazine, 2009. | Permalink | 28 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: iphone, showcases, trends

Over the last couple of years, mobile devices have managed to gain mainstream popularity. With iPhone, making mobile Web applications finally usable by broad masses, web design can now be applied to mobile applications as well. In this post we are focusing on designs that are specifically optimized for mobile devices, in particular iPhone. Though iPhone’s Safari browser is able to render any website just like you would see it on a desktop browser, the available screen area is much smaller than in common “classic” displays. This poses a new challenge for designers and developers who now can reach millions of users that use mobile Web. Websites that are specifically optimized for the iPhone utilize the screen to the fullest extent, and use less bandwidth (which is necessary, because the connectivity is not always optimal). The iPhone browsing experience is quite different than the regular browsing experience. The buttons and hyperlinks have to be bigger because our fingers are not as sharp as the mouse pointer. Optimizing a website for iPhone is not rocket science. It’s the same HTML, CSS and JavaScript that you already know. The only major difference is the screen size. In the showcase below we present some of the interesting, interactive and beautiful designs that are optimized for the iPhone. You will also learn about some handy tools that will help you optimize your website for the iPhone. Also consider our previous articles:

How to Create Your First iPhone Application iPhone Apps Design Mistakes: Over-Blown Visuals 100 (Really) Beautiful iPhone Wallpapers

1. News / Entertainment Sevnth SinThe unique navigation makes this site very interactive. Nice concept, nice colors.

  Blip.tvPerfectly suits the theme: video entertainment! Clean and clear typography.

  NBCThe YouTube-style design makes it very easy to navigate and find shows.

  ZinioThat’s a kit of magazines, all one-touch away!

  Spin The BottleA simple bottle spinning game. Good use of graphics.

  Daily WallpaperSimilar to Zinio, but 2 thumbnails in a row make it more easy to navigate around.

  AOL HoroscopesVery well designed for a horoscope site. Matching color scheme throughout.

  Yahoo Omg!Fresh look, vibrant colors and lively typography make this design fun to browse and easy to read. The design also matches the celebrity gossip theme.

  2. Business / Corporate DPTODifferent tones of red make this design look very attractive on the iPhone. The 3D menu looks very nice — perfect for a marketing and design agency.

  Mind Medium CreativeThe use of gradients make the overall site look very shiny on the iPhone. The menu is very to-the-point. A nice composition and execution.

  Redhawk Investment AdvisorsThis design has a very corporate feel to it. Good use of colors.

  Nike LabJust what to expect from Nike. Sporty and energetic design.

  Procab StudioProcab studio showcases their work portfolio and other information about the agency. Well placed content. The font size is a bit too small, though.

  Hotel MonterillaThe design makes you want to go there for a vacation. The design has a very comforting feel to it. A perfect color scheme.

  Viget LabsA blue background, appropriate padding and rounded corners make this simple design look vibrant and attractive.

  Batali AssociatesThis is one of the good examples of design optimization for the iPhone. It clearly looks like it was really made for the iPhone, not just duplicated.

  Ready For iPhoneA company that provides iPhone optimized website solutions. The finger on the “Go” looks intuitive.

  Element FusionAnother showcase website that provides design services. Looks like a cut-down version of the actual website.

  VolkswagonA showcase gallery for Volkswagon. Easy to navigate around. Clean and clear content.

  3. Shopping / E-Commerce Torn RobesA nice example of a mobile e-Commerce site. Just touch your favourite design, have a look at it and buy it. Looks very vibrant.

  CooshA single-product e-Commerce site. Branded very well.

  WalmartThis design doesn’t really meet the expectations from WalMart — however, the design is still in beta. The usability is good, though: it is very easy to search for products and stores. You can also create shopping lists.

  4. Portfolio / Blog World Ending Blog (Japanese)Although we did not understand a word there, it is very well designed for the iPhone. Every page is optimized and provides a good browsing experience.

  Signal ElementSimple and clean design: just 3 pages, but very well designed.

  One Crimson SplashThis is the portfolio of James Finley. The choice of colors and content placement are very good.

  5. Education / Content MITWhat else to expect from MIT? Simple, clean, user-friendly.

  101 Cook BooksNot really a fancy design, but it’s the simplicity and clarity of content that makes it appear in this showcase.

  Please Fix The iPhoneA good design that provides the desktop browsing experience. It is very easy to find what you are looking for.

  1881The Norwegian telephone directory online. The combination of bright blue, orange and white looks really good.

  AOL FoodHeaven for those who love to cook. Just keep your iPhone with you in the kitchen, and let this nice design help you make a delicious dinner.

  Deviant ArtA nice way to browse art on the iPhone. The color scheme is good, and it makes the artwork look prominent. Very easy to navigate and search. Also, appropriately sized thumbnails.

  Last but not least, some words of wisdom…

  Tools to design a website for iPhone There are some libraries and kits available to help you iPhoneize your design.

iPhoneyiPhoney gives you a pixel-accurate web browsing environment—powered by Safari—that you can use when developing web sites for iPhone. It’s a perfect tool to see how your web creations will look on iPhone. Test iPhoneA web browser based simulator for quickly testing your iPhone web designs. iWebKit (Demo)iWebKit is a file package designed to help you create your own iPhone and iPod Touch compatible website or webapp. Comes with various ready-to-use themes. iUIiUI is a framework consisting of a JavaScript library, CSS, and images for developing iPhone web designs. It makes your web designs look and feel like iPhone’s native applications. Intersquash (Demo)Not really a helpful tool for designing, but you can instantly create an iPhone compatible site from your RSS feed url. WPtouchFor WordPress users: WPtouch transforms your WordPress blog into an iPhone application-style theme, complete with ajax loading articles and effects, when viewed from an iPhone or iPod touch. Jaipho Gallery (Demo)If your website features a photo gallery, Jaipho will optimize it for iPhone users.

Further Resources Don’t stop here. Check out these other great tutorials and guidelines.

iPhone Reference LibraryApple’s official iPhone reference library for developers. It has everything you need to get started: guidelines, code-examples, tutorials, etc. How to build a website for iPhoneThis step-by-step tutorial includes everything you need to do when building a website for iPhone. Instructions for orientation direction also included. iPhone Compatible CSS layoutsFree website layouts which work in all the common web browsers including Safari on the iPhone and iPod touch. iPhone Interface SamplesThis includes samples for iPhone interface elements like buttons, fonts, text, design patterns, hacks 6 more. iPhoneWebDev ExamplesVery helpful examples for alot of things. Direction change, events, fonts, compression, etc. iPhone Application UI Design Patterns cssiphone.comA showcase of designs optimized for iPhone.

About the author Adeel Raza is a young entrepreneur with over 10 years of experience on the web. He specializes in user interface, user experience and beautiful design. He loves finding gems out of dirt and showcasing them on his gallery Inspire Mix. Follow him on Twitter to say hi!

© Adeel Raza for Smashing Magazine, 2009. | Permalink | 42 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: inspiration, iphone

What if you had a nickle for every time you heard: "I have the perfect idea for a great application!"? It’s the buzz on the street. The iPhone has created unprecedented excitement and innovation from people both inside and outside the software development community. Still for those outside the development world, the process is a bit of a mystery. This how-to guide is supposed to walk you through the steps to make your idea for an iPhone app a reality. This post presents various ideas, techniques, tips, and resources that may come in handy if you are planning on creating your first iPhone application.

We also discuss UI design and marketing techniques in our upcoming Smashing Book ($23.90 $29.90, available worldwide). Pre-order now and save 20% off the price!

1. Have an idea – a Good Idea How do you know if your idea is a good one? The first step is to even care if your idea is solid; and the second step is to answer the question does it have at least one of the indicators of success?  

Does your app solve a unique problem? Before the light bulb was invented, somebody had to shout out “Man, reading by candlelight sucks!” Figure out what sucks, and how your app can make the life of its user more comfortable.

Does the app serve a specific niche? Though there aren’t any stats on the App Store search, the usage of applications is certainly growing with the explosion of App Store inventory. Find a niche with ardent fans (pet lovers, for example) and create an app that caters to a specific audience.

Does it make people laugh? This is a no-brainer. If you can come up with something funny, you are definitely on the right track and your idea may be the golden one. Heck, I hit a red “do not press” button for 5 minutes yesterday.

Are you building a better wheel? Are there existing successful apps that lack significant feature enhancements? Don’t be satisfied with just a wine list, give sommeliers a way to talk to their fans!

Will the app be highly interactive? Let’s face it, most of us have the attention span of a flea. Successful games and utilities engage the user by requiring action!

Action: Does your app fall in to one of these categories? If yes, it’s just about time to prepare the necessary tools. 2. Tools Checklist Below is a list of items you’ll need (*starred items are required, the rest are nice-to-have’s):

join the Apple iPhone Developer Program ($99) * get iPhone or iPod Touch * get an Intel-based Mac computer with Mac OS X 10.5.5, prepare a Non-Disclosure Agreement (here’s a sample) * download and install the latest version of the iPhone SDK if you don’t already have it. a spiral bound notebook*

Action: Load up on your required supplies. 3. What Are You Really Good At? What skills do you bring to the table? Are you a designer whose brain objects to Objective C? A developer who can’t design their way out of a paper sack? Or maybe you are neither, but an individual with an idea you’d like to take to the market? Designing a successful iPhone application is a lot like starting a small business. You play the role of Researcher, Project Manager, Accountant, Information Architect, Designer, Developer, Marketer and Advertiser – all rolled into one. Remember what all good entrepreneurs know – it takes a team to make a product successful. Don’t get me wrong, you certainly can do it all. But you can also waste a lot of time, energy and sanity in the process. Don’t go crazy, reference the checklist below and ask yourself: What roles are the best fit for you to lead? Then find other talented people to fill in the gaps. The infusion of additional ideas can only enrich the product! Skills Checklist

Ability to Discern what works/doesn’t work in existing iPhone Apps Market research Outlining App Functionality (Sitemap Creation) Sketching GUI Design Programming (Objective C, Cocoa) (we assume here that we are creating a native application) App Promotion and Marketing

Remember to have contractors sign your non-disclosure agreement. Having a contract in place tells your contractor "I’m a professional that takes my business and this project seriously. Now don’t go runnin’ off with this idea." Action: Select skills that are a good fit for you to lead. For those roles where you cannot lead, hire professionals. 4. Do Your Homework: Market Research Market research is a fancy way of saying "Look at what other people are doing and don’t make the same mistakes." Learn from the good, bad and ugly in the App Store. Coming up with creative solutions in the app concept development and design starts with analyzing other (maybe similar) applications. Even if you encounter a lot of poorly designed apps, your mind will reference these examples of what not to do.

Action: Answer these questions:

What problem does your app solve? What products have you seen that perform a similar task? How do successful apps present information to users? How can you build on what works and make it unique? What value does your app bring to your audience?

1. Know the iPhone/iPod Touch UI If you want to create an iPhone app, you need to understand the capabilities of the iPhone and its interface. Can you shoot a .45 caliber bullet out of your iPhone? No. Can you shoot videos? Yes! The good news is that you don’t have to memorize the encyclopedic Apple User Interface Guidelines to get a feel for what works and what doesn’t in iPhone Apps. Download and play with as many apps as you can, and think about what functionality you want to include in your product. Take note of:

How do well-designed apps navigate from screen to screen? How do they organize information? How MUCH information do they present to the user? How do they take advantage of the iPhone’s unique characteristics: the accelerometer, swiping features, pinch, expand and rotate functions?

Action: Download the Top 10 apps in every category and play with all of them. Review the Apple Guidelines for UI design and list at least 5 features you’d like to incorporate into your app. 6. Determine "Who will use your app?" We assume here that you’ve already determined that your app will bring value and that you will have a raging audience for your app. Well, fine, they are raging fans, but who are they really? What actions will they take to achieve their goals within the app? If it’s a game, maybe they want to beat their high score. Or perhaps they are a first time player – how will their experience differ from someone who is getting a nice case of brain-rot playing your game all day? If it’s a utility app, and your audience wants to find a coffee shop quickly, what actions will they take within the app to find that coffee shop? Where are they when they’re looking for coffee? Usually in the car! Do present an interface that requires multiple taps, reading and referencing a lot? Probably not! This is how thinking about how real-life intersects design. Action: Line item out the different types of people who will use your app. You can even name them if you want to make the scenarios you draw out as real as possible. 7. Sketch Out Your Idea And by "sketch" I mean literally sketch. Line out a 9-rectangle grid on an 8.5 x 11 sheet of paper and get to sketching! Ask yourself:

What information does each screen need to present? How can we take the user from point A to point B to point C? How should elements on the screen be proportioned or sized in relation to each other (i.e. is this thing even tap-able?)

Image credit: Cultured Code Thumbnailing your ideas on paper can push your creativity far beyond where your imagination might stagnate working in an sketching application! You can also buy the iPhone Stencil Kit to quickly sketch out iPhone UI prototypes on paper. Action: Create at least one thumbnail page of your application per screen. Experiment with various navigational schemes, the text you put on buttons, and how screens connect. If you want to transfer your sketches into digital format, iPlotz is a good tool to check out. 8. Time for Design

If you are a designer, download the iPhone GUI Photoshop template or our iPhone PSD Vector Kit. Both are collections of iPhone GUI elements that will save you a lot of time in getting started. If you’ve solidified your layout during sketching, drawing up the screens will be less of a layout exercise and more about the actual design of the app. If you are not a designer, hire one! It’s like hiring an electrician to do electrical work. You can go to Home Depot and buy tools to try it yourself, but who wants to risk getting zapped? If you’ve followed steps 1–3, you’ll have everything you need for a designer to get started. When looking for a designer, try to find someone who has experience designing for mobile devices. They may have some good feedback and suggested improvements for your sketches. A few places to look for designers: Coroflot, Crowdspring, eLance. When posting your job offer, be very specific about your requirements, and also be ready to review a lot of portfolios. Action: If you are a designer, get started in Photoshop. If you are not a designer, start interviewing designers for your job. 9. Programming

Even though this how-to is sequential, it’s a good idea to get a developer on board at the same time when you line up design resources. Talking with a developer sooner than later will help you scope out a project that is technically feasible and within your budget. If you are a Objective C/Cocoa developer crack, open Xcode and get started! A few forums to join if you haven’t already:

Apple Dev Forum iPhoneSDK (moderated by Erica Sadun) iPhoneSDKForum iPhoneDev Forums iPhoneSB

If you are not a developer, you know what to do – find one! Specify the type of app you want to produce – whether it is a game, utility or anything else. Each type usually requires a different coding skill set. A few places to look for developers: Odesk, iPhoneFreelancer, eLance and any of the forums listed above. 10. Submit your application to Apple Store OK, so how do you submit your application to Apple Store now? The process of compiling your application and publishing the binary for iTunes Connect can be difficult for anyone unfamiliar with XCode. If you are working with a developer, ask them to help you:

Create your Certificates Define your App ID’s Create your Distribution Provisioning Profile Compile the application Upload to iTunes Connect

Action: If you are a developer, map out a development timeline and get started. If you are not a developer, start interviewing devs for your job. 11. Promote Your App If a tree falls in the middle of the woods and nobody was around to hear it does it make a sound? Apps can sit in the store unnoticed very easily. Don’t let this happen to you. Be ready with a plan to market your app. In fact, be ready with many plans to market your app. Be ready to experiment, some ideas will work, others won’t. Strategies for maintaining/boosting app sales:

Incorporating social media. If your users make the high score on his or her favorite game, it is a good idea to make it easy for the user to post it to Facebook or Twitter. Think about how your app can incorporate social media and build that functionality into your app. At a minimum, set up a fan page for your app on Facebook and Twitter and use them as platforms to communicate with your users and get feedback on your app. Pre-launch promotion. Start building buzz about your app before it has launched. E-mail people who write about things that relate to your app and see if they will talk up the upcoming release of your app. Plan for multiple releases. Don’t pack your app with every single feature you want to offer in the very first release. Make your dream list for the app and make sure that the app is designed to incorporate all of the features at some time in the future. Then periodically drop new versions of the app to boost app store sales.

Action: Make a list of 20 promotional strategies that target the audience for your app. Take action on them yourself or hire someone who can! 11. Stay Focused and Don’t Give Up! It’s easy when you are working on your first app to get all AppHappy, dreaming up a zillion new app-ideas. Dream, but don’t get sidetracked by new ideas. Your first app needs to make a big splash and getting involved in too many projects at once can dilute your passion for making your first application a success. Action: Get out there and go kick some app! About the Author Jen Gordon is the owner of Atlanta-based iPhone app design studio Clever Twist. She specializes in usable interfaces, beautiful design and straight talk. She loves her family, the iPhone and periodically dreams that she’s close friends with Dolly Parton. Follow her on Twitter or drop her a line to say hi!

We also discuss UI design and marketing techniques in our upcoming Smashing Book ($23.90 $29.90, available worldwide). Pre-order now and save 20% off the price!

© Jen Gordon for Smashing Magazine, 2009. | Permalink | 87 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: development, iphone

Update: Changed the blog entry title to reduce confusion.

The iPhone is one big constraint — no keyboard, small screen, few buttons — so designing applications for the iPhone is an exercise in building smart, simple software. Bloated apps on the iPhone? You won't find many. Most applications pick one feature or group of related features and centralize the product around that central theme.

When Apple began crafting UIKit, the set of APIs used to build the user interface for an iPhone app, they had to see into the future and predict what the most common application design models would be and make sure those could be accomplished easily. It may seem obvious to us now because we're so used to iPhone application design but the high-level navigation and interaction concepts available to iPhone application developers are really quite brilliant:

Dive deep into hierarchical levels of application information and then surface back to the top easily Switch between different main pieces of functionality without losing your place on one when moving to another Edit and adjust information without losing your place contextually Display a list of information or choices

These three main interaction concepts correspond to three different types of View Controllers: Navigation Controllers, Tab Bar Controllers, Modal View Controllers and Table View Controllers respectfully. These are the building blocks for crafting iPhone applications.

Displaying Main Application Features

Displaying a list of available features of your iPhone application so the user can navigate through your app is a common practice. But given the variety of ways to display structured information in an iPhone app, which is the best way? What's the best way to present entry points to an app's main features? There is no best way but there are a variety of established patterns you can learn from.

Things, iStat & Birdfeed

Things, iStat and Birdfeed are three iPhone applications that have a variety (or variable number) of main views, too many to fit inside a Tab Bar Controller on the bottom of the screen. How do they deal with this? They use a Table View Controller as the application's main screen and list the main features there in a scrollable panel. Each table row would normally display a Navigation Controller once tapped.

Advantages:Main app features available in a simple, clean list design. Order & grouping connotes importance of features.

Disadvantages:No way to directly move from Feature 1 to Feature 2 if within Feature 1's Navigation Controller hierarchy, takes extra taps to get back to main screen.

Squirrel, Tags & Tweetie

Squirrel, Tags and Tweetie utilize a Tab Bar Controller as the main navigational pivot for the application. (Note: Squirrel & Tweetie have an initial view before their main Tab Bar Controller view. Squirrel has a vault passcode lock and Tweetie has a Table View of your saved accounts.) Typically when using a Tab Bar Controller each tab item would display a Navigation Controller and have a full feature hierarchy beneath it. When pushing & popping views within a specific tab, you can choose to hide the main Tab Bar to give your new view more room on the screen.

Advantages:One-tap access to switch between main application features. Switching back keeps your place within the Navigation Controller hierarchy (if used).

Disadvantages:Only works well when there are less than 5 main application views. If an app has more than that then the Tab Bar would typically show a More tab item as the 5th, and secondary application features would be tucked away below that tab.

ESPN ScoreCenter, Phases & Weather

ESPN ScoreCenter, Phases and the default Weather app are examples of a flattened navigational hierarchy where there's a single type of main view and a variable number of them showing. Applications using this design pattern are normally information-rich and designed to be utilities rather than applications you spend a lot of time in.

Advantages:Natural gesture interface for navigating between views, quickly display structured information.

Disadvantages:Getting from Card 1 to Card 4 takes a variety of swipes. No direct access between views more than 1 card away. Useful only for flattened (or nearly flattened) navigational hierarchy.

Follow The Leader Or Blaze Your Own Trail?

The application design patterns and examples shown above work with nearly-default navigational models that Apple has provided. They may customize the interface elements but the general interaction concepts are stock UIKit. There's nothing wrong with following standard Apple conventions for navigating around your app but what if you need to go beyond? What if you have a totally custom paradigm? The following are examples of applications that have defined their own interface paradigms.

Weightbot & Convertbot

Arguably two of the most tactile and beautiful applications available for the iPhone, both the applications from Tapbots have completely custom interfaces that center around a specific interaction point they designed from scratch. For Weightbot they use a horizontally-scrolling picker wheel and in Convertbot they have a mechanical, spinning dial for selecting units. There's a great behind the scenes entry at their blog about the making of the Convertbot dial.

Collage & Fortune

Tapulous has been making fantastic applications for the iPhone for awhile, and both Collage and Fortune are less well-known than their big brother Tap Tap Revenge. Fortune is a simple application that lets you crack open a fortune cookie and read the message but instead of going the simple route they designed a totally custom interface for what is essentially a fairly simple application. Simple concept + brilliant interface = winner.

Collage is a social picture-sharing app that redefines what a Tab Bar Controller paradigm can end up as. Their totally custom film strip interface and sliding, animating panels is some of the finest UI work you'll find in the App Store.

Beats

Beats by Bjango is a beat and key-matching app for DJs and musicians. There are a variety of custom elements but the main screen design emulates a Tab Bar Controller in the middle of the screen with the main content areas extending above and below this tab bar.

Postage

Postage by RogueSheep is an Apple Design Award Winner and has an iLife-feel to the entire application. Postage uses standard Apple UI conventions with a totally custom implementation that perfectly matches the app's postcard-creation workflow. An important part of Postage's interface is the custom horizontal slider letting a user choose a specific style or font from a group of choices.

Choose What Works Best

There's nothing wrong with using unmodified Apple UIKit elements and paradigms, in fact most of the applications in the App Store and those coming from Apple get along fine with the built-in interface paradigms and objects. Apple's built a solid framework to use when creating applications, but some app developers aren't fully satisfied so they take designs and interaction paradigms into their own hands. This was a showcase of some beautiful interface design decisions but be careful as it's easy to go overboard and screw things up.

A good rule of thumb is this: if you can't design something better than Apple, don't do it.