"This comprehensive wireframing toolkit provides everything you need to quickly mock up wireframes for your apps. Explore a wide range of standard controls and templates to kickstart your design process efficiently."
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
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 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 20 21 22 23 24 24 25 25 26 27 28 29 30 30 31 31 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 Shortcut keys 32
Application Name Sub Title y loren ipsum dolor sit amet, ectetur adipiscing elit. In vehic ula aliquam nisi non condimemtum y loren ipsum dolor sit amet, ectetur adipiscing elit. In vehic ula aliquam nisi non condimemtum. y loren ipsum dolor sit amet, ectetur adipiscing elit. In vehic ula aliquam nisi non condimemtum. y loren ipsum dolor sit amet, ectetur adipiscing elit. In vehic ula aliquam nisi non condimemtum. y loren ipsum dolor sit amet, ectetur adipiscing elit. In vehic ula 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 y loren ipsum dolor sit amet, ectetur adipiscing elit. In vehic ula aliquam nisi non condimemtum. y loren ipsum dolor sit amet, ectetur adipiscing elit. In vehic ula aliquam nisi non condimemtum. y loren ipsum dolor sit amet, ectetur adipiscing elit. In vehic ula aliquam nisi non condimemtum. y loren ipsum dolor sit amet, ectetur adipiscing elit. In vehic ula aliquam nisi non condimemtum. y loren ipsum dolor sit amet, ectetur adipiscing elit. In vehic ula 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
Application Name Hub Title Hub Title Hub Title Hub Title 120 px space here 80 px 80 px 80 px Sample Hub Sample Hub Sample Hub Sample this space is for the app bar
Collection Title 1 Item title 1 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. Item Sub Title 1 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. 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 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 facilisis condimentum 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 facilisis condimentum 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 3 Item Sub Title Item Description: A facilisis condimentum 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 4 Item Sub Title Item Description: A facilisis condimentum
Application Name Lorem ipsum dolor Lorem ipsum dolor sit nonumy sed Consectetuer ising elit, sed diam Description text: 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.
Application Name Lorem ipsum dolor Search g Button Button Button Expand bucket Browse bucket Lorem Ipsum 1 Lorem Ipsum 2 Lorem Ipsum 3 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 Lorem Ipsum 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
Context menus Check boxes Rest state / down outside Rest state / down outside Reply Make small Reply all Unpin Finger down Finger down Forward Uninstall Finger up Finger up Mark as unread Disabled unchecked Disabled checked Delete Mouse hover Mouse hover Delete album 1 1 Keyboard focus Keyboard focus Add to playlist z Intermediate View tracks v Pin to favorites
Command button (link) Informational text excepteur sink occaecat cupidat non proident, sunt Informational text excepteur sink occaecat cupidat non proident, sunt Informational text excepteur sink occaecat cupidat non proident, sunt Yes, share and connect Use this option for home or work Yes, share and connect Use this option for home or work 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. Secondary command link rest state Lorem ipsum dolor sit amet, consectur elit adipisicing elit, sed do eiusmod. Secondary command link rest state Lorem ipsum dolor sit amet, consectur elit adipisicing elit, sed do eiusmod. Tertiary command link rest state Tertiary command link rest state Tertiary command link rest state
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 Button
In-App Search Search with Focus Search rest g lo Search g Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Search disabled Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Search g Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Inline errors Edit box label Check box label sample text for edit 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 Lorem ipsum dolor sit amet, consectetur elit. Aenean id velit nisl, eget temporg Lorem ipsum dolor sit amet, consectetur elit. Aenean id velit nisl, eget temporg Edit box label Edit box label Radio button label Submit Cancel
Flyouts Media Player 14:58:20 28:00:00 Delete Lorem Ipsum Are you sure you want to delete this email? Once deleted, it will be placed in the Trash folder. Are you sure you want to delete this email? Once deleted, it will be placed in the Trash folder. Delete Delete file anyway Error loading from server 14:58:20 28:00:00 14:58:20 28:00:00
Message bar Retry Close The mail server for unmatched@hotmail.com needs this PC to be more secure before it starts syncing Lorem ipsum dol....Learn more
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 Button
Nav bar z My Account Line 1 Line 1 Line 1 Home My Apps
Progress Password box Determinate bar Password rest state box Indeterminate Ring (inline) Password box mouse hover state 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 Pizza Indeterminate Ring Password box disabled state Enter password
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 Push button finger down Default Push button finger down Button Button Hover state Label text g (11 pt) Push button finger up Default push button finger up Button Button Push button disabled state Default Push button disabled state Pressed state Button Button Label text g (11 pt) Label text g (11 pt) Default push button hover state Push button mouse hover state Button Button Keyboard focus Keyboard focus Disabled state Label text g (11 pt) Button Button Label text g (11 pt) Label text g (11 pt)
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
Sliders Rest state Disabled state Hover state Pressed state v 50 v 51
Text box Edit box rest state Edit box mouse hover state state Edit box group label This is an example of an edit field g that 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 Enter sample text Enter sample text This is an example of an edit field that has three lines of text. This is an example of an edit field. Edit box pressed/focus state Clear button mouse hover state sample sample Edit box group label 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 sampletext for edit Edit box disabled state with helper text Enter sample text Edit box disabled state with user input sample text for edit Edit box mouse hover state with user text Edit box rest state with user input entered sample text for edit sample text for edit
Toggle button Toggle menu Toggle button glyph is developer controlled Rest state (off) Rest state (on) Left Left Center Center Finger down Finger down Right Right Bold Bold Finger up (on) Finger up (off) Italics Italics Mouse hover (off) Mouse hover (off) Disabled state (on) Disabled state (off)
Toggle switch Tooltips WiFi rest state On WiFi rest state www.microsoft.com Off WiFi hover state On WiFi hover state Off yLorem ipsum dolor sit amet elit. Nunc egestas fingilla lorem WiFi pressed state On WiFi pressed state Off WiFi disabled state On WiFi disabled state Off 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.
Editing slides Presentation 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 Save Print Close New Find text Spell Check General Ctrl-S Ctrl-P Ctrl-W Ctrl-N Ctrl-F F7 Undo Repeat Help Ctrl-Z Ctrl-Y F1 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 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 Slideshow 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
