Design Do-It-Yourself

BlackBerry 10 wireframe components, examples, and resources

Instructions
October 22, 2014 2
This slide deck includes all of the UI components and screen layout examples you will need to
create basic wireframe mockups of your app screens and workflow. Designing on slides allows
you to present your creations easily and get quick feedback.

Start by checking out the All-Touch Example Screens and the Physical Keyboard Example
Screens to see the typical level of detail and how the UI components can be placed on the device
frames. Remember, theyre just wireframes. They dont have to look pretty in order to be
understood.

Next, visit the Design Palette section, which has everything youll need to construct your own
wireframe slides, including the device frames, UI components, and gesture illustrations. Simply
copy the elements you need onto a new slide and position them as required. Double-click a [Text]
tag to add your own label.


Contacts
Contact Name
Contact Name
Contact Name
Contact Name
Contact Name
Contact Name
Contact Name
B
A
Contact Name
Contact Name
Contact Name
Delete
Invite To Meeting
Links
Add as Favorite
Edit
October
September
=
)

=
/

=
]

=
S

=
(

=
!

=
p

=
J

;
)

;
(

;
[

;
]

;
J

;
/

;
|

Recent Albums Camera
Your Dialog
This is a simple Dialog text with two
actions to choose from...
Cancel! Accept!
Title bar, list items, headers and dividers Context menu Image grid, action bar, headers and dividers Dialog with two buttons Dialog with three buttons
Example screens: all-touch device
Your Dialog
Yes
Maybe
No
This is a simple Dialog text with three
actions to choose from...
@
-
>

Friends
Google Talk Contacts
Twitter Contacts
LinkedIn Contacts
Facebook Contacts
BBM Contacts
B
A
Tab menu List items, title bar, radio buttons
Picture deleted! Undo
Toast with button
Q W E R T Y U I O P
A S D F G H J K L
> Z X C V B N M <
123
sym ,
. <
Carl
Redwood
Name
Test street 2
Canada
Address
Virtual keyboard, text field, title bar with actions
=
]

Share
Action bar with one action and action menu button
Example screens: all-touch device
List
Apples
Bananas
Carrots
Potatoes
Tomatoes
Celery
Strawberries
Salt
Soya
Fruits
Add Contact Cancel Save
Text cursor and selection Title bar with search, headers and dividers List items, action bar, title bar, drop-down Progress bar, list items, title bar Application menu

Calc
Calculator
Cal C Rob
Contacts
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Mauris
quis euismod ante. Duis varius nisl at
eros accumsan dictum. Vestibulum
ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia
Curae; Pellentesque lobortis, dolor
nec blandit malesuada, orci neque
hendrerit mi, ut ultrices felis quam
sed enim. Fusce risus enim, consequat
eget tincidunt nec, cursus ac ipsum.
Integer elementum tellus vitae elit
placerat molestie. Donec dignissim,
lorem sit amet vehicula ullamcorper,
felis justo placerat quam, pellentesque
tristique ante risus cursus arcu.
Suspendisse eu turpis sed turpis
consequat egestas. Mauris lobortis
urna eu libero imperdiet et vestibulum
quam bibendum. Ut ipsum ante,
mollis tempor malesuada nec,
tincidunt vel erat. Nam eu massa leo,
sed semper est.
Quisque pretium porta lacus at
placerat. Vestibulum placerat sem et
Blackberry Hub
Clarissa Melin
21:16
Hi! Ive sent you some of the
Your tickets!
19:00
A pdf with your tickets is attached
Vacation alert
18:10
Please fill in the form sent to you
Re: Holiday photos
18:00
IMG_0001.jpg, IMG_0002.jpg
Re: Sunday meeting
17:45
The meeting on Sunday is booked
Nobex Radio
15:00
Please click the link in the mail
Re: Registration Fail
14:16
The registration went wrong and I
Harry Anderson

10:23
Fishing trip is coming up soon!
Re: Party plans
09:00
Can someone please take the radio?

Search Compose
Hub
Downloads
Music.mp3
10mb
Presentation.ppt
1mb
DocumentX.pdf
2mb
Help Settings
Add Contact Cancel Save
Carl
Redwood
Name
Test street 2
Canada
Address
Example screens: all-touch device
Dialog with two buttons Dialog with three buttons
Example screens: physical keyboard device
Contacts
Contact Name
Contact Name
Contact Name
Contact Name
Contact Name
A
Contact Name
Delete
Invite To Meeting
Links
Add as Favorite
Edit
Your Dialog
This is a simple Dialog text with two
actions to choose from...
Cancel! Accept!
September
=
)

=
/

=
]

=
!

=
p

=
J

;
[

;
]

;
J

Title bar, list items, headers and dividers Context menu Image grid, action bar, headers and dividers
Your Dialog
Yes
Maybe
No
This is a simple Dialog text with three
actions to choose from...
@
-
>

Picture deleted! Undo
Friends
Google Talk Contacts
Twitter Contacts
LinkedIn Contacts
A
=
]

