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.

Contents Grid landing page Hub page 8.0 Grid item detail page Grid group detail page Hub page 8.1 Grid vertical scroll 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 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 Slide number

templates

Ǻy loren ipsum dolor sit amet, ectetur adipiscing elit. In vehic ula aliquam nisi non condimemtum. Item properties, date, or size Ǻy loren ipsum dolor sit amet, ectetur adipiscing elit. In vehic ula aliquam nisi non condimemtum. Item properties, date, or size Ǻy loren ipsum dolor sit amet, ectetur adipiscing elit. In vehic ula aliquam nisi non condimemtum. Item properties, date, or size Ǻy loren ipsum dolor sit amet, ectetur adipiscing elit. In vehic ula aliquam nisi non condimemtum. Item properties, date, or size Ǻy loren ipsum dolor sit amet, ectetur adipiscing elit. In vehic ula aliquam nisi non condimemtum. Item properties, date, or size Ǻy loren ipsum dolor sit amet, ectetur adipiscing elit. In vehic ula aliquam nisi non condimemtum. Item properties, date, or size Ǻy loren ipsum dolor sit amet, ectetur adipiscing elit. In vehic ula aliquam nisi non condimemtum. Item properties, date, or size Ǻy loren ipsum dolor sit amet, ectetur adipiscing elit. In vehic ula aliquam nisi non condimemtum. Item properties, date, or size Application Name Sub Title Ǻy loren ipsum dolor sit amet, ectetur adipiscing elit. In vehic ula aliquam nisi non condimemtum. Item properties, date, or size Ǻy loren ipsum dolor sit amet, ectetur adipiscing elit. In vehic ula aliquam nisi non condimemtum. Item properties, date, or size

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

Collection Title 1 Item title 1 Item Sub Title 1 Item Content: Ǻ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisl nibh, eleifend posuere laoreet egestas, porttitor quis lorem. Ut congue commodo massa at lobortis. Maecenas aliquam tellus nec ipsum tempor id laoreet sem viverra. Proin leo nulla, scelerisque non congue nec, facilisis a tellus. Sed varius rhoncus metus, et condimentum ipsum luctus ullamcorper. Aliquam odio purus, ornare ut aliquam id, varius nec neque. Nullam lobortis mollis magna, sit amet convallis velit feugiat vel. Aliquam laoreet, leo et imperdiet fringilla, magna tortor vehicula sapien, non convallis nunc augue ac orci. Pellentesque sed turpis a arcu rutrum rutrum. Donec bibendum magna vitae Ǻ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisl nibh, eleifend posuere laoreet egestas, porttitor quis lorem. Ut congue commodo massa at lobortis. Maecenas aliquam tellus nec ipsum tempor id laoreet sem viverra. Proin leo nulla, scelerisque non congue nec, facilisis a tellus. Sed varius rhoncus metus, et posuere aliquam id, varius nec neque. Nullam lobortis mollis magna, sit amet convallis velit feugiat vel. Pellentesque sed turpis a arcu rutrum rutrum. Donec bibendum magna vitae massa dignissim sagittis facilisis purus cursus. Ut rutrum imperdiet sapien eget elementum. In eu laoreet tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque suscipit erat sed neque molestie sagittis. Mauris quis felis sem. esque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin eu ligula vel orci ultrices lobortis quis et felis. Nunc lacinia quam ut quam varius ultrices. Etiam purus arcu, pretium vel suscipit vitae, blandit nec ligula. Nam ultricies tincidunt vestibulum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris et elit dui. Cras elementum blandit turpis, ac vestibulum sem scelerisque a. Mauris molestie, tellus sed sollicitudin dictum, ligula diam hendrerit magna, mattis consectetur tortor mi sit amet erat. Aliquam at eros justo, eu suscipit odio. Praesent eros elit, facilisis non elementum in, auctor quis odio. Curabitur in sem in arcu scelerisque feugiat. Pellentesque dictum, turpis nec vulputate dignissim, orci libero lobortis nisi, id sagittis massa erat quis elit.

