|
Size: 8360
Comment:
|
Size: 13252
Comment:
|
| Deletions are marked like this. | Additions are marked like this. |
| Line 1: | Line 1: |
| #acl EditorGroup:read,write,revert All:read | |
| Line 4: | Line 5: |
| ==== 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]] |
=== Templates & Stencils === These are graphic items you can import to various drawing programs (mostly the Adobe suite) to create designs and mockups. The organization may confuse you a bit. Up top are people (like us!) who give lots of different templates, and generic ones. Then I list them by platform, because way too many people are making a single set of Photoshop tools for the iPad, et. al. |
| Line 9: | Line 8: |
| 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]] |
Note that this is just those we've found, or found useful. Many more are likely stuck in the various manufacturer and OS developer links under UI Guidelines below. Also, we do not use raster tools for wireframing, or even OmniGraffle much. Most of these are not reviewed, just listed. If dumb, or incorrectly categorized, please fix it. ==== 4ourth Mobile ==== 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. Includes the templates used to make the illustrations and diagrams for this wiki. Last updated 21 October 2010: * [[http://www.4ourth.com/downloads/MobileDesignElements-2010oct21.indd.zip|Adobe InDesign CS4 (.indd) format, compressed, 11.5 mb]] * [[http://www.4ourth.com/downloads/MobileDesignElements-2010oct21.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 (September 2009), not-at-all-updated 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]] ==== 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. |
| Line 13: | Line 24: |
| * [[http://developer.yahoo.com/ypatterns/about/stencils/ Yahoo! Stencil Kit]] many non-mobile parts, but also useful general and iPhone bits and pieces. | * [[http://developer.yahoo.com/ypatterns/about/stencils/|Yahoo! Stencil Kit]] many non-mobile parts, but also useful general and iPhone bits and pieces. |
| Line 15: | Line 26: |
| ==== 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. |
==== Nokia, Et. Al. ==== Includes Symbian Foundation, and so forth. Even though some of those are not really 100% 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. If someone thinks it needs to go somewhere else, move it. * [[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. |
| Line 21: | Line 33: |
| * [[http://www.graffletopia.com/search/mobile Mobile UI Stencils for Omnigraffle]] | * [[http://www.graffletopia.com/search/mobile|Mobile UI Stencils]] (Omnigraffle) |
| Line 23: | Line 35: |
| ==== 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. |
==== 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. I haven't looked, so it could be lying and only be iOS. Someone move it or tell me if it's not generic. (.psd) |
| Line 26: | Line 38: |
| ==== 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. |
==== 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 29: | Line 41: |
| ==== 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. |
==== iOS ==== iPhone, iPod Touch and iPad * [[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. * [[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]] to encourage sketching, even as far as to print empties and use your mad Sharpie® skills. From Zurb (OmniGraffle) |
| Line 38: | Line 55: |
| == Drawing Tool Tips & Tricks == Just a list that we keep for ourselves, so we don't forget things. |
==== Android OS ==== All versions, all platforms, all operator overlays. When someone makes Google TV stencils, they'll probably be here also. * [[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) |
| Line 41: | Line 70: |
| ==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. |
|
| Line 44: | Line 71: |
| 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)" ?>' |
---- == UI Guidelines == Documentation, forums, lists and other methods device and OS makers use to communicate their UI guidelines. These periodically move, so if you see a broken link, please update it. |
| Line 50: | Line 75: |
| === 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. |
Templates and stencils, even from these people, will be listed above where known. |
| Line 67: | Line 77: |
| === 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. |
=== Android (from Google and OEMs) === * [[http://developer.android.com/guide/practices/ui_guidelines/index.html|Android User Interface Guidelines]] * [[http://developer.motorola.com/docstools/library/Best_Practices_for_User_Interfaces/|Motorola’s Best Practices for Android UI]] === Apple iOS === * [[http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/Introduction/Introduction.html|iPhone Human Interface Guidelines]] * [[http://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/MobileHIG.pdf|iPhone Human Interface Guidelines]] PDF * [[http://developer.apple.com/library/ios/#documentation/general/conceptual/ipadhig/Introduction/Introduction.html|iPad Human Interface Guidelines]] * [[http://developer.apple.com/library/ios/documentation/general/conceptual/ipadhig/iPadHIG.pdf|iPad Human Interface Guidelines]] PDF === HP Palm WebOS === * [[http://developer.palm.com/index.php?option=com_content&view=article&id=1606|webOS User Interface Guidelines]] === Microsoft Windows CE, Mobile & Phone === * [[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]] * [[http://download.microsoft.com/download/7/7/3/77371BBD-6613-4C1A-ACBF-08365C09D5FA/UI%20Design%20and%20Interaction%20Guide%20for%20Windows%20Phone%207%20v2.0.pdf |UI Design & Interaction Guide for Windows Phone 7]] PDF === Nokia Family (S40, S60, Symbian, MeeGo) === * [[http://library.forum.nokia.com/index.jsp?topic=/Design_and_User_Experience_Library/GUID-A8DF3EB8-E97C-4DA0-95F6-F464ECC995BC_cover.html|Nokia Design & User Experience Library]] * [[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 from here * [[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.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]] === RIM Blackberry === * [[http://docs.blackberry.com/en/developers/deliverables/17965/index.jsp?name=UI+Guidelines+-+BlackBerry+Smartphones6.0&language=English&userType=21&category=Java+Development+Guidelines&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&language=English&userType=21&category=Java+Development+Guidelines&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 === Samsung Bada === * [[http://dpimg.ospos.net/contents/docs/resources_1004/com.osp.appuiguide.help/html/FramesetMain.html?menu=MC01010403&mtb1=&mtb2|Bada Application UI Guide]] === Sony Ericsson Featurephones === * [[http://developer.sonyericsson.com/cws/download/1/716/984/1262667210/DW-102212-UI_Rulebook.pdf|Sony Ericsson UI Rulebook for JavaPlatform8 and higher]] ---- == Drawing Tool, Tips & Tricks == Just a list 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. * [[Sharing between versions of InDesign]] * [[Stupid INDD Tricks]] * [[Stupid AI Tricks]] |
| Line 78: | Line 130: |
| * [[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://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]] |
Mobile Design Elements
Templates & Stencils
These are graphic items you can import to various drawing programs (mostly the Adobe suite) to create designs and mockups. The organization may confuse you a bit. Up top are people (like us!) who give lots of different templates, and generic ones. Then I list them by platform, because way too many people are making a single set of Photoshop tools for the iPad, et. al.
Note that this is just those we've found, or found useful. Many more are likely stuck in the various manufacturer and OS developer links under UI Guidelines below.
Also, we do not use raster tools for wireframing, or even OmniGraffle much. Most of these are not reviewed, just listed. If dumb, or incorrectly categorized, please fix it.
4ourth Mobile
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. Includes the templates used to make the illustrations and diagrams for this wiki. Last updated 21 October 2010:
If you are still on Freehand (and we salute you) the old (September 2009), not-at-all-updated version is still available. It has Little Springs branding, as that's who Steven worked for when he made it.
Punchcut
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.
Yahoo!
Yahoo! Stencil Kit many non-mobile parts, but also useful general and iPhone bits and pieces.
Nokia, Et. Al.
Includes Symbian Foundation, and so forth. Even though some of those are not really 100% Nokia.
Nokia Mobile Design Patterns Not really the same thing, as they are just articles, not actual things to use for drawning. If someone thinks it needs to go somewhere else, move it.
S60 Wireframing Stencils S60 (through 5th edition) elements of all sorts.
Graffletopia
Mobile UI Stencils (Omnigraffle)
Mobility
Mobility A free set of mobile UI design elements. I haven't looked, so it could be lying and only be iOS. Someone move it or tell me if it's not generic. (.psd)
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)
iOS
iPhone, iPod Touch and iPad
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/ Same as above but for the iPhone 4 resolution instead. (Photoshop)
iPhone UI Kit Lots of UI widgets like switches, buttons, etc. (Photoshop)
Another Libtary of iPhone4 UI Elements Based on the Teehan-Lax work above, but presumably different in some way. (Photoshop)
Vector Wireframe Templates for iPhone (Illustrator)
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)
iPhone Wireframe Kit In, of all things, Google Docs. Haven't tried it, but I really need to.
iPad Template Preview only has the frame, so not sure what is included. (Photoshop)
iPad Wall Presenter I think just the frames with guides to put backgrounds and designs into. (PNG and Photoshop)
Sketching the iPad to encourage sketching, even as far as to print empties and use your mad Sharpie® skills. From Zurb (OmniGraffle)
Android OS
All versions, all platforms, all operator overlays. When someone makes Google TV stencils, they'll probably be here also.
Library of Android UI Elements from Smashing Magazine. Photoshop library of Android (default) elements only. (Photoshop)
Android 2.2 Elements based on the Smashing Magazine work. (Photoshop)
http://www.webdesignshock.com/freebies/free-photoshop-android-interface-gui/ which has a lot of UI widgets, and includes the typography needed to make it all work.(Photoshop)
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)
14 Android GUI Widgets by which they seem to mean default desktop widgets (e.g. clock), vs. UI widgets like scrollbars. (Photoshop)
HTC HD2 PSD Vector150 layers, 60 groups, almost all vector. (Photoshop)
HTC G2 370 layers, almost all vector, (Photoshop)
Motorola Droid 2350 layers, almost all vector (Photoshop)
Samsung Galaxy S Device not specified. 127 layers. (Photoshop)
Samsung Galaxy Tab P1000 110 layers. (Photoshop)
Android Honeycomb Tablet Preview of wireframe components, sketch sheets, etc. (based on screenshots, emulators, etc, so not final). From Zurb (OmniGraffle)
UI Guidelines
Documentation, forums, lists and other methods device and OS makers use to communicate their UI guidelines. These periodically move, so if you see a broken link, please update it.
Templates and stencils, even from these people, will be listed above where known.
Android (from Google and OEMs)
Apple iOS
HP Palm WebOS
Microsoft Windows CE, Mobile & Phone
Nokia Family (S40, S60, Symbian, MeeGo)
S60 Visualization and Graphic Design Guideline PDF from here
RIM Blackberry
Samsung Bada
Sony Ericsson Featurephones
Drawing Tool, Tips & Tricks
Just a list 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.