Wireframes app i_phone_ios7_example
-
Upload
andrew-scott -
Category
Design
-
view
233 -
download
4
description
Transcript of Wireframes app i_phone_ios7_example
FILE NAMEAndrew ScottWireframes_App_iPhone_iOS7_Example
CREATORTue Jul 30 2013MODIFICATION DATE
iOS7 iPhone App
DESCRIPTION This is a work example of wire framing using Omnigraffle for iOS7
VERSION HISTORY
iOS7 iPhone AppApp Flowchart
Tue Jul 30 2013
Creator
Modified
Andrew Scott | [email protected] | www.thisisstimulate.co.uk2 / 8
Articles Screen Brochure Request Screen Events Screen
Images Screen Videos ScreenSocial Media
Screen Sign Up Screen
Process
In-appDB Access
Dialogue Box
Data input / Output
Decision
Sort
FLOWCHART KEY
Screen
In-appDB Access
Dialogue Box
Data input / Output
Decision
Sort
FLOWCHART KEY
In-appDB 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
NoDownload Warning
APIData
ConnectionWarning
Login SignupInvalid Details
Google + Connect
Google +
Video (Streamed)
Vine
Submit APICalendar
Image
Address Lookup
Success
Fail
Submit API
Success
Fail
Submit API
Success Fail
Submit API
iOS7 iPhone AppiPhone Wireframe 1 - 4
Tue Jul 30 2013
Creator
Modified
Andrew Scott | [email protected] | www.thisisstimulate.co.uk3 / 8
1.0 Login ScreenThe 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 FieldsHere the user enters their login credentials, the password field is hidden.
1.2 Password ResetTapping 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 UpIf the user has not created an account then they will be able to by tapping on the 'sign up'
2.0 Home ScreenThe home screen will contain the main navigation allowing the user to quickly jump into their area of choice.
2.1 Menu ItemsMenu 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 ButtonThis is kept separate from the 'content' links as this is app based.
2.3 Poor Data ConnectionIf there is a poor data connection then this will be displayed at the top of the screen.
3.0 Article Home ScreenThe 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 BarThe 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 SegmentThere are two types of article segment, these include a text article & an image article.
Article Segment LayoutArticle TitleSource & Publication DateArticle Text or Image
Tapping anywhere within the bound of the article segment will take the user through to that article.
4.0 Article ScreenThe article screen contains all the content and is vertically scrollable. The layout is the same as 3.2
4.1 Next Article ButtonAt 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
Her
e's
to th
e cr
azy
ones
.
Lorem ipsum dolor sitamet,
consectetur adipiscng elit.
In porta mattis rhoncus.
Vestibulum sodales metus
at purus hendrerit, eu dk
consectetur adipiscng elit.
In porta mattis rhoncus.
Home
This is an example of an article title.http://source.com 20 minutes ago
Lorem ipsum dolor sitamet,
consectetur adipiscng elit.
In porta mattis rhoncus.
Vestibulum sodales metus
at purus hendrerit, eu dk
consectetur adipiscng elit.
In porta mattis rhoncus.
This is an example of an article title, on a double line, Awesome.http://source2.com Yesterday
This is an example of an article title, on a double line, Awesome.http://source3.com July 1st 2013
Loading more innovation articles
11:27 AM
Article OneArticles
This is an example of an article title, on a double line, Awesome.http://source.com 20 minutes ago
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
Lorem ipsum dolor sitamet,
consectetur adipiscng elit.
In porta mattis rhoncus.
Vestibulum sodales metus
at purus hendrerit, eu dk
consectetur adipiscng elit.
In porta mattis rhoncus.
Next Article: Article Two
11:27 AM
ArticlesHome
This is an example of an article title.http://source.com 20 minutes ago
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
Vestibulum sodales metus
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 RefreshThe 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 AppiPhone Wireframe 5 - 10
Tue Jul 30 2013
Creator
Modified
Andrew Scott | [email protected] | www.thisisstimulate.co.uk4 / 8
5.0 Brochure Request ScreenThe 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 LookupOnce 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 InputThe user can also request to input their details manually, tapping on this button will expand the address fields out and allow the user to enter their details using the following:Address Line 1Address Line 2TownPostcode
6.0 Address Lookup ScreenThis 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 ScreenIf 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 ScreenHere the user can see the details they are about to submit.
7.1 Marketing ButtonThe user has the option to turn on or off marketing
7.2 Send Brochure ButtonOnce 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 ScreenIf 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
Brochure RequestHome
So, you want our brochure? Well we wan't your details, lets do a swapsee!
Full Name
M1 4GG
Postcode
Lookup Address
1 Mountain View3 Mountain View
5 ,Mountain View7 Mountain View9 Mountain View
5 Mountain View
Enter ManuallyEnter Manually
11:27 AM
Brochure RequestHome
So, you want our brochure? Well we wan't your details, lets do a swapsee!
Full Name
tap
5 Mountain ViewManchesterM1 4GGChange Address
From time to time we might send you marketing material, are we ok to do this?
Send my brochure
Brochure RequestHome
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
Brochure RequestHome
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 AppiPhone Wireframe 10 - 13
Tue Jul 30 2013
Creator
Modified
Andrew Scott | [email protected] | www.thisisstimulate.co.uk5 / 8
11:27 AM
EventsM 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
EventsHomeM 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 ScreenThe 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 CalendarThe 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 DetailsThe 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 EventTapping on this button will open an in app web view if available.
11:27 AM
EventsHomeM 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 JulyFrom: 0900hrTo: 1700hr
Involve20 Broadwick StLondonW1F 8HT
Event OverviewLorem 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
Agenda0900 - 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 MapTapping on this button if available will open up a PDF Event map.
10.5 Slide InteractionThe 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 ScreenImages 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 LayoutImages will always be displayed in 3 columns.
11.2 Auto LoadWhen 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 ScreenThe 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 ButtonThe 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 ScreenThe 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 ThumbnailThe 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
Video title. A longer video title.Oct 1st 2012 Aug 18th 2012
Video title. A longer video title.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 AppiPhone Wireframe 14 - 18
Tue Jul 30 2013
Creator
Modified
Andrew Scott | [email protected] | www.thisisstimulate.co.uk6 / 8
15.0 16.0 17.0
14.0 Video Article ScreenThe 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 ThumbnailTapping on this video thumbnail will stream the video via the youtube player app.
14.2 Video InformationThe 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
Lorem ipsum dolor sitamet,
consectetur adipiscng elit.
In porta mattis rhoncus.
Vestibulum sodales metus
at purus hendrerit, eu dk
consectetur adipiscng elit.
In porta mattis rhoncus.
This is an example of an article title.http://source.com 20 minutes ago
A longer video title.Aug 18th 2012
A longer video title.Aug 18th 2012
A loAug
Lorem ipsum
do loritam
Lorem ipsum
do loritam
Lo
ri
14.1
14.3
14.2
15.0 Social Media ScreenThe 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 ButtonTapping 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 ScottFull Name
andrew@emailEmail 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
Brochure RequestHome
Your account has been activated, you will shortly receive an email to confirm! Thanks!
Back to the home screen
14.0 18.0
16.0 Sign Up ScreenUsers 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 SSOTapping this button will instigate the Facebook Single Sign On API
if successful the user will be logged straight into the app.
16.2 User DetailsThe user can alternatively add their own details and sign up manually, here the user has to enter their:Full NameEmail AddressPassword
16.3 Show PasswordTurning this switch on allows the user to check their password before submission, it is on by default.
16.4 Sign UpOnce all the user credentials have been entered they can tap here and submit their details using the API.
17.0 Inline ValidationEach entry is validated to check the contents before submission.
Green indicates the correct input has been enteredRed indicates that the wrong information has been entered.
18.0 Success ScreenOnce 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 ScreenThe 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 AppiPhone Wireframe 19 - 23
Tue Jul 30 2013
Creator
Modified
Andrew Scott | [email protected] | www.thisisstimulate.co.uk7 / 8
20.0 Google + In App Webview Screen
19.0 20.0 21.0 22.0
19.0 Settings ScreenThe settings screen allows the user to make changes to the app settings.
19.1 Social Media ConnectTapping 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 NotificationsThis will turn push notifications on or off.
19.3 Screen LinksThe following links will take the user through to their chosen screen.
19.4 LogoutThis will log the user out and take them back to the app login screen.
21.0 Feedback ScreenThe 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
Lorem ipsum dolor sitamet,
consectetur adipiscng elit.
In porta mattis rhoncus.
Vestibulum sodales metus at
Comment
Submit Feedback
Password
Sign in
Can't access your google account?
Create a Google account
19.1
19.2
19.3
19.4
WarningAre you sure you want to logout of
the Involve App?
Yes, logoutNo, CancelWarning
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
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
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 ScreenThe 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 SliderThe user changes the typeface size by using the slider horizontally.
23.0 Terms & Conditions ScreenThis screen will display the Terms & Conditions.
iOS7 iPhone AppiPhone Wireframe 24 - 28
Tue Jul 30 2013
Creator
Modified
Andrew Scott | [email protected] | www.thisisstimulate.co.uk8 / 8
24.0 25.0 26.0 27.0
24.0 Privacy Policy ScreenThis screen will display the Privacy Policy
11:27 AM
Privacy PolicySettings
28.0
Privacy Policy
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
25.0 Walkthrough ScreenOn first 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