Collection title 1 Collection Sub Title 1 Item Title 1 Item Sub Title Item Description: A Proin leo nulla, scelerisque facilisis a tellus. Sed varius rhoncus metus, et condimentum ipsum luctus ullamcorpoer. Item Title 2 Item Sub Title Item Description: A Proin leo nulla, scelerisque facilisis a tellus. Sed varius rhoncus metus, et condimentum ipsum luctus ullamcorpoer. Item Title 3 Item Sub Title Item Description: A Proin leo nulla, scelerisque facilisis a tellus. Sed varius rhoncus metus, et condimentum ipsum luctus ullamcorpoer. Item Title 4 Item Sub Title Item Description: A Proin leo nulla, scelerisque facilisis a tellus. Sed varius rhoncus metus, et condimentum ipsum luctus ullamcorpoer. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget tellus sapien. Morbi ultrices posuere dui, id tempus magna imperdiet in.. Mauris ultricies eros sed augue faucibus consequat. Sed vel massa luctus nisi sagittis bibendum eu ut nibh.. Item Title 4 Item Sub Title Item Description: A Proin leo nulla, scelerisque facilisis a tellus. Sed varius rhoncus metus, et condimentum ipsum luctus ullamcorpoer. Item Title 3 Item Sub Title Item Description: A Proin leo nulla, scelerisque facilisis a tellus. Sed varius rhoncus metus, et condimentum ipsum luctus ullamcorpoer. Item Title 2 Item Sub Title Item Description: A Proin leo nulla, scelerisque facilisis a tellus. Sed varius rhoncus metus, et condimentum ipsum luctus ullamcorpoer. Item Title 2 Item Sub Title Item Description: A Proin leo nulla, scelerisque facilisis a tellus. Sed varius rhoncus metus, et condimentum ipsum luctus ullamcorpoer.

Application Name Lorem ipsum dolor Lorem ipsum dolor sit nonumy sed Consectetuer ising elit, sed diam Ǻ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisl nibh, eleifend posuere laoreet egestas, porttitor quis lorem. Ut congue commodo massa at lobortis. Maecenas aliquam tellus nec ipsum tempor id laoreet sem viverra. Proin leo nulla, scelerisque non congue nec, facilisis a tellus. Sed varius rhoncus metus, et posuere aliquam id, varius nec neque. Nullam lobortis mollis magna, sit amet convallis velit feugiat vel. Description text: Item Title Item Sub Title Item Description: A Proin leo nulla, scelerisque facilisis a tellus. Sed varius rhoncus metus, et condimentum ipsum luctus ullamcorpoer. Item Title Item Sub Title Item Description: A Proin leo nulla, scelerisque facilisis a tellus. Sed varius rhoncus metus, et condimentum ipsum luctus ullamcorpoer. Item Title Item Sub Title Item Description: A Proin leo nulla, scelerisque facilisis a tellus. Sed varius rhoncus metus, et condimentum ipsum luctus ullamcorpoer. Item Title Item Sub Title Item Description: A Proin leo nulla, scelerisque facilisis a tellus. Sed varius rhoncus metus, et condimentum ipsum luctus ullamcorpoer. Item Title Loren ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor scelerisque Lorem in vehicula. Aliquam tincidunt, lacus ut Item Title Loren ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor scelerisque Lorem in vehicula. Aliquam tincidunt, lacus ut Item Title Loren ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor scelerisque Lorem in vehicula. Aliquam tincidunt, lacus ut Item Title Loren ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor scelerisque Lorem in vehicula. Aliquam tincidunt, lacus ut Item Title Loren ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor scelerisque Lorem in vehicula. Aliquam tincidunt, lacus ut Item Title Loren ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor scelerisque Lorem in vehicula. Aliquam tincidunt, lacus ut Lorem ipsum dolor

