Tag Archives: Iphone

Iphone wireframe and interface toolkit

Posted on by
6

A wireframe is a design tool used to easily communicate ideas, and allow for quick iteration. Wireframes can be created easily by anyone with or without technical know-how to discuss ideas.

Often when I work on projects with CEO’s and high-level executives there is a problem communicating design, concepts and intent. People may cite the lack of design or drawing skills. A wireframe levels the playing field allowing anyone with even basic Powerpoint skills to create basic screen designs.  I posted my original wireframe for web-applications here.  I’m now back with an iPhone based version.

Why iPhone? Well first off I’ve been doing a number of iPhone related projects including Runkeeper and GPSTwit among others. Secondly the iPhone provides a unique interface language and set of reusable design patterns that can be easily incorporated into new applications. While the basic wireframe components can be used to conceptualize any mobile device the iPhone interface makes it uniquly different.

The primary design pattern used on the phone is the list pattern. There are many examples of the list pattern but the basic idea is that it allows you to add/edit/remove/view sets of items.  The second design pattern is the table pattern usually used for forms, input and settings. Combined these two elements form the foundation of the platform.

The wireframe provides a number of examples of how these patterns can be used, modified or altered.

Update: We’ve released a pro set of wireframe templates for purchase here.

Post to Twitter

Extended Off-Screen Keyboard

Posted on by
3

This is a quickie concept.  A while back I had an idea for a multi-touch keyboard. It was an interesting idea and I’m sure at some point it will become reality. However we’re a software company not a hardware player. What could we do in software using existing hardware?

What if you took the essence of that idea and made it as a complimentary tool to your existing keyboards:

The basic idea is that the device connects back to your computer and acts like a secondary display. This would be application sensitive so in PhotoShop you see visual tools on your secondary display and in Word you get editing tools.

Post to Twitter

Iphone Clipboard Concept for Cut, Copy, Paste

Posted on by
2

One of the current drawback of certain touch devices (Iphone) is it’s lack of copy/paste functionality. The difficultly in creating this functionality on a mobile device is that the interaction technique has to be non-intrucive to the core interface. 

Unlike a desktop application where you can toss commands into a menu the interaction model on a phone has to be more direct and gestural.  The copy/paste model I’m proposing tries to address some of these issues. 

When a user is viewing a core text area:

  1. They can scroll (tap + drag ).
  2. They can move the insertion pointer (tap)
  3. They can use the magnifier loupe to position the insertion pointer (tap+hold)
In my illustration you could activate additional copy/paste gestures:
  1. You can bring up the copy/paste pallet ( tap+tap near the insertion pointer)
  2. Once the panel is open you can mark a selection (tap+dragging) from the insertion point creates a selection. Similarly you could create a selection with two fingers marking both corners..
  3. When in copy/paste mode the keyboard is replaced by your recently cut/copied blocks of text or images.  You can tap a piece of text to insert it into your document 
Note: The tap+tap gesture is sometimes used in application to zoom however it is never used to zoom while editing text or viewing read-only text such as in emails or contact lists. 
Unfortunately at this point it’s not possible for third party application developers to write an extension such as this so it’s a concept sketch only at this point. 
P.S. Did you know we’re now developing and designing mobile apps?  Check out our latest design work for a new fitness startup focused on running. 

Post to Twitter