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)
m (Krebbix - - Introduction)
hamishwillee (Talk | contribs)
m (Hamishwillee -)
 
(21 intermediate revisions by 2 users not shown)
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:Series 40]][[Category:Usability]][[Category:User Experience]][[Category:Mobile Design]][[Category:Code Examples]][[Category:LCDUI]][[Category:Tools for Java ME]]
{{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 for the [http://www.balsamiq.com/ Balsamiq] rapid wire-framing tool.}}  
  
 
+
{{ArticleMetaData <!-- v1.3 -->
{{ArticleMetaData <!-- v1.2 -->
+
|sourcecode= [[Media:Series 40 stencils for Balsamiq.zip]]
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
+
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
 
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
 
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
+
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->  
+
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
+
|capabilities= <!-- Required capabilities for code (e.g. ID_CAP_LOCATION, ID_CAP_NETWORKING) -->
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
+
 
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|translated-by= <!-- [[User:XXXX]] -->
 
|translated-by= <!-- [[User:XXXX]] -->
|translated-from-title= <!-- Title only -->  
+
|translated-from-title= <!-- Title only -->
 
|translated-from-id= <!-- Id of translated revision -->
 
|translated-from-id= <!-- Id of translated revision -->
|review-by=<!-- After re-review: [[User:username]] -->
+
|review-by= <!-- After re-review: [[User:username]] -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-by= <!-- After significant update: [[User:username]]-->
Line 24: Line 22:
 
|creationdate= 20130425
 
|creationdate= 20130425
 
|author= [[User:Krebbix]]
 
|author= [[User:Krebbix]]
 +
<!-- The following are not in current metadata -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
}}
 
}}
  
 
== Introduction ==
 
== Introduction ==
  
====What are you looking for?====
+
''Basamiq Mockups'' is a rapid wire-framing tool which makes it very easy to draw and visualise your UI designs. The tool is more fit-for-purpose than generic drawing packages like Adobe Illustrator or Inkscape, and often makes creating designs in electronic format faster than with pencil and paper.
* You want to create a concept for your app quickly in electronic format? <br />
+
* You do not want to learn Inkscape or Adobe Illustrator?<br />
+
* You are looking for a complete set of available LCDUI components as UI design stencil set?<br />
+
* You are a designer looking for a fast solution?<br />
+
* Or you are a developer who would like to sketch her ideas without hassle and no learning curve in electronic format but don't know how?
+
  
This article is for you.
+
This article delivers a complete set of Balsamiq stencils for Series 40 LCDUI, covering all current Series 40 releases, including: non-touch, touch-and-type and full-touch. These complement the generic templates available in the tool "out of the box", and make it possible to create designs tailored for Series 40.
  
====What can you get?====
+
The stencils are available as standard '''*.bmml''' file and a Symbol file, further split into files for full-touch, touch and type, and non-touch (split required because of the large number of graphical elements).
  
The only complete stencil set for all current Series 40 releases, like non-touch, touch-and-type and full-touch.<br />
+
[[File:Images for wiki 1.png|550px|thumb|none|Series 40 full touch, touch and type, and non touch layouts for an implicit list with icons]]
  
The stencils are available as
 
* Standard *.bmml file.
 
* Symbol file.
 
<br />
 
 
[[File:Images for wiki 1.png|400px]]
 
 
Due to large amount of graphical elements, the bmml and symbol files were split up into:
 
* Full touch
 
* Touch and Type
 
* Non-touch
 
 
The files were split up because of their large size. Due to naming conventions, the symbol files cannot reside in the same folder.<br />
 
  
 
== Downloads (Fast lane) ==
 
== Downloads (Fast lane) ==
  
[[File:Series_40_stencils_for_Balsamiq.zip|All stencil sets in *.bmml and symbol format.]]<br />
+
[[Media:Series 40 stencils for Balsamiq.zip|All stencil sets in *.bmml and symbol format.]] [[File:Images for wiki 2.png|150px|thumb|none|link=Media:Series 40 stencils for Balsamiq.zip|Series 40 full touch Alert]] 
  
  
 
== Why Balsamiq? ==
 
== 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.<br />
+
The idea behind Balsamiq is that you can quickly visualize and capture your ideas in electronic format, and then easily refine and evolve them.  The intention is not to deliver something "pixel perfect" but to capture the "essence" of your design. The fact that they are not "perfect" is an advantage - rather than argue about the details, design can concentrate on the basic arrangement and organisational flow of your layouts.
  
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:
+
[[File:Images for wiki 3.png|150px|thumb|right|Series 40 touch and type StringItem as button]]
* 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.
+
Baslamiq’s success is partially build on people contributing to their libraries – like these stencils. Baslamiq is affordable and you can download a 7 day trial version to figure out if it is right for you. There are standalone versions, cloud and wiki solutions with reverting possibilities.  
 +
 
 +
Personally, I like Balsamiq because:
 +
* It allows teams to work on layouts and solutions – not only for mobile apps but for whatever you want to sketch.  
 +
* You are not influenced to concentrate on detail. There are only a limited number of icons and so far I have always managed to design effectively using this set. 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.
 
* You can get pdf and png as output.
 
* You 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 [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.<br />
+
There are other solutions out there and you might find something you like more. That said, so far Balsamiq has ticked all the right boxes for me and I do not see a reason why to change to anything else. 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 Balsamiq, I am simply a fan!
  
 +
== Using the stencils ==
  
==How does it work?==
+
[[File:Images for wiki 4.png|150px|thumb|right |Series 40 non touch Ticker]]
  
 
===How to open===
 
===How to open===
* Double click the *.bmml file and copy the elements you need.
+
* 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.<br />
+
* The symbol file must be placed in the “assets” folder of your project. The items load automatically to “assets” and “all” from the topmost bar.
  
  
Line 90: Line 77:
 
* In full touch, radio buttons 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.
 
* 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. <br />
+
* The form items should be placed on the Canvas.
  
  
Line 105: Line 92:
 
Scale the printout (png or pdf) according to the target release:
 
Scale the printout (png or pdf) according to the target release:
 
* Full touch diameter is 3″ = 76 mm
 
* 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 )<br />
+
* 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?==
+
== Available components ==
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:
+
This section lists all the available components - which provide complete coverage of LCDUI.
 +
 
 +
[[File:Images for wiki 5.png|550px|thumb|none|A few examples - DateField in full touch, touch and type, and non touch]]
 +
 
 +
{{Tip|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.}}
 +
 
 +
As the LCDUI components visualization and interaction changes between platforms some names will vary. But it is very likely that you will find the components just by looking them up from the topmost bar. A mouse hover over the item in Balsamiq's up-most toolbar bar will reveal the full name. The following items are available:
  
 
{| class="wikitable"
 
{| class="wikitable"
Line 122: Line 115:
 
| Alert, 2 buttons || Alert 2btn || Alert 2btn || Alert 2btn
 
| Alert, 2 buttons || Alert 2btn || Alert 2btn || Alert 2btn
 
|-
 
|-
| Alert, 3 buttons, image,indeterminate progressindicator || Alert 3btn img progrbar || Alert 3btn img progrbar || Alert 3btn img progrbar
+
| Alert, 3 buttons, image,indeterminate progressindicator || Alert 3btn img progrbar || Alert 3btn img progrbar || Alert 3btn img progrbar
 
|-
 
|-
 
| Standard icons for Alert || - || Alert Icons || Alert Icons
 
| Standard icons for Alert || - || Alert Icons || Alert Icons
Line 142: Line 135:
 
| Form - Choice Group exclusive, max items || Form ChcGrp excl4  || Form ChcGrp excl4  || Form ChcGrp excl6
 
| Form - Choice Group exclusive, max items || Form ChcGrp excl4  || Form ChcGrp excl4  || Form ChcGrp excl6
 
|-
 
|-
| Form - Choice Group multiple, 2 items || Form ChcGrp mlt2 || - || -
+
| Form - Choice Group multiple, 2 items || Form ChcGrp mlt2 || - || -
 
|-
 
|-
| Form - Choice Group multiple, 3 item || Form ChcGrp mlt3 || - || -
+
| Form - Choice Group multiple, 3 item || Form ChcGrp mlt3 || - || -
 
|-
 
|-
| Form - Choice Group multiple, max item || Form ChcGrp mlt4 || Form ChcGrp mlt4 || Form ChcGrp mlt6
+
| Form - Choice Group multiple, max item || Form ChcGrp mlt4 || Form ChcGrp mlt4 || Form ChcGrp mlt6
 
|-
 
|-
 
| Form - Choice Group popup, closed || Form ChcGrp pop- || Form ChcGrp pop- || Form ChcGrp pop-
 
| Form - Choice Group popup, closed || Form ChcGrp pop- || Form ChcGrp pop- || Form ChcGrp pop-
Line 236: Line 229:
 
| Touch area minimum, finger + thumb || Touch Area minimum || Touch Area minimum || -
 
| Touch area minimum, finger + thumb || Touch Area minimum || Touch Area minimum || -
 
|}
 
|}
 +
 +
[[Category:Mobile Design for Nokia Asha]]

Latest revision as of 05:55, 20 August 2013

This article is a short introduction into the Series 40 UI design stencils for the Balsamiq rapid wire-framing tool.

Article Metadata
Code ExampleCompatibility
Platform(s):
Series 40
Article
Created: Krebbix (25 Apr 2013)
Last edited: hamishwillee (20 Aug 2013)

Contents

[edit] Introduction

Basamiq Mockups is a rapid wire-framing tool which makes it very easy to draw and visualise your UI designs. The tool is more fit-for-purpose than generic drawing packages like Adobe Illustrator or Inkscape, and often makes creating designs in electronic format faster than with pencil and paper.

This article delivers a complete set of Balsamiq stencils for Series 40 LCDUI, covering all current Series 40 releases, including: non-touch, touch-and-type and full-touch. These complement the generic templates available in the tool "out of the box", and make it possible to create designs tailored for Series 40.

The stencils are available as standard *.bmml file and a Symbol file, further split into files for full-touch, touch and type, and non-touch (split required because of the large number of graphical elements).

Series 40 full touch, touch and type, and non touch layouts for an implicit list with icons


[edit] Downloads (Fast lane)

All stencil sets in *.bmml and symbol format.
Series 40 full touch Alert


[edit] Why Balsamiq?

The idea behind Balsamiq is that you can quickly visualize and capture your ideas in electronic format, and then easily refine and evolve them. The intention is not to deliver something "pixel perfect" but to capture the "essence" of your design. The fact that they are not "perfect" is an advantage - rather than argue about the details, design can concentrate on the basic arrangement and organisational flow of your layouts.

Series 40 touch and type StringItem as button

Baslamiq’s success is partially build on people contributing to their libraries – like these stencils. Baslamiq is affordable and you can download a 7 day trial version to figure out if it is right for you. There are standalone versions, cloud and wiki solutions with reverting possibilities.

Personally, I like Balsamiq because:

  • It allows teams to work on layouts and solutions – not only for mobile apps but for whatever you want to sketch.
  • You are not influenced to concentrate on detail. There are only a limited number of icons and so far I have always managed to design effectively using this set. 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.
  • You can get pdf and png as output.
  • Faster results then e.g. Inkscape or Illustrator.


There are other solutions out there and you might find something you like more. That said, so far Balsamiq has ticked all the right boxes for me and I do not see a reason why to change to anything else. Please check Balsamiq.com for more information about Balsamiq software and solutions.

Oh yes, I am not endorsed in any way by Balsamiq, I am simply a fan!

[edit] Using the stencils

Series 40 non touch Ticker

[edit] 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 topmost bar.


[edit] 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.


[edit] About accuracy

  • The sizes are related to amount of pixels.
  • 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.


[edit] 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 )


[edit] Available components

This section lists all the available components - which provide complete coverage of LCDUI.

A few examples - DateField in full touch, touch and type, and non touch

Tip.pngTip: 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.

As the LCDUI components visualization and interaction changes between platforms some names will vary. But it is very likely that you will find the components just by looking them up from the topmost bar. A mouse hover over the item in Balsamiq's up-most toolbar bar will reveal the full name. The following items are available:

LCDUI component description Full touch name Touch and type name Non touch name
Timed Alert Alert 0btn Alert 0btn Alert 0btn
Alert, 1 button Alert 1btn Alert 1btn Alert 1btn
Alert, 2 buttons Alert 2btn Alert 2btn Alert 2btn
Alert, 3 buttons, image,indeterminate progressindicator Alert 3btn img progrbar Alert 3btn img progrbar Alert 3btn img progrbar
Standard icons for Alert - Alert Icons Alert Icons
Base layout - Base layout Base layout
Canvas Canvas Canvas Canvas
Category Bar Canvas CategoryBar - -
Category Bar extension, 6 items CategoryBar extn06 - -
Category bar extension, 15 items CategoryBar extn15 - -
Form - Choice Group exclusive, 2 items Form ChcGrp excl2 - -
Form - Choice Group exclusive, 3 items Form ChcGrp excl3 - -
Form - Choice Group exclusive, max items Form ChcGrp excl4 Form ChcGrp excl4 Form ChcGrp excl6
Form - Choice Group multiple, 2 items Form ChcGrp mlt2 - -
Form - Choice Group multiple, 3 item Form ChcGrp mlt3 - -
Form - Choice Group multiple, max item Form ChcGrp mlt4 Form ChcGrp mlt4 Form ChcGrp mlt6
Form - Choice Group popup, closed Form ChcGrp pop- Form ChcGrp pop- Form ChcGrp pop-
Form - Choice Group popup, focus - - Form ChcGrp pop focus
Form - Choice Group popup,2 items Form ChcGrp pop2 - -
Form - Choice Group popup,3 items Form ChcGrp pop3 - -
Form - Choice Group popup,max items Form ChcGrp pop4 Form ChcGrp pop5 Form ChcGrp pop7
Form - Custom Item, paired button A Form Cstm sgmbtnA - -
Form - Custom Item, paired button B Form Cstm sgmbtnB - -
Form - Custom Item, 3 buttons with label Form Cstm btnlbl3 - -
Form - Custom Item, segmented button Form Cstm sgmtbtn - -
Form - Custom Item, switch Form Cstm switch - -
Form - Date Field, time Form Date time- Form Date time- Form Date time-
Form - Date Field, time edit Form Date time2 Form Date time edit Form Date time focus
Form - Date Field,time am/pm edit Form Date time3 - -
Form - Date Field, date Form Date date- Form Date date - Form Date date-
Form - Date Field, date edit Form Date date3 Form Date date edit -
Form - Date Field, date + time Form Date datetime- Form Date datetime- Form Date datetime-
Form - Date Field, date + time, date edit Form Date datetime date Form Date datetime date -
Form - Date Field, date + time, time edit Form Date datetime time Form Date datetime time -
Form - Gauge, determinate progress indicator Form Gauge progbar Form Gauge progbar Form Gauge progbar
Form - Gauge, slider Form Gauge slider Form Gauge slider Form Gauge slider
Form - Gauge, slider edit - Form Gauge slider active Form Gauge slider focus
Form - Gauge, indeterminate progress indicator Form Gauge spinner Form Gauge spinner Form Gauge spinner
Form - String Item, button Form Strg btn Form Strg btn Form Strg btn
Form - String Item, button + label Form Strg btn label Form Strg btn label Form Strg btn label
Form - String Item, hyperlink Form Strg hypl Form Strg hypl Form Strg hypl
Form - String Item, hyperlink + label Form Strg hypl label Form Strg hypl label Form Strg hypl label
Form - String Item, paragraph of text Form Strg paragraph Form Strg paragraph Form Strg paragraph
Form - Text Field Form TextField Form TextField Form TextField
Form - Text Field edit Abc Form TextField edit Form TextField edit Abc Form TextField focus
Form - Text Field edit 123 - Form TextField edit 123 -
List - exclusive List Exclusive icon List Exclusive List Exclusive
List - implicit List Implicit List Implicit List Implicit
List - implicit with icon List Implicit icon List Implicit icon List Implicit icon
List - multiple List Multiple icon List Multiple icon List Multiple icon
Menu - Context/Longpress/Item Menu Longpress Menu Longpress -
Menu - Options Menu Options Menu Options Menu Options
Nokia Popup list Popup List - -
Nokia Popup list Popup List icon radiobtn - -
Ticker Ticker Ticker Ticker
Text editor ITUT Text Editor Java ITUT - -
Text editor QWERTY Text Editor Java QWERTY - -
Text Box, editable TextBox editable TextBox editable TextBox editable
Text Box, not editable TextBox not editable TextBox not editable TextBox not editable
Touch area minimum, finger + thumb Touch Area minimum Touch Area minimum -
This page was last modified on 20 August 2013, at 05:55.
534 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.

×