Passo 2 - Wireframe_Toolkit-Win81

(1)

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.

(2)

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

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

4

5

6

7

8

9

11

12

13

14

15

16

17

18

20

19

20

21

22

23

24

25

26

27

28

29

30

31

32 Slide

(3)

template

s

(4)

Ǻy loren ipsum dolor sit amet, ectetur adipiscing elit. In vehic ula

aliquam nisi non condimemtum.

Item properties, date, or size

Hospital

Inteligente

Sub Title

(5)

Sample Hub

Application Name

Hub Title

120 px space here 80 px

Sample Hub

this space is for the app bar

Hub Title

80 px

Sampl

e

80 px

(6)

Collection Title 1

Item title 1

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

(7)

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

Item Sub Title

Item Title 4

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

Item Title 4

Item Sub Title

Item Title 3

Item Sub Title

Item Title 2

Item Sub Title

Item Title 2

Item Sub Title

(8)

Application Name

Lorem ipsum dolor

Lorem ipsum dolor sit nonumy

sed

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

(9)

Lorem ipsum dolor

Button Button Button

Lorem Ipsum

1 Lorem Ipsum

2 Lorem Ipsum

3 Application

Name

Priscila a rainha do

desert

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

Expand

(10)

(11)

Label Label Label Label Label Label

App bar

(12)

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

Keyboard focus

₁

Keyboard focus

z

Intermediate Reply Reply all Mark as unread Delete Forward Delete album Add to playlist View tracks Make small Unpin Uninstall

v

Pin to favorites

Context menus

(13)

(14)

Command button (link)

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.

Informational text excepteur sink occaecat cupidat non proident, sunt

Tertiary command link rest state

Informational text excepteur sink occaecat cupidat non proident, sunt

Secondary command link rest state

Use this option for home or work

Use this option for home or work Secondary command link rest state

(15)

Date/time picker

Select time 1 0 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 ₂ 3 4 5 6 7 8 9 10 1 10 11 12 2 3 4 5 6 7 1 3 5 PM 6 7 Sep 7 7 September

Carousel behavior for touch and mouse

(16)

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.

(17)

(18)

In-App Search

Search Ễg

Search rest Search disabled

Ễg lo

Lorem ipsum dolor sit amet

(19)

Inline errors

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

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

Submit Cance

(20)

Are you sure you want to

delete this email? Once

deleted, it will be placed in

the Trash folder.

Delet e

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

(21)

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

Clos e Retr

(22)

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.

(23)

Nav bar

z

(24)

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

(25)

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

rating

Label 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

(26)

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

(27)

Scroll control

Panning indicator

(touch)

Scroll controls rest (mouse) Hover (mouse) Pressed

(28)

Sliders

Rest state Disabled state Hover state Pressed state

v

5 1

v

5 0

(29)

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

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

(30)

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

(31)

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.

Passo 2 - Wireframe_Toolkit-Win81

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

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

4

5

6

7

8

9

11

12

12

13

14

15

16

17

18

20

19

20

21

22

23

24

24

25

25

26

27

28

29

30

30