Differences between revisions 110 and 111
⇤ ← Revision 110 as of 2012-07-03 02:48:05 →
Size: 28237
Editor: shoobe01
Comment:
← Revision 111 as of 2012-07-03 02:48:40 → ⇥
Size: 28257
Editor: shoobe01
Comment:
Deletions are marked like this. Additions are marked like this.
Line 171: Line 171:

==== MS Windows Phone 7 ====		 ----

=== MS Windows Phone 7 ===
Line 179: Line 180:
==== Symbian Family (S40, S60 & Maemo) ====
==== UI Guidelines ====

==== Stencils & Templates ====		 ----

=== Symbian Family (S40, S60 & Maemo) ===
==== UI Guidelines: ====

==== Stencils & Templates: ====
Line 186: Line 189:

----

Click here to buy from Amazon. 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.

Templates & Stencils

Mobile Touch Template

Get beyond designing for pixels.

If you are designing for mobiles, but never get out from behind Photoshop or Fireworks, it's time. Put your design on the handset, as early as possible, and evaluate it at the scale people use it. Then, stop relying on your eyes and judgment, and get measuring tools, and follow good mobile design guidelines.

This template is a tool specifically for measuring touch targets and type sizes on mobiles. Find out more

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.

First listed are organizations with either general templates or a number of templates for different devices and OSes. 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 in- cluded as part of the various manufacturer and OS developer links in the “UI Guidelines” section. 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.

Design Organizations & Design Tools

The following organizations provide valuable resources for drawing tools and templates that you can use:

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 typography, for general mobile design. Also includes gesture guidelines, vector handsets for all the major OSs, and a number of handset/OS specific widgets and icons. The illustrations and diagrams in this book were created starting with these components.

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.

The actual document used to create the diagrams in this book has also been made available. Enjoy.

Fireworks Wireframing Kit

  • Fireworks Wireframing Kit by Hannah Milan. Multiple templates, of different fidelity, as a series of downloads. Not all are mobile-specific (Fireworks, obviously)

Graffletopia

Justinmind

  • Justinmind Prototyper a UI design tool itself, but specifically designed to use pre-built widget libraries. Allows you to save your pieces, and share with a team.

  • Android 3.2 (Honeycomb) library items now available. As are many others, but I am not going to list them all, just the latest news.

Keynote

  • Keynote Kung-Fu Wireframe Toolkit For Keynote. Paid, but only $12. For multiple platforms, including desktop web.

  • Keynote mockups "sketch," wireframe and prototype took for Keynote (and I think Powerpoint and OpenOffice), free with a tweet. From Keynotopia.

Mobility

  • Mobility A free set of mobile UI design elements. (Photoshop)

Proto.io

  • Dedicated mobile prototyper of the type where they want you to do all the design in the tool as well. Can preview in more than the usual number of OSs.

Punchcut

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 Symbol Libraries

I have avoided this as it seemed like an awfully-specfic offshoot, but now I am aware of such a number of ways of communicating gesture in diagramming that I cannot ignore it anymore. I have made this new category, in the hopes it makes sense and other types of symbol communications will become available (or known to me) in the future.

If you go looking for this in the book, you won't find it. Came a couple weeks too late for that.

Gesture

Specific Operating Systems

Basically because OS and device manufacturers have increasingly been providing guidelines for the implementation of their UI, I am merging two sections. Now, all OS-specific templates and guidelines will be in one place.

Stencils and templates are pretty simple, but 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 OS

As of January 2012, developer.android has a rather decent design section at http://developer.android.com/design/index.html. This is a good place to start.

UI Guidelines:

Stencils & Templates:

Bada (Samsung)

B2G

Mozilla's Boot to Gecko (and specifically the Gaia UI layer) is not on any hardware you can buy yet or anything, but it's being developed quite transparently, so there is a nice collection of guidelines. Also, I know they used Designing Mobile Interfaces a lot during the UI design phase, so I agree with all their decisions.

Firefox

Placeholder, since I can find no UI guidelines as yet.

iOS

UI Guidelines:

iPhone, iPod Touch, and iPad. Big collection of these available here which I need to parse out http://www.queness.com/post/10870/useful-collection-of-ios-tools-and-resources-for-designers

Stencils & Templates:

Meego

MS Windows Phone 7

UI Guidelines

Stencils & Templates

Symbian Family (S40, S60 & Maemo)

UI Guidelines:

Stencils & Templates:

Tizen

Placeholder, since I can find no UI guidelines as yet.

HP Palm WebOS

MeeGo

Microsoft Windows (CE, Mobile, Phone & more)

RIM Blackberry

Blackberry UI Guidelines

Smartphone

Blackberry 10 (QNX) / Tablet

Symbian Family (S40 and S60)

Tizen

Placeholder, since I can find no UI guidelines as yet.

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.

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.

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.

Native Operating Systems

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

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.

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)