UserZen

Providing usability research, software consulting & innovative UX design

Browsing Posts tagged Touch

These GUIs are provided from a multitude of sites, including SmashingMagazine, SpeckyBoy, Yahoo Design Library, Freshbooks and others. Please note that they are provided for free, but donations are appreciated to keep the innovation coming and reward those who worked hard to make them available.

I have had great success with the Omnigraffle Ultimate iPhone stencil and am particularly excited to use the iPhone 3  stencils.

To help streamline your iPhone app design and development, here is  a fairly comprehensive collection of iPhone & iPad GUI kits that will allow you to focus on developing rather than having to design everything from scratch.
Within this post you will find complete GUI kits and stencils, iPhone GUI elements and PSDs and finally a collection of the best icon-sets perfectly suited for the iPhone. (Some of the preview images are intentionally to large to show the as much of each GUI as possible).

Complete iPhone & iPad GUI Kits

iPhone PSD Vector Kit

iPhone PSD Vector Kit
This iPhone PSD Vector set, from Smashing Magazine and designed by Renee Rist, comes with several button elements as well as six different iPhone interface options.
iPhone PSD Vector Kit »

iPhone GUI PSD Design Template

iPhone GUI PSD Design Template
iPhone GUI PSD Design Template »

iPhone Design Stencils – Yahoo Design Pattern Library

iPhone Design Stencils - Yahoo Design Pattern Library
This iPhone Yahoo! Design Stencil Kit version 1.0 is available for OmniGraffle, Visio (XML), Adobe Illustrator (PDF and SVG), and Adobe Photoshop (PNG).
iPhone Design Stencils – Yahoo Design Pattern Library »

Ultimate iPhone Stencil (OmniGraffle)

Ultimate iPhone Stencil (OmniGraffle)
This ‘Ultimate Stencil’ for OmniGraffle contains backgrounds, title bars, buttons, selectors, and almost all iPhone UI elements. The text is fully editable on lists, title bars, buttons, and scroll wheels and the buttons can be resized horizontally by ungrouping, resizing the middle element, and then regrouping the elements back into a single button.
Ultimate iPhone Stencil for OmniGraffle »

iPhone 3G Stencil (OmniGraffle)

iPhone 3G Stencil (OmniGraffle)
This OmniGraffle stencil includes standard interface components for the iPhone 3G: buttons, fields, map elements, keyboards, icons… All of the components are on a transparent background and should re-size nicely.
iPhone 3G Stencil for OmniGraffle »

iPad and iPhone Design (OmniGraffle)

iPad and iPhone Design (OmniGraffle)
Design your application for iPhone, iPod touch and iPad devices with this exhaustive set of stencils. All stencils have been originally created by hand with native OmniGraffle shapes and groups and can be scaled, resized and exported to other vector formats in Graffle.
iPad and iPhone Design (OmniGraffle) »

FreshBooks iPhone Application GUI

FreshBooks iPhone Application GUI

FreshBooks iPhone Application GUI »

iPhone GUI as Rich Symbols for Fireworks

iPhone GUI as Rich Symbols for Fireworks
iPhone GUI as Rich Symbols for Fireworks »

iPhone UI Vector Elements

iPhone UI Vector Elements
iPhone UI Vector Elements
iPhone UI Vector Elements »

iPad GUI PSD Design Template

iPad GUI PSD Design Template

This PSD was constructed using vectors, so it’s fully editable and scalable. The workable screen design is formatted to 768×1024 so anything you design in the Photoshop file can easily be brought over to the SDK.
iPad GUI PSD Design Template »

iPad Vector GUI Elements

iPad Vector GUI Elements
This GUI set contains almost all of the iPad UI elements, including buttons, tabs, menus, keyboard, ballons, etc… It also includes scalable and totally editable vector versions (AI).
iPad Vector GUI Elements »

iPhone GUI PSD Elements

MobileMe Full iPhone GUI

MobileMe Full iPhone GUI

MobileMe Full iPhone GUI »

Matte iPhone UI

Matte iPhone UI

Matte iPhone UI »

Sexy Vector Cell Phone

Sexy Vector Cell Phone

Sexy Vector Cell Phone »

MobileMe Full GUI

MobileMe Full GUI

MobileMe Full GUI »

iPhone 3G-3GS PSD

iPhone 3G-3GS PSD

iPhone 3G-3GS PSD »

Apple iPad: Fully editable PSD

