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/

Now included with this repo is a beta version of Sketch templates for Gutenberg. Use this file to show your clients what Gutenberg's admin interface can do for the authoring experience. This beta version will be updated as more Gutenberg changes. Please leave comments or requests for features and we will try to accommodate them.

Gutenberg's wireframe templates use Roboto, you can download the font here: https://fonts.google.com/specimen/Roboto

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”

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

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.

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.

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.

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.

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!

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

This was built with Sketch version 50.2.

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.