Differences between revisions 28 and 167 (spanning 139 versions)
Revision 28 as of 2011-01-14 22:19:56
Size: 12711
Editor: eberkman
Comment:
Revision 167 as of 2013-09-04 04:31:49
Size: 8521
Editor: shoobe01
Comment:
Deletions are marked like this. Additions are marked like this.
Line 1: Line 1:
== Mobile Design Elements == {{{#!html
Line 3: Line 3:
=== 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.
<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>
Line 6: Line 24:
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]]

==== Yahoo! ====
 * [[http://developer.yahoo.com/ypatterns/about/stencils/|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.
 * [[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.

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

==== 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)

==== 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)

==== 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&reg; skills. From Zurb (OmniGraffle)
}}}
Line 50: Line 27:
==== 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.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.
Line 65: Line 38:
----
== 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]]
 * [[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/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 &amp; 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 &amp; 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]]

=== Palm WebOS ===
 * [[http://developer.palm.com/index.php?option=com_content&amp;amp;view=article&amp;amp;id=1606|webOS User Interface Guidelines]]

=== RIM Blackberry ===
 * [[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

=== Samsung Bada ===
 * [[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]]

=== 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]]
== Smartphones ==
 * [[Design Organizations & Design Tools]]
 * [[Symbol Libraries]] Gesture
 * [[Tools & Templates - Aliyun OS|Aliyun OS]] (Alibaba Group)
 * [[Tools & Templates - Android OS|Android OS]] (Google)
 * [[Tools & Templates - Bada|Bada]] (Samsung)
 * [[Tools & Templates - Basmati|Basmati]]/LGOS (Uncle Ben's)
 * [[Tools & Templates - Blackberry|Blackberry]] (BlackBerry ''nee'' RIM)
 * [[Tools & Templates - Firefox OS|Firefox OS]]/Boot to Gecko/B2G (Mozilla)
 * [[Tools & Templates - Glass|Glass]] (Google)
 * [[Tools & Templates - iOS|iOS]] (Apple)
 * [[Tools & Templates - Meego|Meego]] (Linux Foundation)
 * [[Tools & Templates - Sailfish|Sailfish]] (Jolla)
 * [[Tools & Templates - Symbian|Symbian]]/S60/S^3 (Symbian Foundation, ''nee'' Nokia, ''nee'' Symbian, Ltd.)
 * [[Tools & Templates - Tizen|Tizen]] (Linux Foundation)
 * [[Tools & Templates - Ubuntu Touch|Ubuntu Touch]] (Canonical)
 * [[Tools & Templates - WebOS|WebOS]] (HP Palm)
 * [[Tools & Templates - Windows Phone|Windows Phone]] (Microsoft)
 * [[Tools & Templates - Yi|Yi]] (Baidu)
Line 114: Line 60:
---- == 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.

Featurephones are big business still. As late as July 2013 Facebook has [[http://thenextweb.com/facebook/2013/07/22/facebooks-every-phone-app-for-feature-phones-passes-100-million-monthly-active-users/|100 million regular users of their featurephone app]].

 * [[Tools & Templates - S30/S40|S30/S40]] (Nokia)
 * [[Tools & Templates - J2ME|J2ME]] (Sun)
 * [[Tools & Templates - BREW|BREW]] (Qualcomm)


== WAP & Old Mobile 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/
Line 116: Line 96:
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. 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.
Line 122: Line 102:
Line 125: Line 104:
 * [[http://www.smashingmagazine.com/2009/10/12/setting-up-photoshop-for-web-app-and-iphone-development/|Set up Photoshop and Illustrator color controls]]
Line 130: Line 110:

== 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.

Smartphones

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.

Featurephones are big business still. As late as July 2013 Facebook has 100 million regular users of their featurephone app.

WAP & Old Mobile 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)