iPhone UI Library Always start your mockups with the latest version from MockApp.com MockApp is not freeware... It’s Tweetware. If you’ve already either twitted, digged, blogged, etc. about MockApp, this copy is legally yours. If not, it’s not too late to start using MockApp legally! The comments in this file are meant as handy reminders ONLY. You must refer to Apple’s latest iPhone Interface Guidelines document as the definitive guide in the matter. If there’s a UI element you can’t find here, me at and I’ll do my best to include it in the next Hello, This library file contains iPhone UI elements you’ll want to copy and paste into your MockApp Template file. Vector format: Most UI elements you’ll find here have been recreated in vector format so you can edit their text and even modify their shape, color, gradient, etc. Grouping / ungrouping: Note that most of the UI elements have been created by grouping several shapes together. You may want to copy and paste the UI element you’re working on into your app template before ungrouping it. That way you always keep a clean grouped copy here. Enjoy MockApp! Dotan Saguy Welcome

iPhone UI Library Always start your mockups with the latest version from MockApp.com To create your App mockup just copy and paste UI elements to the right into your MockApp Template (the other file). MockApp is not freeware... It’s Tweetware. If you’ve already either twitted, digged, blogged, etc. about MockApp, this copy is legally yours. If not, it’s not too late to start using MockApp legally! 10:32 AM Carrier 10:32 AM Carrier 3G 10:32 AM Carrier Back Button Button Pane Label Disabled Pane Label Groups All Contacts + + Status bar Navigation bar Tab bar and badges MusicVideosPodcasts Search More 6 6 Tab bar Navigation bar Status bar Optional instructions for this pane Pane Label Save Cancel Recommended for apps that present the same type of information in different views (think iPod app, phone app, etc). Appears at the very bottom of the screen. Gives users the ability to switch among different modes or views in an application. Should be present on all screens to allow the user to switch quickly between the modes/views. Appears at the very top of the screen. Shows important information about their device, including signal strength, the current network connection, and battery charge. You can hide the status bar in an full-screen app (i.e. a game), but be aware that users like seeing this important information. Very popular and useful UI element. Appears at the top of the screen immediately under the status bar. Usually displays the title of the current view and can contain buttons that either do things to the view (Save, etc.), and/or navigate (Back, etc.) 2 of 50 Inbox (20) A collection of tab bar icons is located on the next slide Badges are superimposed to icons in the tab bar to inform the user of new items not yet acted upon in the corresponding tab Activity indicator for nav bar on grey background... Network activity Activity Indicators Activity Indicator An activity indicator should be displayed if the app will take more than a couple of seconds to perform the current task Page Indicator Status Bar, Navigation Bar, etc.

iPhone UI Library Always start your mockups with the latest version from MockApp.com MockApp is not freeware... It’s Tweetware. If you’ve already either twitted, digged, blogged, etc. about MockApp, this copy is legally yours. If not, it’s not too late to start using MockApp legally! MusicVideosPodcasts Search More MusicVideosPodcastsSearch More iTunes UDownloadsRingtones iTunes UDownloadsRingtonesGenres Artists AudiobooksAlbums AudiobooksAlbums CompilationsComposersPlaylist CompilationsComposersPlaylists 6 6 More Most RecentFeaturedFavorites Top Rated Most RecentFeaturedFavorites Updates Categories UpdatesPlaylistsSubscriptions My Videos Playlists Voic Keypad Contacts Voic World ClockAlarmStopwatchTimer World ClockAlarmStopwatch Clock App tab bar controller. iDisk App tab bar controller. iDisk RecentsShared FilesPublic Folders RecentsPublic FoldersShared Files iDisk iTunes store and iPod tab controllers + icons (including “table view” black on white versions) Youtube, App Store and Phone additional tab controller + icons (including “table view” black on white versions) More tab bar icons coming soon! Tab Bar Icon Library

