Keynote template for quickly creating awesome WordPress admin interface mockups
Keynote --- the presentation software from Apple --- makes a surprisingly good resource for doing a surprising amount of things well and beyond presentations. One of these is website mockups.
The short reasoning is this: traditionally tools limited practitioners to producing one of the following: High fidelity mockups that required a lot of work, or low fidelity wireframes and sketches that could be rapidly created.
The short reason for this repo is that Keynote allows for both, but in order to be most effective, it helps to have tools available. I highly recommend that you go read and watch the material on http://keynotekungfu.com.
How to use this
- download (or clone, or whatever) and open in Keynote
- View the master slides (View->Show Master Slides)
- Copy elements from this presentation to your new presentation/mockup.
There are a bunch more "pro" tips around how to make this workflow the best. Again, I'd highly suggest watching the material on keynotekungfu.
A Note on Keynote Versions
I've transitioned the mockup library to Keynote Version 6. It will no longer work with iWork/Keynote '09
A list of what's included. I've tried to note whether the element is a screen capture or if it's natively drawn in Keynote. The latter is preferable both for file size and flexibility, but in the need to quickly assemble elements screen captures saved a lot of time. The idea is that everything will be natively drawn eventually.
The newest visual refresh of WordPress is right around the corner: The plugin known as MP6 is scheduled to be rolled into WordPress core for version 3.8 in December, 2013. Until that happens, the following table may be out of date, as I have not included all of the MP6/3.8 elements. I'll update it after MP6/3.8 is released at which time I will remove all of the old styles.
WordPress Admin Elements
|Admin Bar||"Howdy, WP Designer"||Screen capture|
|Admin Menu||Screen capture. Use two of them, overlapping in order to interject an expanded submenu.||Screen capture|
|Submenu||Includes a somewhat generic star icon. Menu is presented expanded. It can be used to show the submenu for any menu item. Use a second copy of the admin menu to make it appear expanded.||Natively Drawn|
|Admin screen||Includes a 32x32 icon placeholder and screen header.||Natively Drawn|
|Title and Content editor||Shows the "Beta Media" button from 3.5b1. Set on the Visual tab.||Title is natively drawn, WP Editor is a Screen capture|
|Publish Box||Natively Drawn|
|Featured Image||Natively Drawn|
|Custom Meta Box||Expand/collapse arrow shown||Natively Drawn|
|Buttons||Secondary and Primary, WP 3.5 style||Natively Drawn|
|Textarea||Filled with some text an an OSX Lion style scrollbar visible||Natively Drawn|
|Image Selector, Uploader||Workflow like that of selecting a header image. Presents the option to upload an image or select from media library. WP 3.5 style buttons. Break it apart to just get a file upload interface||Natively Drawn|
|Color Selector||WP 3.5 color picker, closed.||Natively Drawn|
|Check Boxes||Checked and Unchecked with labels||Natively Drawn|
|Radio Buttons||With labels||Natively Drawn|
|Select Menu||Mac OS. Open and closed versions||Natively Drawn|
|List Table||Generic list table, no checkbox column, no sorting or bulk editing. Tables are kind of finicky in Keynote. It is possible to add columns and rows, but watch how it sizes.||Natively Drawn|
|Browser Chrome||Google Chrome v22, Accidentally caught the insert cursor in the URL field||Screen Capture|
|iPhone||Two versions, iPhone 4s (and older) aspect ratio. With and without the URL/Search bar showing.||Screen Capture|
|User Flow Modeling||Based on the visual vocabulary by Jesse Garrett. http://jjg.net/ia/visvocab/ - Shapes are also useful for more generic flow charts||Natively Drawn|
|Annotations||A few boxes to act as virtual sticky note callouts. Also includes a "click" and "hover" icon||Natively Drawn; cursor is an image from wikimedia commons|
Last note, I started this project using WordPress 3.4 as a reference, and then migrated to 3.5 beta. There are some inconsistencies, but the idea is to use the trunk version of WordPress as a reference for new UI elements whenever possible and prudent. See the note above about WP 3.8 and MP6 styles.
Feel free to contribute back with your own elements. I'm not exactly sure how a pull request will work with binary files, but I can make it work. I update and add new elements as I need them. You're welcome to email if you need something added.