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

Facebook

Twitter

LinkedIn

Google +

Video (Streamed)

Vine

Instagram

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


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



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

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








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 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.


Tue Jul 30 2013

Creator

Modified


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



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



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


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


Tue Jul 30 2013

Creator

Modified


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



13.1

10.0 11.0 12.0 13.0

11.2

12.1

10.2

10.3

10.4

Share


Tue Jul 30 2013

Creator

Modified


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











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


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


Tue Jul 30 2013

Creator

Modified


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




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

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
























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.


Tue Jul 30 2013

Creator

Modified


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
























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

Wireframes app i_phone_ios7_example

Design

Transcript of Wireframes app i_phone_ios7_example