iPhone UI Library Always start your mockups with the latest version from MockApp.com To create your App mockup just copy and paste UI elements to the right into your MockApp Template (the other file). MockApp is not freeware... It’s Tweetware. If you’ve already either twitted, digged, blogged, etc. about MockApp, this copy is legally yours. If not, it’s not too late to start using MockApp legally! Toolbar Use a toolbar where the user can take various actions in the current context (for example browser screen, reader screen). Appears at the very bottom of the screen. A toolbar should not be used to toggle among the different modes of an app; if you need to do this, use a tab bar instead. Keep in mind that the hit-region is recommended to be 44 x 44 pixels, so providing five or fewer toolbar icons is preferable. Toolbar 5 5 Progress Indicator 24 of 39 Primary Secondary Search Bar When the user taps a search bar, a keyboard appears. By default, a search bar displays the search (magnifier) icon on the left side. In addition, a search bar can display a few optional elements: Placeholder text (for example, “Search”) The Bookmarks button to provide a shortcut to previously bookmarked searches/items. The Clear button to erase the contents of the search bar. A descriptive title, called a prompt, that appears above the search bar (for example, “Directions”) Sample search text Search Cancel Search Cancel Directions Clear Start: End: Current Location Type a company name or stock ID. Cancel MockApp mockapp.com/ Google Browser bar MockApp Cancel MockApp Cancel Google Toolbar, Browser Bar, Search Bar

iPhone UI Library Always start your mockups with the latest version from MockApp.com MockApp is not freeware... It’s Tweetware. If you’ve already either twitted, digged, blogged, etc. about MockApp, this copy is legally yours. If not, it’s not too late to start using MockApp legally! 2 2 Any toolbar icons missing? me at and I will add them in the next version Previous Next Previous disabled Next disabled Back Forward Back Disabled Forward disabled Fast forward Move backward Pause Reply Refresh Action Route Organize Trash Compose Page Add Bookmark Low volume High volume Detail Disclosure Add contact Bookmarks Street view Unread Info Camera Search Erase Stop Single digit badge Double digit badge Triple digit badge Delete locked Delete unlocked Grab and move Need to re-color an icon? Most of these icons have been created by grouping several shapes together so you may have trouble coloring them. If so try this: 1) Copy the icon to your MockApp template file 2) Ungroup the icon into all of its parts 3) Color each part (color the fill or the stroke depending on the case). 4) Regroup the shapes that form the icons so you can move it around Toolbar Icons and other icons (vector)

iPhone UI Library Always start your mockups with the latest version from MockApp.com To create your App mockup just copy and paste UI elements to the right into your MockApp Template (the other file). MockApp is not freeware... It’s Tweetware. If you’ve already either twitted, digged, blogged, etc. about MockApp, this copy is legally yours. If not, it’s not too late to start using MockApp legally! Action sheets An action sheet the user a set of choices for a task he/she just selected. It appears at the bottom of the screen by sliding upwards and over the current view. Action sheets can be used either to provide a selection of ways a task can be completed or to get confirmation before completing a potentially destructive task (i.e. delete or cancel). The most important or common action should appear as the top button. If the action is destructive (i.e. Delete), a red button might be called for. Action sheet Primary action you can also do this or maybe this or why not that Cancel Delete Bubbles PasteSelect Select All MockApp I’m hoping this one will help put MockApp on the map ;-) OK Delete 0:000:28 Play Record Action sheets, Bubbles

iPhone UI Library Always start your mockups with the latest version from MockApp.com To create your App mockup just copy and paste UI elements to the right into your MockApp Template (the other file). MockApp is not freeware... It’s Tweetware. If you’ve already either twitted, digged, blogged, etc. about MockApp, this copy is legally yours. If not, it’s not too late to start using MockApp legally! Alerts Alerts should be used ONLY for situations that require immediate user attention, typically from processes running in the background. Alerts pops up in the middle of the screen and contrarily to action sheets, alerts are not necessarily due to the user’s most recent action. To help guide inattentive users towards a safe choice, make the light-colored, right-hand button the default choice (for example, Cancel). Alert Confirmation Message Optional explanation of what the system is asking Confirmation Message Optional explanation of what the system is asking Primary Secondary Main Message Optional explanation of what a user needs to do Main Message Optional explanation of what a user needs to do Primary Button Text Views A text view is a region of the screen with multiple lines of text. It supports scrolling when the content is too large to fit inside its bounds. Text views can be used to display text and/or enable the user to edit that text (in which case a keyboard appears). Dotan Sent from iPhone Web / Views A web view is a region of the screen that can display rich, HTML content (including navigation) inside your app. For example, Mail uses a web view to display message content: From: Twitter Hide Dotan Saguy To: Everybody is now following you on Twitter! April 1, :33 PM Mark Unread Confirmation Message Optional explanation of what the system is asking Confirmation Message Optional explanation of what the system is asking Primary Cancel Please enter your password Please enter your password OK Password Alerts, Text Views, Web Views

