About
This is a set of shapes for making wireframes (low-fidelity web page schematics) in OmniGraffle version 5.x (Mac OS X). It consists of most of the basic elements you'll need to create user interface specifications. The screenshots below show all of the stencils in this set.
Installation
1. Download the stencils.
2. Move it to your ~/Library/Application Support/OmniGraffle/Stencils directory. The ~ represents your user "home" folder.
Download
Download Version 3 (9/15/09)
These stencils are free to use, but may not be distributed without permission. If you like these, a donation is appreciated.
UI Components
Ad Units
Browser Chrome
Version Information
Related Tools
Wireframe Icons are grayscale symbols designed for use in wireframes or application and web site schematics. Made for users of OmniGraffle, Visio, and Illustrator.
Sketch Stencils provide a set of OmniGraffle shapes you can use to create your wireframes in low-fidelity, and better facilitate communication without drawing attention to aesthetics visual style.
looks great. nice updates. thanks for sharing.
Great stuff - love the color picker. These almost make me want to buy OG :)
Nice Job ! Fantastic ;)
Hey Michael
thanks for the super cool update! super super nice work.
-Andrew
btw are you in cahoots with apple to sell more of their giant monitors... ?
[...] Do you use Omni Graffle? I do. It’s especially handy for mocking up wireframes. Visit this site and download some free templates. [...]
@Andrew Korf: Re: apple monitors. What do you mean? Too many stencils to fit in your screen?
Thanks for the quality stencils. They look great! They seem to work okay with the standard version of Omnigraffle.
Yessssss! I've been waiting for these:) Thx much! Konigi is awesome
Oh how I miss the OmniGraffle! They use Visio at my new day job, though sometime soon I just need to buy this for myself again.
There are so many great stencils, and this is definitely one of the great sets.
Kudos.
These are fantastic. Have you ever thought about releasing Illustrator versions of these to make them more accessible to a wider audience in the design community?
I'd happily pay for them if that were the case.
@Alexnels: What I've done for earlier versions of this is create EPS versions of these for my Visio brethren. I may do that again when I do release 2.1, which will include icons and clean up my inconsistent layout in the current set.
Hey, great update, this will come in very handy. One small bug: the link in the Text stencil isn’t an automatic width. I’ve fixed this on my copy but I guess other people might trip over it.
Many Many thanks for this precious tools you made. It makes me happy about the world : )
@Robin: Thanks. Will fix in the next release. Have already made a few fixes to other errors.
[...] OmniGraffle Wireframe Stencils | Konigi (tags: webdesign wireframes ui stencils omnigraffle) [...]
Is there a windows equivalent to OmniGraffle? I would love to use something like this for XP. Thanks in advance.
[...] OmniGraffle Wireframe Stencils | Konigi. Sphere: Related [...]
is there any way to change the default values for this stencils ? ie, i would like to make that every Header 1 i insert into my wireframes to be size 36 instead of the default 20
Thanks :D this thing rocks !!!
@Hector Centeno: Of course. You can edit the stencil. Right click or Control-click in the stencil panel to view its context menu. Select edit stencil. Then edit the element you want to change and save.
@Siriusbuzz: There's always Visio and Balsamiq for Windows.
[...] And, if you are into design, the OmniGraffle wireframe stencils have been updated! [...]
[...] OmniGraffle Wireframe Stencils: This is a set of shapes for making wireframes (low-fidelity web page schematics) in OmniGraffle version 5.x (Mac OS X). [...]
Really nice work--Great stencils! Are they also available for Visio?
[...] OmniGraffle Wireframe Stencils | Konigi This is a set of shapes for making wireframes (low-fidelity web page schematics) in OmniGraffle. It consists of most of the basic elements you'll need to create user interface specifications. The images below show the stencil in action. (tags: wireframes design) [...]
[...] And, if you are into design, the OmniGraffle wireframe stencils have been updated! [...]
[...] Existen varios juegos de plantillas para OmniGraffle orientadas a hacer más fácil el trabajo de los AIs. Una de las primeras — y de las mejores — fueron creadas por Michael Angeles hace varios años. Ahora, Angeles ha actualizado sus plantillas para que funcionen mejor con la versión más reciente de OmniGraffle. Descárgalas aquí. [...]
This is really useful!
Thanks so much.
Is there any chance there is some CSS to duplicate the look? these are beautiful!
[...] And, if you are into design, the OmniGraffle wireframe stencils have been updated! [...]
Thanks for putting these out into the public domain. They are terrific stencils. Great work!
Is their a css class for this? The graphx are first rate.
@Ryanpratt: There is no html/css for this. These are for OmniGraffle.
[...] And, if you are into design, the OmniGraffle wireframe stencils have been updated! [...]
[...] And, if you are into design, the OmniGraffle wireframe stencils have been updated! [...]
Thank you for sharing your stencils. The best I have seen!
[...] Konigi ofrece un buen surtido de plantillas (stencil) de diseño web disponibles en su página. Compatible con la versión 5 de Omnigraffle, contiene todos los elementos básicos de diseño en seis diferentes plantillas. Compártelo: These icons link to social bookmarking sites where readers can share and discover new web pages. [...]
[...] And, if you are into design, the OmniGraffle wireframe stencils have been updated! [...]
[...] for web prototyping. Now with Yahoo! and Konigi FREE stencil kits it’s just irresistible! Konigi OmniGraffle Wireframe Stencils a set of shapes for making wireframes (low-fidelity web page schematics) in OmniGraffle version 5.x [...]
[...] OmniGraffle Wireframe Stencils- for all your IA needs Links — January 12, 2009 at 5:07 pm [...]
[...] OmniGraffle Wireframe Stencils [...]
These stencils are fantastic! The best for web apps design. Thank you so much.
[...] We are gearing up to redesign Skribit.com, as well as release professional accounts, in the near future. As such I have started using Little Snapper to manage screenshots of interesting sites that may prove helpful as design inspiration in the upcoming design phase. The next step will involve creating wireframes with OmniGraffle Pro enhanced with Konigi’s Wireframe Stencils. [...]
These are awesome. Thanks for sharing.
[...] OmniGraffle Wireframe Stencils | Konigi Thinking of getting a Mac almost only because of the Omni* products .. [...]
[...] and he also has an interesting write up on his wireframing process. Finally there is also a Konigi Omnigraffle Stencil which uses these droplets as well. I’d also be very much interested to see what other’s [...]
[...] encontrado otros stencils para Omnigraffle muy completos, los han creado en Konigi e incluyen elementos de formulario, controles avanzandos como sliders o [...]
[...] OmniGraffle Wireframe Stencils (via Konigi). [...]
Just want to say thank you :) This is indeed a great addon for me to create more omnigraffle diagrams.
Has anyone ever tried to export this stencil into visio stencil?
I saw comment #23 which have it available for visio drawing but it would be great if someone know how to export it to visio stencil.
Thanks
[...] OmniGraffle Wireframe Stencils | Konigi This is a set of shapes for making wireframes (low-fidelity web page schematics) in OmniGraffle version 5.x (Mac OS X). It consists of most of the basic elements you'll need to create user interface specifications. The screenshots below show different stencils in this set. (tags: webdesign design tools ui mac Resources omnigraffle wireframe wireframes stencils) « links for 2009-02-09 [...]
[...] More info: http://konigi.com/tools/omnigraffle-wireframe-stencils [...]
[...] um 11:00 · Gespeichert unter 1 Auf der Webseite von KONIGI gibt es seit einigen Tagen ein Update (2.0.1) der hervorragenden OmniGrafle Stencil Bibliothek zur Erstellung von Wireframes. Der Download ist [...]
[...] OmniGraffle Wireframe Stencils | Konigi Some beautiful wireframe stencils. (tags: design ui wireframe omnigraffle stencils) [...]
[...] out how to get the effect natively in OG, I've started to finally create sketch versions of the Wireframe Stencils. Above is a screenshot of the forms set. I expect this will take me a few days, but hope to release [...]
[...] I post about wireframing, today I found a awesome resource that can make sketching a easier job: OmniGraffle Sketch Stencils. This is a set of shapes for making wireframes in OmniGraffle. It consists of most of the basic [...]
[...] wss eerst schetsen of een wireframe maken (omnigraffle is hiervoor aan te raden, zeker met de stencils van konigi). Hier is vooral de opbouw van je interface belangrijk, usability, consistentie in layout over alle [...]
[...] up hand-drawn line sketches. I currently use Visio or Omnigraffle with a handful of stencils from Konigi and Graffeltopia – great sources for stencils to create user interface [...]
[...] all you OmniGraffle fans (i’m not one of them but i know a few that are) check out some wireframe stencils along with some sketch stencils RONALD SHAKESPEAR: MAKING THE CITY LEGIBLE Ronald Shakespear has [...]
[...] Wireframe Stencils [...]
Great set! Does anybody know where to get more casual sticky notes stencils?
Thanks for posting this valuable resource. As a web designer, I have to make wireframes constantly when dealing with company marketing teams to develop the website. Always I have made them by hand in illustrator but have always wished for something more professional and more efficient. These wireframe stencils are the answer. I will be purchasing these shortly, thank you for reviewing them on your blog, I probably would have never found them otherwise.
[...] OmniGraffle Wireframe Stencils | Konigi Thinking of getting a Mac almost only because of the Omni* products .. [...]
They keep getting better and better with each release. Thanks!
Super cool. Thanks!
Michael,
Thanks for these! I created my first wireframes with these stencils so they hold a special place in my heart.
-Andrew
These look like they'll be very helpful. Should the stencils be installed directly in ~/Library/Application Support/OmniGraffle/Stencils directory, or in
~/Library/Application Support/OmniGraffle/Stencils/Konigi Wireframe Stencils directory? Once properly installed, is there a help file that explains how to use them?
And where is Win version? :((( It it would be available for Win too, I would pay for this cool software, definitely!
Luke
@Karen: They can be installed in either location. There isn't a help file for how to use them presently, although I'll consider writing a short tutorial perhaps.
@Luke: OmniGraffle is Mac only.
Very nice stencils, thanks a lot!
Does having a set of wireframes so well designed hinder creative design post-wireframe? Also - if a client sees these wireframes how hard is it for them to comprehend these are layout wireframes and not the finished page?
Marc, I don't think these are particularly high fidelity. The elements are sort of genericized, although they tend to look a bit more like Mac UI elements. You can achieve low-fidelity wireframes with these, but if you're more comfortable removing gradients and shadows on buttons and controls, use gray boxes, and limit your use of color and typography. It's easy enough to modify and save the stencils.
These templates continue to get better and better. Thank you so much for supporting the community with your generosity.
Anyway to get the PNGs of this for us non OmniGraffle users?
Great stuff Michael! Thanks for posting. Hope you're doing well.
-b
Thank you! These are so helpful. A great resource
awesome! i'm just starting out with omnigraffle and these stencils will be very helpful. thx for sharing this :)
Excellent stencil pack, thank you!
I guess I'm a little late to the party but had to say I'm loving your stencils. Thanks so much for sharing. Omnigraffle just received whip cream and a big fat cherry on top.
Seems like it works in version 4.2.3.
This is awesome!!! Awesome stencils, thanks!
awesome, great stencils stuff . thx for sharing !
Almost a year later and the comments are still rolling in so I figure I'd add one more. Dude, your humble/understated way of sharing your awesomeness with the UX community is very much appreciated by myself and the dozens of commenters above me.
Thanks for putting these together (and for this site as well)!
Thankyou - these stencils are beautiful, valuable and very helpful.
Hi,
what of font do you use (font-name and settings)?
@FLO: Helvetica and Helvetica 77 Bold Condensed.
Hi jibbajabba,
thank you.
This is great! Thanks!
I've been looking for an alternative to Fireworks. This looks like it'll help me do the job with Omnigraffle.
Thanks!
Thanks host.
很实用，谢了啊！
Very, very helpful. I am in love.
Comments