Differences between revisions 8 and 42 (spanning 34 versions)
Revision 8 as of 2010-10-20 15:45:26
Size: 8019
Editor: shoobe01
Comment:
Revision 42 as of 2011-05-23 00:46:50
Size: 13666
Editor: shoobe01
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 6:
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 5: Line 8:
==== 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. Includes the templates used to make the illustrations and diagrams for this wiki.
 * [[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]]
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.
Line 10: Line 10:
If you are still on Freehand (and we salute you) the old, not-at-all-updated version 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 17 April 2011:
 * [[http://www.4ourth.com/downloads/MobileDesignElements-2011april15.indd.zip|Adobe InDesign CS4 (.indd) format, compressed zip file, 15.7 mb]]
 * [[http://www.4ourth.com/downloads/MobileDesignElements-2011april15.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.
Line 12: Line 19:

==== 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 17: Line 27:
Includes Symbian Foundation, and so forth. Even though some of those are not really 100% Nokia.  Includes Symbian Foundation, and so forth. Even though some of those are not really 100% Nokia.
Line 23: Line 33:
 * [[http://www.graffletopia.com/search/mobile|Mobile UI Stencils for Omnigraffle]]  * [[http://www.graffletopia.com/search/mobile|Mobile UI Stencils]] (Omnigraffle)
Line 25: 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 28: 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 31: 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.
==== 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)


==== Android OS ====
All versions, all platforms, all operator overlays.
 * [[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 36: Line 72:
----
Line 42: Line 79:
* [[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]]
 * [[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]]
 * [[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.
Line 46: Line 86:
* [[http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/Introduction/Introduction.html|iPhone Human Interface Guidelines website]]
* [[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]]
 * [[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]]
Line 52: Line 95:
* [[http://msdn.microsoft.com/en-us/library/bb158602.aspx|UI Guidelines for Windows Mobile]]
* [[http://msdn.microsoft.com/en-us/library/cc872774.aspx|Windows Touch UI Guideline]]
* [[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)]]
 * [[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
Line 56: Line 99:
=== Nokia, Symbian, Et. Al. ===
* [[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/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/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/eb8a68ba-6225-4d84-ba8f-a00e4a05ff6f/Hildon_2_2_UI_Style_Guide.html|Hildon UI Guidelines for Nokia Maemo]]

=== Palm WebOS ===
* [[http://developer.palm.com/index.php?option=com_content&view=article&id=1606|webOS UI Guidelines ]]
=== 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]]
Line 68: Line 110:
* [[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)]]
 * [[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
Line 75: Line 117:
* [[http://dpimg.ospos.net/contents/docs/resources_1004/com.osp.appuiguide.help/html/FramesetMain.html?menu=MC01010403&mtb1=&mtb2=">Bada Application UI Guide]]  * [[http://dpimg.ospos.net/contents/docs/resources_1004/com.osp.appuiguide.help/html/FramesetMain.html?menu=MC01010403&mtb1=&mtb2|Bada Application UI Guide]]
Line 77: Line 119:
=== Sony Ericsson WHICH OS ===
* [[http://developer.sonyericsson.com/cws/download/1/716/984/1262667210/DW-102212-UI_Rulebook.pdf|Sony Ericsson UI Rulebook]]
=== 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]]
Line 82: Line 124:

== 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 ==
----
== Drawing Tool, Tips & Tricks ==
Line 103: Line 139:
 * [[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 17 April 2011:

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

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.

Graffletopia

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

Android OS

All versions, all platforms, all operator overlays.


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)

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.

Links, Guides, Other Stuff

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