Button Lorem Ipsum 1 Lorem Ipsum 2 Lorem Ipsum 3 Application Name Search Ễg Lorem Ipsum Item Title Item Description: Ǻ Proin leo nulla Item Title Item Description: Ǻ Proin leo nulla Item Title Item Description: Ǻ Proin leo nulla Item Title Item Description: Ǻ Proin leo nulla Item Title Item Description: Ǻ Proin leo nulla Item Title Item Description: Ǻ Proin leo nulla Item Title Item Description: Ǻ Proin leo nulla Item Title Item Description: Ǻ Proin leo nulla Item Title Item Description: Ǻ Proin leo nulla Item Title Item Description: Ǻ Proin leo nulla Item Title Item Description: Ǻ Proin leo nulla Item Title Item Description: Ǻ Proin leo nulla Expand bucket Browse bucket

controls

Label App bar

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

Image gallery / image gallery basket

Command button (link) Yes, share and connect Use this option for home or work Secondary command link rest state Lorem ipsum dolor sit amet, consectur elit adipisicing elit, sed do eiusmod. Informational text excepteur sink occaecat cupidat non proident, sunt Tertiary command link rest state Informational text excepteur sink occaecat cupidat non proident, sunt Secondary command link rest state Lorem ipsum dolor sit amet, consectur elit adipisicing elit, sed do eiusmod. Tertiary command link rest state Yes, share and connect Use this option for home or work Tertiary command link rest state Yes, share and connect Use this option for home or work Secondary command link rest state Lorem ipsum dolor sit amet, consectur elit adipisicing elit, sed do eiusmod.

Date/time picker Select time 10 Select date Select date - abbreviation Select date PM67Sep77September Carousel behavior for touch and mouse

App dialog Main instruction Ǻy ǺyLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc egestas fringilla lorem, quis commodo nisi venenatis non. Vestibulum augue ipsum, adipiscing sed cursus id, varius id velit. Morbi id tortor in erat tristique hendrerit ut pulvinar ante. Button

Flipper

In-App Search Search Ễg Search rest Search disabled Ễg lo Lorem ipsum dolor sit amet Search with Focus

Inline errors Check box label Edit box label This credit card number is not valid. Please enter a valid credit card number Lorem ipsum dolor sit amet, consectetur elit. Aenean id velit nisl, eget temporg Radio button label sample text for edit Edit box label Lorem ipsum dolor sit amet, consectetur elit. Aenean id velit nisl, eget temporg SubmitCancel

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

Message bar The mail server for needs this PC to be more secure before it starts syncing Lorem ipsum dol....Learn more CloseRetry

Message dialog ǺyLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc egestas fringilla lorem, quis commodo nisi venenatis non. Vestibulum augue ipsum, adipiscing sed cursus id, varius id velit. Button

Nav bar z Home My Apps My Account Line 1

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

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

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

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

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

Edit box rest state Text box Edit box rest state with helper text Edit box pressed/focus state Edit box text selection Edit box disabled state with helper text Edit box disabled state with user input Edit box rest state with user input entered Enter sample text sample text for edit Enter sample textsample text for edit Edit box mouse hover state state Edit box mouse hover state with helper text Clear button mouse hover state sample Enter sample text Clear button pressed Edit box mouse hover state with user text sample text for edit Edit box group label This is an example of an edit field Ǻg that has two lines of textǺg. Edit box group label 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 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

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

Toggle switch WiFi rest state WiFi hover state WiFi pressed state WiFi disabled state On Off WiFi rest state WiFi hover state WiFi pressed state WiFi disabled state Tooltips ǺyLorem ipsum dolor sit amet elit. Nunc egestas fingilla lorem ǺyLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc egestas fringilla lorem, quis commodo nisi venenatis non. Vestibulum augue ipsum, adipiscing sed cursus id, varius id velit.

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 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 F5 Right arrow Left arrow number, Enter key B W Home end F1 Home Esc 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 Editing slides Presentation General Slideshow