iPhone UI Library Always start your mockups with the latest version from MockApp.com To create your App mockup just copy and paste UI elements to the right into your MockApp Template (the other file). MockApp is not freeware... It’s Tweetware. If you’ve already either twitted, digged, blogged, etc. about MockApp, this copy is legally yours. If not, it’s not too late to start using MockApp legally! Keyboards Keyboards slide in from the bottom when an edit mode is activated. These are all in vector format in case you need to change the letters $!~&=#. _ #+= AB C return #+= AB C return AFSDGHJKL ZVXCBNM `} | {?%^ * /, $!~&=#. _ #+= AB C return 12 ABC 3 DEF 5 JKL 6 MNO 4 GHI 8 TUV 9 WXYZ 7 PQRS 0 + Keyboards

iPhone UI Library Always start your mockups with the latest version from MockApp.com To create your App mockup just copy and paste UI elements to the right into your MockApp Template (the other file). MockApp is not freeware... It’s Tweetware. If you’ve already either twitted, digged, blogged, etc. about MockApp, this copy is legally yours. If not, it’s not too late to start using MockApp legally! Regular Table Views Regular table views (as opposed to grouped table views - next slide) are most useful to display long lists of items such as messages, contacts, etc. which users must easily scroll. Each row is an item. The lists can be divided into sections (i.e. alphabetical) separated by grey headers as below. Hierarchical items let the user “drill down” and are indicated by a ‘>’ icon to the right of the item. M M N N O O ABCDEFGHIJKLMNOPQRSTUABCDEFGHIJKLMNOPQRSTU This is a regular table view Divided into sections (the letters are the sections) and can contain several data elements (image, text, etc.) Each row is an item of the list This is a regular table view With icons like in The “more” tab of the iPod app Podcasts G G Pete Gardener Tess Grady M.J. Grey Jenn Guggenheim H H Sara Hashimoto ABCDEFGHIJKLMNOPQRSTUVWABCDEFGHIJKLMNOPQRSTUVW Em Hirsch Unread Item to delete or move Ready to be deleted Delete First Last name mobile it highlights When pressed Not pressed yet Current status 29 Regular Table Views

iPhone UI Library Always start your mockups with the latest version from MockApp.com To create your App mockup just copy and paste UI elements to the right into your MockApp Template (the other file). MockApp is not freeware... It’s Tweetware. If you’ve already either twitted, digged, blogged, etc. about MockApp, this copy is legally yours. If not, it’s not too late to start using MockApp legally! Grouped Table Views Grouped tables views list items by group on striped “pajama” background. This view is handy for lists of settings. Hierarchical items let the user “drill down” and are indicated by a ‘>’ icon to the right of the item. This group has 3 items Items highlight briefly when hit This group has only 1 item This item is turned This one lets you drill down This one shows Current status You can insert headers too This item has been selected Text Message Share Contact Mike Avatar home (111) mobile (111) work (111) whatever (111) You can even insert instructions like these as well if they’re helpful in this context. Ring Silent This item is turned ON OFF Segmented controls Tab Three Tab One Tab Two Tab Three Tab Two Tab Three Tab One Tab Two Tab One Grouped Table Views

iPhone UI Library Always start your mockups with the latest version from MockApp.com To create your App mockup just copy and paste UI elements to the right into your MockApp Template (the other file). MockApp is not freeware... It’s Tweetware. If you’ve already either twitted, digged, blogged, etc. about MockApp, this copy is legally yours. If not, it’s not too late to start using MockApp legally! Date and Time Pickers Sat Oct 3 Sun Oct 4 Today Tue Oct 6 Wed Oct AM PM August September October November December AM PM mins hours 1 2 Value Picker First & default value Second value Third value Analogous to “pull-downs” frequently used on websites and desktop applications. Date, Time and other Pickers

iPhone UI Library Always start your mockups with the latest version from MockApp.com MockApp is not freeware... It’s Tweetware. If you’ve already either twitted, digged, blogged, etc. about MockApp, this copy is legally yours. If not, it’s not too late to start using MockApp legally! 2x tap 2x tap swipe drag pinch close 2x tap 2x tap pinch open touch and hold touch and hold Top press or select a control or item (like a single mouse click) Hit presentation mode to see the animations. In a table-view row, to reveal the delete button Top scroll or pan To zoom-in/out and center a block of content or an image. In editable text, to display a magnified view (moving cursor + copy/paste functions) To zoom-in To zoom out No fingers were harmed in the making of these graphics. Animated iPhone Gestures Finger Motions and Backgrounds