Example screens: physical keyboard device
List items, title bar, radio buttons Tab menu Toast with button Text field, title bar with actions Action bar with one action and action menu button
List
Apples
Bananas
Carrots
Potatoes
Tomatoes
Fruits
Add Contact Cancel Save
Carl
Redwood
Name
Test street 2
Canada
Address
Application menu
Calc

Calculator
Cal C Rob
Contacts
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Mauris quis euismod ante.
Duis varius nisl at eros accumsan dictum.
Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia Curae;
Pellentesque lobortis, dolor nec blandit
malesuada, orci neque hendrerit mi, ut
ultrices felis quam sed enim. Fusce risus
enim, consequat eget tincidunt nec, cursus
ac ipsum. Integer elementum tellus vitae
elit placerat molestie. Donec dignissim,
lorem sit amet vehicula ullamcorper, felis
justo placerat quam, pellentesque tristique
ante
Blackberry Hub
Clarissa Melin
21:16
Hi! Ive sent you some of the
Your tickets!
19:00
A pdf with your tickets is attached
Vacation alert
18:10
Please fill in the form sent to you
Re: Holiday photos
18:00
IMG_0001.jpg, IMG_0002.jpg
Re: Sunday meeting
17:45
The meeting on Sunday is booked

Downloads
Music.mp3
10mb
Presentation.ppt
1mb
DocumentX.pdf
2mb
Name
Test street 2
Address
Help Settings
Add Contact Cancel Save
Carl
Redwood
Example screens: physical keyboard device
Title bar with search, headers and dividers Text cursor and selection List items, action bar, title bar, drop-down Progress bar, list items, title bar
Gestures
All-touch device Physical keyboard device

[Text] [Text]
[Text]
[Text]
[Text] [Text] [Text]

[Text]

[Text] [Text] [Text]

[Text]

[Text]
[Text] [Text] [Text] [Text]
[Text] [Text]
[Text] [Text] [Text]

[Text] [Text] [Text] [Text]
[Text] [Text] [Text] [Text] [Text]
[Text] [Text] [Text] [Text]
[Text] [Text] [Text] [Text] [Text]
[Text] [Text]
[Text]
=
)

=
/

=
]

=
S

=
(

=
!

=
p

=
J

;
)

;
(

;
[

;
]

;
J

;
/

;
|

Q W E R T Y U I O P
1 2 3 4 5 6 7 8 9 0
A S D F G H J K L
> Z X C V B N M <
123
sym ,
. <
[Title]
[Text]
[Negative] [Positive]
[Text]
[Text]
[Text]
[Text]
[Text]
[Text]
[Text]
[Text]
+
+
[Text]
[Text]
[Text]
[Text]
[Text]
[Text]
[Text]
[Text] [Text] [Text]
All-touch device
http://

[Selected] [Text] [Text]
[Selected] [Text]
[Selected] [Text] [Text] [Text]

[Text] [Text] [Text]

[Text] [Text]

[Text]

[Text] [Text] [Text]

[Text]
[Text] [Negative] [Positive]
[Text]
[Text]
Search Cancel
DropLabel
[Text]
[Descr]
[Text]
[Descr]
[Text]
[Descr]
CurValue
DropLabel CurValue
[0] [0] [0]
[0] [0] [0]
[0] [0] [0]
[0] [0] [0]
PickerLabel CurValue
[0] [0] [0]
[Text] Undo
X
!
[Title]
[Text]
[Action] [Action]
[Action] [Action]
[Sub]
NormalHeader online
InteractiveHeader >

[Text]
[Text]

[Text] [Text] [Text] [Text] [Text]
[Text] [Text]
[Text]
[Title]
[Text]
[Negative] [Positive]
+
+
[Text]
Physical keyboard device
[Selected] [Text] [Text]
[Selected] [Text]
[Selected] [Text] [Text] [Text]

[Text] [Negative] [Positive]
[Text]
[Text]
Search Cancel
DropLabel
[Text]
[Descr]
[Text]
[Descr]
[Text]
[Descr]
CurValue
DropLabel CurValue
[Text] Undo
X
!
[Title]
[Text]
[Action] [Action]
[Action] [Action]
[Sub]
[Text]
[Text]
[Text]
[Text]
[Text]
[Text]
[Text]
[Text]
[Text]
[Text]
[Text]
[0] [0] [0]
PickerLabel CurValue
[0] [0] [0]
[0] [0] [0]
=
)

=
/

=
]

=
!

=
p

=
J

;
[

;
]

;
J

NormalHeader online
InteractiveHeader >
Action bar
Activity indicator
Application menu
Button
Checkbox
Dialogs and toasts
Drop-down
Grids and lists
Header and divider
Invocation framework and sharing

Picker
Progress indicator
Radio button
Segmented control
Slider
Text fields
Title bar
Toggle switch
Links to the BlackBerry 10 UI Guidelines
2013 BlackBerry. All rights reserved. BlackBerry and related trademarks, names, and logos are the property of
Research In Motion Limited and are registered and/or used in the U.S. and countries around the world.