Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

I have to do some prototyping for an iPad app, and just realized why I was having so much trouble: this is an iPad app. I am used to design website pages/templates, computer interfaces, etc.. I have my usability rules, I know when and how to apply them, but these don't work on an iPad, mainly because it is not a computer (took me a while to figure it..).

The main problem I have is about screen size / sliding. For my usual designs, I would start a canvas of a standard resolution (usually 1024*768 or 1280*1024) and start throwing stuff at it. I create a page for each menu, and voilà. Websites have scrolling, but it is not too problematic as you still have on screen roughly the same arrangement of header/footer/sidebars/content

But on iPad, sliding is an integral part of navigation, and is even preferred over buttons navigation.

So I would like my app screens to rely more on sliding than button-pushing. What would be the best option for this (I am only prototyping/designing, not building the actual app)?

  • start with a canvas bigger than an iPad screen, and say to the client: "so, the screen is actually displaying only this portion of the design at at time, and the user can slide it"
  • create several pages, and assume them independant from each other, and the user will just slide between them
  • some other options I am not seeing?

(don't hesitate to ask questions as comments before proposing answers, as it is pretty late, so I doubt my question is pretty clear; I'll correct and explain it based on feedback)

share|improve this question
add comment

4 Answers

up vote 3 down vote accepted

You could do both. Since sliding is really just switching pages, each page is unique, so should warrant its own design.

However, they ARE related to each other in that they all belong to the same slide sequence. So, I would create a thumbnail (less detailed perhaps) view to show the slide relationship between the pages.


There are also iPad prototyping tools and templates that may make things easier, and let the client get a true feel of the final design:

How to create interactive iPad app prototypes in 30 minutes


Or go one step further, and design the layout by actually creating a functioning app prototype:

Appcelerator :: Titanium Mobile

share|improve this answer
    
It's just a design prototype, so no interactivity yet, but the relation thumbnail was helpful, thanks :) –  Scrollmaster Feb 7 '12 at 9:03
add comment

This very problem is the reason I decided to create my own iPad prototyping app.

With static mockups it is hard to demonstrate to clients the functionality outside of the canvas area. Building a html prototype solves this issue but can be a time consuming process. I haven't seen another iPad app which allows you to create prototypes with scrollable regions, they tend to all have the same issue you have static mockups. I think my solution is a good solution to the problem at hand.

It allows you to create scrollable view areas so that you can demonstrate screen overflow functionality. It is called Live Wires.

share|improve this answer
add comment

I really think you'll enjoy this article from Smashing Magazine. This is right up your alley.

http://uxdesign.smashingmagazine.com/2012/01/31/ten-things-think-about-designing-ipad-app/

share|improve this answer
add comment

It depends a lot on the type of app, but for high definition prototyping, HTML and JS works well and then just show it via the iPad emulator itself.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.