|
Size: 8019
Comment:
|
Size: 8813
Comment:
|
| Deletions are marked like this. | Additions are marked like this. |
| Line 4: | Line 4: |
| These are graphic items you can import to various drawing programs (mostly the Adobe suite) to create designs and mockups. | |
| Line 5: | Line 6: |
| ==== 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. |
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. ==== 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: |
| Line 10: | Line 13: |
| If you are still on Freehand (and we salute you) the old, not-at-all-updated version | 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 17: | Line 20: |
| 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 32: | Line 35: |
| * [[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. | * [[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. |
| Line 36: | Line 39: |
| ---- | |
| Line 42: | Line 46: |
| * [[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]] |
| Line 46: | Line 50: |
| * [[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 |
| Line 52: | Line 56: |
| * [[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 60: |
| === 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]] |
=== 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 65: | Line 71: |
| * [[http://developer.palm.com/index.php?option=com_content&view=article&id=1606|webOS UI Guidelines ]] | * [[http://developer.palm.com/index.php?option=com_content&view=article&id=1606|webOS User Interface Guidelines]] |
| Line 68: | Line 74: |
| * [[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 81: |
| * [[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 83: |
| === 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 88: |
| ---- | |
| Line 89: | Line 95: |
| == Drawing Tool Tips & Tricks == | ---- == Drawing Tool, Tips & Tricks == |
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.
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.
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.
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
Teehan-Lax
Library of iPhone UI Elements Photoshop library of iPhone-specific elements only, now the link to the all-new v4 library.
Smashing Magazine
Library of Android UI Elements Photoshop library of Android (default) elements only.
Developer.Android
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.
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
Microsoft Windows CE, Mobile & Phone
Nokia Family (S40, S60, Symbian, MeeGo)
S60 Visualization and Graphic Design Guideline PDF from here
Palm WebOS
RIM Blackberry
Samsung Bada
Sony Ericsson Featurephones
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. Feel free to add items, or even categories, if there's a tool you want to share your notes about.