iPhone App Example for Designing a Mobile Website/App

mobile-prototyping
#1

I’ve built this iPhone example to be a helpful resource for building mobile apps and websites.

[ul]
[li]Pixel Height and Width of iPhone Screen[/li][li]Mobile and iPhone interactions Swipe and Scroll Boundaries[/li][li]Mobile Accordion[/li][li]Sliding Dynamic Panel States[/li][li]Simulate Pinned Footer and Header (Without using Pin To Browser)[/li]
[/ul]

This file includes many of the basic interactions involved when designing a mobile app or website - along with guides and pixel dimensions for designing for iPhone.

Any suggestions, feedback, improvements would be welcome.

View on your computer: http://share.axure.com/XSN5SX

View on your device http://bit.ly/axiphone or http://tvkf9j.axshare.com/Page_1.html

ipt.png1137×814 216 KB

For more information on mobile prototyping please check out our Mobile Website Tutorial and iPhone App Tutorials & Training Articles

Disclaimer: This template is built with the latest 6.5 Beta (2974 )so that the swipe/flick would work. You can download 6.5 at www.axure.com/download.
iPhone-Template-6.5-w-swipe.rp (514 KB)

#2

thanks Mr. Paul

thanks,
kpjothivelu

#3

I’ve updated this file to use the new OnSwipeLeft and OnSwipeRight which is available in the latest and greatest build of Axure 6.5 Beta.

#4

Trying to create a native mobile app

#5

this helps, I’m closer than before but still off! oye ve…

#6

quick question how about for horizontal views?

#7

Thanks for sharing!

#8

Hello Paul,

In the beginning I’d like to say sorry. I’m not fluent english. Hope you will understand my question.
Your templates are great. I just want to be sure that my first iphone application is not impossible to make by designer. I mean FONTS in general.

I read alot about fonts dp, px, points (photoshop for example). I want to use “real” fonts size in Axure (as pixels). I’ll give you an example.

Let’s say “Top bar 320 × 20 pt, font size is 13 pt”. What size of font should I use in Axure to be sure If you know what I mean? Do you? I hope you do.

Thanks for your help!

#9

Hey Greg,
Axure 6 switched to essentially store font sizes in pixels and the dpi of the document just affects the displayed font size in the droplist. This makes it so it can be consistent across computers with different DPI and it doesn’t suddenly change all your text sizes if you change the document DPI.
from the post link below "The default dpi for Axure RP documents has been changed from 96 dpi to 72 dpi. At 72 dpi, a font size of N points is equal to a font size of N pixels. Essentially, font sizes are in pixels by default. The default font size of the widgets is now 13 px versus 10 pts at 96 dpi or 13.33 px.
"
If you prefer to think of your font sizes in pts at 96 dpi, you can change the dpi setting for your document in Wireframe->Grid and Guides->Grid Settings.

You can read more about it here
Axure RP 6 Beta Update - Pixel Font Size

#10

hi ,paul,
I’m sorry to ask for your help because I 'm not able visit http://bit.ly to download the tutorial zip file. It always returned error code 101:connection is reset.
The website address looks different with others I had ever visited.
Is there something unusual with the site?
or is it possible to change to another site to in your convenience? Thank you !

#11

Hi leonpard - try this link http://tvkf9j.axshare.com/Page_1.html

#12

Hello Paul,

First of all, congratulations for your example.
I have tried to download: iPhone Widget Library
But the error message always comes up: The requested URL /axure-iphone-widgets-and-library/ was not found on this server.
Do you know anywhere I can download it?

Thanks in advance!

#13

Sure, what is the whole URL you’re trying to reach and where is it linked from?

I would recommend using my personal iPhone library “remix” you can find that here - Getting started with iphone 5 screen design

#14

Hey Paul thank you so much. The new link is working fine. Just to let you know, the link that is generating error message is the following: http://paulsizemore.com/axure-iphone-widgets-and-library/

Thanks again!!

#15

Hi Paul,

Agree a fine example. However I’m having trouble replicating the two interactions above and was hoping you could write out the required settings/relationships for each. So in my excercise to recreate these interactions:

  1. The Inline Frame which is frame targeted to page 1 won’t scroll page 1 up and down when published (nor does it show the cross arrow cursor like yours does). I see that you have ‘preview image’ set to custom and then there is an import button. Did you import something to allow for it’s panning/scrolling action?

  2. I’m not seeing any pan interactions set up for panning between images (1,2,3) on page one. How was that set up?

Thanks ahead for adding more details!

#16

Hi Boxer,

For the scroll and swipe Interactions, Paul implemented this in Page 1, on the Dynamic Panel called “Content”. Here’s a screenshot:

Content DP Interactions

You’ll see there that he also used Conditional Logic and Hot Spots to simulate reaching the top and bottom boundary of the content. Hope this helps!

Alex

#23

Hello Paul,
You are wrote a Nice Post

#24

thank you very goood. ایرانیا فیلم

closed #25