Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

(Difference between revisions)

Balsamiq stencils for Series 40 UI Design

From Wiki
Jump to: navigation, search
Krebbix (Talk | contribs)
(Krebbix -)
 
Krebbix (Talk | contribs)
(Krebbix -)
Line 1: Line 1:
 
[[Category:Draft]][[Category:LCDUIUtil]][[Category:Series 40]][[Category:UI]][[Category:Touch UI]][[Category:Usability]][[Category:User Experience]][[Category:Design]][[Category:Download]]
 
[[Category:Draft]][[Category:LCDUIUtil]][[Category:Series 40]][[Category:UI]][[Category:Touch UI]][[Category:Usability]][[Category:User Experience]][[Category:Design]][[Category:Download]]
''Delete instructional text in italic''
 
 
 
{{Abstract|This article is a short introduction into the Series 40 UI design stencils (aka toolkit, design templates) for Balsamiq.}}  
 
{{Abstract|This article is a short introduction into the Series 40 UI design stencils (aka toolkit, design templates) for Balsamiq.}}  
  
''Enter article metadata as described below. Note that this template can be placed anywhere in the article. Do not remove parameters that you do not use''
+
 
 
{{ArticleMetaData <!-- v1.2 -->
 
{{ArticleMetaData <!-- v1.2 -->
 
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
Line 24: Line 22:
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
|creationdate= <!-- Format YYYYMMDD -->
+
|creationdate= 20130425
|author= <!-- Display as link [[User:username]] -->
+
|author= [[User:Krebbix]]
 
}}
 
}}
  
Line 58: Line 56:
 
* You are not carried away by layout details. There is just a limited amount of icons and so far I always managed to make something from that. But if really necessary, you can import an image, e.g. a company logo.
 
* You are not carried away by layout details. There is just a limited amount of icons and so far I always managed to make something from that. But if really necessary, you can import an image, e.g. a company logo.
 
* It is fast, really fast, especially if there are ready symbols available.
 
* It is fast, really fast, especially if there are ready symbols available.
* The result is perfect for interaction design - no graphics overhead
+
* The result is perfect for interaction design - no graphics overhead.
 
* I can get pdf and png as output.
 
* I can get pdf and png as output.
* Faster results then e.g. Inkscape or Illustrator
+
* Faster results then e.g. Inkscape or Illustrator.
 +
<br />
  
