Upload
kobe-skeens
View
230
Download
0
Tags:
Embed Size (px)
Citation preview
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
Ǻy loren ipsum dolor sit amet,ectetur adipiscing elit. In vehic ulaaliquam nisi non condimemtum.Item properties, date, or size
Ǻy loren ipsum dolor sit amet,ectetur adipiscing elit. In vehic ulaaliquam nisi non condimemtum.Item properties, date, or size
Ǻy loren ipsum dolor sit amet,ectetur adipiscing elit. In vehic ulaaliquam nisi non condimemtum.Item properties, date, or size
Ǻy loren ipsum dolor sit amet,ectetur adipiscing elit. In vehic ulaaliquam nisi non condimemtum.Item properties, date, or size
Ǻy loren ipsum dolor sit amet,ectetur adipiscing elit. In vehic ulaaliquam nisi non condimemtum.Item properties, date, or size
Ǻy loren ipsum dolor sit amet,ectetur adipiscing elit. In vehic ulaaliquam nisi non condimemtum.Item properties, date, or size
Ǻy loren ipsum dolor sit amet,ectetur adipiscing elit. In vehic ulaaliquam nisi non condimemtum.Item properties, date, or size
Application NameSub Title
Ǻy loren ipsum dolor sit amet,ectetur adipiscing elit. In vehic ulaaliquam nisi non condimemtum.Item properties, date, or size
Ǻy loren ipsum dolor sit amet,ectetur adipiscing elit. In vehic ulaaliquam nisi non condimemtum.Item properties, date, or size
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
Item Description: A Proin leo nulla, scelerisquefacilisis a tellus. Sed varius rhoncus metus, etcondimentum ipsum luctus ullamcorpoer.
Item Title 3Item Sub Title
Item Description: A Proin leo nulla, scelerisquefacilisis a tellus. Sed varius rhoncus metus, etcondimentum ipsum luctus ullamcorpoer.
Item Title 4Item Sub Title
Item Description: A Proin leo nulla, scelerisquefacilisis a tellus. Sed varius rhoncus metus, etcondimentum 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 4Item Sub Title
Item Description: A Proin leo nulla, scelerisquefacilisis a tellus. Sed varius rhoncus metus, etcondimentum ipsum luctus ullamcorpoer.
Item Title 3Item Sub Title
Item Description: A Proin leo nulla, scelerisquefacilisis a tellus. Sed varius rhoncus metus, etcondimentum ipsum luctus ullamcorpoer.
Item Title 2Item Sub Title
Item Description: A Proin leo nulla, scelerisquefacilisis a tellus. Sed varius rhoncus metus, etcondimentum ipsum luctus ullamcorpoer.
Item Title 2Item Sub Title
Item Description: A Proin leo nulla, scelerisquefacilisis a tellus. Sed varius rhoncus metus, etcondimentum ipsum luctus ullamcorpoer.
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 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 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
Informational text excepteur sink occaecat cupidat non proident, sunt
Informational text excepteur sink occaecat cupidat non proident, sunt
Secondary command link rest stateLorem ipsum dolor sit amet, consecturelit adipisicing elit, sed do eiusmod.Tertiary command link rest state
Yes, share and connectUse this option for home or work
Tertiary command link rest state
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.
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
sample text for edit
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)
Label textǺg (11 pt)
Label textǺg (11 pt)
Label textǺg (11 pt)
Label textǺg (11 pt)
Rest state / rated
Hover state
Pressed state
Label textǺg (11 pt)
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 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
sample text for edit
sample 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
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