Transcript Document

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
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
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
Slide number
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
Shortcut keys
32
templates
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
aliquam nisi non condimemtu
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
aliquam nisi non condimemtu
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
120 px
space here
80 px
Sample Hub
Hub Title
Hub Title
Hub Title
Hub Title
80 px
Sample Hub
this space is for the app bar
80 px
Sample Hub
Sample
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.
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
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
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 1
It
Item Sub Title
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
It
Item Sub Title
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 3
It
Item Sub Title
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
It
Item Sub Title
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
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
Lorem Ipsum
controls
App bar
Label
Label
Label
Label
Label
Label
Context menus
Check boxes
Rest state / down outside
Rest state / down outside
Finger down
Finger down
Reply
Make small
Reply all
Unpin
Forward
Uninstall
Finger up
Finger up
Mark as unread
Disabled unchecked
Disabled checked
Mouse hover
Mouse hover
1
Keyboard focus
z
Intermediate
1
Keyboard focus
Delete
Delete album
Add to playlist
View tracks
v
Pin to favorites
Image gallery / image gallery basket
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
Date/time picker
Select time
10
Carousel behavior for touch and mouse
35
PM
Select date
6
7
9
10
11
10
11
12
11
12
1
11
1
2
12
1
2
3
1
2
3
4
1
1
2
3
4
5
2
2
3
4
5
6
3
3
4
5
6
7
4
4
5
6
7
8
5
5
6
7
8
9
6
6
7
8
9
10
7
12
Select date - abbreviation
Sep
7
Select date
September
7
10
12
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 Ễg
Search disabled
Search Ễg
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
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
sample text for edit
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
Lorem ipsum dolor sit amet, consectetur elit.
Aenean id velit nisl, eget temporg
Edit box label
Radio button label
Submit
Cancel
Flyouts
Media Player
Are you sure you want to delete
this email? Once deleted, it will be
placed in the Trash folder.
Delete
Lorem Ipsum
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 file anyway
Error loading from server
14:58:20
28:00:00
14:58:20
28:00:00
Message bar
The mail server for [email protected] 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
z
Line 1
Line 1
Line 1
Progress
Password box
Password rest state box
Enter password
Password box mouse hover state
Enter password
Pwd box pressed/focus state/no text entered
Password box pressed/focus state/text entered
Determinate bar
Indeterminate Bar
Show characters mouse hover state
Show characters button pressed/reveals pwd
Pizza
Password box disabled state
Enter password
Indeterminate Ring
Indeterminate Ring (inline)
Push buttons
Push button rest state
Button
Push button finger down
Button
Average rating
Default push button rest state
Button
Rest state
Rest state / rated
Label textǺg (11 pt)
Label textǺg (11 pt)
Default Push button finger down
Button
Hover state
Push button finger up
Button
Push button disabled state
Button
Default push button finger up
Label textǺg (11 pt)
Button
Default Push button disabled state
Button
Pressed state
Label textǺg (11 pt)
Push button mouse hover state
Label textǺg (11 pt)
Default push button hover state
Button
Button
Keyboard focus
Keyboard focus
Button
Button
Disabled state
Label textǺg (11 pt)
Label textǺg (11 pt)
Label textǺg (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 down
Radio longer label
Finger up
Finger up
Disabled unselected
Disabled unselected
Mouse hover
Mouse hover
Keyboard focus
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
v
50
v
51
Text box
Edit box rest state
Edit box rest state with helper text
Enter sample text
Edit box pressed/focus state
sample
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 mouse hover state with helper text
Enter sample text
Clear button mouse hover state
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.
sample
Edit box group label
Edit box text selection
Clear button pressed
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
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)
Finger down
Toggle button
glyph is developer
controlled
Toggle menu
Rest state (on)
Finger down
Finger up (on)
Finger up (off)
Mouse hover (off)
Mouse hover (off)
Disabled state (on)
Disabled state (off)
Left
Left
Center
Center
Right
Right
Bold
Bold
Italics
Italics
Toggle switch
Tooltips
WiFi rest state
WiFi rest state
On
Off
WiFi hover state
WiFi hover state
On
Off
www.microsoft.com
ǺyLorem ipsum dolor sit amet elit.
WiFi pressed state
WiFi pressed state
On
Off
WiFi disabled state
WiFi disabled state
On
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
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
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
Slideshow
Ctrl-S
Ctrl-P
Ctrl-W
Ctrl-N
Ctrl-F
F7
General
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
Ctrl-Z
Ctrl-Y
F1
F5
Right arrow
Left arrow
number, Enter key
B
W
Home
end
F1
Home
Esc