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 ;-)
October 21st, 2008 at 6:49 am
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?
October 22nd, 2008 at 10:13 pm
This is nice. Any chance that you will make this on visio too?
October 23rd, 2008 at 3:05 am
Thanks, DJ- Glad you enjoy it. I do use YUI. To which package are you referring?
October 23rd, 2008 at 3:07 am
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?
October 23rd, 2008 at 8:00 am
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.
October 23rd, 2008 at 7:56 pm
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. ;-)
October 23rd, 2008 at 8:07 pm
Sweet! I'll be sure to check it out next new project I do!
November 3rd, 2008 at 3:02 am
[...] OmniGraffle Stencil: Social Media Interface Objects An OmniGraffle stencil containing common social media interface components [...]
November 6th, 2008 at 8:21 pm
Yes! Great stencils and glad to blog to the world about them!
http://signalfive.com/blog/ia-ux/our-favorite-i...
November 6th, 2008 at 8:45 pm
Hey Tim, Yeah, man. Glad you like them. Please come back 'round or send me any links to sites you create with them.
November 6th, 2008 at 8:46 pm
Hey Tim, Yeah, man. Glad you like them. Please come back 'round or send me any links to sites you create with them.
February 3rd, 2009 at 6:37 pm
nice article! nice site. you're in my rss feed now ;-)
keep it up
July 7th, 2009 at 12:30 pm
[...] OmniGraffle Stencil: Social Media Interface Objects | Refined by Fire Some handy social media & web 2.0 OmniGraffle Stencils. I might have to make my own version of these, but for now they are super handy. (tags: socialmedia design usability ia webdesign ui ux patterns omnigraffle SocialSoftware web2.0 Community tool prototyping social stencil stencils) [...]
October 9th, 2009 at 6:20 am
this was indeed a great fine, I couldn't believe I'll find this information on your page.