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.

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 pageHub page 8.0Grid item detail pageGrid group detail pageHub page 8.1Grid vertical scroll

Controls:App barCheck boxesContext menusCollection (image gallery)Command button linkDate/time pickerApp dialogFlipperIn-app search/search with focusFlyoutsInline errors

Media playerMessage barMessage dialogNav barPassword boxesProgress ringsPush buttonsRatingsRadio buttonsScroll controlSlidersText boxesToggle buttonsToggle menuToggle switchTooltips

Shortcut keys

456789

1112121314151617182019

20212223242425252627282930303131

32

Slide number

Slide number

templates

Ǻy loren ipsum dolor sit amet,ectetur adipiscing elit. In vehic ulaaliquam nisi non condimemtum.Item properties, date, or size








Application NameSub Title



Sample Hub

Application NameHub Title

120 px space here

80 px

Sample Hub Sample Hub

this space is for the app bar

Hub Title Hub Title

80 px

Sample

80 px

Hub Title

Collection Title 1

Item title 1Item 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 1Item Sub Title

Item Description: A Proin leo nulla, scelerisquefacilisis a tellus. Sed varius rhoncus metus, etcondimentum ipsum luctus ullamcorpoer.

Item Title 2Item Sub Title






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. .









Application NameLorem ipsum dolor

Lorem ipsum dolor sit nonumy sedConsectetuer 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:

Lorem ipsum dolor

Button Button Button

Lorem Ipsum

1

Lorem Ipsum

2

Lorem Ipsum

3

Application Name

Search Ễg

Lorem Ipsum

Lorem Ipsum

Item Title

Item Description: Ǻ Proin leo nulla

Item Title


Item Title


Item Title


Item Title


Item Title


Item Title


Item Title


Item Title


Item Title


Item Title


Item Title


Expand bucket

Browse bucket

controls

Label Label Label Label Label Label

App bar

Rest state / down outside

Finger down

Finger up

Disabled unchecked

Finger down

Mouse hover Mouse hover

Disabled checked

Finger up

Check boxes

Rest state / down outside

1 1 Keyboard focusKeyboard focus

z Intermediate

Reply

Reply all

Mark as unread

Delete

Forward

Delete album

Add to playlist

View tracks

Make small

Unpin

Uninstall

vPin to favorites

Context menus

Image gallery / image gallery basket

Command button (link)

Yes, share and connectUse this option for home or work

Secondary command link rest stateLorem ipsum dolor sit amet, consecturelit adipisicing elit, sed do eiusmod.

Informational text excepteur sink occaecat cupidat non proident, sunt

Tertiary command link rest state



Secondary command link rest stateLorem ipsum dolor sit amet, consecturelit adipisicing elit, sed do eiusmod.Tertiary command link rest state


Tertiary command link rest state


Secondary command link rest stateLorem ipsum dolor sit amet, consecturelit adipisicing elit, sed do eiusmod.

Date/time picker

Select time

10

Select date

Select date - abbreviation

Select date

10

11

12

2

3

4

5

6

7

1

9

10

11

12

2

3

4

5

6

1

11

12

2

3

4

5

6

7

8

1

12

2

3

4

5

6

7

8

9

1 2

3

4

5

6

7

8

9

10

1

10

11

12

2

3

4

5

6

7

1

35

PM

6 7

Sep 7

7September

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 Button

Flipper

In-App Search

Search Ễg

Search Ễg

Search rest

Search disabled

Ễg lo

Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet

Search with Focus

Inline errors

Check box label

Check box label

Edit 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

Edit box label

Edit box label

Edit box label

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

Submit Cancel

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

Delete

Delete

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

Lorem Ipsum

Delete file anyway

Flyouts

Error loading from server

14:58:20 28:00:00

14:58:20 28:00:00

14:58:20 28:00:00

Media Player

Message bar

The mail server for [email protected] needs this PC to be more secure before it starts syncing Lorem ipsum dol....Learn more

Close

Retry

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

zHome My Apps My Account Line 1 Line 1 Line 1

Password box

Enter password

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

Button

Button

Button

Button

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 Button

Average ratingLabel textǺg (11 pt)

Rest state

Label textǺg (11 pt)





Rest state / rated

Hover state

Pressed state



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

v51

v50

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

sampletext for edit

Enter sample text



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


Edit box group label

This is an example of an edit field Ǻg that has two lines of textǺg.


This is an example of an edit field that has three lines of text. This is an example of an edit field.


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

On

On

On

Off

Off

Off

Off

WiFi rest state

WiFi hover state

WiFi pressed state

WiFi disabled state

Tooltips

www.microsoft.co

m

Ǻ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

BoldItalicUnderline

Superscript

Subscript

Font size biggerFont size smallerChange caseRemove formatting

Ctrl-MCtrl-DCtrl-BCtrl-ICtrl-UCtrl-Shift +Ctrl=Ctrl-Shift >Ctrl-Shift <Shift-F3Ctrl Space

Copy autoshape stylePaste autoshape styleCycle through all objectsSelect all objectsGroup all objectsUngroup objectsCopy objectZoom In/OutShow gridShow guidesHelp

Ctrl-Shift-CCtrl-Shift-VTabCtrl-ACtrl-Shift-GCtrl-Shift-HCtrl and DragCtrl-MouseWheelShift-F9Alt-F9F1

Ctrl-SCtrl-PCtrl-WCtrl-NCtrl-FF7

Ctrl-ZCtrl-YF1

SavePrintCloseNewFind textSpell Check

UndoRepeatHelp

F5Right arrowLeft arrownumber, Enter keyBWHomeendF1HomeEsc

StartNext slide or buildPrevious slideJump to slide numberBlack slideWhite slideFirst slideLast slideQuick keysRe-startQuit/end show

Editing slides Presentation

General

Slideshow

Documents

Wireframing toolkit