Apple iPad: Fully editable PSD

Apple iPad: Fully editable PSD »

Apple iPhone 4G .PSD

Apple iPhone 4G .PSD

This. PSD is based on the controversial iPhone Gizmodo.com obtained and may not reflect the actual final product.
Apple iPhone 4G .PSD »

iPhone App Dev Icon Sets

iPhone Toolbar Icons

iPhone Toolbar Icons
There are 160 clean and simple toolbar icons in this set designed specifically for the iPhone, with a source .psd file for futher customisation.
iPhone Toolbar Icons »

Glyphish’/>

Glyphish
The Glyphish icon set have designed and carefully optimized specifically for use on toolbars and tab bars in iPhone apps, but would also be perfect for Android Development.
The 130 icons are 24-bit .png images are about 30×30 pixels for tab bar icons and about 20×20 pixels for toolbar and navigation icons.
Glyphish »

iPhone Toolbar Icon Set

iPhone Toolbar Icon Set
This set of 64 icons for the iPhone toolbar that contain beautiful shaded portions to give added depth and to highlight the icon features.
iPhone Toolbar Icon Set »

Free iPhone Toolbar Icons

Free iPhone Toolbar Icons
These icons have been developed specifically for iPhone developers, completely free for anyone to use commercially under the Creative Commons Attribution 2.5 Canada license.
Free iPhone Toolbar Icons »

30 Free Vector Icons

30 Free Vector Icons

30 Free Vector Icons »

iconSweets

iconSweets
iconSweets is a free icon set containing 60 vector Photoshop shapes, influenced by icon sets such as Glyphish and Pictoico. Perfectly suitable for iPhone & iPad app development.
iconSweets »

Touchscreen Hand Gestures v2 (OmniGraffle)

