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 youll need. Just copy and paste to your new file, or add slides at the end of this deck and delete unnecessary slides when youre 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

Slide number
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

Slide number
20 21 22 23 24 24 25 25 26 27 28 29 30 30 31 31 32

11 12 12 13 14 15 16 17 18 20 19

templates

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

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 aliquam nisi non condimemtu
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 aliquam nisi non condimemtu
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
Item Sub 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. 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.

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

Collection title 1
Collection Sub Title 1
Item Title 1
Item Sub Title

It

It

Item Description: A Proin leo nulla, scelerisque facilisis a tellus. Sed varius rhoncus metus, et condimentum ipsum luctus ullamcorpoer.

I f c

Item Title 2
Item Sub Title

It

It

Item Description: A Proin leo nulla, scelerisque facilisis a tellus. Sed varius rhoncus metus, et condimentum ipsum luctus ullamcorpoer.

It fa c

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 3
Item Sub Title

It

It

Item Description: A Proin leo nulla, scelerisque facilisis a tellus. Sed varius rhoncus metus, et condimentum ipsum luctus ullamcorpoer.

It fa c

Item Title 4
Item Sub Title

It

Ite

Item Description: A Proin leo nulla, scelerisque facilisis a tellus. Sed varius rhoncus metus, et condimentum ipsum luctus ullamcorpoer.

It fa c

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
Search g

Lorem ipsum dolor

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

controls

App bar

Label

Label

Label

Label

Label

Label

Check boxes
Rest state / down outside Rest state / down outside

Context menus
Reply
Reply all Forward Make small Unpin Uninstall

Finger down

Finger down

Finger up

Finger up

Mark as unread
Disabled unchecked Disabled checked

Delete

Mouse hover

Mouse hover

1 z

Keyboard focus

Keyboard focus

Delete album Add to playlist View tracks

Intermediate

Pin to favorites

Image gallery / image gallery basket

Command button (link)

Informational text excepteur sink occaecat cupidat non proident, sunt
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. Tertiary command link rest state

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 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
Secondary command link rest state Lorem ipsum dolor sit amet, consectur elit adipisicing elit, sed do eiusmod. Tertiary command link rest state

Date/time picker
Select time Carousel behavior for touch and mouse

10
Select date

35

PM

9 10

10
11 12

11 12

12 1 1 2 3 4 5 6 7 8 9 10

10
11 12

11 12

1 1 2 3 4 5 6 7 8

2 3 4 5 6 7 8 9

1 2 3 4 5 6 7

Select date - abbreviation

1 2 3

2 3 4

Sep

Select date

4
7

5
6 7

September

5 6

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

Flipper

In-App Search
Search rest

Search with Focus

g lo
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

Search g
Search disabled

Search g

Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet

Inline errors
Check box label Check 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

Edit box label

sample text for edit

Lorem ipsum dolor sit amet, consectetur elit. Aenean id velit nisl, eget temporg
Edit box label

Edit box label

sample text for edit

Lorem ipsum dolor sit amet, consectetur elit. Aenean id velit nisl, eget temporg Edit box label

Radio button label

Submit

Cancel

Flyouts
Are you sure you want to delete this email? Once deleted, it will be placed in the Trash folder.
Delete Delete

Media Player
Lorem Ipsum
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

Error loading from server

14:58:20

28:00:00

14:58:20

28:00:00

Message bar

The mail server for unmatched@hotmail.com needs this PC to be more secure before it starts syncing Lorem ipsum dol....Learn more

Retry

Close

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

Home

My Apps

My Account

Line 1

Line 1

Line 1

Password box
Password rest state box Password box mouse hover state

Progress
Determinate bar Indeterminate Ring (inline)

Enter password
Pwd box pressed/focus state/no text entered

Enter password

Indeterminate Bar

Password box pressed/focus state/text entered

Show characters mouse hover state

Show characters button pressed/reveals pwd

Pizza
Password box disabled state

Indeterminate Ring

Enter password

Push buttons
Push button rest state Default push button rest state

Average rating
Rest state Rest state / rated

Button

Button

Label textg (11 pt)

Label textg (11 pt)

Push button finger down

Default Push button finger down

Button

Button
Hover state

Push button finger up

Default push button finger up

Label textg (11 pt)

Button

Button

Push button disabled state

Default Push button disabled state

Button

Button

Pressed state

Label textg (11 pt)

Push button mouse hover state Default push button hover state

Label textg (11 pt)

Button

Button

Keyboard focus

Keyboard focus

Button

Button

Disabled state

Label textg (11 pt)

Label textg (11 pt)

Label textg (11 pt)

Radio button
Radio button group label Rest state /down-outside

Radio button group label

Rest state /down-outside

Radio button group label Label

Radio even longer sample label

Finger down Finger up Disabled unselected Mouse hover Keyboard focus

Finger down
Radio longer label Finger up Disabled unselected Mouse hover Keyboard focus Radio button group 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

50 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 textg. 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 Edit box text selection sample text 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 rest state with user input entered sample text for edit Edit box mouse hover state with user text sample text for edit Clear button pressed 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

Edit box rest state with helper text Enter sample text Edit box pressed/focus state sample

Edit box mouse hover state with helper text Enter sample text Clear button mouse hover state sample

Toggle button
Rest state (off)

Toggle button glyph is developer controlled

Toggle menu
Left Center Left Center Right

Rest state (on)

Finger down

Finger down

Right

Bold Finger up (on) Finger up (off) Italics

Bold

Italics

Mouse hover (off)

Mouse hover (off)

Disabled state (on)

Disabled state (off)

Toggle switch
WiFi rest state On WiFi hover state On WiFi pressed state On WiFi disabled state On WiFi rest state Off

Tooltips
www.microsoft.com

WiFi hover state

Off
yLorem ipsum dolor sit amet elit.

WiFi pressed state Off WiFi disabled state Off

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.

Editing slides
New slide Copy slide Bold Italic Underline Superscript Subscript Font size bigger Font size smaller Change case Remove formatting 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-M Ctrl-D Ctrl-B Ctrl-I Ctrl-U Ctrl-Shift + Ctrl= Ctrl-Shift > Ctrl-Shift < Shift-F3 Ctrl Space 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

Presentation
Save Print Close New Find text Spell Check Ctrl-S Ctrl-P Ctrl-W Ctrl-N Ctrl-F F7 Ctrl-Z Ctrl-Y F1

General
Undo Repeat 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