Sketch template for quickly creating awesome WordPress admin interface mockups
Switch branches/tags
Nothing to show
Latest commit ad8e0ee Jun 17, 2017 @jarahsames jarahsames GIF Link Updates
Permalink
Failed to load latest commit information.
How-To-Gifs Minor Tweaks to Files Jun 16, 2017
README.md GIF Link Updates Jun 16, 2017
SketchPress_v1.sketch Updates Jun 15, 2017
license.md

README.md

SketchPress

Sketch template for quickly creating awesome WordPress admin interface mockups and designs.

The Sketch App, a digital design tool for Mac users, is increasingly popular among designers and developers in the digital world. Its a powerful tool that allows you to rapidly create mockups that can be high or low fidelity. What makes it even more useful is in its reproducible libraries and symbols.

10up has created a library of WordPress admin mockups which cover the breadth of WordPress’ authoring and administrative environment (wp-admin). Being able to start from this solid foundation allows us to focus more on the concepts and less on pushing the pixels to make it look like an authentic backend experience.

If you haven’t worked with Sketch app before, we highly recommend going to their learning resources center to watch and read materials about it: https://www.sketchapp.com/learn/

How to use this

  1. Download (or clone, or whatever) and open in Sketch
  2. The first page is an introduction to the document and includes information about what you can expect to find - we suggest reading through that to understand and learn more
  3. Copy any of the artboards into a new page or work directly from them for your own mockups

Protip: clone or download the repo into your Sketch templates folder and create “new from template”

Included Elements

There are 32+ wireframes in the SketchPress document. See below for the highlights. When reproducible, we have created a symbol to help you be more efficient.

WordPress Admin Screens

Alt Text

Pages & Posts Media Misc
Quick Edit Add Media Dashboard
Add New Edit Media Comments
Add Media List & Grid View Customizer
Tags & Categories Browser Uploader Users
Edit Page/Post Detailed Modal Settings

Tips

Symbols

WP Admin Sketch Templates have a plethora of usable symbols, ready to insert and replicate in your designs. If you aren’t familiar with symbols, we recommend practicing by creating a blank artboard (command+a shortcut) and then going to: Insert > Symbols > (choose symbols from the menu). After a symbol is inserted into an artboard, select it to view additional functionality. Options will be displayed in the inspector window (the menu on the right side of Sketch’s window, if this isn’t showing up go to View > Show Inspector).

Buttons

There are several buttons available in SketchPress that mimic the WordPress admin interface. To insert them, go to Insert > Symbols > Core > Input > Buttons. Each button has editable text. To change the text, click to select the button. The inspector panel will give you the option to change the text there.

Alt Text

Tables

Since buttons have fairly little fields to change in the inspector panel, they are considered a basic symbol style in SketchPress. Tables have more complex options and allow for even greater efficiency for your WP-Admin interfaces. Here's how you add and edit a table:

  1. Insert table into your artboard (example: Insert > Symbols > Core > Components > List-table-rows > All-posts—alternate)
  2. After inserting your table row, click to select that table. The inspector panel now shows text input fields for all of the table columns.
  3. Type in the new content for your table rowThe table will now be updated to show your new content.

Alt Text

Tinted Symbols

To insert an icon select from the following menu: Insert > Symbols > Dashicon > (select any you wish to insert - this shows the dashboard icon). Now select the symbol by clicking on it. Your inspector window on the right side of Sketch’s window pane now shows you a few new options. You will see the icon first and a dropdown menu allowing you to change it to a different symbol (handy!). Underneath that is the Overrides window. In there is “tint.” Select the dropdown menu and voila - you will see a full set of tints you can change your icon to now be.

Alt Text

Creating Tinted Symbols

If you want to create a new tintable symbol simply select the symbol and click on the Create Symbol button at the top of the Sketch page (or right click to create). Name the symbol in the dialog box and click the ok button to continue. Now the symbol will be included on your symbols page. To make it tintable. In the symbols page there is an artboard called dashicons/tints/blank - select the tint (click on the grey square), copy it, and past it into the artboard with your new symbol. Resize it to cover the surface area of your icon. Next select both the tints and the icon and then right click to select mask from menu options. Alternatively, you can do this by selecting the layer menu and then mask with selected shape. Now your symbol will have the available tints to change its color with.

Alt Text

Images

There are three image styles included in the symbols. These are for the media grid view, media layout view, and a user thumbnail. After inserting an image into your artboard you can change it by selecting “choose image” from the inspector panel.

  1. Insert image into your artboard
  2. In the inspector panel, click on the “choose image” button
  3. A pop up dialog box will open, allowing you to choose what image to replace this one with. Select an image (from your computer) and click “open” in your dialog box. The new image, already cropped to size, is now on your artboard!

Alt Text

WP Version

This project using WordPress 4.7 as a reference. Depending on installed plugins, themes, and user configuration your environment may be different.

Sketch Version

This was built with Sketch version 44.1.

Contributing

Feel free to submit pull requests, but please explain exactly what was changed. Because it’s a binary file, we won’t be able to do an automated merge and our team will review and manually merge what you describe.

The goal is to be no more than one significant version away from the current WordPress version. We may consider adding elements beyond what is included in WordPress core, but those will be limited.