Designing and Developing for the iPhone from Scratch

In this tutorial, we are going to design a website for the mobile Safari browser (found on the iPhone and the iPod Touch).

source: NetTuts

Coming Soon: Flash Apps for the iPhone

Flash Professional CS5 will enable you to build applications for iPhone and iPod touch using ActionScript 3.

source: Adobe Labs

FireQuery: A Firebug extension for jQuery development

FireQuery is a Firefox extension integrated with Firebug.

source: binaryage

WebApp.net release v0.5.0

This version is mainly a maintenance release which fixes many bugs found in previous versions and related to Safari Mobile (iPhoneOS 3.x).

source: webapp-net.com

WebKit Web Inspector updates

A number of exciting new features have been added to the Web Inspector since our last update.

source: Webkit.org

There are many different types of tools available to developers, from low-tech stencil kits to high-tech collaborative software. So I’ve rounded up a few of the more popular ones people are using specifically for iPhone development. It’s far from being the definitive list, but it’s definitely a good place to start.

Low Tech Solutions

Notepod

Notepod is a notepad shaped like an iPhone. Each notepod is 100 pages of 60 x 110mm double sided paper. The front has 52mm x 77mm blank space (the iPhone screen), the back is a 6mm grid.

Project Page

iPhone UI Stencil Kit

The iPhone ui stencil kit is a stainless steel, laser cut stencil kit for drawing quick mock-ups and wireframes for iPhone apps. It also comes with a Zebra mechanical pencil.

Project Page

iPhone Sketch Pad

The iPhone Sketchpad works precisely with the iPhone Stencil Kit, with one phone silhouette on the front side and three on the back.

Project Page

App Sketchbook

The App Sketchbook has 50 Double-sided, perforated pages each with 3 actual sized iPhone templates. Each page also has has 20px ruler markings and a ruled section for notes.

Project Page

Vector Images

MetaSpark’s Fireworks Vectors

A collection of vector iPhone UI elements for Fireworks CS3 and CS4.

Project Page

320480 Stencil PSD file

Most iPhone screen elements, sensible layer sets all contained within one PSD file.

Project Page

Graffletopia Stencil Kit for Omnigraffle

Graffletopia’s stencil kit for Omnigraffle. It is for quick sketching of iPhone ideas. Use the outline for printouts so you can hand sketch as well. The symbols are meant as a check list for included features in your app development.

Project Page

MockApp

MockApp is a set of iPhone ui templates and library files put together for use in Powerpoint or Keynote.

Project Page

Firefox Plug-ins

iPhone Prototype

This is a plug-in to browser Mozilla FireFox for prototyping interface of iPhone applications for creating an iPhone mock-up. Currently Alpha – not compatible with FF 3.55.

Project Page

Firefox Pencil

Pencil is a free and opensource tool for making diagrams and GUI prototyping. Pencil runs on the Mozilla Gecko engine, turning the Firefox browser into a sketching tool with just a 400-kilobyte installation package.

Project Page

Fireworks Plug-ins

Unitid

This plug-in combines Fireworks with some jQuery and PHP to give you a prototype you can not only view, but interact with, directly on your iPhone, just as if it’s a live app.

Project Page

iPhone Apps

LiveView

Liveview is an iPhone app that consists of two parts: the ScreenCaster and the Application itself.  ScreenCaster launches a simple iPhone skin on your Mac. From the same network, launch the LiveView app in your iPhone. Whatever the ScreenCaster is highlighting is now seen in the LiveView App. It also interprets touches as mouse clicks, turning it into a two way interactive prototype.

Project Page

Web Based Tools

Mockingbird

Mockingbird is a web based mockup/wireframe tool built using the Cappucino framework, so there’s no flash to wrestle with. While you can’t actually design your mockups from an iPhone (who’d want to?), the tool does have some very handy features. You can drag elements onto the screen, create multiple pages, link to other pages and share directly from the web.

Project Page

Pidoco

 Pidoco is a web-based tool that lets you create clickable wireframes via drag & drop ui and then collaborate with remote users on each project. The tool also includes iPhone stencils.

Project Page

iPhone Mockup

iPhone mockup is a web based tool that is currently in Alpha release only. You can design your mockup as a hand sketch or illustration, and mockups can contain user-uploaded images and user-entered text. Your mockups will be accessible via url so they are unsecured.

The developer makes this perfectly clear and warns that he could discontinue hosting mockups at anytime, thereby deleting any work. That makes this a handy tool for quick and dirty mockups you want to print or share with someone on the fly, but not for much more.

Project Page

Protoshare

Protoshare is a collaborative, web-based prototyping tool that helps teams visualize requirements for interactive projects and work together in real-time. It has an iPhone component that can be seen here.

Project Page

iPlotz

With iPlotz you can create clickable, navigable wireframes to create the experience of a real website or software application. You can also invite others to comment on the designs, and once ready, you can then manage the tasks for developers and designers to build the project.

Project Page

Installed Software

CogTool

CogTool is a general purpose UI prototyping tool simply using a storyboard of your design idea with sketches, images or on a canvas. Demonstrate tasks on that storyboard, then press a button to produce a valid cognitive model predicting how long it will take a skilled user to complete those tasks.

Project Page

Balsamiq

Balsamiq mockups is desktop software that is designed to help teams or clients collaborate on wireframes and mockups. There are iPhone specific controls included.

Project Page

OmniGraffle

OmniGraffle is award winning diagraming mockup or graphic design software. Combined with Graffletopia’s iPhone stencil kit, this software is a great addition to any app developers toolbox.

Project Page

Justinmind Prototyper

Justinmind prototyper allows you to create fully functional wireframes for mobile applications and generate your HTML high-fidelity wireframes.

Project Page

iRise

iRise for iPhones gives developers a way to quickly prototype the look, feel and behavior of Apple iPhone applications through pre-defined visualization widgets and templates that can be quickly assembled into a high definition mobile applications.

Project Page

Quite often I come across some great blog posts, news releases and demos that I want to share, but don’t necessarily warrant an entire blog post. So I am starting a new series of posts titled ‘Newsworthy’ where I’ll share these stories and link to each one.

Developing for the Apple iPhone using Flash

Adobe now makes it possible to create applications for the Apple iPhone using the Adobe Flash Platform.

via Adobe

Mobile Application Analytics

Flurry Analytics provides accurate, real time data to developers about how consumers use their mobile applications.

via Flurry.com

Getting touchy feely with scripty

With just one API, you can now multi-touch enable any web application easily.

via Ajaxian

View Source Tutorial: Sticky Notes With HTML5 and CSS3

Take a look at the Webkit Sticky Notes demo that was created when Webkit first landed it’s HTML 5 SQL storage support.

via Ajaxian

Alpine by alistair221

Tenius by Bach Nguyen

Hydrogen by Louie Mantia

Dashboard by Louie Mantia

Classica Orange by kon

Katha Visual by KdO

Softv2 by kediashubham