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.


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:


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

13 Replies to “OmniGraffle Stencil: Social Media Interface Objects”

  1. 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?

  2. 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?


    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.

  4. sorry, misunderstood your question. 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. ;-)

Comments are closed.