Skip to content


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

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

Social Interaction Icons

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

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

General User Interface.jpg

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

Download

OmniGraffle Stencil Icon 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:

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 ;-)

Post to Twitter

Share

Posted in The Social Web, {human} Experience Design.

Tagged with , , , , , , , , .

  • http://www.danbyron.com/blog/ djByron

    This is a great tool! Thanks for sharing! I don't do design work every day (mostly dev stuff) but next time I do a design project this might come in handy…

    BTW, do you have experience with YUI Grids in addition to the 960 Grid you mention above? So far I've only used YUI and love it… However, I do see the benefits of 960 due to the increased flexibility of column sizing. Is the the browser support as robust as YUI?

  • sei

    This is nice. Any chance that you will make this on visio too?

  • http://chrispalle.com chrispalle

    Thanks, DJ- Glad you enjoy it. I do use YUI. To which package are you referring?

  • http://chrispalle.com chrispalle

    Hrm , Sel- I wasn't planning on it, but I might be able to do it. I haven't gone from OG to Visio in awhile and the last I remember it was kinda tricky. I will try, though. Someone else asked about turning it into PDF. Would that be helpful?

  • http://www.danbyron.com/blog/ djByron

    http://960.gs/

    I haven't used it yet but it looks like it might be superior to YUI grids (not the rest of the YUI lib of course) in it's layout flexibility. Not sure about browser support though. Just wondering if you had any experience with it.

  • http://chrispalle.com chrispalle

    sorry, misunderstood your question. 960.gs is really great. Definitely download it and play with it. There's also a way cool DHTML implementation of it somewhere. 960 was created by a Christian too. So, that makes it even way cooler. ;-)

  • http://www.danbyron.com/blog/ djByron

    Sweet! I'll be sure to check it out next new project I do!

  • Pingback: Recent Links: October 26 to November 02 » Alex Jones

  • http://signalfive.com Tim

    Yes! Great stencils and glad to blog to the world about them!

    http://signalfive.com/blog/ia-ux/our-favorite-i

  • http://chrispalle.com chrispalle

    Hey Tim, Yeah, man. Glad you like them. Please come back 'round or send me any links to sites you create with them.

  • http://chrispalle.com chrispalle

    Hey Tim, Yeah, man. Glad you like them. Please come back 'round or send me any links to sites you create with them.

  • gracebeauty

    hi u guys is really trying please keep it up.Am always happy whenever i read ur coment

  • Pingback: Futile » links for 2009-07-07