UserZen

Providing usability research, software consulting & innovative UX design

Browsing Posts tagged Design

OAuth is a relatively new open authentication protocol that allows secure API communication without the necessity of continually passing a username and password with each request. The idea for OAuth was conceived in 2006 by a group of individuals working on the Twitter implementation of OpenID. After reviewing both OpenID and other existing industry practices, such as Amazon Web Services API and Flickr API, it was decided that a proposal should be written for a new open protocol for application authentication. The movement quickly gathered momentum, with support heralded by Google, and in July 2007 an initial specification was drafted. We find ourselves using OAuth Core 1.0a today, with a new 2.0 spec being drafted.

How Does It Work?

Here’s a real-world example — one that you may have already come across and not even known it.

Let’s follow the OAuth path of how foursquare sends tweets on your behalf:

  • foursquare has initially registered themselves as an “application” with Twitter. In doing so, they’re provided with a token set called “consumer key” and its paired “consumer key secret.” These are used by foursquare in their application code and as a part of the OAuth model in generating requests.
  • From a user perspective, when you log in to foursquare and click the “please link my Twitter account” button, foursquare uses its consumer key to contact Twitter and generate a “request token.” You’re then provided with a special URL that whisks you off to Twitter’s website.
  • If you aren’t already logged into Twitter, you’ll be prompted to just like always, and then presented with a screen that asks if you’d like to provide said application with access to your account.
  • Clicking “Allow” tells Twitter that this app (foursquare) which has requested access using its particular consumer key should have access to your Twitter account. Twitter then redirects you back to your application (the foursquare website) with an attached coded verification string.
  • The foursquare application then reads the previously generated request token, and takes the returned verification to ask Twitter to generate a final token set called “access token” and “access token secret.”
  • Now when you perform an action on foursquare and it’s tweeted, foursquare calls the Twitter API by creating a request using its Twitter-provided consumer key and the newly stored access token for your account.

And amid all of this, your Twitter username and password are never seen, let alone stored, by foursquare.

By the way, the best graphical representation of this process I’ve found is documented here by Digg.

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!

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