Wireframes app i_phone_ios7_example

FILE NAME
Andrew Scott
Wireframes_App_iPhone_iOS7_Example
CREATOR
Tue Jul 30 2013MODIFICATION DATE
iOS7 iPhone App
DESCRIPTION This is a work example of wire framing using Omnigrafﬂe for iOS7
VERSION HISTORY

iOS7 iPhone App
App Flowchart
Tue Jul 30 2013
Creator
Modified
Andrew Scott | hello@thisisstimulate.co.uk | www.thisisstimulate.co.uk
2 / 8
Articles Screen Brochure Request
Screen
Events Screen
Images Screen
Videos Screen
Social Media
Screen
Sign Up Screen
Process
In-app
DB Access
Dialogue
Box
Data
input /
Output
Decision
Sort
FLOWCHART KEY
Screen
In-app
DB Access
Dialogue
Box
Data
input /
Output
Decision
Sort
FLOWCHART KEY
In-app
DB Access
Sorted by newest
first
Success
Sorted by newest
first
Sorted by newest
first
Settings Screen
Article
Fail
Maps
Share
Video Page
Facebook Connect
Twitter Connect
LinkedIn Connect
Push Notifications
Feedback
Font Size
T & C's
Privacy Policy
Start
Update
Available?
Yes
No
Download
Warning
API
Data
Connection
Warning
Login SignupInvalid Details
Google + Connect
Facebook
Twitter
LinkedIn
Google +
Video (Streamed)
Vine
Instagram
Submit API
Calendar
Image
Address
Lookup
Success
Fail
Submit API
Success
Fail
Submit API
Success Fail
Submit API

iOS7 iPhone App
iPhone Wireframe 1 - 4
Tue Jul 30 2013
Creator
Modiﬁed
3 / 8
1.0 Login Screen
The Login Screen allows the user to login into the
involve app, it also allows the user to sign up if they
don't already have an account.
Once the user has entered in their credentials they will
be saved and the app will auto login until the user
physically logs out of their account.
1.1 Login Input Fields
Here the user enters their login credentials, the
password ﬁeld is hidden.
1.2 Password Reset
Tapping on 'password reset' will take the user through
to another screen where they can enter in details
enabling them to go through the password reset
process.
1.3 Sign Up
If the user has not created an account then they will be
able to by tapping on the 'sign up'
2.0 Home Screen
The home screen will contain the main navigation
allowing the user to quickly jump into their area of
choice.
2.1 Menu Items
Menu items will be left aligned and contain the
connected page name & an icon.
Tapping on the icon should have a slight animation to
provide feedback to the user that an action is being
performed.
2.2 Settings Button
This is kept separate from the 'content' links as this is
app based.
2.3 Poor Data Connection
If there is a poor data connection then this will be
displayed at the top of the screen.
3.0 Article Home Screen
The article home screen is sorted with the newest
articles situated towards the top of the screen, articles
are downloaded in chunks, when the user scrolls to the
bottom of the screen new articles are automatically
loaded.
3.1 Navigation Bar
The navigation bar displays the current page title in the
centre along with the previous page, this can be tapped
or using the new iOS7 control the user can slide from
left to right to go back to the previous screen.
NB The 'back' title must match the previous page title.
3.2 Article Segment
There are two types of article segment, these include a
text article & an image article.
Article Segment Layout
Article Title
Source & Publication Date
Article Text or Image
Tapping anywhere within the bound of the article
segment will take the user through to that article.
4.0 Article Screen
The article screen contains all the content and is vertically
scrollable. The layout is the same as 3.2
4.1 Next Article Button
At the bottom of the article there is the option to navigate
through to the next article, this saves the user having to go
back and scroll down through the list of items.
11:27 AM
Home
1.0 2.0 4.0
11:27 AM
Articles
Articles
Brochure Request
Events
Images
Videos
Social Media
Sign Up
Settings
Here'stothecrazyones.
Lorem ipsum dolor sitamet,
consectetur adipiscng elit.
In porta mattis rhoncus.
Vestibulum sodales metus
at purus hendrerit, eu dk
Home
This is an example of an article title.
http://source.com 20 minutes ago
This is an example of an article title, on
a double line, Awesome.
http://source2.com Yesterday
http://source3.com July 1st 2013
Loading more innovation articles
11:27 AM
Article OneArticles
Lorem ipsum dolor sitmet,
consectetur adipiscing
elit. Sed gravida, dolor
quis viverra interdum,
eros turpis elementumquam,
vehicula vehicula nunc
elit quis massa. Etiam
ultrices ornare rhoncus.
Proin eget quam ac nunc
dictum pulvinar. Aliquam
condimentum molestie tmpor.
Donec lacinia tortor vel
metus ornare tristique.
Nam feugiat nunc nonellus
ultricies, ut sollicitudin
orci semper. Mauris quis
euismod nisl. Cum sociis
natoque penatibus et
magnis dis parturient
montes, nascetur ridiculus
mus. Donec imperdiet nec
augue interdum imperdiet.
Proin viverra luctus
Next Article: Article Two
11:27 AM
ArticlesHome
Fetching new articles
Email Address
Password
Lorem ipsum dolor itamet,
consectetur adipiscng
elit. In porta mattis
rhoncus. Vestibulum dffdf
sodales metus t. In
porta mattis rhoncus. dfd
Sign Up
Sign Up
Password Reset
Login
Company Logo
1.1
1.2
1.3
2.1
2.2
3.0
3.1
3.2
3.3
tap
4.1
Last updated 21 minutes ago
Oh No! Poor Data Connection. 2.3
Or have a test drive!
3.3 Pull to Refresh
The pull to refresh function allows the user to pull down
when at the top of the content, this will do a check and
download any additional content that may have been
added whilst the user has been browsing.

