Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Keynote template for quickly creating awesome WordPress admin interface mockups
Branch: master

README.md

mockupress

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

  1. download (or clone, or whatever) and open in Keynote
  2. View the master slides (View->Show Master Slides)
  3. 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

Included Elements

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

Element Notes Type
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
Tags Natively Drawn
Categories 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
Textbox 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 Elements

Element Notes Type
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

Misc

Element Notes Type
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

WP Version

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.

Contributing

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.

Something went wrong with that request. Please try again.