1 / 32

Wireframing toolkit

Wireframing toolkit. This deck has everything you need to quickly mock up wireframes for your apps. Use the provided templates to get started.

amir-bryan
Download Presentation

Wireframing toolkit

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Wireframing toolkit This deck has everything you need to quickly mock up wireframes for your apps. Use the provided templates to get started. The second section has all the standard controls you’ll need. Just copy and paste to your new file, or add slides at the end of this deck and delete unnecessary slides when you’re done. All the controls are editable so you can change color and text as needed.

  2. Contents Slide number Slide number Grid landing page Hub page 8.0 Grid item detail page Grid group detail page Hub page 8.1 Grid vertical scroll 4 5 6 7 8 9 Media player Message bar Message dialog Nav bar Password boxes Progress rings Push buttons Ratings Radio buttons Scroll control Sliders Text boxes Toggle buttons Toggle menu Toggle switch Tooltips Shortcut keys 20 21 22 23 24 24 25 25 26 27 28 29 30 30 31 31 32 Controls: App bar Check boxes Context menus Collection (image gallery) Command button link Date/time picker App dialog Flipper In-app search/search with focus Flyouts Inline errors 11 12 12 13 14 15 16 17 18 20 19

  3. templates

  4. Application Name Sub Title Ǻylorenipsum dolor sit amet, ecteturadipiscingelit. In vehicula aliquam nisi non condimemtum. Ǻylorenipsum dolor sit amet, ecteturadipiscingelit. In vehicula aliquam nisi non condimemtum. Ǻylorenipsum dolor sit amet, ecteturadipiscingelit. In vehicula aliquam nisi non condimemtum. Ǻylorenipsum dolor sit amet, ecteturadipiscingelit. In vehicula aliquam nisi non condimemtum. Ǻylorenipsum dolor sit amet, ecteturadipiscingelit. In vehicula aliquam nisi non condimemtum. Ǻylorenipsum dolor sit amet, ecteturadipiscingelit. In vehicula aliquam nisi non condimemtum. Ǻylorenipsum dolor sit amet, ecteturadipiscingelit. In vehicula aliquam nisi non condimemtum. Ǻylorenipsum dolor sit amet, ecteturadipiscingelit. In vehicula aliquam nisi non condimemtum. Ǻylorenipsum dolor sit amet, ecteturadipiscingelit. In vehicula aliquam nisi non condimemtum. Ǻylorenipsum dolor sit amet, ecteturadipiscingelit. In vehicula aliquam nisi non condimemtum. Item properties, date, or size Item properties, date, or size Item properties, date, or size Item properties, date, or size Item properties, date, or size Item properties, date, or size Item properties, date, or size Item properties, date, or size Item properties, date, or size Item properties, date, or size

  5. Application Name Hub Title Hub Title Hub Title Hub Title 120 px space here 80 px 80 px 80 px Sample Sample Hub Sample Hub Sample Hub this space is for the app bar

  6. Item title 1 Ǻ Loremipsum dolor sit amet, consecteturadipiscingelit. Sednislnibh, eleifendposuerelaoreetegestas, porttitorquislorem. Utconguecommodomassa at lobortis. Maecenas aliquamtellusnecipsumtempor id laoreetsemviverra. Proinleonulla, scelerisque non conguenec, facilisis a tellus. Sedvariusrhoncusmetus, et posuerealiquam id, variusnecneque. Nullamlobortismollis magna, sit ametconvallisvelitfeugiat vel. Pellentesquesedturpis a arcurutrumrutrum. Donecbibendum magna vitae massadignissimsagittisfacilisispuruscursus. Utrutrumimperdietsapienegetelementum. In eulaoreettellus. Class aptenttacitisociosqu ad litoratorquent per conubia nostra, per inceptoshimenaeos. Pellentesquesuscipiteratsednequemolestiesagittis. Maurisquisfelis sem. esque habitant morbitristiquesenectus et netus et malesuada fames ac turpisegestas. Proineu ligula velorciultriceslobortisquis et felis. Nunclacinia quam ut quam variusultrices. Etiampurusarcu, pretiumvelsuscipit vitae, blanditnec ligula. Nam ultriciestinciduntvestibulum. Class aptenttacitisociosqu ad litoratorquent per conubia nostra, per inceptoshimenaeos. Mauris et elit dui. Craselementumblanditturpis, ac vestibulumsemscelerisque a. Maurismolestie, tellussedsollicitudin dictum, ligula diamhendrerit magna, mattisconsecteturtortor mi sit ameterat. Aliquam at erosjusto, eususcipitodio. Praesenteroselit, facilisis non elementum in, auctorquisodio. Curabitur in sem in arcuscelerisquefeugiat. Pellentesque dictum, turpisnecvulputatedignissim, orciliberolobortis nisi, id sagittismassaeratquiselit. Item Sub Title 1 Collection Title 1 Item Content: Ǻ Loremipsum dolor sit amet, consecteturadipiscingelit. Sednislnibh, eleifendposuerelaoreetegestas, porttitorquislorem. Utconguecommodomassa at lobortis. Maecenas aliquamtellusnecipsumtempor id laoreetsemviverra. Proinleonulla, scelerisque non conguenec, facilisis a tellus. Sedvariusrhoncusmetus, et condimentumipsumluctusullamcorper. Aliquamodiopurus, ornareutaliquam id, variusnecneque. Nullamlobortismollis magna, sit ametconvallisvelitfeugiat vel. Aliquamlaoreet, leo et imperdietfringilla, magna tortorvehiculasapien, non convallisnuncaugue ac orci. Pellentesquesedturpis a arcurutrumrutrum. Donecbibendum magna vitae

  7. Collection Sub Title 1 Item Title 1 Item Title 2 Item Title 2 Item Title 4 Item Title 2 Item Title 3 Item Title 3 Item Title 4 Item Sub Title Item Sub Title Item Sub Title Item Sub Title Item Sub Title Item Sub Title Item Sub Title Item Sub Title Item Description: A Proinleonulla, scelerisque facilisis a tellus. Sedvariusrhoncusmetus, et condimentumipsumluctusullamcorpoer. Item Description: A Proinleonulla, scelerisque facilisis a tellus. Sedvariusrhoncusmetus, et condimentumipsumluctusullamcorpoer. Item Description: A Proinleonulla, scelerisque facilisis a tellus. Sedvariusrhoncusmetus, et condimentumipsumluctusullamcorpoer. Item Description: A Proinleonulla, scelerisque facilisis a tellus. Sedvariusrhoncusmetus, et condimentumipsumluctusullamcorpoer. Item Description: A Proinleonulla, scelerisque facilisis a tellus. Sedvariusrhoncusmetus, et condimentumipsumluctusullamcorpoer. Item Description: A Proinleonulla, scelerisque facilisis a tellus. Sedvariusrhoncusmetus, et condimentumipsumluctusullamcorpoer. Item Description: A Proinleonulla, scelerisque facilisis a tellus. Sedvariusrhoncusmetus, et condimentumipsumluctusullamcorpoer. Item Description: A Proinleonulla, scelerisque facilisis a tellus. Sedvariusrhoncusmetus, et condimentumipsumluctusullamcorpoer. Collection title 1 Loremipsum dolor sit amet, consecteturadipiscingelit. Morbiegettellussapien. Morbiultricesposuere dui, id tempus magna imperdietin..Mauris ultricies eros sed augue faucibus consequat. Sedvelmassaluctus nisi sagittisbibendumeuutnibh. .

  8. Application Name Loremipsum dolor Loremipsum dolor Loremipsum dolor Loremipsum dolor Item Title Item Title Item Title Item Title Item Title Item Title Item Title Item Title Item Title Item Title Item Sub Title Item Sub Title Item Sub Title Item Sub Title Loren ipsum dolor sit amet, consectetur adipiscingelit. Vivamustemporscelerisque Lorem in vehicula. Aliquamtincidunt, lacus ut Loren ipsum dolor sit amet, consectetur adipiscingelit. Vivamustemporscelerisque Lorem in vehicula. Aliquamtincidunt, lacus ut Loren ipsum dolor sit amet, consectetur adipiscingelit. Vivamustemporscelerisque Lorem in vehicula. Aliquamtincidunt, lacus ut Loren ipsum dolor sit amet, consectetur adipiscingelit. Vivamustemporscelerisque Lorem in vehicula. Aliquamtincidunt, lacus ut Loren ipsum dolor sit amet, consectetur adipiscingelit. Vivamustemporscelerisque Lorem in vehicula. Aliquamtincidunt, lacus ut Loren ipsum dolor sit amet, consectetur adipiscingelit. Vivamustemporscelerisque Lorem in vehicula. Aliquamtincidunt, lacus ut Item Description: A Proinleonulla, scelerisque facilisis a tellus. Sedvariusrhoncusmetus, et condimentumipsumluctusullamcorpoer. Item Description: A Proinleonulla, scelerisque facilisis a tellus. Sedvariusrhoncusmetus, et condimentumipsumluctusullamcorpoer. Item Description: A Proinleonulla, scelerisque facilisis a tellus. Sedvariusrhoncusmetus, et condimentumipsumluctusullamcorpoer. Item Description: A Proinleonulla, scelerisque facilisis a tellus. Sedvariusrhoncusmetus, et condimentumipsumluctusullamcorpoer. Loremipsum dolor sit nonumysed Consectetuerisingelit, seddiam Description text: Ǻ Loremipsum dolor sit amet, consecteturadipiscingelit. Sednislnibh, eleifendposuerelaoreetegestas, porttitorquislorem. Utconguecommodomassa at lobortis. Maecenas aliquamtellusnecipsumtempor id laoreetsemviverra. Proinleonulla, scelerisque non conguenec, facilisis a tellus. Sedvariusrhoncusmetus, et posuerealiquam id, variusnecneque. Nullamlobortismollis magna, sit ametconvallisvelitfeugiat vel.

  9. Application Name Loremipsum dolor Expand bucket Browse bucket LoremIpsum 1 LoremIpsum 2 LoremIpsum 3 Button Button Button Search Ễg Item Title Item Title Item Title Item Title Item Title Item Title Item Title Item Title Item Title Item Title Item Title Item Title Item Description: ǺProinleonulla Item Description: ǺProinleonulla Item Description: ǺProinleonulla Item Description: ǺProinleonulla Item Description: ǺProinleonulla Item Description: ǺProinleonulla Item Description: ǺProinleonulla Item Description: ǺProinleonulla Item Description: ǺProinleonulla Item Description: ǺProinleonulla Item Description: ǺProinleonulla Item Description: ǺProinleonulla LoremIpsum LoremIpsum

  10. controls

  11. App bar Label Label Label Label Label Label

  12. Context menus Check boxes Rest state / down outside Rest state / down outside Make small Reply Finger down Finger down Unpin Reply all Finger up Finger up Forward Uninstall Disabled unchecked Disabled checked Mark as unread Delete Mouse hover Mouse hover Delete album Add to playlist Keyboard focus Keyboard focus 1 1 View tracks v Intermediate Pin to favorites z

  13. Image gallery / image gallery basket

  14. Command button (link) Informational text excepteur sink occaecatcupidat non proident, sunt Informational text excepteur sink occaecatcupidat non proident, sunt Informational text excepteur sink occaecatcupidat non proident, sunt Yes, share and connect Yes, share and connect Yes, share and connect Use this option for home or work Use this option for home or work Use this option for home or work Secondary command link rest state Secondary command link rest state Secondary command link rest state Loremipsum dolor sit amet, consectur elitadipisicingelit, sed do eiusmod. Loremipsum dolor sit amet, consectur elitadipisicingelit, sed do eiusmod. Loremipsum dolor sit amet, consectur elitadipisicingelit, sed do eiusmod. Tertiary command link rest state Tertiary command link rest state Tertiary command link rest state

  15. Date/time picker 9 10 11 12 2 3 4 5 6 12 2 3 4 5 6 7 8 9 11 12 2 3 4 5 6 7 8 10 11 12 2 3 4 5 6 7 10 11 12 2 3 4 5 6 7 Select time Carousel behavior for touch and mouse 2 3 4 5 6 7 8 9 10 1 September 7 6 PM 35 10 7 7 Sep 1 Select date 1 1 1 1 Select date - abbreviation Select date

  16. App dialog Main instruction Ǻy ǺyLoremipsum dolor sit amet, consecteturadipiscingelit. Nuncegestasfringillalorem, quiscommodo nisi venenatis non. Vestibulumaugueipsum, adipiscingsedcursus id, varius id velit. Morbi id tortor in erattristiquehendreritutpulvinar ante. Button Button

  17. Flipper

  18. In-App Search Search with Focus Search rest Loremipsum dolor sit amet Loremipsum dolor sit amet Search disabled Loremipsum dolor sit amet Loremipsum dolor sit amet Search Ễg Search Ễg Ễg lo Loremipsum dolor sit amet Loremipsum dolor sit amet Loremipsum dolor sit amet Loremipsum dolor sit amet Loremipsum dolor sit amet Loremipsum dolor sit amet

  19. Inline errors Edit box label Check box label Check box label Edit box label This credit card number is not valid. Please enter a valid credit card number Edit box label Edit box label sample text for edit sample text for edit sample text for edit Loremipsum dolor sit amet, consecteturelit. Aenean id velitnisl, egettemporg Loremipsum dolor sit amet, consecteturelit. Aenean id velitnisl, egettemporg Edit box label Edit box label Radio button label Submit Cancel

  20. Flyouts Media Player Delete 14:58:20 28:00:00 Are you sure you want to delete this email? Once deleted, it will be placed in the Trash folder. Delete Error loading from server LoremIpsum 14:58:20 28:00:00 Are you sure you want to delete this email? Once deleted, it will be placed in the Trash folder. Delete file anyway 14:58:20 28:00:00

  21. Message bar Retry The mail server for unmatched@hotmail.com needs this PC to be more secure before it starts syncing Loremipsum dol....Learn more Close

  22. Message dialog Button ǺyLoremipsum dolor sit amet, consecteturadipiscingelit. Nuncegestasfringillalorem, quiscommodo nisi venenatis non. Vestibulumaugueipsum, adipiscingsedcursus id, varius id velit. Button

  23. Nav bar z Line 1 My Account Line 1 Line 1 Home My Apps

  24. Progress Password box Determinate bar Password rest state box Indeterminate Ring (inline) Password box mouse hover state Enter password Enter password Enter password Pwd box pressed/focus state/no text entered Indeterminate Bar Password box pressed/focus state/text entered Show characters mouse hover state Show characters button pressed/reveals pwd Indeterminate Ring Pizza Password box disabled state

  25. Push buttons Average rating Default push button rest state Push button rest state Rest state Rest state / rated Label textǺg (11 pt) Label textǺg (11 pt) Button Button Button Button Button Push button finger down Default Push button finger down Hover state Button Button Label textǺg (11 pt) Push button finger up Default push button finger up Push button disabled state Default Push button disabled state Pressed state Label textǺg (11 pt) Label textǺg (11 pt) Button Button Default push button hover state Push button mouse hover state Button Keyboard focus Keyboard focus Disabled state Label textǺg (11 pt) Label textǺg (11 pt) Button Button Label textǺg (11 pt)

  26. Radio button Radio button group label Radio button group label Radio button group label Label Rest state /down-outside Rest state /down-outside Radio even longer sample label Finger down Finger down Radio longer label Finger up Finger up Radio button group label Disabled unselected Disabled unselected Label Mouse hover Mouse hover Radio even longer sample label Keyboard focus Keyboard focus Radio longer label

  27. Scroll control Panning indicator (touch) Scroll controls rest (mouse) Hover (mouse) Pressed (mouse) Disabled (mouse)

  28. Sliders Rest state Disabled state Hover state v v 51 50 Pressed state

  29. Text box Edit box rest state Edit box mouse hover state state Edit box group label sample text for edit Enter sample text sample text for edit Enter sample text sample text for edit Enter sample text This is an example of an edit field Ǻgthat has two lines of textǺg. Edit box rest state with helper text Edit box mouse hover state with helper text Edit box group label Edit box pressed/focus state Clear button mouse hover state This is an example of an edit field that has three lines of text. This is an example of an edit field. Edit box group label sample sample Clear button pressed Edit box text selection This is an example of an edit field that has four lines of text. This is an example of an edit field that has four lines of text. This is an example of an text for edit sample Edit box disabled state with helper text Edit box disabled state with user input Edit box mouse hover state with user text Edit box rest state with user input entered

  30. Toggle button glyph is developer controlled Toggle button Toggle menu Rest state (off) Rest state (on) Left Left Finger down Finger down Center Center Right Right Finger up (on) Bold Finger up (off) Bold Italics Italics Mouse hover (off) Mouse hover (off) Disabled state (on) Disabled state (off)

  31. Toggle switch Tooltips WiFi rest state WiFi rest state On Off www.microsoft.com WiFi hover state WiFi hover state Off On WiFi pressed state WiFi pressed state ǺyLoremipsum dolor sit ametelit. Nuncegestasfingillalorem On Off WiFi disabled state WiFi disabled state On Off ǺyLoremipsum dolor sit amet, consecteturadipiscingelit. Nuncegestasfringillalorem, quiscommodo nisi venenatis non. Vestibulumaugueipsum, adipiscingsedcursus id, varius id velit.

  32. Editing slides Presentation General Slideshow Ctrl-Shift-C Ctrl-Shift-V Tab Ctrl-A Ctrl-Shift-G Ctrl-Shift-H Ctrl and Drag Ctrl-MouseWheel Shift-F9 Alt-F9 F1 Ctrl-S Ctrl-P Ctrl-W Ctrl-N Ctrl-F F7 Ctrl-Z Ctrl-Y F1 Save Print Close New Find text Spell Check Undo Repeat Help Start Next slide or build Previous slide Jump to slide number Black slide White slide First slide Last slide Quick keys Re-start Quit/end show F5 Right arrow Left arrow number, Enter key B W Home end F1 Home Esc New slide Copy slide Bold Italic Underline Superscript Subscript Font size bigger Font size smaller Change case Remove formatting Ctrl-M Ctrl-D Ctrl-B Ctrl-I Ctrl-U Ctrl-Shift + Ctrl= Ctrl-Shift > Ctrl-Shift < Shift-F3 Ctrl Space Copy autoshape style Paste autoshape style Cycle through all objects Select all objects Group all objects Ungroup objects Copy object Zoom In/Out Show grid Show guides Help

More Related