iOS7 iPhone App
Tue Jul 30 2013
Creator
Modiﬁed
4 / 8
5.0 Brochure Request Screen
The signup screen allows the user to register their
credentials, this is then submitted via API to the server,
the user is automatically logged into the app at this
point.
5.1 Address Lookup
Once the user has entered their postcode they will be
able to lookup their address using an external 3rd party
lookup API.
This will take the user through to screen 6.0
5.2 Manual Address Input
The user can also request to input their details
manually, tapping on this button will expand the
address ﬁelds out and allow the user to enter their
details using the following:
Address Line 1
Address Line 2
Town
Postcode
6.0 Address Lookup Screen
This is an example of the scroll wheel that will show the
addresses that have been returned by the API, to
choose one the user taps the address.
8.0 Success Screen
If the submission is successful the user will get a success
screen, this will display for around 2/3 seconds before
reverting back to the home screen.
5.0 6.0 7.0 8.0
7.0 Submit Request Screen
Here the user can see the details they are about to
submit.
7.1 Marketing Button
The user has the option to turn on or off marketing
7.2 Send Brochure Button
Once the user is happy with the details they can tap the
'send my brochure' button which will submit the details
via an API.
9.0 Failure Screen
If the submission fails (in this example we are using a lack
of data connectivity) then the user will receive a warning
informing them of the issue.
They will then have to manually tap the back to home
screen button.
11:27 AM
Brochure RequestHome
11:27 AM
9.0
So, you want our brochure? Well we wan't
your details, lets do a swapsee!
Full Name
Postcode
Lookup Address
11:27 AM
Full Name
M1 4GG
Postcode
Lookup Address
1 Mountain View
3 Mountain View
5 ,Mountain View
7 Mountain View
9 Mountain View
5 Mountain View
Enter ManuallyEnter Manually
11:27 AM
Full Name
tap
5 Mountain View
Manchester
M1 4GG
Change Address
From time to time we might send
you marketing material, are we
ok to do this?
Send my brochure
Thanks for your details, we will send out
your brochure immediately and you can
expect to receive it within 7 working days.
11:27 AM
Oh no! There has been a problem along the
way.
We have detected a weak phone signal,
please move into an area with better
coverage and try again.
Back to the home screen
5.1
5.2
7.1
7.2