However, there are other solutions out there, but so far Balsamiq has ticked all the right boxes for me and I do not see a reason why to change to anything else, not saying that there might be something out there what suits you better. Please check Balsamiq.com for more information about Balsamiq software and solutions.
+
However, there are other solutions out there, but so far Balsamiq has ticked all the right boxes for me and I do not see a reason why to change to anything else, not saying that there might be something out there what suits you better. Please check [http://www.balsamiq.com/ Balsamiq.com] for more information about Balsamiq software and solutions.
  
 
Oh yes, I am not endorsed in any way by Balsmiq, I am simply a fan.
 
Oh yes, I am not endorsed in any way by Balsmiq, I am simply a fan.
 +
 +
==What can I get?==
 +
 +
The only complete stencil set for all current Series 40 releases, like non-touch, touch-and-type and full-touch.<br />
 +
 +
The stencils are available as
 +
* Standard *.bmml file.
 +
* Symbol file.
 +
 +
Due to large amount of graphical elements, the bmml and symbol files were split up into:
 +
* Full touch
 +
* Touch and Type
 +
* Non-touch
 +
 +
Due to naming conventions, the symbol files cannot reside in the same folder.
 +
 +
==How does it work?==
 +
 +
===How to open===
 +
* Double click the *.bmml file and copy the elements you need.
 +
* The symbol file must be placed in the “assets” folder of your project. The items load automatically to “assets” and “all” from the upmost bar.
 +
 +
 +
===How to operate===
 +
* After placing the asset, break the symbol apart and ungroup the asset to enable editing.
 +
* The checkboxes are “activated” by reducing the opacity of the overlaying (square) geometric shape.
 +
* In full touch, radio buttons are “activated” by reducing the opacity of the overlaying (square) geometric shape.
 +
* Check boxes and radio buttons are created with square geometric shapes to get close to the surround (squircle) shape.
 +
* The form items should be placed on the Canvas.
 +
 +
===About accuracy===
 +
* The stencil sizes are very accurate when it comes to amount of pixels.
 +
* The font size might differ by one or two points, since Balsamiq is not using Nokia Sans.
 +
* The amount of actual amount of text for an item might vary. But in case things get tight it is anyways a good idea to rethink the layout at this point.<br />
 +
 +
The minimum touch area is a reference for custom UI touch components. As the name implies, the touch area of a custom UI component should not be less than what you find from the minimum touch area. The sizes are related to amount of pixels
 +
 +
===How to get the correct size for paper prototypes===
 +
Scale the printout (png or pdf) according to the target release:
 +
* Full touch diameter is 3″ = 76 mm
 +
* Touch and type diameter is 2.4″ = 61 mm (there exist also phones with 2.6″, but you should test for the worst case )
 +
 +
==Which components are there?==
 +
The stencil set focuses on LCDUI, but LWUIT layouts should be easy to add where needed. The important thing is that you have the “ballpark size” at hand and from there it should be straight forward to add LWUIT UI components, e.g. Tab bar instead of a Category bar. <br />
 +
However, the LCDUI components visualization and interaction changes between platforms. Therefore also some names will vary. But it is very likely that you will find the components just by looking them up from the upmost bar. A mouse hoover over the item will reveal the full name.The following items are available:
 +
 +
{| class="wikitable"
 +
|-
 +
! LCDUI component description !! Full touch name !! Touch and type name !! Non touch name
 +
|-
 +
| ||Alert 0btn  ||Alert 0btn  ||Alert 0btn
 +
|-
 +
| ||Alert 1btn  ||Alert 1btn  ||Alert 1btn
 +
|-
 +
| ||Alert 2btn  ||Alert 2btn  ||Alert 2btn
 +
|-
 +
| ||Alert 3btn img progrbar ||Alert 3btn img progrbar || Alert 3btn img progrbar
 +
|-
 +
| ||-  ||Alert Icons  ||Alert Icons
 +
|-
 +
| ||-  ||Base layout  ||Base layout
 +
|-
 +
|Canvas ||Canvas  ||Canvas  ||Canvas
 +
|-
 +
| ||  ||  ||
 +
|-
 +
| ||  ||  ||
 +
|-
 +
| ||  ||  ||
 +
|-
 +
 +
 +
|}

Revision as of 20:26, 24 April 2013

This article is a short introduction into the Series 40 UI design stencils (aka toolkit, design templates) for Balsamiq.


Article Metadata
Compatibility
Platform(s):
Series 40
Article
Created: Krebbix (25 Apr 2013)
Last edited: Krebbix (24 Apr 2013)

Contents

Introduction

You want to create a concept for your app quickly in electronic format?
You do not want to learn Inkscape or Adobe Illustrator?
You are looking for a complete set of available LCDUI components as UI design stencil set?
This article is for you.


Downloads (Fast lane)

Available are the following files.

Full touch Touch and type Non touch
*.bmml *.bmml *.bmml
symbol symbol symbol

Why Balsamiq?

The idea behind Balsamiq is that you visualize your idea fast in electronic format – preferably faster than with pencil and paper. The point is that you do not deliver something pixel perfect but some sketchy. People will not start arguing about pixel perfection, but they will talk about the basic arrangement of your layouts. Nevertheless, the layouts look clean and you can organize them very easily.

Baslamiq’s success is partially build on people contributing to their libraries – like these stencils submitted by the author. Baslamiq is still affordable and you can try with a 7 days trial to figure out if Balsamiq is for you. There exist standalone versions, cloud and wiki solutions with reverting possibilities. Personally, I like Balsamiq because of various reasons:

  • It allows teams to work on layouts and solutions – not only for mobile app but whatever you want to draw sketch about.
  • You are not carried away by layout details. There is just a limited amount of icons and so far I always managed to make something from that. But if really necessary, you can import an image, e.g. a company logo.
  • It is fast, really fast, especially if there are ready symbols available.
  • The result is perfect for interaction design - no graphics overhead.
  • I can get pdf and png as output.
  • Faster results then e.g. Inkscape or Illustrator.


However, there are other solutions out there, but so far Balsamiq has ticked all the right boxes for me and I do not see a reason why to change to anything else, not saying that there might be something out there what suits you better. Please check Balsamiq.com for more information about Balsamiq software and solutions.

Oh yes, I am not endorsed in any way by Balsmiq, I am simply a fan.

What can I get?

The only complete stencil set for all current Series 40 releases, like non-touch, touch-and-type and full-touch.

The stencils are available as

  • Standard *.bmml file.
  • Symbol file.

Due to large amount of graphical elements, the bmml and symbol files were split up into:

  • Full touch
  • Touch and Type
  • Non-touch
Due to naming conventions, the symbol files cannot reside in the same folder.

How does it work?

How to open

  • Double click the *.bmml file and copy the elements you need.
  • The symbol file must be placed in the “assets” folder of your project. The items load automatically to “assets” and “all” from the upmost bar.


How to operate

  • After placing the asset, break the symbol apart and ungroup the asset to enable editing.
  • The checkboxes are “activated” by reducing the opacity of the overlaying (square) geometric shape.
  • In full touch, radio buttons are “activated” by reducing the opacity of the overlaying (square) geometric shape.
  • Check boxes and radio buttons are created with square geometric shapes to get close to the surround (squircle) shape.
  • The form items should be placed on the Canvas.

About accuracy

  • The stencil sizes are very accurate when it comes to amount of pixels.
  • The font size might differ by one or two points, since Balsamiq is not using Nokia Sans.
  • The amount of actual amount of text for an item might vary. But in case things get tight it is anyways a good idea to rethink the layout at this point.

The minimum touch area is a reference for custom UI touch components. As the name implies, the touch area of a custom UI component should not be less than what you find from the minimum touch area. The sizes are related to amount of pixels

How to get the correct size for paper prototypes

Scale the printout (png or pdf) according to the target release:

  • Full touch diameter is 3″ = 76 mm
  • Touch and type diameter is 2.4″ = 61 mm (there exist also phones with 2.6″, but you should test for the worst case )

Which components are there?

The stencil set focuses on LCDUI, but LWUIT layouts should be easy to add where needed. The important thing is that you have the “ballpark size” at hand and from there it should be straight forward to add LWUIT UI components, e.g. Tab bar instead of a Category bar.
However, the LCDUI components visualization and interaction changes between platforms. Therefore also some names will vary. But it is very likely that you will find the components just by looking them up from the upmost bar. A mouse hoover over the item will reveal the full name.The following items are available:

LCDUI component description Full touch name Touch and type name Non touch name
Alert 0btn Alert 0btn Alert 0btn
Alert 1btn Alert 1btn Alert 1btn
Alert 2btn Alert 2btn Alert 2btn
Alert 3btn img progrbar Alert 3btn img progrbar Alert 3btn img progrbar
- Alert Icons Alert Icons
- Base layout Base layout
Canvas Canvas Canvas Canvas
460 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×