Designing Apps That Use All Available iPhone Fuctionality In the previous article in this series, we introduced some basic iOS design specifications and templates. Now it’s time to explore what makes designing for touch screens and mobile devices so special! Unlike design for desktop websites and/or applications, the variety of ways you can interact with and get feedback from a mobile devices radically differs from its desktop counterpart. Mobile apps aren't just pretty pictures; you're developing a piece of software. Designing for mobile is a combination of interaction and usability, product development, and graphic design. Think about all the things a mobile touch screen device can react to: touch, shaking, tilting, vibrating, audio input and feedback, geolocation, and time tracking. It is Easy to be Average Average applications take average advantage of the iPhone’s capabilities. Gestures To perform actions on a touchscreen device, users use their fingers to swipe, drag, pinch, tap and flick on-screen elements. photo courtesy of Kyle Buza Tap
Introduction to iPhone Design This post is the first in a 10-part iPhone Design series featured on Mobiletuts+. Every week, we will dive into a variety of aspects of how to design beautiful and usable mobile interfaces for iOS. To get a reminder each time a new post arrives in this series, be sure to subscribe via email or our RSS feed! Series Overview Are you a web designer, excited by the idea of designing iPhone apps, but unsure of how to get started? Or perhaps you've designed a couple of apps, but are looking to boost your skills with some fundamental knowledge of why we make certain design decisions for mobile? The topics you can look forward to in this series include both hands-on techniques and examples as well as mobile related design theory. Designing for Mobile vs. the Web Can't I just start designing apps? Not really. Designing for the Web For the purposes of this article, the term "web" refers to laptop/desktop-based websites and web applications. Mouse clicksKeystrokesMicrophone inputSpeaker audio output
How to Design for the Different Types of iPhone Apps Welcome to the fourth installment in our series on iPhone Design 101! If you’re new to this series, be sure to check out parts 1 - 3: Introduction to iPhone Design, iPhone/iPad Design Templates, and iPhone Design Features. These articles will get you up to speed on what we’ve already covered and give you a taste for the juicy bits that are to come in this awesome series! As a designer and/or developer you may be wondering “who cares about the ‘types’ of apps available, isn’t each app different? Every app has a unique audience and task, so what’s the point in studying the different types?” One simple answer: understanding your application “type” makes the process of conceptualizing ideas, specifying technical specs, and executing design and development much FASTER. The App Store has 20 standard “categories” of apps (everything from games to social networking) and periodically breaks out specialty groups like “games for kids” or “holiday cooking” apps. Serious Tools Fun Tools Fun Games
The Mobile Design Process If you are a designer, the good news about the mobile app space is this: design is everything. Whether you're building a utility or a game, appearance has a great impact on both popularity and usability. Cluttered or disorganized apps are difficult to understand and hard to use. This isn't to say that a "serious tool" should be embellished with an overdone GUI. A great app design is one that will balance appearance with function. In terms of function, there are certainly some areas of app development that are not the "designer's job" per se, but still have a great impact on the design conceptually and in application’s creative direction. What is the Application’s Primary Task? Once an idea for an app has been generally scoped out, it’s time to narrow down the application functionality to the core of what the app does. I know it sounds geeky and useless, but this is the phrase you should have tacked on your wall the entire time you’re working on the design. Market Research Target Audience
iPad Application Design I held a 6-hour workshop at NSConference in both the UK and USA recently, focusing on software design and user experience. Predictably, an extremely popular topic was the iPad, and how to approach the design of iPad applications. I gave a 90-minute presentation on the subject to start each workshop, and I want to share some of my observations here. Please note: this is about the user interface conventions and considerations which apply to creating software for the iPad platform (and touch-screen tablet devices in general). It is not a technical discussion of iPad-related APIs (which remain under NDA at time of writing in early March 2010). As I watched the iPad introduction keynote, there was one thing above all which struck me: That’s iWork (Keynote, Pages and Numbers) for iPad. It’s not just a big iPhone The iPad may be a larger version of the iPhone in terms of the hardware and operating system, but treating it as the same device would be foolish. The Missing Link Master-Detail Two Hands
The Pros and Cons of Apple Default vs. Custom Graphics In the first article in this series,”Introduction to iPhone Design”, we briefly discussed why some iPhone apps use Apple templates while others are custom designed. In this article, we’ll take a closer look and discuss why this is an important question from a design, development, and business perspective. What Are “Templated” Apps? In this series, I will use the word “templated” as a way to describe, in layman’s terms, the consistent look of the pre-built controls Apple provides for developers in their Interface Builder application. The image below is a screenshot from Apple’s Interface Builder application. Why Use Pre-skinned controls? This is a common question from web designers who are accustomed to designing every button, box, and form on a web page from scratch. A few reasons: So why stray from the designs that Apple has already created and tested? Top 5 Reasons to Use Apple’s Default Controls Budget Simple Functionality Serious Tool Iterative Approach Branding and Visual Metaphors Gaming
Understanding Your App’s Target Audience In Part 5 of this series, “The Mobile App Design Process”, I touched briefly on the the importance of identifying and exploring “who is” the target audience for your application. In this article, we’ll go beyond identifying the “who is” and take a closer look at how your audience should affect everything about your app from concept to launch. The Audience Matters More Than the Idea It’s easy to get excited about app ideas. I hear great ideas every day, but in most cases they’re ideas that originate around a task or function, rather than a specific audience. The target audience is considered as an after thought, only important when formulating the marketing plan. Why Start With the Audience? "But my idea is great! A perfect example is our app, Doodle Bright. Pricing - What are parents expecting and willing to pay for an app that is fun, but not educational? Notice how knowing information about your audience touches many pieces of the product development? How to Fine Tune Your Idea
Killer Tips for iPhone and iPad Icon Design Icons are a crucial part of every iOS application. They convey the first impression of your app to prospective users and remain a central focal point to those who download the application. We all know how important it is to create a good first impression and build a strong brand with your design, and this tutorial will demonstrate 8 great ways to do just that! 1. Use Visual Metaphors This is a no-brainer in icon design, but if you go through the App Store, there are surprisingly few icons that do this well. If you took all of the words off of these icons, how many would say to you “tongue twister”? I’ve enlarged the only icon that really does the term “tongue twister” justice. What Happened Starbucks? Starbucks’ primary app has a great icon and app design, but the app that tracks cash on your Starbucks Gift Card pales in comparison. What else could they have done? 2. Another way to add depth to your icon and app design is to give it some conceptual depth. 3. 4. 5. 6. All-in Yoga 7. 8.