FILE NAME
Andrew Scott
Wireframes_App_iPhone_iOS7_Example
CREATOR
Tue Jul 30 2013MODIFICATION DATE
iOS7 iPhone App
DESCRIP...
iOS7 iPhone App
App Flowchart
Tue Jul 30 2013
Creator
Modified
Andrew Scott | hello@thisisstimulate.co.uk | www.thisisstimu...
iOS7 iPhone App
iPhone Wireframe 1 - 4
Tue Jul 30 2013
Creator
Modified
Andrew Scott | hello@thisisstimulate.co.uk | www.th...
iOS7 iPhone App
iPhone Wireframe 5 - 10
Tue Jul 30 2013
Creator
Modified
Andrew Scott | hello@thisisstimulate.co.uk | www.t...
iOS7 iPhone App
iPhone Wireframe 10 - 13
Tue Jul 30 2013
Creator
Modified
Andrew Scott | hello@thisisstimulate.co.uk | www....
iOS7 iPhone App
iPhone Wireframe 14 - 18
Tue Jul 30 2013
Creator
Modified
Andrew Scott | hello@thisisstimulate.co.uk | www....
iOS7 iPhone App
iPhone Wireframe 19 - 23
Tue Jul 30 2013
Creator
Modified
Andrew Scott | hello@thisisstimulate.co.uk | www....
iOS7 iPhone App
iPhone Wireframe 24 - 28
Tue Jul 30 2013
Creator
Modified
Andrew Scott | hello@thisisstimulate.co.uk | www....
Upcoming SlideShare
Loading in...5
×

Wireframes app i_phone_ios7_example

447
-1

Published on

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
447
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Wireframes app i_phone_ios7_example

  1. 1. 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 Omnigraffle for iOS7 VERSION HISTORY
  2. 2. 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
  3. 3. iOS7 iPhone App iPhone Wireframe 1 - 4 Tue Jul 30 2013 Creator Modified Andrew Scott | hello@thisisstimulate.co.uk | www.thisisstimulate.co.uk 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 field 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 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 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.
  4. 4. iOS7 iPhone App iPhone Wireframe 5 - 10 Tue Jul 30 2013 Creator Modified Andrew Scott | hello@thisisstimulate.co.uk | www.thisisstimulate.co.uk 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 fields 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 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 View 3 Mountain View 5 ,Mountain View 7 Mountain View 9 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 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 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
  5. 5. iOS7 iPhone App iPhone Wireframe 10 - 13 Tue Jul 30 2013 Creator Modified Andrew Scott | hello@thisisstimulate.co.uk | www.thisisstimulate.co.uk 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 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 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 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
  6. 6. iOS7 iPhone App iPhone Wireframe 14 - 18 Tue Jul 30 2013 Creator Modified Andrew Scott | hello@thisisstimulate.co.uk | www.thisisstimulate.co.uk 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 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 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 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 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
  7. 7. iOS7 iPhone App iPhone Wireframe 19 - 23 Tue Jul 30 2013 Creator Modified Andrew Scott | hello@thisisstimulate.co.uk | www.thisisstimulate.co.uk 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 Lorem ipsum dolor sitamet, consectetur adipiscng elit. In porta mattis rhoncus. 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 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 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.
  8. 8. iOS7 iPhone App iPhone Wireframe 24 - 28 Tue Jul 30 2013 Creator Modified Andrew Scott | hello@thisisstimulate.co.uk | www.thisisstimulate.co.uk 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 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 Screen On 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×