Web Design Tutorials and Tips

Thanks to Apple, Microsoft and Google who joined the mobile war with their innovation armies in these years, the mobile market has entered its golden era which a massive amount of brands from vastly different industries are seeking for their application existence in this extremely profitable market, thus increasing the need for resources of sketching, wireframing and prototyping in application development.

Unlike sketching and wireframing, most customers will likely to have a realistic glimpse on what should be the final product in the prototyping stage. To make your prototyping presented really nice before the judgmental eyes of clients, we have listed out 31 mobile devices prototyping templates which included famous iOS, Android and Windows Phone 7, in different software formats.

Grab them down and make your prototype shines really bright before your clients, full list after jump!

iOS

iPad GUI (Photoshop). Presented by the well-known professional GUI template maker, the template provides quality iPad elements you need to design proof-of-concepts of production ready assets, and yes, it’s absolutely free! There’s also a nicely ported Omnigraffle version crafted by Information Architects.

iPad GUI Kit (Photoshop). A sexy iPad prototyping template produced by RawApps. The template currently offers a canvas size true to the iPad at 768×1024 resolution. Also most of the graphical elements are provided in vector format so you have much flexibility to scale them up to your needs.

iPad Vector GUI Elements (Illustrator). Released by quality icon maker Iconshock, this scalable set includes almost all iPad UI elements such as buttons, tabs, menus, keyboard, etc, probably helpful for designers who’re looking forward to produce realistic prototype.

iPad Prototyping Templates (Keynote). What you see on the preview image is really just a glimpse of the entire template. Keynotopia’s iPad prototyping template includes complete interface components and themes for landscape and portrait orientations, exclusively available for you with only $9, a worthy investment!

iOS Design Stencils (Omnigraffle). A design stencils for iPhone, iPad and iPod touch devices. All stencils are created by hand and grouped for ease of use, also you can easily scale them and export to any vector format supported in Omnigraffle.

iPad Widget Library (Axure). Specifically for Axure users, the widget includes 82 essential items, 99% customizable text-elements and many more sweet additions for you developer, happy prototyping!

iPhone 4 GUI (Photoshop). Once again this is the monstrous GUI kit supplied by Teehan+lax, and by monstrous I mean the kit includes all essential iPhone graphical elements with highest resolution possible for your prototyping need and heck, it’s even free.

iPhone Vector Kit (Photoshop). A sleek iPhone vector kit released by Smashing Magazine back in 2008. The graphics are really good to prototype out professional looking mockups for commercial clients.

iPhone UI Vector Elements (Illustrator). “Because we care so much about our fellow iPhone developers, we are making our vector files available to you today. (I think I just made myself throw up a little)”

Yahoo! Design Stencil Kit (Omnigraffle, Fireworks, Axure). This worthy iPhone stencil kit is one of the collections included into the Yahoo! Design Stencil Kit. The great thing about this kit is its vast software compatibility, which also includes InDesign format.

Ultimate iPhone Stencil (Omnigraffle). Made by the Graffletopia’s founder himself, this ultimate iPhone stencil includes probably everything necessary you need for iPhone app prototyping in Omnigraffle!

iPhone 3G Stencil (Omnigraffle). Another complete iPhone stencil kit with extensive icons and buttons by Theresa Neil, kindly available to everyone in Omnigraffle format!

iPhone UI Mockups (Fireworks). Want to prototype iPhone app but only got Adobe Fireworks in hand? No worries, iPhone UI Mockups is for you and the best of all, the kit is one of the most complete collections!

Wireframe Toolkit (Keynote). Probably a great deal, as with just $12 you will be taking away web toolkit, iPhone toolkit and iPad toolkit natively drawn in the Keynote and of course, ease of manipulation is a guarantee!

Android

Android GUI (Photoshop). It’s not yet Christmas but Teehan+lax has released this fully vectorized, premium quality Android GUI kit for you. It’s also noteworthy that the template is based on the most popular screen size and pixel-density using the default Android skin as the baseline.

Android GUI Set (Photoshop). An outstanding GUI set available for everyone that will make your prototyping stands out in front of the rest, grab them before your rivals did it! The sets comes both in Common and Sense UI versions.

Android 2.3 GUI (Photoshop). Here comes a series of up-to-spar GUI set assembled by Thiago Silva, and this particular set is for Android version 2.3, a.k.a Gingerbread.

Android 2.2 GUI (Photoshop). And here is the entirely different GUI set for Android 2.2, named Froyo.

Android 2.0 – 2.1 GUI (Photoshop). And finally the first set which brings you the GUI of Android version 2.0 – 2.1, hat tip to the author for the entire series!

Android GUI V2.0 (Photoshop). The successor of the v1.0 set showcased below, but with totally distinguishing designs for your Android 1.5 application mockups.

Android GUI PSD V1.0 (Photoshop). Inspired by Teehan+lax, this so-called v1.0 Android GUI kit offers you resizable phone illustration and basic components, both in vector paths, worth checking out!

Android Prototyping Template (Keynote). Just like other Keynotopia’s template, the template offers essential graphical elements for prototyping purpose, which makes it a premium Android prototyping template worth investing on.

Google Android 2.1 Wireframe stencil (Omnigraffle). Another monstrous prototyping template which added stencils include HTC Sense UI, Samsung TouchWiz and the default base Android OS, probably helping you to foresee your app preview on different devices.

Google Android 1.6 Wireframe stencil (Omnigraffle). Older yet well-functioned prototyping stencil for Android 1.6 Donut. The page elements are grouped together as screens for flexibility, and the mobile UX is using the standard controls with realistic UI elements.

Windows Phone 7

Design Templates For Windows Phone 7 (Photoshop). Published officially by Microsoft itself, this is a collection of layered Photoshop template files that can be used to create pixel-perfect application layouts, to help guide UI development, or to pitch an idea. Alternatively you can have the Omnigraffle version, thanks to Torgerson.

Windows Phone 7 Prototyping Template (Keynote). Greatly considerable prototyping template if you’re looking forward to any quality prototyping on Windows Phone 7.

Windows Phone 7 Wireframe (Omnigraffle). Explore the wonderful world of Windows with full possibility! As you can see the kit provided complete graphical elements essential for your prototyping, and even 3 different themes to choose from!

Palm Pre

Palm Pre GUI (Photoshop). “We still love pitching iPhone ideas but the Palm Pre offers us another way to present ideas that connect our clients with their customers. In light of this fact, we put together another PSD to help our designers pitch and develop polished concepts.”

Palm Pre Interface Examples (Photoshop). A precisely reproduced set from applications’ screenshots of some Palm’s WebOS interface, probably effective for all Palm Pre-related prototyping, another extra goodies in your prototyping factory!

BlackBerry

BlackBerry Prototyping Template (Keynote). Keynotopia’s prototyping template comes to BlackBerry, as usual the template has quality graphical components you need to get a precise glimpse about how your app looks on the actual BlackBerry device.

Nokia

Maemo 5 GUI (Photoshop). The only existing GUI template for Nokia Maemo 5 OS. The purpose of the template is to facilitate creation of high-fidelity image mockups, thus speeding up the pixel perfecting work for purposes such as presentation.

Reflection

I think each showcased GUI prototyping template is great, particularly Teehan+lax’s Photoshop template series if you ask about my personal taste, but really, choose the one which fits the most to your application prototyping in terms of features and software compatibility instead of visual, after all you don’t want to suffer in the Photoshop while your expertise lies in Omnigraffle!

Did we miss any quality prototyping template which you’ve seen somewhere else? Well, share to us even if it’s your own creation, we appreciate it!