iOS7 iPhone App
Tue Jul 30 2013
Creator
Modiﬁed
5 / 8
11:27 AM
Events
M T W T F S S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
July
29 30 31
11:27 AM
EventsHome
M T W T F S S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
July
29 30 31
10.0 Events Screen
The events screen shows the latest events that are
available. The user can tap on their chosen day and the
events will be listed below.
Upon scrolling the whole screen will scroll.
10.1 Calendar
The calendar allows the user to make quick selections, a
coloured dot represents an event on that day, multiple dots
represent multiple events.
10.2 Event Details
The event details are displayed upon tapping on the date, if
there are multiple event they will be displayed in a list.
10.3 Register for Event
Tapping on this button will open an in app web view if
available.
11:27 AM
EventsHome
M T W T F S S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
July
29 30 31
Date: Thursday 11 July
From: 0900hr
To: 1700hr
Involve
20 Broadwick St
London
W1F 8HT
Event Overview
consectetur adipiscing elit.
Sed gravida, dolor quis
viverra interdum, eros
turpis elementumquam,
vehicula vehicula nunc elit
quis massa. Etiam ultrices
ornare rhoncus. Proin eget
Agenda
0900 - 1030 - Meet and Greet
1100 - 1300 - The future of mobile:
1300 - 1400 - Lunch
1400 - 1700 - The future of
tap
Register for Event
Event Floor Plan
Event Branding
10.1
10.4 Event Map
Tapping on this button if available will open up a PDF Event
map.
10.5 Slide Interaction
The user can slide through the months of the calendar by
sliding from left to right or right to left.
10.5
Add to iCal Show in Maps
11.0 Images Screen
Images are sorted into chronological order with the
newest items being at the top.
The user can scroll vertically on this screen to get to the
older items.
11.1 Layout
Images will always be displayed in 3 columns.
11.2 Auto Load
When the user scrolls to the bottom of the screen new
images will be auto loaded. This bar will be displayed
whilst they are getting loaded.
11:27 AM
ImagesHome
This is a description of the images above,
this can be as long or as short as your
want. Cool eh?
http://source2.com Yesterday
Loading more images
11.1
12.0 Image Screen
The image screen will display the image full size, the user
will be able to manipulate the images using rotate, pinch to
zoom and double tap as with the native iOS photos app.
12.1 Share Button
The user can share the item using iOS7's new share bar by
tapping in this button.
11:27 AM
ImageCategory Two
tap
http://source2.com 1st July 2012
This is a itty bitty description.
9.1
13.0 Video Screen
The video screen will display all the available videos in#a#2#
column#list#being#from#le2 to right.
Each video will display the title above the date of upload,
the menu will be vertically scrollable, pre loading video
thumbnails every 10 to 12 items.
13.1 Video Thumbnail
The video thumbnail is a still image taken from a part of the
video.
11:27 AM
VideosHome
Video title. A longer video title.
Oct 1st 2012 Aug 18th 2012
Oct 1st 2012 Aug 18th 2012
Oct 1st 2012 Aug 18th 2012
13.1
10.0 11.0
12.0 13.0
11.2
12.1
10.2
10.3
10.4
Share