Touchscreen Hand Gestures v2 (OmniGraffle)
Vectorized version of Dan Saffer’s “Touchscreen Hand Gestures” stencil (http://graffletopia.com/stencils/432) containing a collection of drawn hands for documenting touchscreen interactions.
Touchscreen Hand Gestures v2 (OmniGraffle) »

Gesturecons – Multi-Touch Icons

Gesturecons - Multi-Touch Icons
These vector based icons have been created to help in the design, development, implementation and promotion of multi-touch interfaces. You can use Gesturecons inside of your applications in order to demonstrate to users how to complete actions or prompt them to interact with an application when they approach it. You can scale them to any size and alter them in any way you wish.
Within the download package there are 52 high resolution vector icons entirely scalable and alterable (.pdf, .ai, .eps file types.).
Gesturecons – Multi-Touch Icons »

You might also like…

Mobile Web and App Development Testing and Emulation Tools »
35 Free Icon Sets for your iPhone »
14 Free Mobile Application Development Icon Sets »
10 Cool and Advanced Mobile Phone Concepts »
Top 20 Free Windows Mobile Social Media and Networking Apps »
Showcase of 20 Mobile-Friendly Popular Design Blogs »
49 Free Windows Mobile 6+ Smartphone Apps and Services »
45+ Cool Google Android Apps – The Perfect iPhone Replacement »

This is an announcement of an upcoming event from a message sent to me by Dan Saffer. I can’t say enough good things about Mr Saffer as well as his Kicker Studio. They are always on the cutting edge of touch and gesture interfaces.

Kicker Studio is happy to announce Device Design Day: a one-day conference for professionals who design consumer electronics, appliances, mobile devices, and objects with embedded technology. The event will take place on August 20, 2010 in San Francisco.

Device Design Day brings together visual, interaction, and industrial designers for a high-quality experience and expert content that is a mix of practical and inspirational from some of the best speakers and thinkers in (and outside) the field.

Featured speakers and talk topics include:

Stuart Karten, “User-driven Innovation”
Kim Goodwin, “Convergent Products, Convergent Process”
Mike Kuniavsky, “Information as a Material”
Julian Bleeker, “Design Fiction Goes from Props to Prototypes”
And more!

This first-of-its-kind event takes place at the whimsical Zeum, San Francisco’s Children’s Museum. Registration is $249, and includes breakfast, lunch, and a cocktail reception in Zeum’s Roundabout Room after the event. The reception will turn into Kicker Studio’s Second Anniversary Party, complete with karaoke in Zeum’s Music Production Lab.

Register on the Device Design Day site at http://devicedesignday.com/register/

Register by August 1 and be entered in a chance to win an iPad!

Steve Jobs wrote an open letter regarding why he does not support Flash on the iPod touch, iPhone & iPad.

The main points he makes have to do with how the software is proprietary, it is not mobile-friendly and was created before the modern tools were available (HTML5, css & javascript).

Here is the content of the letter:

Apple has a long relationship with Adobe. In fact, we met Adobe’s founders when they were in their proverbial garage. Apple was their first big customer, adopting their Postscript language for our new Laserwriter printer. Apple invested in Adobe and owned around 20% of the company for many years. The two companies worked closely together to pioneer desktop publishing and there were many good times. Since that golden era, the companies have grown apart. Apple went through its near death experience, and Adobe was drawn to the corporate market with their Acrobat products. Today the two companies still work together to serve their joint creative customers – Mac users buy around half of Adobe’s Creative Suite products – but beyond that there are few joint interests.
I wanted to jot down some of our thoughts on Adobe’s Flash products so that customers and critics may better understand why we do not allow Flash on iPhones, iPods and iPads. Adobe has characterized our decision as being primarily business driven – they say we want to protect our App Store – but in reality it is based on technology issues. Adobe claims that we are a closed system, and that Flash is open, but in fact the opposite is true. Let me explain.
First, there’s “Open”.
Adobe’s Flash products are 100% proprietary. They are only available from Adobe, and Adobe has sole authority as to their future enhancement, pricing, etc. While Adobe’s Flash products are widely available, this does not mean they are open, since they are controlled entirely by Adobe and available only from Adobe. By almost any definition, Flash is a closed system.
Apple has many proprietary products too. Though the operating system for the iPhone, iPod and iPad is proprietary, we strongly believe that all standards pertaining to the web should be open. Rather than use Flash, Apple has adopted HTML5, CSS and JavaScript – all open standards. Apple’s mobile devices all ship with high performance, low power implementations of these open standards. HTML5, the new web standard that has been adopted by Apple, Google and many others, lets web developers create advanced graphics, typography, animations and transitions without relying on third party browser plug-ins (like Flash). HTML5 is completely open and controlled by a standards committee, of which Apple is a member.
Apple even creates open standards for the web. For example, Apple began with a small open source project and created WebKit, a complete open-source HTML5 rendering engine that is the heart of the Safari web browser used in all our products. WebKit has been widely adopted. Google uses it for Android’s browser, Palm uses it, Nokia uses it, and RIM (Blackberry) has announced they will use it too. Almost every smartphone web browser other than Microsoft’s uses WebKit. By making its WebKit technology open, Apple has set the standard for mobile web browsers.
Second, there’s the “full web”.
Adobe has repeatedly said that Apple mobile devices cannot access “the full web” because 75% of video on the web is in Flash. What they don’t say is that almost all this video is also available in a more modern format, H.264, and viewable on iPhones, iPods and iPads. YouTube, with an estimated 40% of the web’s video, shines in an app bundled on all Apple mobile devices, with the iPad offering perhaps the best YouTube discovery and viewing experience ever. Add to this video from Vimeo, Netflix, Facebook, ABC, CBS, CNN, MSNBC, Fox News, ESPN, NPR, Time, The New York Times, The Wall Street Journal, Sports Illustrated, People, National Geographic, and many, many others. iPhone, iPod and iPad users aren’t missing much video.
Another Adobe claim is that Apple devices cannot play Flash games. This is true. Fortunately, there are over 50,000 games and entertainment titles on the App Store, and many of them are free. There are more games and entertainment titles available for iPhone, iPod and iPad than for any other platform in the world.
Third, there’s reliability, security and performance.
Symantec recently highlighted Flash for having one of the worst security records in 2009. We also know first hand that Flash is the number one reason Macs crash. We have been working with Adobe to fix these problems, but they have persisted for several years now. We don’t want to reduce the reliability and security of our iPhones, iPods and iPads by adding Flash.
In addition, Flash has not performed well on mobile devices. We have routinely asked Adobe to show us Flash performing well on a mobile device, any mobile device, for a few years now. We have never seen it. Adobe publicly said that Flash would ship on a smartphone in early 2009, then the second half of 2009, then the first half of 2010, and now they say the second half of 2010. We think it will eventually ship, but we’re glad we didn’t hold our breath. Who knows how it will perform?
Fourth, there’s battery life.
To achieve long battery life when playing video, mobile devices must decode the video in hardware; decoding it in software uses too much power. Many of the chips used in modern mobile devices contain a decoder called H.264 – an industry standard that is used in every Blu-ray DVD player and has been adopted by Apple, Google (YouTube), Vimeo, Netflix and many other companies.
Although Flash has recently added support for H.264, the video on almost all Flash websites currently requires an older generation decoder that is not implemented in mobile chips and must be run in software. The difference is striking: on an iPhone, for example, H.264 videos play for up to 10 hours, while videos decoded in software play for less than 5 hours before the battery is fully drained.
When websites re-encode their videos using H.264, they can offer them without using Flash at all. They play perfectly in browsers like Apple’s Safari and Google’s Chrome without any plugins whatsoever, and look great on iPhones, iPods and iPads.
Fifth, there’s Touch.
Flash was designed for PCs using mice, not for touch screens using fingers. For example, many Flash websites rely on “rollovers”, which pop up menus or other elements when the mouse arrow hovers over a specific spot. Apple’s revolutionary multi-touch interface doesn’t use a mouse, and there is no concept of a rollover. Most Flash websites will need to be rewritten to support touch-based devices. If developers need to rewrite their Flash websites, why not use modern technologies like HTML5, CSS and JavaScript?
Even if iPhones, iPods and iPads ran Flash, it would not solve the problem that most Flash websites need to be rewritten to support touch-based devices.
Sixth, the most important reason.
Besides the fact that Flash is closed and proprietary, has major technical drawbacks, and doesn’t support touch based devices, there is an even more important reason we do not allow Flash on iPhones, iPods and iPads. We have discussed the downsides of using Flash to play video and interactive content from websites, but Adobe also wants developers to adopt Flash to create apps that run on our mobile devices.
We know from painful experience that letting a third party layer of software come between the platform and the developer ultimately results in sub-standard apps and hinders the enhancement and progress of the platform. If developers grow dependent on third party development libraries and tools, they can only take advantage of platform enhancements if and when the third party chooses to adopt the new features. We cannot be at the mercy of a third party deciding if and when they will make our enhancements available to our developers.
This becomes even worse if the third party is supplying a cross platform development tool. The third party may not adopt enhancements from one platform unless they are available on all of their supported platforms. Hence developers only have access to the lowest common denominator set of features. Again, we cannot accept an outcome where developers are blocked from using our innovations and enhancements because they are not available on our competitor’s platforms.
Flash is a cross platform development tool. It is not Adobe’s goal to help developers write the best iPhone, iPod and iPad apps. It is their goal to help developers write cross platform apps. And Adobe has been painfully slow to adopt enhancements to Apple’s platforms. For example, although Mac OS X has been shipping for almost 10 years now, Adobe just adopted it fully (Cocoa) two weeks ago when they shipped CS5. Adobe was the last major third party developer to fully adopt Mac OS X.
Our motivation is simple – we want to provide the most advanced and innovative platform to our developers, and we want them to stand directly on the shoulders of this platform and create the best apps the world has ever seen. We want to continually enhance the platform so developers can create even more amazing, powerful, fun and useful applications. Everyone wins – we sell more devices because we have the best apps, developers reach a wider and wider audience and customer base, and users are continually delighted by the best and broadest selection of apps on any platform.
Conclusions.
Flash was created during the PC era – for PCs and mice. Flash is a successful business for Adobe, and we can understand why they want to push it beyond PCs. But the mobile era is about low power devices, touch interfaces and open web standards – all areas where Flash falls short.
The avalanche of media outlets offering their content for Apple’s mobile devices demonstrates that Flash is no longer necessary to watch video or consume any kind of web content. And the 200,000 apps on Apple’s App Store proves that Flash isn’t necessary for tens of thousands of developers to create graphically rich applications, including games.
New open standards created in the mobile era, such as HTML5, will win on mobile devices (and PCs too). Perhaps Adobe should focus more on creating great HTML5 tools for the future, and less on criticizing Apple for leaving the past behind.
Steve Jobs
April, 2010

The CTO of Adobe, Kevin Lynch, responded to Jobs’ accusations recently and some of his comments are outlined on The Register website
Essentially, Lynch compares Jobs to Big Brother and states that Flash works fine on iPhones, but that Apple refuses to allow it for business reasons.
You be the judge.

Powered by WordPress Web Design by SRS Solutions © 2010 UserZen Design by SRS Solutions