In other words, if you have a page titled, “Orders”, it’s not clear if that’s a dashboard, a list of orders, or even a form form for adding an order. Unfortunately, clients and developers and designers don’t always know what kind of page the page will be. In your typical site map, you show the page’s title adjacent to the little box for that page.
Lately, however, I’ve been site mapping in sweet, luscious OmniGraffle, and I created a Unify-inspired OmniGraffle stencil for making site maps.īut, there’s one problem with lots of site maps.
Out of the box, Unify is designed for use with Adobe InDesign. I’ve used EightShapes’s brilliant Unify deliverable system for about four years. He shared the downloadable stencil which can be obtained right from his site. In the stencil, beside each page title there is now a little space for an explanation of what the page is about. There really isn’t a need since there are several very good stencils that already do this.Austin recently came up with a sitemap or site architecture OmniGraffle stencil that makes room for some extra description. Why are there no typical wireframe objects like boxes, arrows, etc.? To avoid constantly recreating elements, we've designed this stencil to help speed up the process and get your brain focused on the important things like interactions. Give it away, but please keep my contact information or Web site address intact This is where static wireframes do a great job, especially if you have an awesome set of stencils to work with Get All Omnigraffle Stencils Get All Vector PDFs.Use the “Share this” Link and share with your favorite sites.Even if you don’t use it, please, tell me what could use improvement. Use it and leave a comment or suggestion.All the social media sites I use out there on the interwebs.Michael Angeles for making an awesome collection of standard wireframe objects for free.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. Use these common UI elements in combination with icons and other elements to build up any social object you can imagine. Additionally, I’ve included the common Starring Pattern used for ranking objects. Use this collection of rich media elements when building audio and video social objects. Use these UI components to build a “Friend Farm” or a profile page.
“Friending” is a key interaction to all social media sites. Additionally, there are icons for mobile media and messaging. These controls help site members interact with other site members and non-members. Social InteractionĬommon interactions in social sites are to tag, comment, favorite, subscribe, and link, etc. Typically, site visitors will find them in close proximity to the main content. Page Utilities are common to many editorial sites for encouraging sharing and downloading. I’m sure is a place to improve, please leave a comment or suggestion. 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. With this OmniGraffle Stencil, I hope to help other Interaction Designers and Information Architects quickly build up interfaces with common Social Media interface components.