OmniGraffle Stencil: Social Media Interface Objects

With this OmniGraffle Stencil, I hope to help other Interaction Designers and Information Architects quickly build up interfaces with common Social Media interface components.

To keep scaling and moving easy, I’ve done my best to be smart about what shapes to combine as unions, group as objects, keep editable text, or keep separate. I’m sure is a place to improve, please leave a comment or suggestion.

Page Utilities

Page Utilities are common to many editorial sites for encouraging sharing and downloading. Typically, site visitors will find them in close proximity to the main content.

Social Interaction

Common interactions in social sites are to tag, comment, favorite, subscribe, and link, etc. These controls help site members interact with other site members and non-members. Additionally, there are icons for mobile media and messaging.

Friending Objects

“Friending” is a key interaction to all social media sites. Use these UI components to build a “Friend Farm” or a profile page.

Media Interaction

Use this collection of rich media elements when building audio and video social objects. Additionally, I’ve included the common Starring Pattern used for ranking objects.

General User Interface

Use these common UI elements in combination with icons and other elements to build up any social object you can imagine.

Download

Social Media Objects_Palle?.zip

The idea to do this didn’t just come to me while standing in the shower thinking… actually, I think it did, *but* that was because I found some really helpful, freely available stencils I was using. So, big thanks to:

• Michael Angeles for making an awesome collection of standard wireframe objects for free.
• Yahoo Pattern Library
• All the social media sites I use out there on the interwebs.

Questions:

How can I support this project?
So glad you asked. :-) There are several ways:

• Use it and leave a comment or suggestion. Even if you don’t use it, please, tell me what could use improvement.
• Use the “Share this” Link and share with your favorite sites.
• Tweet about it
• Blog about it
• Vote for it on Graffletopia
• Give it away, but please keep my contact information or Web site address intact
• Visit a sponsor on the right.

Why are there no typical wireframe objects like boxes, arrows, etc.?
There really isn’t a need since there are several very good stencils that already do this.

Coming Soon

• More Icons
• More Logos
• 960 Grid integration
• More Media Objects
• Weblog Objects
• Anything you recommend (so, leave a comment ;-)