Differences between revisions 1 and 166 (spanning 165 versions)
Revision 1 as of 2010-10-14 15:21:28
Size: 8360
Editor: shoobe01
Comment:
Revision 166 as of 2013-08-27 18:39:35
Size: 8261
Editor: shoobe01
Comment:
Deletions are marked like this. Additions are marked like this.
Line 1: Line 1:
{{{#!html
Line 2: Line 3:
== Mobile Design Elements == <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 4: Line 24:
==== 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.
 * [[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]]

If you are still on Freehand (and we salute you) the old, not-at-all-updated version
 * [[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 ====
 * [[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. Include or not?
 * [[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 for Omnigraffle]]

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

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

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

== 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.
}}}
Line 38: Line 27:
== Drawing Tool Tips & Tricks ==
Just a list that we keep for ourselves, so we don't forget things.
[[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"}}]]
Line 41: Line 29:
==Sharing Between Versions of InDesign==
Newer versions can always read older .indd files. Do not save as an .inx file, as it just wastes time.
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.
Line 44: Line 31:
Downsaving creates an Adobe Interchange file with an .inx extension. This is a simple xml file that actually does work with all versions of InDesign (at least down through CS2), but has a limiter Adobe put in to annoy us all. To fix an .inx file created with CS4 to work with CS2 (and 3):
 * Open the INX file with your favorite text editor (like TextMate or BBEdit) and change the version number. Replace line number 2 (which looks like this):
 * '<?aid style="33" type="document" DOMVersion="6.0" readerVersion="5.0" featureSet="257" product="6.0(352)" ?>'
 * with this:
 * '<?aid style="33" type="document" DOMVersion="5.0" readerVersion="4.0" featureSet="257" product="5.0(662)" ?>'
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 50: Line 33:
=== Stupid INDD Tricks ===
Things you might need to make InDesign work better, and which I could not easily find. Some are version specific.
 * There is no Clone (duplicate in place) function by default in InDesign. Three options:
 # Copy, then shift-opt-cmd-v pastes in place, but is very cumbersome to me
 # Better: opt-cmd-u is Step and Repeat. Opens a dialogue (which you can use to generally step and repeat) but which preserves last use. If set once to count 1, offsets all zero, then you just press enter and get a duplicate-in-place.
 # Best is shift-opt-cmd-d which is the Duplicate command. By default it does this at some offset or other. But this is controlled by the Edit > Step & Repeat menu item. You have to have something selected to set it, but like setting color or type style with nothing selected, it then sticks until you use step and repeat (even by accident) and change the offsets. Set vertical and horizontal to get a Clone function, if that is your thing.
 * Tricky styles, as for underlines, to allow things like making reverses in type without separate boxes (as for scroll-and-select link indicators). Ask for details or look at the Mobile Design Elements document for examples.
 * Text can be built into ANY box. Not always perfect, but good for some stuff, like form fields, title bars, etc.
 * Any box can be accidentally turned into a text box. Deleting text does not un-text-box it. To do that, right click on the element, Content > Unassigned.
 * Eyedropper works opposite (to me at least) of Photoshop, etc. Select the item(s) you want to have the new attributes, then click the item you are sampling. Note you can sample a LOT of stuff, so check the settings first. I don't even follow how it works after this, so just press Option to clear the current attributes and start from zero again.
 * Collaboration: While the official collaboration tool points up their text focus, and is basically a collaborative workflow-based text editor, it has some other stuff that helps. Mostly, you can move pages from one open ''document'' to another. With planning (so you don't step on each other) this means chunks can be branched off to others and then merged back in. Tried it, and it works.
 * GREP! Search and replace complexly. Also has attribute search and replace. Find a string, make it bold, etc.
 * Deselect is not cmd-D as in Photoshop but shift-cmd-A for “deselect all” as in AI. Use it! Clicking away to deselect will often hit an invisible element, scooting it or turning it into a text box or something else I'll have to fix later.
 * Text Box insets are cmd-B (shift-cmd-b is the bold switch). If you have a non-rectangle and need to just have the top come down, use the FIrst Baseline number to move it down. Often, a lot (won't move at all for 20-40 pts). Also, play with vertical alignment: can use Justify to set one piece of text top, one bottom, rather cleverly. Saves on nesting boxes sometimes.
 * [[http://indesignsecrets.com/the-hidden-join-paths-command.php Hidden commands in InDesign]] including the ever-useful Join command. This is about activating in CS2, but the basics are true. Many AI-level drawing functions are hidden away in the code, and can be used with keyboard shortcuts, or other trickery. Note: CS4 added several of these, such as the Join command.
 * Reset INDD to default: While pressing Shift+Option+Command+Control, start InDesign. Click Yes when asked if you want to delete preference files.
New ones are constantly being added, or replaced, so please help us keep this up to date. Contact us with updates you may encounter.
Line 67: Line 35:
=== 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:
 # Select whole shape, groups work fine.
 # E (free transform)
 # Start dragging a “downrange” corner
 # Click Cmd to convert that corner only
 # Click Cmd+Shift+Opt to move it and the corresponding pont with axial symmetry.
 # 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.
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 ==
 * [[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)



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

 * [[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/

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

 * [[Sharing between versions of InDesign]]
 * [[Stupid INDD Tricks]]
 * [[Stupid AI Tricks]]
Line 78: Line 101:
 * [[http://www.peachpit.com/articles/article.aspx?p=1084741&seqNum=2 Real World Tips for Working with Text in InDesign CS3 - Sample Chapter from Peachpit Book]]
 * [[http://freefreehand.com/ Free Freehand: Trying to get Adobe to let FH become open source or otherwise available]]
 * [[http://freefreehand.yousaidit.com/topics/How_to_save_FreeHand/questions/-/latest The Q&A list from Free Freehand]]
 * [[http://kelsocartography.com/blog/?p=2955 How to get FH MX to run in Snow Leopard]]
 * [[http://indesignsecrets.com/double-downsave.php Mike Rankin solves the double downsave problem]]
 * [[http://www.peachpit.com/articles/article.aspx?p=1084741&seqNum=2|Real World Tips for Working with Text in InDesign CS3 - Sample Chapter from Peachpit Book]]
 * [[http://www.smashingmagazine.com/2009/10/12/setting-up-photoshop-for-web-app-and-iphone-development/|Set up Photoshop and Illustrator color controls]]
 * [[http://freefreehand.com/|
Free Freehand: Trying to get Adobe to let FH become open source or otherwise available]]
 * [[http://freefreehand.yousaidit.com/topics/How_to_save_FreeHand/questions/-/latest|The Q&A list from Free Freehand]]
 * [[http://kelsocartography.com/blog/?p=2955|How to get FH MX to run in Snow Leopard]]
 * [[http://indesignsecrets.com/double-downsave.php|Mike Rankin solves the double downsave problem]]
 * [[http://www.d.umn.edu/itss/support/Training/Online/webdesign/usability.html|Usability Links]]

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

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)