iOS7 iPhone App
Tue Jul 30 2013
Creator
Modiﬁed
6 / 8
15.0 16.0 17.0
14.0 Video Article Screen
The technology article home screen is sorted with the
newest articles situated towards the top of the screen,
articles are downloaded in chunks, when the user
scrolls to the bottom of the screen new articles are
automatically loaded.
14.1 Large Video Thumbnail
Tapping on this video thumbnail will stream the video
via the youtube player app.
14.2 Video Information
The article consists of:
• Article title, which can be on 1 or 2 lines.
• The article source and the duration since upload on the
same line
• Article Description
14.3 Video Carousel
The video carrousel will display the next videos these
can be quickly tapped taking the user to that video
screen without the need to go back to the video wall
screen.
11:27 AM
VideoVideos
A longer video title.
Aug 18th 2012
Aug 18th 2012
Aug 18th 2012
A lo
Aug
Lorem ipsum
do loritam
Lorem ipsum
do loritam
Lo
ri
14.1
14.3
14.2
15.0 Social Media Screen
The user can go to any of the social media connection using
an in app web view, this keeps the user in the app.
15.1 Social media Button
Tapping on the social media icon will take the user to that
social media site using an in app web view, the user can
browse and connect with them if they wish.
11:27 AM
Social MediaHome
15.1
11:27 AM
Sign UpHome
Full Name
Email Address
Show Password
Password
Sign up using Facebook
or
Sign Up
11:27 AM
Sign UpHome
Andrew Scott
Full Name
andrew@email
Email Address
Show Password
Password
Sign up using Facebook
or
Sign Up
Good, you're human!
This is not a real email address! :(
11:27 AM
Your account has been activated,
you will shortly receive an email to
conﬁrm! Thanks!
Back to the home screen
14.0 18.0
16.0 Sign Up Screen
Users can sign up to the app, allowing them to keep their
settings across multiple devices, this also allows the user to
log into the website associated with the app.
16.1 Facebook SSO
Tapping this button will instigate the Facebook Single Sign
On API
if successful the user will be logged straight into the app.
16.2 User Details
The user can alternatively add their own details and sign up
manually, here the user has to enter their:
Full Name
Email Address
Password
16.3 Show Password
Turning this switch on allows the user to check their
password before submission, it is on by default.
16.4 Sign Up
Once all the user credentials have been entered they can
tap here and submit their details using the API.
17.0 Inline Validation
Each entry is validated to check the contents before
submission.
Green indicates the correct input has been entered
Red indicates that the wrong information has been entered.
18.0 Success Screen
Once submitted the app will receive a response informing
the user if they have been successful, this screen will be
displayed when successful.
18.1 Back to Home Screen
The screen will automatically take the user through to the
home screen after a few seconds, this allows the user to
override that function.
16.1
16.2
16.3
16.4
18.1

iOS7 iPhone App
Tue Jul 30 2013
Creator
Modified
7 / 8
20.0 Google + In App Webview Screen
19.0 20.0 21.0 22.0
19.0 Settings Screen
The settings screen allows the user to make changes to the
app settings.
19.1 Social Media Connect
Tapping on the social media connect options will either
connect seamlessly using the built in iOS functionality, if this
is not available then the user will be taken to a web view log
in as seen in 22.0
19.2 Push Notifications
This will turn push notifications on or off.
19.3 Screen Links
The following links will take the user through to their chosen
screen.
19.4 Logout
This will log the user out and take them back to the app
login screen.
21.0 Feedback Screen
The user can send feedback to involve admin team, this will
be done in the form of an email.
The email address is still TBC
11:27 AM
SettingsHome
11:27 AM
Google +Settings
23.0
Account NameFacebook
Account NameTwitter
Account NameLinkedIn
Google +
Push Notifications
Feedback
MediumFont Size
Terms & Conditions
Privacy Policy
Logout
Account Name
11:27 AM
FeedbackSettings
Name
Vestibulum sodales metus at
Email
Comment
Submit Feedback
Email
Password
Sign in
Can't access your google account?
Create a Google account
19.1
19.2
19.3
19.4
Warning
Are you sure you want to logout of
the Involve App?
Yes, logoutNo, Cancel
Warning
Involve app would like to send you
push notifications, Allow?
Yes, AllowNo, Cancel
11:27 AM
Font SizeSettings
11:27 AM
T & C'sSettings
Terms & Conditions
A B C D E F G H I J
K L M N O P Q R S T
U V W X Y Z
24.1
22.0 Font Size Screen
The user can change the size of the typeface within the
app, this will aid in easier reading of articles
NB this won't changes the size of the type in PDF
documents.
22.1 Slider
The user changes the typeface size by using the slider
horizontally.
23.0 Terms & Conditions Screen
This screen will display the Terms & Conditions.

iOS7 iPhone App
Tue Jul 30 2013
Creator
Modiﬁed
8 / 8
24.0 25.0 26.0 27.0
24.0 Privacy Policy Screen
This screen will display the Privacy Policy
11:27 AM
Privacy PolicySettings
28.0
Privacy Policy
25.0 Walkthrough Screen
On ﬁrst time use, the user will be presented with 4
walkthrough screens which will show them how to use
the app.
These can be skipped.
To navigate through the screen the user can either tap
on next or a slide the screen horizontally.
NextSkip
x4
Articles
Brochure Request
Events
Images
Videos
Social Media
Sign Up
tap

Wireframes app i_phone_ios7_example

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Wireframes app i_phone_ios7_example

Ähnlich wie Wireframes app i_phone_ios7_example (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Wireframes app i_phone_ios7_example