|
Size: 12959
Comment:
|
Size: 17607
Comment:
|
| Deletions are marked like this. | Additions are marked like this. |
| Line 3: | Line 3: |
| == Mobile Design Elements == | 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. |
| Line 5: | Line 5: |
| === 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. |
New ones are constantly being added, or replaced, so please help us keep this up to date. Visit the wiki at www.4ourth.com/wiki or contact us with updates you may encounter. |
| Line 8: | Line 7: |
| 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 8: |
| 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. | == Templates & Stencils == These are graphic items you can use with various drawing programs to create concepts, mockups, process diagrams, comps or graphics for final designs. |
| Line 12: | Line 11: |
| First listed are organizations with either general templates, or a number of templates for different devices and OSs. This is followed by a list by platform, as recently most designers and agencies have become concentrated on one or two devices or platforms, leading to a surge in such templates. 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 under the UI Guidelines section, below. 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) they were valid links to real files, and are in the right category. === Design Organizations === |
|
| Line 13: | Line 17: |
| 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]] |
These are the templates we use every day for designing mobile device interfaces. Includes a numer of mobile components and additional information like typograph, for general mobile design. Also includes gesture guidelines, and some handset/OS specific items. The illustrations and diagrams in this book were created with these components. * [[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]] |
| Line 17: | Line 21: |
| 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. | If you are still working in Macromedia Freehand, the old (September 2009) version is still available. It has Little Springs branding, as that's who Steven worked for when he made it. |
| Line 19: | Line 23: |
==== 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. |
|
| Line 33: | Line 28: |
| * [[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) | * [[http://www.fullcreative.com/2010/10/mobility-a-free-set-of-mobile-ui-design-elements/|Mobility]] A free set of mobile UI design elements. (Photoshop) ==== Nokia ==== Templates from Nokia, mostly for designing on S60 devices. * [[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. ==== 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 37: | Line 41: |
==== Yahoo! ==== * [[http://developer.yahoo.com/ypatterns/about/stencils/|Yahoo! Stencil Kit]] many non-mobile parts, but also useful general and iPhone bits and pieces. === Specific Operating Systems === ==== MS Windows Phone 7 ==== * [[http://go.microsoft.com/fwlink/?LinkId=196225|Design Templates for Windows Phone 7]] from Microsoft. Includes 28 layered Photoshop template files and the Segoe system font (Photoshop) * [[http://www.graffletopia.com/stencils/689|Microsoft Windows Phone 7 wireframe stencil for Omnigraffle]] from MarlinMobile (OmniGraffle) |
|
| Line 46: | Line 58: |
| * [[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://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. (GoogleDocs) |
| Line 49: | Line 61: |
| * [[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) | * [[http://www.zurb.com/playground/ipad-stencils|Sketching the iPad from Zurb]] to encourage sketching, even as far as to print empties and use your mad Sharpie® skills. (OmniGraffle) |
| Line 53: | Line 65: |
| All versions, all platforms, all operator overlays. When someone makes Google TV stencils, they'll probably be here also. | All versions, all platforms, all operator overlays. |
| Line 66: | Line 78: |
| * [[http://www.graffletopia.com/stencils/630|Google Android 1.6 Wireframe stencil for Omnigraffle]] from MarlinMobile (OmniGraffle). * [[http://www.graffletopia.com/stencils/673|Google Android 2.1 / 2.2 Wireframe stencil for Omnigraffle]] from MarlinMobile (OmniGraffle). |
|
| Line 70: | Line 84: |
| 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. | OS and device manufacturers have increasingly been providing guidelines for the implementation of their UI. This may include brief, general guidance, relatively specific format rules, or quite involved discussions of design implementation and the reasoning behind them. |
| Line 72: | Line 86: |
| Templates and stencils, even from these people, will be listed above where known. | All provide much more documentation for developers, so if there is insufficient information in the UI guidelines, you may wish to browse the rest of the developer resources for the answer. Some UI or UX information may be included in other sections. |
| Line 77: | Line 92: |
| * [[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 85: | Line 103: |
| * [[http://developer.palm.com/index.php?option=com_content&view=article&id=1606|webOS User Interface Guidelines]] | * [[https://developer.palm.com/content/api/design/mojo/user-interface-summary.html|User Interface Summary]] * [[https://developer.palm.com/content/api/design/mojo/hi-guidelines.html|Human Interface Guidelines]] |
| Line 90: | Line 110: |
| * [[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://go.microsoft.com/fwlink/?LinkID=183218|UI Design & Interaction Guide for Windows Phone 7]] v 2.0 PDF, from Microsoft. |
| Line 92: | Line 112: |
| === Nokia Family (S40, S60, Symbian, MeeGo) === | === Symbian Family (S40 and S60) === |
| Line 94: | Line 115: |
| * [[http://www.forum.nokia.com/Design/|Forum Nokia Design Portal]] PDF | * [[http://www.forum.nokia.com/Design/|Forum Nokia Design Portal]] PDF. |
| Line 97: | Line 118: |
| * [[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]] |
* [[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. * [[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. |
| Line 103: | Line 122: |
| ==== Smartphone ==== | |
| Line 104: | Line 124: |
| * [[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/17964/BlackBerry_Smartphones-UI_Guidelines-T893501-980426-0721013746-001-6.0-US.pdf|UI Guidelines for BlackBerry 6.0 Smartphones]] PDF. |
| Line 106: | Line 126: |
| * [[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/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. ==== QNX / Tablet ==== * [[http://docs.blackberry.com/en/developers/deliverables/27299/|UI Guidelines for the BlackBerry PlayBook Tablet]] online, or the [[http://docs.blackberry.com/en/developers/deliverables/27298/BlackBerry_PlayBook_Tablet-UI_Guidelines--1361251-0418095918-001-1.0.1-US.pdf|same information as a PDF]] |
| Line 112: | Line 134: |
| === Sony Ericsson Featurephones === | === MeeGo === * [[https://meego.com/developers/ui-design-guidelines/handset|Handset UI Design Principles]] * [[https://meego.com/developers/meego-ux-design-principles|UX Design Principles]] A brief, neat overview of how to approach the overall interaction of the OS. * [[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]] === J2ME === The Java Platform, Micro Edition (the same thing used to have a "2" in there, and is still mostly referred to by that abbreviation) is a common platform for running applications on practically all featurephones, worldwide. It was developed by Sun, so is now owned by Oracle. Installation methods vary, and some applications will work on basically all devices, while some are targeted to specific operators, regions, manufacturers or classes of devices. J2ME runs on over '''three billion handsets''' right this minute. This is a big deal. |
| Line 114: | Line 143: |
| * [[http://www.oracle.com/technetwork/java/javame/index.html|Java ME Landing Page]] a bunch of introductions, as well as developer resources, from Oracle. === BREW === A competitor to J2ME, created by Qualcomm, also allowing a (more or less) single piece of software to run on a range of handsets. * [[http://developer.att.com/developer/forward.jsp?passedItemId=1900002|AT&T UI Elements for Brew MP]] === FeaturePhone UI Guidelines === Featurephones do have operating systems, and native applications are 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 at the factory. This is mostly stuff like a custom phone book. Even the default browser is likely to be J2ME or BREW. While UI guidelines do exist, these are generally proprietary so cannot be distributed. We have a few of them, but cannot share them. They 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. |
|
| Line 119: | Line 158: |
| 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. |
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. Visit the wiki at www.4ourth.com/wiki or contact us with updates you may encounter.
Templates & Stencils
These are graphic items you can use with various drawing programs to create concepts, mockups, process diagrams, comps or graphics for final designs.
First listed are organizations with either general templates, or a number of templates for different devices and OSs. This is followed by a list by platform, as recently most designers and agencies have become concentrated on one or two devices or platforms, leading to a surge in such templates.
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 under the UI Guidelines section, below. 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) they were valid links to real files, and are in the right category.
Design Organizations
4ourth Mobile
These are the templates we use every day for designing mobile device interfaces. Includes a numer of mobile components and additional information like typograph, for general mobile design. Also includes gesture guidelines, and some handset/OS specific items. The illustrations and diagrams in this book were created with these components.
Adobe InDesign CS4 (.indd) format, compressed zip file, 15.7 mb
PDF for viewing, or opening in, Adobe Illustrator, et. al., 1.4 mb
If you are still working in Macromedia Freehand, the old (September 2009) version is still available. It has Little Springs branding, as that's who Steven worked for when he made it.
Graffletopia
Mobile UI Stencils (Omnigraffle)
Mobility
Mobility A free set of mobile UI design elements. (Photoshop)
Nokia
Templates from Nokia, mostly for designing on S60 devices.
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.
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.
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)
Yahoo!
Yahoo! Stencil Kit many non-mobile parts, but also useful general and iPhone bits and pieces.
Specific Operating Systems
MS Windows Phone 7
Design Templates for Windows Phone 7 from Microsoft. Includes 28 layered Photoshop template files and the Segoe system font (Photoshop)
Microsoft Windows Phone 7 wireframe stencil for Omnigraffle from MarlinMobile (OmniGraffle)
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. (GoogleDocs)
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 from Zurb to encourage sketching, even as far as to print empties and use your mad Sharpie® skills. (OmniGraffle)
Android OS
All versions, all platforms, all operator overlays.
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)
Google Android 1.6 Wireframe stencil for Omnigraffle from MarlinMobile (OmniGraffle).
Google Android 2.1 / 2.2 Wireframe stencil for Omnigraffle from MarlinMobile (OmniGraffle).
UI Guidelines
OS and device manufacturers have increasingly been providing guidelines for the implementation of their UI. This may include brief, general guidance, relatively specific format rules, or quite involved discussions of design implementation and the reasoning behind them.
All provide much more documentation for developers, so if there is insufficient information in the UI guidelines, you may wish to browse the rest of the developer resources for the answer. Some UI or UX information may be included in other sections.
Android (from Google and OEMs)
Listing of Android patterns, real ones, with problems and solutions as drawings, from UNITiD in Amsterdam.
Google TV Web Developer's Guide and Google TV Android Developer's Guide, both from code.google.com.
Apple iOS
HP Palm WebOS
Microsoft Windows CE, Mobile & Phone
UI Design & Interaction Guide for Windows Phone 7 v 2.0 PDF, from Microsoft.
Symbian Family (S40 and S60)
RIM Blackberry
Smartphone
QNX / Tablet
Samsung Bada
MeeGo
UX Design Principles A brief, neat overview of how to approach the overall interaction of the OS.
J2ME
The Java Platform, Micro Edition (the same thing used to have a "2" in there, and is still mostly referred to by that abbreviation) is a common platform for running applications on practically all featurephones, worldwide. It was developed by Sun, so is now owned by Oracle. Installation methods vary, and some applications will work on basically all devices, while some are targeted to specific operators, regions, manufacturers or classes of devices. J2ME runs on over three billion handsets right this minute. This is a big deal.
Java ME Landing Page a bunch of introductions, as well as developer resources, from Oracle.
BREW
A competitor to J2ME, created by Qualcomm, also allowing a (more or less) single piece of software to run on a range of handsets.
FeaturePhone UI Guidelines
Featurephones do have operating systems, and native applications are 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 at the factory. This is mostly stuff like a custom phone book. Even the default browser is likely to be J2ME or BREW.
While UI guidelines do exist, these are generally proprietary so cannot be distributed. We have a few of them, but cannot share them. They 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.
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.