Differences between revisions 1 and 158 (spanning 157 versions)
⇤ ← Revision 1 as of 2010-10-14 15:21:28 →
Size: 8360
Editor: shoobe01
Comment:
← Revision 158 as of 2013-08-27 18:19:40 → ⇥
Size: 39984
Editor: shoobe01
Comment:
Deletions are marked like this. Additions are marked like this.
Line 1: Line 1:

== Mobile Design Elements ==

==== Little Springs Design (soon, revised and switching to 4ourth Mobile style) ====
A bunch of mobile components (and some other info, like typography) for general mobile design, as well as gestures, and even iPhone specific stuff for the fanbois.
 * [[http://www.littlespringsdesign.com/downloads/mobileDesignElements/MobileDesignElements-2010jul7.indd.zip Adobe InDesign CS4 (.indd) format, compressed, 11.5 mb]]
 * [[http://www.littlespringsdesign.com/downloads/mobileDesignElements/MobileDesignElements-2010jul7.pdf PDF for viewing, or opening in, Adobe Illustrator, et. al., 1.4 mb]]

If you are still on Freehand (and we salute you) the old, not-at-all-updated version
 * [[http://www.littlespringsdesign.com/downloads/mobileDesignElements/mobileDesignElements21sept2009.zip Macromedia Freehand MX 2004 (.fh11) format, compressed, 1.1 mb]]		 {{{#!html

<div class="saleshead">
    <div class="block" id="left">
        <a href="http://4ourth.com/wiki/4ourth%20Mobile%20Touch%20Template">
        <div class="salesLeft">
           <h3>4ourth Mobile Touch Template</h3>
           <p>Design for people, not pixels with this handy, wallet-sized inspection and design tool, only $10. <span>Order yours now</span></p>
        </div>
        </a>
    </div>
    <div class="block" id="right">
        <a href="http://4ourth.com/wiki/Mobile%20Design%20Patterns%20Poster">
        <div class="salesRight">
           <h3>Mobile Interaction Design Patterns Poster</h3>
           <p>Every pattern from the book and this wiki, plus easy-to-follow relationships, and key information on sizes for readability and touch. <span>Order now</span></p>
        </div>
        </a>
    </div>
    <div class="salespad">&nbsp;
    </div>
</div>

}}}


[[http://www.amazon.com/gp/product/1449394639/ref=as_li_tf_tl?ie=UTF8&tag=4ourthmobile-20&linkCode=as2&camp=217145&creative=399373&creativeASIN=1449394639|{{attachment:wiki-banner-bonus.png|Click here to buy from Amazon.|align="right"}}]]

Templates and stencils are (except for my use above of the older term for a piece of plastic you trace with) graphic items you can use with various drawing programs to create concepts, mockups, process diagrams, comps, or graphics for final designs.

For many years, there was no particular assistance provided to those seeking to design for mobile handsets. Over time, books and other documents and supporting information has emerged. Now, major software vendors like Adobe are embedding mobile-centric technology in their products.

New ones are constantly being added, or replaced, so please help us keep this up to date. Contact us with updates you may encounter.

Note that this is just those we’ve found, or found useful. Many more may exist, or be included as part of the various manufacturer and OS developer links in the “UI Guidelines” subsections. Also be aware that by no means are all of these reviewed for quality, and are just checked to make sure that (at the time of this writing) they were valid links to real files, and are in the right category.

 * [[Design Organizations & Design Tools]]
 * [[Tools & Templates - Aliyun OS]] (Alibaba Group)
 * [[Tools & Templates - Android OS]] (Google)
 * [[Tools & Templates - Bada]] (Samsung)
 * [[Tools & Templates - Basmati]]/LGOS (Uncle Ben's)
[[Tools & Templates - Blackberry]] (RIM)
[[Tools & Templates - Firefox OS]]/Boot to Gecko/B2G (Mozilla)
[[Tools & Templates - Glass]] (Google)
[[Tools & Templates - iOS]] (Apple)
[[Tools & Templates - Meego]] (Linux Foundation)
[[Tools & Templates - Sailfish]] (Jolla)
[[Tools & Templates - Symbian]]/S60/S^3 (Symbian Foundation, ''nee'' Nokia, ''nee'' Symbian, Ltd.)
[[Tools & Templates - S30/S40]] (Nokia)
[[Tools & Templates - Tizen]] (Linux Foundation)
[[Tools & Templates - Ubuntu Touch]] (Canonical)
[[Tools & Templates - WebOS]] (HP Palm)
[[Tools & Templates - Windows Phone]] (Microsoft)
[[Tools & Templates - Yi]](Baidu)


=== Design Organizations & Design Tools ===
The following organizations provide valuable resources for drawing tools and templates that you can use:

==== 4ourth Mobile ====
These are the templates we use every day for designing mobile device interfaces. Includes a numer of mobile components and additional information like typography, for general mobile design. Also includes gesture guidelines, vector handsets for all the major OSs, and a number of handset/OS specific widgets and icons. The illustrations and diagrams in this book were created starting with these components.
 * [[http://www.4ourth.com/downloads/MobileDesignElements-2012mar29.indd.zip|Adobe InDesign CS4 (.indd) format, compressed zip file, 15.7 mb]]
 * [[http://www.4ourth.com/downloads/MobileDesignElements-2012mar29.pdf|PDF for viewing, or opening in, Adobe Illustrator, et. al., 1.4 mb]]

If you are still working in Macromedia Freehand, the old (September 2009) version is still available. It has Little Springs branding, as that's who Steven worked for when he made it.
 * [[http://www.littlespringsdesign.com/downloads/mobileDesignElements/mobileDesignElements21sept2009.zip|Macromedia Freehand MX 2004 (.fh11) format, compressed, 1.1 mb]]

The actual document used to create the diagrams in this book has also been made available. Enjoy.
 * [[http://www.4ourth.com/downloads/DesigningMobileInterfacesDI-2011dec9.indd.zip|Adobe InDesign CS4 (.indd) format, compressed zip file, 55.8 mb]]
 * [[http://www.4ourth.com/downloads/DesigningMobileInterfacesDI-2011dec9.pdf|PDF for viewing, or opening in, Adobe Illustrator, et. al., 5.7 mb]]

==== Fluid UI ====
 * [[https://www.fluidui.com/editor/live/|Fluid UI]] Also less of a design tool than a prototyper, where you do design in the tool. The design tools appear to be pretty flexible (you can do impossible things with the widgets) and has a reasonably large set of widgets to place on your designs.


==== Fireworks Wireframing Kit ====
 * [[http://www.graffletopia.com/search/mobile|Fireworks Wireframing Kit]] by Hannah Milan. Multiple templates, of different fidelity, as a series of downloads. Not all are mobile-specific (Fireworks, obviously)

==== Graffletopia ====
 * [[http://www.graffletopia.com/search/mobile|Mobile UI Stencils]] (Omnigraffle)

==== Justinmind ====
 * [[http://blog.justinmind.com/prototyper-helps-overcoming-the-empty-canvas-fear/|Justinmind Prototyper]] a UI design tool itself, but specifically designed to use pre-built widget libraries. Allows you to save your pieces, and share with a team.
 * [[http://blog.justinmind.com/android-3-2-honeycomb-library-now-available-2/|Android 3.2 (Honeycomb)]] library items now available. As are many others, but I am not going to list them all, just the latest news.

==== Keynote ====
 * [[http://keynotekungfu.com/|Keynote Kung-Fu]] Wireframe Toolkit For Keynote. Paid, but only $12. For multiple platforms, including desktop web.
 * [[http://keynotopia.com/keynote-mockups-templates/|Keynote mockups]] "sketch," wireframe and prototype took for Keynote (and I think Powerpoint and OpenOffice), free with a tweet. From Keynotopia.

==== Mobility ====
 * [[http://www.fullcreative.com/2010/10/mobility-a-free-set-of-mobile-ui-design-elements/|Mobility]] A free set of mobile UI design elements. (Photoshop)

==== Proto.io ====
 * [[http://proto.io/|Dedicated mobile prototyper]] of the type where they want you to do all the design in the tool as well. Can preview in more than the usual number of OSs.

==== Punchcut ====
 * [[http://punchcut.com/perspectives/expanding-universe-toolset-managing-screen-resolutions|Punchcut Toolset for Managing Screen Resolutions]] a collection of devices of various sizes, in PSD format, to assist with developing content or design at multiple resolutions.

==== Squetch ====
 * [[http://www.eleqtriq.com/2010/08/sqetch-wireframe-toolkit/|Wireframe Sketching Kit]] with tools for Browser, iPad upright, iPad landscape, Smartphone, GUI-Elements and Form-Elements. Not sure what some mean, but I guess "Smartphone" means they are trying to not just be iOS, so they get a category. (Illustrator)
Line 13: Line 103:
 * [[http://developer.yahoo.com/ypatterns/about/stencils/ Yahoo! Stencil Kit]] many non-mobile parts, but also useful general and iPhone bits and pieces.

==== Nokia ====
 * [[http://www.forum.nokia.com/Technology_Topics/Web_Technologies/Browsing/Web_Templates/ Forum Nokia Mobile Web Templates]]
 * [[http://wiki.forum.nokia.com/index.php/Category:Mobile_Design_Patterns Nokia Mobile Design Patterns]] Not really the same thing, as they are just articles, not actual things to use for drawning. Include or not?
 * [[http://www.forum.nokia.com/info/sw.nokia.com/id/cfc7b6a4-2dc5-4c91-88a5-c35764fff8fe/S60_Wireframing_Stencils.html S60 Wireframing Stencils]] S60 (through 5th edition) elements of all sorts.

==== Graffletopia ====
 * [[http://www.graffletopia.com/search/mobile Mobile UI Stencils for Omnigraffle]]

==== Teehan-Lax ====
 * [[http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/ Library of iPhone UI Elements]] Photoshop library of iPhone-specific elements only, now the link to the all-new v4 library.

==== Smashing Magazine ====
*[http://www.smashingmagazine.com/2009/08/18/android-gui-psd-vector-kit/ Library of Android UI Elements]] Photoshop library of Android (default) elements only.

==== Developer.Android ====
*[http://developer.android.com/guide/practices/ui_guidelines/icon_design.html Icon Design Guidelines, Android 2.0]] Includes ways to download their template pack and other useful stuff. Quite detailed for the graphic designer, for a change.

== Documentation Templates ==
Lots of documentation styles will work. Use your favorite one, or...

Little Springs has a mobile-specific documentation style, but it is still project (client) specific as yet. When we get a chance we'll sanitize it, write it up and share it here.


== Drawing Tool Tips & Tricks ==
Just a list that we keep for ourselves, so we don't forget things.

==Sharing Between Versions of InDesign==
Newer versions can always read older .indd files. Do not save as an .inx file, as it just wastes time.

Downsaving creates an Adobe Interchange file with an .inx extension. This is a simple xml file that actually does work with all versions of InDesign (at least down through CS2), but has a limiter Adobe put in to annoy us all. To fix an .inx file created with CS4 to work with CS2 (and 3):
 * Open the INX file with your favorite text editor (like TextMate or BBEdit) and change the version number. Replace line number 2 (which looks like this):
 * '<?aid style="33" type="document" DOMVersion="6.0" readerVersion="5.0" featureSet="257" product="6.0(352)" ?>'
 * with this:
 * '<?aid style="33" type="document" DOMVersion="5.0" readerVersion="4.0" featureSet="257" product="5.0(662)" ?>'

=== Stupid INDD Tricks ===
Things you might need to make InDesign work better, and which I could not easily find. Some are version specific.
 * There is no Clone (duplicate in place) function by default in InDesign. Three options:
 # Copy, then shift-opt-cmd-v pastes in place, but is very cumbersome to me
 # Better: opt-cmd-u is Step and Repeat. Opens a dialogue (which you can use to generally step and repeat) but which preserves last use. If set once to count 1, offsets all zero, then you just press enter and get a duplicate-in-place.
 # Best is shift-opt-cmd-d which is the Duplicate command. By default it does this at some offset or other. But this is controlled by the Edit > Step & Repeat menu item. You have to have something selected to set it, but like setting color or type style with nothing selected, it then sticks until you use step and repeat (even by accident) and change the offsets. Set vertical and horizontal to get a Clone function, if that is your thing.
 * Tricky styles, as for underlines, to allow things like making reverses in type without separate boxes (as for scroll-and-select link indicators). Ask for details or look at the Mobile Design Elements document for examples.
 * Text can be built into ANY box. Not always perfect, but good for some stuff, like form fields, title bars, etc.
 * Any box can be accidentally turned into a text box. Deleting text does not un-text-box it. To do that, right click on the element, Content > Unassigned.
 * Eyedropper works opposite (to me at least) of Photoshop, etc. Select the item(s) you want to have the new attributes, then click the item you are sampling. Note you can sample a LOT of stuff, so check the settings first. I don't even follow how it works after this, so just press Option to clear the current attributes and start from zero again.
 * Collaboration: While the official collaboration tool points up their text focus, and is basically a collaborative workflow-based text editor, it has some other stuff that helps. Mostly, you can move pages from one open ''document'' to another. With planning (so you don't step on each other) this means chunks can be branched off to others and then merged back in. Tried it, and it works.
 * GREP! Search and replace complexly. Also has attribute search and replace. Find a string, make it bold, etc.
 * Deselect is not cmd-D as in Photoshop but shift-cmd-A for “deselect all” as in AI. Use it! Clicking away to deselect will often hit an invisible element, scooting it or turning it into a text box or something else I'll have to fix later.
 * Text Box insets are cmd-B (shift-cmd-b is the bold switch). If you have a non-rectangle and need to just have the top come down, use the FIrst Baseline number to move it down. Often, a lot (won't move at all for 20-40 pts). Also, play with vertical alignment: can use Justify to set one piece of text top, one bottom, rather cleverly. Saves on nesting boxes sometimes.
 * [[http://indesignsecrets.com/the-hidden-join-paths-command.php Hidden commands in InDesign]] including the ever-useful Join command. This is about activating in CS2, but the basics are true. Many AI-level drawing functions are hidden away in the code, and can be used with keyboard shortcuts, or other trickery. Note: CS4 added several of these, such as the Join command.
 * Reset INDD to default: While pressing Shift+Option+Command+Control, start InDesign. Click Yes when asked if you want to delete preference files.

=== Stupid AI Tricks ===
Things you might need to make Illustrator work better, and which I could not easily find.
 * Perspective-like distorting involves using modifier keys at specific times:
 # Select whole shape, groups work fine.
 # E (free transform)
 # Start dragging a “downrange” corner
 # Click Cmd to convert that corner only
 # Click Cmd+Shift+Opt to move it and the corresponding pont with axial symmetry.
 # Be sure to shorten also. I'd distort a square as your guide before doing any actual work, and keep both a distorted and original shape as your guide.		  * [[http://developer.yahoo.com/ypatterns/about/stencils/|Yahoo! Stencil Kit]] many non-mobile parts, but also useful general and iPhone bits and pieces.



=== Specific Symbol Libraries ===
I have avoided this as it seemed like an awfully-specfic offshoot, but now I am aware of such a number of ways of communicating gesture in diagramming that I cannot ignore it anymore. I have made this new category, in the hopes it makes sense and other types of symbol communications will become available (or known to me) in the future.

If you go looking for this in the book, you won't find it. Came a couple weeks too late for that.

==== Gesture ====
 * [[http://somerandomdude.com/work/cue/|Cue Gesture Icon System]] by P.J. Onori, someRandomDude. (PNG, SVG Omnigraffle Stencil, InDesign)
 * [[http://gesturecons.com/|Gesture Icons]] by Ryan Lee, paid download, for multiple platforms. Includes some kinesthetic gestures. (PDF, Illustrator, EPS)
 * [[http://www.lukew.com/ff/entry.asp?1071|Touch Gesture Reference Guide]] by Luke Wroblewski. Set of stencils and other supporting documentation for understanding gesture. (PDF, EPS, OmniGraffle, Visio)
 * [[http://gestureworks.com/features/open-source-gestures/|Open Source Gesture Library]] by GestureWorks. Usable icons plus posters and other documentation. (PNG, PDF, EPS plus Gesture Font Family in TTF/OTF)
 * [[http://wireframes.linowski.ca/2010/02/gesturcons-touch-pack-1-0/|GestureIcon Touch Pack]] by Ron George. Very abstracted icon set. (EPS, PNG, Illustrator)
 * [[http://www.kickerstudio.com/blog/2008/12/touchscreen-stencils/|Touchscreen Stencils]] distributed by Kicker Studio, drawn by Rachel Glaves for Dan Saffer's book ''Designing Gestural Interfaces''. (OmniGraffle, Illustrator, Photoshop, Visio, Fireworks, Axure).
 * [[http://mattgemmell.com/2010/07/14/touch-notation/|Touch Notation]] by Matt Legend Gemmell, another very abstracted system. (Photoshop, Illustrator, OmniGraffle)
 * [[http://www.4ourth.com/downloads/MobileDesignElements-2012mar29.pdf|Mobile Design Templates]] by Steven Hoober, a few pages of this large library include gesture icons, on-screen and kinesthetic. Used in the book ''Designing Mobile Interfaces'' (PDF, InDesign is in section above).
 * [[http://www.mobiletuxedo.com/touch-gesture-icons/Touch Gesture Icons]] by Mobile Tuxedo. PSD and EPS vector files, plus pre-rasterized PNGs in several sizes.



== Specific Operating Systems ==
Basically because OS and device manufacturers have increasingly been providing guidelines for the implementation of their UI, I am merging two sections. Now, all OS-specific templates and guidelines will be in one place.

Stencils and templates are pretty simple, but if there is insufficient information in the UI guidelines, you may wish to browse the rest of the developer resources for the answer. Some UI or UX information may be included in other sections.

=== Aliyun OS (Alibaba Group) ===
I can find zero information on designing (not developing) for this OS. If anyone has some, please tell me about it.
 * [[http://www.aliyun.com/| General Information on the OS, links to end user information and some developer info]] (Chinese).
 * [[http://www.mobilegeeks.de/alibaba-mobile-operating-system-cloudbasierte-system-alternative-zu-android/?utm_source=feedburner&utm_medium=twitter&utm_campaign=Feed%3A+AsusEeePcNews+%28Netbook+News%29|Another article on it]] from mobilegeeks.de (German).


=== Android OS (Google) ===
As of January 2012, developer.android has a rather decent design section at [[http://developer.android.com/design/index.html]]. This is a good place to start.

While developer focused, [[http://www.bongizmo.com/blog/android-resources-each-developer-should-know/|this]] is a great list of resources for Android OS work.

==== UI Guidelines: ====
 * [[http://developer.android.com/design/index.html|Android Design]] from developer.android
 * [[http://developer.android.com/guide/practices/ui_guidelines/index.html|Android User Interface Guidelines]] also from developer.android
 * [[http://developer.motorola.com/docstools/library/Best_Practices_for_User_Interfaces/|Motorola’s Best Practices for Android UI]]
 * [[http://www.mutualmobile.com/wp-content/uploads/2011/03/MM_Android_Design_Guidelines.pdf|Mutual Mobile Android Design Guidelines]]
 * [[http://www.androidpatterns.com/|Listing of Android patterns]], real ones, with problems and solutions as drawings, from UNITiD in Amsterdam.
 * [[http://code.google.com/tv/web/|Google TV Web Developer's Guide]] and [[http://code.google.com/tv/android/index.html|Google TV Android Developer's Guide]], both from code.google.com. Particularly interesting is the [[http://code.google.com/tv/android/docs/gtv_android_patterns.html|TV UI Patterns]] page.
 * [[http://developer.android.com/distribute/googleplay/quality/tablet.html|Tablet App Quality Checklist]]
 * [[http://androiddrawables.com/|Android Drawables]] Graphical list by OS version of every "drawable" (icon, control, etc.) in Android. Indispensable tool. I live by it.
 * [[http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077|Google Visual Asset Guidelines, Part 1]] and [[http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-2/9084309|part 2]] from some guys on Behance. Good stuff. Use it.

==== Stencils & Templates: ====
 * [[http://www.androiddesign.info/|The Photoshop PSDs Google forgot]] Layered documents from Joseph Richter. (Photoshop of course)
 * [[http://www.teehanlax.com/downloads/android-gui-psd-high-density/|Android GUI PSD (High Density)]] from Teehan-Lax.
 * [[http://www.smashingmagazine.com/2009/08/18/android-gui-psd-vector-kit/|Library of Android UI Elements]] from Smashing Magazine. Photoshop library of Android (default) elements only. (Photoshop)
 * [[http://thiago-silva.deviantart.com/art/Android-2-2-GUI-171047600|Android 2.2 Elements]] based on the Smashing Magazine work. (Photoshop)
 * [[http://www.marlinmobile.com/blog/?page_id=285|Android Wireframe Tools]] (OmniGraffle)
 * [[http://www.webdesignshock.com/freebies/free-photoshop-android-interface-gui/||Android GUI Set]] which has a lot of UI widgets, and includes the typography needed to make it all work.(Photoshop)
 * [[http://developer.android.com/guide/practices/ui_guidelines/icon_design.html|Icon Design Guidelines, Android 2.0]] from Developer.Android.com. Includes ways to download their template pack and other useful stuff. Quite detailed for the graphic designer, for a change. (Photoshop)
 * [[http://bharathp666.deviantart.com/art/Android-Widgets-182178250|14 Android GUI Widgets]] by which they seem to mean default desktop widgets (e.g. clock), vs. UI widgets like scrollbars. (Photoshop)
 * [[http://delightgraphic.deviantart.com/art/HTC-HD2-Smartphone-vector-183186532|HTC HD2 PSD Vector]]150 layers, 60 groups, almost all vector. (Photoshop)
 * [[http://zandog.deviantart.com/art/HTC-G2-PSD-182148621|HTC G2]] 370 layers, almost all vector, (Photoshop)
 * [[http://zandog.deviantart.com/art/Motorola-Droid-2-PSD-180694347|Motorola Droid 2]]350 layers, almost all vector (Photoshop)
 * [[http://zandog.deviantart.com/art/Samsung-Galaxy-S-PSD-178972735|Samsung Galaxy S]] Device not specified. 127 layers. (Photoshop)
 * [[http://zandog.deviantart.com/art/Samsung-Galaxy-Tab-P1000-PSD-180537736|Samsung Galaxy Tab P1000]] 110 layers. (Photoshop)
 * [[http://www.zurb.com/playground/honeycomb-stencils|Android Honeycomb Tablet]] Preview of wireframe components, sketch sheets, etc. (based on screenshots, emulators, etc, so not final). From Zurb (OmniGraffle)
 * [[http://www.graffletopia.com/stencils/630|Google Android 1.6 Wireframe stencil for Omnigraffle]] from MarlinMobile (OmniGraffle).
 * [[http://www.graffletopia.com/stencils/673|Google Android 2.1 / 2.2 Wireframe stencil for Omnigraffle]] from MarlinMobile (OmniGraffle).

==== Tests & Defaults: ====
 * [[https://play.google.com/store/apps/details?id=com.hmh.api&hl=en|API Demos]] Go get this. Really. It has lots of nerdy stuff to check for capabilities and so on, but is a great way to for sure know what default capabilities and UI are. Go into, say, Preferences then pick Default values and you can see the default behaviors of Android Preferences. Useful.


----

=== Bada (Samsung) ===
 * [[http://dpimg.ospos.net/contents/docs/resources_1004/com.osp.appuiguide.help/html/FramesetMain.html?menu=MC01010403&amp;mtb1=&amp;mtb2|Bada Application UI Guide]]

----

=== Basmati / LGOS (Uncle Ben's) ===
 * [[http://www.theonion.com/articles/uncle-bens-to-compete-against-apple-with-brandnew,28892/|Overview and press release info]] (Yes, this is a joke. Everyone is releasing an OS now, get it?)

----

=== Blackberry (RIM) ===
[[http://docs.blackberry.com/en/developers/subcategories/?userType=21&category=BlackBerry+UI+Guidelines|Blackberry UI Guidelines]]

==== Blackberry 10 (QNX): ====
 * [[https://developer.blackberry.com/design/bb10/|UI Guidelines for BlackBerry 10]] By which they mean phones.
 * [[http://docs.blackberry.com/en/developers/deliverables/27299/|UI Guidelines for the BlackBerry PlayBook 2.1]] This for the Tablet running broadly the same OS.

==== Smartphone (BBOS): ====
 * [[https://developer.blackberry.com/design/bb7/|Blackberry 7.1 UI Guidelines]]
 * [[http://docs.blackberry.com/en/developers/deliverables/28627/|BlackBerry 7 UI Guidelines]]
 * [[http://docs.blackberry.com/en/developers/deliverables/17965/index.jsp?name=UI+Guidelines+-+BlackBerry+Smartphones6.0&amp;language=English&amp;userType=21&amp;category=Java+Development+Guidelines&amp;subCategory=|UI Guidelines for BlackBerry 6.0 Smartphones website]]
 * [[http://docs.blackberry.com/en/developers/deliverables/17964/BlackBerry_Smartphones-UI_Guidelines-T893501-980426-0721013746-001-6.0-US.pdf|UI Guidelines for BlackBerry 6.0 Smartphones]] PDF.
 * [[http://docs.blackberry.com/en/developers/deliverables/20196/index.jsp?name=UI+Guidelines+-+BlackBerry+Smartphones2.5&amp;language=English&amp;userType=21&amp;category=Java+Development+Guidelines&amp;subCategory=|UI Guidelines for BlackBerry 4.x, 5.x Smartphones]]
 * [[http://docs.blackberry.com/en/developers/deliverables/20195/BlackBerry_Smartphones-UI_Guidelines-T1011811-1011811-0903100131-001-2.5-US.pdf|UI Guidelines for BlackBerry 4.x, 5.x Smartphones]] PDF.
 * [[http://docs.blackberry.com/en/developers/deliverables/4305/BlackBerry_Browser-4.6.0-US.pdf|BlackBerry Browser Content Design Guidelines]] PDF.


----

=== Boot to Gecko, B2G, Firefox OS (Mozilla) ===
Mozilla's Boot to Gecko, or Firefox OS (and specifically the Gaia UI layer) is not on any hardware you can buy yet or anything, but it's being developed quite transparently, so there is a nice collection of guidelines. Also, I know they used ''Designing Mobile Interfaces'' a lot during the UI design phase, so I agree with all their decisions.
 * [[https://wiki.mozilla.org/Gaia/Design/Patterns|Design Patterns]]
 * [[https://wiki.mozilla.org/Gaia/Design/Visual|Visual Design]]
 * [[https://wiki.mozilla.org/Gaia#UX|All the UX considerations and guidelines for Gaia]] including the two above, but also some other great stuff about scale, and the scope of considerations for designing apps.

----

=== Glass (Google) ===
==== UI Guidelines: ====
 * [[https://developers.google.com/glass/ui-guidelines|User Interface Guidelines]] This same site offers developer guidelines which even as a designer you must review as they cover IA constraints. Much like getting the back stack to work right in Android, you have to read these.
 * [[http://glasssim.com/|Glass Sim]] Not quite right (the FOV of the screen is way too big) but a useful way to quickly mock up ideas for how you could use Glass.

 * I have serious reservations about these guidelines. Read my article on augmented reality and HUDs here [[http://www.uxmatters.com/mt/archives/2012/04/eyes-on-the-road-or-mind-on-the-road.php]]


----

=== iOS (Apple) ===
==== UI Guidelines: ====
iPhone, iPod Touch, and iPad. Big collection of these available here which I need to parse out http://www.queness.com/post/10870/useful-collection-of-ios-tools-and-resources-for-designers
 * [[http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/Introduction/Introduction.html|iPhone Human Interface Guidelines]] from developer.apple.
 * [[http://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/MobileHIG.pdf|iPhone Human Interface Guidelines]] from developer.apple. (PDF)
 * [[http://developer.apple.com/library/ios/#documentation/general/conceptual/ipadhig/Introduction/Introduction.html|iPad Human Interface Guidelines]] from developer.apple.
 * [[http://developer.apple.com/library/ios/documentation/general/conceptual/ipadhig/iPadHIG.pdf|iPad Human Interface Guidelines]] (PDF)
 * [[http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/|The iOS 7 Design Cheat Sheet]] from Ivo Mynttinen.

==== Stencils & Templates: ====
 * [[http://dribbble.com/shots/865767-iPhone-5-Grid|iPhone 5 Grid]] a 10-column (!) grid for comps. (Photoshop)
 * [[http://blakeperdue.com/ios7-wireframe-kit/?utm_source=buffer&utm_campaign=Buffer&utm_content=buffer8f591&utm_medium=twitter|iOS 7 Wireframe Kit]] in B&W, for classic wireframing. (Illustrator)
 * [[http://funsize.co/iphone-ios7-wireframe-kit/|iOS 7 WIreframe Kit]] for iPhone, from Funsize. (Keynote)
 * [[http://www.blugraphic.com/2013/07/15/ipad-retina-mockup-psd/|Ipad Retina Mockup (Psd)]] from blugraphic. (Photoshop)
 * [[http://www.teehanlax.com/tools/ios7/|Library of iOS7 UI Elements]] (Photoshop)
 * [[http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/|Library of iPhone UI Elements]] Photoshop library of iPhone-specific elements only, from Teehan-Lax. Updated occasionally, so if you see a new one, please update the link for us. (Photoshop)
 * [[http://www.teehanlax.com/blog/2010/08/12/iphone-4-gui-psd-retina-display/||Library of iPhone4 UI Elements]] Same as above but for the iPhone 4 resolution instead. (Photoshop)
 * [[http://fantasy-apps.deviantart.com/gallery/#/d2r7sus|iPhone UI Kit]] Lots of UI widgets like switches, buttons, etc. (Photoshop)
 * [[http://dribbble.com/shots/42977-iPhone4-Retina-GUI-PSD?offset=7|Another Libtary of iPhone4 UI Elements]] Based on the Teehan-Lax work above, but presumably different in some way. (Photoshop)
 * [[http://www.usercentred.net/2010/06/28/illustrator-template-for-iphone-design/|Vector Wireframe Templates for iPhone]] (Illustrator)
 * [[http://reddevilsx.deviantart.com/art/iPhone-4-PSD-HD-176629139|iPhone 4 HD]] Another one, not sure who made it or if it's fresh or a derivation of the Teehan-Lax stuff again. (Photoshop)
 * [[http://www.vcarrer.com/2010/09/iphone-wireframe-kit-google-docs.html|iPhone Wireframe Kit]] In, of all things, Google Docs. Haven't tried it, but I really need to. (GoogleDocs)
 * [[http://browse.deviantart.com/resources/applications/psd/?order=5&q=ipad#/d2qvrn1|iPad Template]] Preview only has the frame, so not sure what is included. (Photoshop)
 * [[http://mrforscreen.deviantart.com/art/iPad-Wall-Presenter-179103252|iPad Wall Presenter]] I think just the frames with guides to put backgrounds and designs into. (PNG and Photoshop)
 * [[http://www.zurb.com/playground/ipad-stencils|Sketching the iPad from Zurb]] to encourage sketching, even as far as to print empties and use your mad Sharpie&reg; skills. (OmniGraffle)
 * [[http://graffletopia.com/stencils/570|iPad and iPhone Design]] by da5id, via Graffletopia. (OmniGraffle)
 * [[http://iconhandbook.co.uk/downloads/|iOS Application Icon Template]] from The Icon Handbook. (Illustrator)
 * [[http://www.graphicsfuel.com/2011/04/iphone-ipad-psd-templates/#data|iPhone & iPad PSD templates & icons]] by Rafi (Photoshop)
 * [[http://www.raizlabs.com/2011/06/wireframe-toolkit-for-keynote-and-powerpoint/|MOObileFrames]] iOS Wireframe Tool from Raiz Labs. (Keynote, Powerpoint)
 * [[http://iconslinger.com/downloads/|iPad Template for Visio]] from IconSlinger. (Visio of course)
 * [[http://graphicriver.net/item/ui-pack-for-ios-by-rebirthpixel/2577167?WT.ac=portfolio&WT.seg_1=portfolio&WT.z_author=rebirthpixel|UI Pack for iOS]] from rebirthPIXEL. Lots of faux-leather and other skeuomorphic textures. (Photoshop)

----

=== Meego (Linux Foundation) ===
Unless I misunderstand, this is dead and more or less replaced with Tizen.
 * [[https://meego.com/developers/ui-design-guidelines/handset|Handset UI Design Principles]]
 * [[https://meego.com/developers/meego-ux-design-principles|UX Design Principles]] A brief, neat overview of how to approach the overall interaction of the OS.
 * [[http://www.forum.nokia.com/info/sw.nokia.com/id/eb8a68ba-6225-4d84-ba8f-a00e4a05ff6f/Hildon_2_2_UI_Style_Guide.html|Hildon UI Guidelines for Nokia Maemo]]
 * [[http://meego.com/developers/ui-design-guidelines/handset|MeeGo UI Design Guidelines for Handset]]

----

=== Sailfish (Jolla) ===
A spinoff from Meego, by an all new company.
 * [[https://sailfishos.org/design.html|Jolla Sailfish User Experience]] Design principles, UX framework and Navigation architecture.

----

=== Symbian/S60/S^3 (Symbian Foundation, ''nee'' Nokia, ''nee'' Symbian, Ltd.) ===
==== UI Guidelines: ====
 * [[http://library.forum.nokia.com/index.jsp?topic=/Design_and_User_Experience_Library/GUID-A8DF3EB8-E97C-4DA0-95F6-F464ECC995BC_cover.html|Nokia Design &amp; User Experience Library]]
 * [[http://harmattan-dev.nokia.com/docs/ux/pages/pattern_library.html|Nokia N9 UX Guidelines]] from Nokia. Seems to be oriented to developers, and none of the tools are re-usable templates, but lots of design examples. Check the other tabs as well.
 * [[http://wiki.forum.nokia.com/index.php/Category:Mobile_Design_Patterns|Nokia Mobile Design Patterns]] A series of articles, approaching a pattern library. Note that some of these may be very familiar, as it is a wiki, so some older patterns from this book and other information posted to the wiki have been copied to here by the authors, and other users.
 * [[http://www.forum.nokia.com/Design/|Forum Nokia Design Portal]] PDF.
 * [[http://developer.symbian.org/wiki/User_Interface|Symbian UI Wiki]]
 * [[http://www.forum.nokia.com/info/sw.nokia.com/id/73e935fe-8b59-43b2-ab3e-1c5f763672db/Series_40_UI_Style_Guide.html|Nokia Series 40 UI Style Guide]]
 * [[http://www.forum.nokia.com/info/sw.nokia.com/id/34762388-9434-4c42-9c5e-3e545b0975ea/S60_Platform_Visualization_and_Graphic_Design_Guideline_v1_0_en.pdf.html|S60 Visualization and Graphic Design Guideline]] PDF.
 * [[http://www.forum.nokia.com/info/sw.nokia.com/id/5c419b14-75ff-4791-b1a8-db1e0d72e36e/Symbian_3_UI_Style_Guide.html|Symbian^3 UI Style Guidelines]] PDF.
 * [[http://www.slideshare.net/nokia-developer/series-40-full-touch-ui-style-guide-part-1|Nokia Asha UI Guidelines]] An intro to the Asha UI... but I am pretty sure that this ended up being just "Touch and Type" S40, so the Asha name is not important for UI design/development now.

==== Stencils & Templates: ====
 * [[http://www.forum.nokia.com/Develop/Web/Mobile_web_browsing/Web_templates/Templates_for_smartphones/|Templates for smartphones]] meaning S60 3rd and 5th edition, Symbian ^3, Maemo and some newer S40 devices.
 * [[http://www.forum.nokia.com/info/sw.nokia.com/id/cfc7b6a4-2dc5-4c91-88a5-c35764fff8fe/S60_Wireframing_Stencils.html|S60 Wireframing Stencils]] S60 (through 5th edition) elements of all sorts. (Illustrator, Fireworks)
 * [[http://www.forum.nokia.com/Develop/Web/Mobile_web_browsing/Web_templates/Templates_for_mobile_phones/|Templates for mobile phones]] meaning mostly S40 featurephones, but also some older S60 devices.


----

=== S30/S40 (Nokia) ===
This is the featurephone (S40) and dumbphone (S30) set of operating systems that Nokia owns and uses on their many, many other devices. Despite zero technical relationship between these and Symbian/S60/S^3/etc. there is much overlap in documentation. It is worth looking at the above section as well.

'''Nokia Asha''' is not an OS at all. It's a marketing name (like "Lumia") for "high end" featurephones. At launch, this was also sorta, kinda discussed as though it was an OS or GUI layer, but there was little difference between that and "normal" S40, and over time this has entirely disappeared of course. I think that it just evolved to what they now call Touch & Type.

==== UI Guidelines: ====
 * [[http://www.forum.nokia.com/info/sw.nokia.com/id/73e935fe-8b59-43b2-ab3e-1c5f763672db/Series_40_UI_Style_Guide.html|Nokia Series 40 UI Style Guide]]
 * [[http://library.forum.nokia.com/index.jsp?topic=/Design_and_User_Experience_Library/GUID-A8DF3EB8-E97C-4DA0-95F6-F464ECC995BC_cover.html|Nokia Design &amp; User Experience Library]]
 * [[http://wiki.forum.nokia.com/index.php/Category:Mobile_Design_Patterns|Nokia Mobile Design Patterns]] A series of articles, approaching a pattern library. Note that some of these may be very familiar, as it is a wiki, so some older patterns from this book and other information posted to the wiki have been copied to here by the authors, and other users.
 * [[http://www.forum.nokia.com/Design/|Forum Nokia Design Portal]] PDF.
 * [[http://www.slideshare.net/nokia-developer/series-40-full-touch-ui-style-guide-part-1|Nokia Asha UI Guidelines]] An intro to the Asha UI... but I am pretty sure that this ended up being just "Touch and Type" S40, so the Asha name is not important for UI design/development now.

==== Stencils & Templates: ====
 * [[http://www.forum.nokia.com/Develop/Web/Mobile_web_browsing/Web_templates/Templates_for_mobile_phones/|Templates for mobile phones]] meaning mostly S40 featurephones, but also some older S60 devices.

----

=== Tizen (Linux Foundation) ===
Placeholder, since I can find no UI guidelines as yet.


----


=== Ubuntu (Canonical) ===
These guys have an Android version, a TV version, and a more recent (2 Jan 2012) "phones" version which seems to be it's own OS.
 * [[http://www.ubuntu.com/devices/phone/design|Overview of design]]

Do not confuse this with [[http://en.wikipedia.org/wiki/Ubuntu_Mobile|Ubuntu Mobile]] a Hildon-based OS from 2008 that never received full traction.


----


=== WebOS (HP Palm) ===
This is [[http://www.openwebosproject.org/|open source]] but copyright still shows an HP entity owning it.

 * [[http://www.openwebosproject.org/docs#.UOXF2-Oe_2p|Developer documentation]] from Open WebOS

These documents are probably going to disappear someday, in favor of links on the Open WebOS site, but are not replicated there now.
 * [[https://developer.palm.com/content/api/design/mojo/user-interface-summary.html|User Interface Summary]]
 * [[https://developer.palm.com/content/api/design/mojo/hi-guidelines.html|Human Interface Guidelines]]

----

=== Windows Phone (Microsoft) ===
==== UI Guidelines ====
The guidelines also include older Windows Mobile, Windows CE, etc. Some are mixed so I just put them all together to make it easier to keep track of. Do note there are still new Mobile devices being launched, mostly in speciality industries, but it happens.
 * [[http://blendinsider.com/technical/ux-guidelines-for-metro-style-app-development-2011-10-21/|UX Guidelines for Metro Style App Development]] from the MS Blend group.
 * [[http://msdn.microsoft.com/en-us/library/hh202915%28v=VS.92%29.aspx|User Experience Design Guidelines for Windows Phone]], meaning Windows Phone 7, from Microsoft. Seems to be a regularly-updated kbase, so may continue to evolve.
 * [[http://go.microsoft.com/fwlink/?LinkID=183218|UI Design & Interaction Guide for Windows Phone 7]] v 2.0 PDF, from Microsoft.
 * [[http://msdn.microsoft.com/en-us/library/cc872774.aspx|Windows Touch UI Guideline]]
 * [[http://msdn.microsoft.com/en-us/library/bb158602.aspx|UI Guidelines for Windows Mobile 6.5]]
 * [[Windows Phone Store Download Badge|Windows Phone Store Download Badge]]

==== Stencils & Templates ====
A mixture of Windows Phone 7 and 8, with some RT tablet and even Windows 8 Pro thrown in. Many are not easily differentiated, so I didn't bother organizing at all. Read carefully if your needs are very specific.
 * [[http://forum.xda-developers.com/showthread.php?t=728913|Design Templates for Windows Phone 7]] from Microsoft. Includes 28 layered Photoshop template files and the Segoe system font. Sorry it's a dev forum post, but MS seems to not want anyone to know it exists. (Photoshop)
 * [[http://www.graffletopia.com/stencils/689|Microsoft Windows Phone 7 wireframe stencil for Omnigraffle]] from MarlinMobile (OmniGraffle)
 * [[http://dzinegeek.blogspot.in/2012/12/freebie-microsoft-surface-rt-psd-and-ai.html?goback=%2Egde_38178_member_196782347|Microsoft Surface RT .psd and .ai templates]] from Eric K (Illustrator, Photoshop)
 * [[https://mockupstogo.mybalsamiq.com/projects/wp7/WP7+Controls|WP7 Controls]] Not tested, from Balsamiq section FWIW
 * [[https://mockupstogo.mybalsamiq.com/projects/wp7/WP7+Bing+Screens|WP7 Bing Screens]] Not tested, from Balsamiq section FWIW
 * [[https://mockupstogo.mybalsamiq.com/projects/wp7/WP7+Panorama|WP7 Panorama]] Not tested, from Balsamiq section FWIW
 * [[http://www.graffletopia.com/stencils/689|Microsoft Windows Phone 7 wireframe stencil]] via Graffletopia. Note it is full size so will be very big on letter sized paper. Use larger paper sizes. (OmniGraffle)
 * [[http://projektgoteborg.deviantart.com/art/WP7-Passcode-Lockscr-iPhone-203738756|WP7 Passcode Lockscreen]] From an iOS (non-retina) project so scale may be odd (PNG)
 * [[http://365psd.com/day/2-136/|]Windows Phone 7 PSD] (PSD)
 * [[http://dribbble.com/shots/343268-WP7-Start-Screen-psd-|WP7 Start Screen]] (PSD)
 * [[http://dribbble.com/shots/340530-Audio-Player-Windows-Phone-7|Audio Player Windows Phone 7]] (Fireworks)
 * [[http://livven.deviantart.com/art/HTC-Mondrian-Concept-PSD-165692273|HTC Mondrian Concept]] (PSD)
 * [[http://bacboys.deviantart.com/art/Windows-Phone-7-Emulator-171021468|Microsoft Windows Phone 7 Emulator]] Not an emulator. (PSD)


----

=== Yi (Baidu) ===
A branch of Android, first marketed as the "Cloud Phone" with much included storage and some Baidu-provided cloud services. Two devices launched as of December 2012, apparently no differences in app design for this branch of the Android OS.

----


== Featurephones ==
Featurephones, by the classic definition, do not have a "named OS." More to the point, applications cannot generally be loaded in the native OS, so other methods must be used. These are listed below by their most to least important and common methods.

Do not call any of these "dumbphones." That is now too often a derogatory term for "not a smartphone" but actually is a useful distinction between featurephones (have a browser, and can install apps) and those that do not do this (mobile voice, SMS, may have other features and data connectivity but usually do not, and cannot install apps.). Featurephones are the most common now but there are many hundreds of millions of dumbphones out there so this distinction still matters.

----

=== J2ME ===
The Java Platform, Micro Edition (the same thing used to have a "2" in there, and is still mostly referred to by that abbreviation) is a common platform for running applications on practically all featurephones, worldwide. It was developed by Sun, so is now owned by Oracle. Installation methods vary, and some applications will work on basically all devices, while some are targeted to specific operators, regions, manufacturers or classes of devices. J2ME runs on over '''three billion handsets''' right this minute (1Q 2012). This is still a big deal.

It is not just used on Featurephones, but also on bada, Symbian OS, Windows CE, Windows Mobile, Maemo, and MeeGo (alongside native software. There is even a download to run J2ME apps on Android.
 * [[http://developer.sonyericsson.com/cws/download/1/716/984/1262667210/DW-102212-UI_Rulebook.pdf|Sony Ericsson UI Rulebook for JavaPlatform8 and higher]]
 * [[http://www.oracle.com/technetwork/java/javame/index.html|Java ME Landing Page]] a bunch of introductions, as well as developer resources, from Oracle.

----

=== BREW ===
A competitor to J2ME, created by Qualcomm, also allowing a (more or less) single piece of software to run on a range of handsets.
 * [[http://developer.att.com/developer/forward.jsp?passedItemId=1900002|AT&T UI Elements for Brew MP]]

----

=== WAP & Old Web ===
I ran across a selection of old standards documents recently, and thought it a shame to let them sit in their dusty folders. Here are those I am pretty sure no one will yell at me for posting:
 * [[http://4ourth.com/downloads/gsm.pdf|GSM Application Style Guide]] Openwave, 2001. "For markets with both OpenwaveTM and NokiaTM Model 7110TM and Model 6210/6250TM WAPTM browsers."
 * [[http://4ourth.com/downloads/style_guide.pdf|Graphical Browser Application Style Guide]] Openwave, 2001. "Openwave Mobile Browser, WAP Edition 5.0"
 * [[http://4ourth.com/downloads/mobilebrowser_sprint-technologypaper.pdf|Sprint PCS® Mobile Browser Technology Paper]] Sprint, 2004 but distributed at least as recently as late 2007. "Writing Consistent Mobile Browser Content on Sprint PCS Phones."

----

=== Native Operating Systems ===
Featurephones (and dumbphones) do have operating systems, mostly developed by the individual manufacturers, and native applications are in fact developed outside of the manufacturer's direct control for these devices. However, they generally cannot be installed by end users. These are created or specified by operators, and installed under controlled conditions. This is mostly stuff like a custom phone book. Even the default web browser is likely to be J2ME or BREW, but cannot be uninstalled, much like the same apps on your smartphone.

While UI guidelines do exist, these are generally proprietary so cannot be distributed. I have a few of them (hell, I wrote some of these), but cannot share them. Regardless, these documents would also be generally irrelevant; if you have to develop for this situation, you will be given the most applicable version by the operator and/or manufacturer, and have to work closely with them to get the software implemented.


-------
Next: [[Emulators]]
-------
= Discuss & Add =
Please do not change content above this line, as it's a perfect match with the printed book. Everything else you want to add goes down here.

== Brad Frost's Mobile Web Resources ==
Too broad-ranging to include in any one of my sections, I've stuck it here for reference, because it's large and interesting. Lots of articles from his blog or something, not all of which are up to date. But lots of info.
http://mobilewebbestpractices.com/resources/

== Drawing Tool, Tips & Tricks ==
This is really just a list of items that we keep for ourselves, so we don't forget things. Feel free to add items, or even categories, if there's a tool you want to share your notes about. It is not provided in the printed book text, and shouldn't be as is too specific to our methods of work, or is not particularly mobile-specific. Or both.

 * [[Sharing between versions of InDesign]]
 * [[Stupid INDD Tricks]]
 * [[Stupid AI Tricks]]
Line 78: Line 426:
 * [[http://www.peachpit.com/articles/article.aspx?p=1084741&seqNum=2 Real World Tips for Working with Text in InDesign CS3 - Sample Chapter from Peachpit Book]]
 * [[http://freefreehand.com/ Free Freehand: Trying to get Adobe to let FH become open source or otherwise available]]
 * [[http://freefreehand.yousaidit.com/topics/How_to_save_FreeHand/questions/-/latest The Q&A list from Free Freehand]]
 * [[http://kelsocartography.com/blog/?p=2955 How to get FH MX to run in Snow Leopard]]
 * [[http://indesignsecrets.com/double-downsave.php Mike Rankin solves the double downsave problem]]		  * [[http://www.peachpit.com/articles/article.aspx?p=1084741&seqNum=2|Real World Tips for Working with Text in InDesign CS3 - Sample Chapter from Peachpit Book]]
 * [[http://www.smashingmagazine.com/2009/10/12/setting-up-photoshop-for-web-app-and-iphone-development/|Set up Photoshop and Illustrator color controls]]
 * [[http://freefreehand.com/|Free Freehand: Trying to get Adobe to let FH become open source or otherwise available]]
 * [[http://freefreehand.yousaidit.com/topics/How_to_save_FreeHand/questions/-/latest|The Q&A list from Free Freehand]]
 * [[http://kelsocartography.com/blog/?p=2955|How to get FH MX to run in Snow Leopard]]
 * [[http://indesignsecrets.com/double-downsave.php|Mike Rankin solves the double downsave problem]]
 * [[http://www.d.umn.edu/itss/support/Training/Online/webdesign/usability.html|Usability Links]]

== Make a new section ==
Just like this. If, for example, you want to argue about the differences between, say, Tidwell's Vertical Stack, and our general concept of the List, then add a section to discuss. If we're successful, we'll get to make a new edition and will take all these discussions into account.

 

Click here to buy from Amazon.

Templates and stencils are (except for my use above of the older term for a piece of plastic you trace with) graphic items you can use with various drawing programs to create concepts, mockups, process diagrams, comps, or graphics for final designs.

For many years, there was no particular assistance provided to those seeking to design for mobile handsets. Over time, books and other documents and supporting information has emerged. Now, major software vendors like Adobe are embedding mobile-centric technology in their products.

New ones are constantly being added, or replaced, so please help us keep this up to date. Contact us with updates you may encounter.

Note that this is just those we’ve found, or found useful. Many more may exist, or be included as part of the various manufacturer and OS developer links in the “UI Guidelines” subsections. Also be aware that by no means are all of these reviewed for quality, and are just checked to make sure that (at the time of this writing) they were valid links to real files, and are in the right category.

Tools & Templates - Blackberry (RIM) Tools & Templates - Firefox OS/Boot to Gecko/B2G (Mozilla) Tools & Templates - Glass (Google) Tools & Templates - iOS (Apple) Tools & Templates - Meego (Linux Foundation) Tools & Templates - Sailfish (Jolla) Tools & Templates - Symbian/S60/S^3 (Symbian Foundation, nee Nokia, nee Symbian, Ltd.) Tools & Templates - S30/S40 (Nokia) Tools & Templates - Tizen (Linux Foundation) Tools & Templates - Ubuntu Touch (Canonical) Tools & Templates - WebOS (HP Palm) Tools & Templates - Windows Phone (Microsoft) Tools & Templates - Yi(Baidu)

Design Organizations & Design Tools

The following organizations provide valuable resources for drawing tools and templates that you can use:

4ourth Mobile

These are the templates we use every day for designing mobile device interfaces. Includes a numer of mobile components and additional information like typography, for general mobile design. Also includes gesture guidelines, vector handsets for all the major OSs, and a number of handset/OS specific widgets and icons. The illustrations and diagrams in this book were created starting with these components.

If you are still working in Macromedia Freehand, the old (September 2009) version is still available. It has Little Springs branding, as that's who Steven worked for when he made it.

The actual document used to create the diagrams in this book has also been made available. Enjoy.

Fluid UI

  • Fluid UI Also less of a design tool than a prototyper, where you do design in the tool. The design tools appear to be pretty flexible (you can do impossible things with the widgets) and has a reasonably large set of widgets to place on your designs.

Fireworks Wireframing Kit

  • Fireworks Wireframing Kit by Hannah Milan. Multiple templates, of different fidelity, as a series of downloads. Not all are mobile-specific (Fireworks, obviously)

Graffletopia

Justinmind

  • Justinmind Prototyper a UI design tool itself, but specifically designed to use pre-built widget libraries. Allows you to save your pieces, and share with a team.

  • Android 3.2 (Honeycomb) library items now available. As are many others, but I am not going to list them all, just the latest news.

Keynote

  • Keynote Kung-Fu Wireframe Toolkit For Keynote. Paid, but only $12. For multiple platforms, including desktop web.

  • Keynote mockups "sketch," wireframe and prototype took for Keynote (and I think Powerpoint and OpenOffice), free with a tweet. From Keynotopia.

Mobility

  • Mobility A free set of mobile UI design elements. (Photoshop)

Proto.io

  • Dedicated mobile prototyper of the type where they want you to do all the design in the tool as well. Can preview in more than the usual number of OSs.

Punchcut

Squetch

  • Wireframe Sketching Kit with tools for Browser, iPad upright, iPad landscape, Smartphone, GUI-Elements and Form-Elements. Not sure what some mean, but I guess "Smartphone" means they are trying to not just be iOS, so they get a category. (Illustrator)

Yahoo!

  • Yahoo! Stencil Kit many non-mobile parts, but also useful general and iPhone bits and pieces.

Specific Symbol Libraries

I have avoided this as it seemed like an awfully-specfic offshoot, but now I am aware of such a number of ways of communicating gesture in diagramming that I cannot ignore it anymore. I have made this new category, in the hopes it makes sense and other types of symbol communications will become available (or known to me) in the future.

If you go looking for this in the book, you won't find it. Came a couple weeks too late for that.

Gesture

Specific Operating Systems

Basically because OS and device manufacturers have increasingly been providing guidelines for the implementation of their UI, I am merging two sections. Now, all OS-specific templates and guidelines will be in one place.

Stencils and templates are pretty simple, but if there is insufficient information in the UI guidelines, you may wish to browse the rest of the developer resources for the answer. Some UI or UX information may be included in other sections.

Aliyun OS (Alibaba Group)

I can find zero information on designing (not developing) for this OS. If anyone has some, please tell me about it.

Android OS (Google)

As of January 2012, developer.android has a rather decent design section at http://developer.android.com/design/index.html. This is a good place to start.

While developer focused, this is a great list of resources for Android OS work.

UI Guidelines:

Stencils & Templates:

Tests & Defaults:

  • API Demos Go get this. Really. It has lots of nerdy stuff to check for capabilities and so on, but is a great way to for sure know what default capabilities and UI are. Go into, say, Preferences then pick Default values and you can see the default behaviors of Android Preferences. Useful.

Bada (Samsung)

Basmati / LGOS (Uncle Ben's)

Blackberry (RIM)

Blackberry UI Guidelines

Blackberry 10 (QNX):

Smartphone (BBOS):

Boot to Gecko, B2G, Firefox OS (Mozilla)

Mozilla's Boot to Gecko, or Firefox OS (and specifically the Gaia UI layer) is not on any hardware you can buy yet or anything, but it's being developed quite transparently, so there is a nice collection of guidelines. Also, I know they used Designing Mobile Interfaces a lot during the UI design phase, so I agree with all their decisions.

Glass (Google)

UI Guidelines:

iOS (Apple)

UI Guidelines:

iPhone, iPod Touch, and iPad. Big collection of these available here which I need to parse out http://www.queness.com/post/10870/useful-collection-of-ios-tools-and-resources-for-designers

Stencils & Templates:

Meego (Linux Foundation)

Unless I misunderstand, this is dead and more or less replaced with Tizen.

Sailfish (Jolla)

A spinoff from Meego, by an all new company.

Symbian/S60/S^3 (Symbian Foundation, ''nee'' Nokia, ''nee'' Symbian, Ltd.)

UI Guidelines:

Stencils & Templates:

S30/S40 (Nokia)

This is the featurephone (S40) and dumbphone (S30) set of operating systems that Nokia owns and uses on their many, many other devices. Despite zero technical relationship between these and Symbian/S60/S^3/etc. there is much overlap in documentation. It is worth looking at the above section as well.

Nokia Asha is not an OS at all. It's a marketing name (like "Lumia") for "high end" featurephones. At launch, this was also sorta, kinda discussed as though it was an OS or GUI layer, but there was little difference between that and "normal" S40, and over time this has entirely disappeared of course. I think that it just evolved to what they now call Touch & Type.

UI Guidelines:

Stencils & Templates:

Tizen (Linux Foundation)

Placeholder, since I can find no UI guidelines as yet.

Ubuntu (Canonical)

These guys have an Android version, a TV version, and a more recent (2 Jan 2012) "phones" version which seems to be it's own OS.

Do not confuse this with Ubuntu Mobile a Hildon-based OS from 2008 that never received full traction.

WebOS (HP Palm)

This is open source but copyright still shows an HP entity owning it.

These documents are probably going to disappear someday, in favor of links on the Open WebOS site, but are not replicated there now.

Windows Phone (Microsoft)

UI Guidelines

The guidelines also include older Windows Mobile, Windows CE, etc. Some are mixed so I just put them all together to make it easier to keep track of. Do note there are still new Mobile devices being launched, mostly in speciality industries, but it happens.

Stencils & Templates

A mixture of Windows Phone 7 and 8, with some RT tablet and even Windows 8 Pro thrown in. Many are not easily differentiated, so I didn't bother organizing at all. Read carefully if your needs are very specific.

Yi (Baidu)

A branch of Android, first marketed as the "Cloud Phone" with much included storage and some Baidu-provided cloud services. Two devices launched as of December 2012, apparently no differences in app design for this branch of the Android OS.

Featurephones

Featurephones, by the classic definition, do not have a "named OS." More to the point, applications cannot generally be loaded in the native OS, so other methods must be used. These are listed below by their most to least important and common methods.

Do not call any of these "dumbphones." That is now too often a derogatory term for "not a smartphone" but actually is a useful distinction between featurephones (have a browser, and can install apps) and those that do not do this (mobile voice, SMS, may have other features and data connectivity but usually do not, and cannot install apps.). Featurephones are the most common now but there are many hundreds of millions of dumbphones out there so this distinction still matters.

J2ME

The Java Platform, Micro Edition (the same thing used to have a "2" in there, and is still mostly referred to by that abbreviation) is a common platform for running applications on practically all featurephones, worldwide. It was developed by Sun, so is now owned by Oracle. Installation methods vary, and some applications will work on basically all devices, while some are targeted to specific operators, regions, manufacturers or classes of devices. J2ME runs on over three billion handsets right this minute (1Q 2012). This is still a big deal.

It is not just used on Featurephones, but also on bada, Symbian OS, Windows CE, Windows Mobile, Maemo, and MeeGo (alongside native software. There is even a download to run J2ME apps on Android.

BREW

A competitor to J2ME, created by Qualcomm, also allowing a (more or less) single piece of software to run on a range of handsets.

WAP & Old Web

I ran across a selection of old standards documents recently, and thought it a shame to let them sit in their dusty folders. Here are those I am pretty sure no one will yell at me for posting:

Native Operating Systems

Featurephones (and dumbphones) do have operating systems, mostly developed by the individual manufacturers, and native applications are in fact developed outside of the manufacturer's direct control for these devices. However, they generally cannot be installed by end users. These are created or specified by operators, and installed under controlled conditions. This is mostly stuff like a custom phone book. Even the default web browser is likely to be J2ME or BREW, but cannot be uninstalled, much like the same apps on your smartphone.

While UI guidelines do exist, these are generally proprietary so cannot be distributed. I have a few of them (hell, I wrote some of these), but cannot share them. Regardless, these documents would also be generally irrelevant; if you have to develop for this situation, you will be given the most applicable version by the operator and/or manufacturer, and have to work closely with them to get the software implemented.

Next: Emulators

Discuss & Add

Please do not change content above this line, as it's a perfect match with the printed book. Everything else you want to add goes down here.

Brad Frost's Mobile Web Resources

Too broad-ranging to include in any one of my sections, I've stuck it here for reference, because it's large and interesting. Lots of articles from his blog or something, not all of which are up to date. But lots of info. http://mobilewebbestpractices.com/resources/

Drawing Tool, Tips & Tricks

This is really just a list of items that we keep for ourselves, so we don't forget things. Feel free to add items, or even categories, if there's a tool you want to share your notes about. It is not provided in the printed book text, and shouldn't be as is too specific to our methods of work, or is not particularly mobile-specific. Or both.

Links, Guides, Other Stuff

Make a new section

Just like this. If, for example, you want to argue about the differences between, say, Tidwell's Vertical Stack, and our general concept of the List, then add a section to discuss. If we're successful, we'll get to make a new edition and will take all these discussions into account.

Drawing Tools & Templates (last edited 2013-09-04 04:31:49 by shoobe01)