|
Size: 4244
Comment:
|
Size: 8042
Comment:
|
| Deletions are marked like this. | Additions are marked like this. |
| Line 3: | Line 3: |
| === Templates & Stencils === |
|
| Line 4: | Line 6: |
| 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. | 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. |
| Line 14: | Line 16: |
| ==== Nokia ==== | ==== Nokia, Et. Al. ==== Includes Symbian Foundation, and so forth. Even though some of those are not really 100% Nokia. |
| Line 26: | Line 29: |
| *[[http://www.smashingmagazine.com/2009/08/18/android-gui-psd-vector-kit/|Library of Android UI Elements]] Photoshop library of Android (default) elements only. | * [[http://www.smashingmagazine.com/2009/08/18/android-gui-psd-vector-kit/|Library of Android UI Elements]] Photoshop library of Android (default) elements only. |
| Line 29: | Line 32: |
| *[[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. == 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) === * [[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 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]] === Microsoft Windows CE, Mobile & Phone === * [[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)]] === 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 ]] === 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 WHICH OS === * [[http://developer.sonyericsson.com/cws/download/1/716/984/1262667210/DW-102212-UI_Rulebook.pdf|Sony Ericsson UI Rulebook]] |
| Line 42: | Line 94: |
| * [[Stupid AI Tricks]] | |
| Line 43: | Line 96: |
| === 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: 1. Select whole shape, groups work fine. 1. E (free transform) 1. Start dragging a “downrange” corner 1. Click Cmd to convert that corner only 1. Click Cmd+Shift+Opt to move it and the corresponding pont with axial symmetry. 1. 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. |
Mobile Design Elements
Templates & Stencils
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.
If you are still on Freehand (and we salute you) the old, not-at-all-updated version
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
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.
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, Symbian, Et. Al.
Palm WebOS
RIM Blackberry
Samsung Bada
Sony Ericsson WHICH OS
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.