1. 1 year ago 

    Balsamiq Mockups: UI Elements for iPhone Application Part 1


    Balsamiq Mockups from iPhone App wire-framing perspective…. Fortunately for any Experience Designer who religiously follow the wireframes ideas, related to websites or software, targeting any platform: mobile or desktop, is blessing in disguise, yes I used the word disguise, because I noticed whenever someone talk about Balsamiq Mockups they usually love to talk about Website Wireframing and Software Wireframing, but iPhone App UI Wireframing never discussed. I would like to point out the key Mokcup Elements available in the Balsamiq Mockups for iPhone UI Elements. iPhone Menu: You will notice the iPhone Menu Mockup is rich with the elements that needed in any general iPhone App, see figure 1 follow



    Lets explore it one by one

    For a simple label “This is a Label”

    To mimic the Delete Button type (without quote) “- Delete Button”.

    To produce the Add Button : “+ Add Button”.

    Sub-Menu UI representation can be achieved by using the “A Sub Menu, >” command, where “A Sub Menu” can be the text of your desire, and “, >” is the real meat here. Here comma “,” will right-aligned the “>” / Greater-Than Symbol. From iPhone Human Interface Guideline, this navigational icon falls in Tab Bars UI elements.

    For Label with Sub-Label the syntax is simple “Label and, Sub-Label”, again comma / “,” is to right-aligned any text it is similar as Sub-Menu except we are using Text instead of Symbol to produce the “Label & Sub-Level” effect.

    Checkbox / Checkmark is interesting, to produce the “checkbox/checkmark” effect use “v A Checkmark, (>)” syntax. “v” is to produce the “Checkmark” and (>) is for “Detail Disclosuer Button” .

    To produce the “Bulleted List” use “*” / asterisk,

    Toggle Button’s “On & Off” state sketching can be done by using “Toggle button, ON” and “Toggle button, OFF” command in Balsamiq Mockups.

    In my next post, we will explore more iPhone related UI Elements goodies in Balsamiq.

    Happy Wireframing!

     
    2. Comments

    blog comments powered by Disqus
avatar_128
 
 
I am Mohammed Mudassir Azeemi   resident of San Francisco Bay Area

and User Experience Designer & Software Architect

User Interface Does Matter!

 
 

Following

designadaygermannywireframesuiscrapsrhjrheather-rivers
 

Tumblr