The following are User Interface mockups for WordPress or any other CMS for that matter that can use a similar approach. I use a template driven, drag and drop, what you see is what you get approach to all elements of a page. Even though this is shown as part of the backend. It could instead be added directly to the frontend. These are ideas to be shared far and wide and is an approach that I would like to see implemented. uses a kinda similar approach but is a lot more basic then what I suggest.

I have also created a video to show the mockups to better explain my ideas.
Text and images are further below.







Add New Page (or post or category)



Save as:
Saving the page. Hover over the Save button and a drop down list of Save options appear.
Select one of the options and additional text will show up on the top right side area.

Save to Publish – time stamp options.
Save to Draft – the text Saved as Draft.
Save as Private – the word Private and right below the word Password and to the right a box where you write your password and then click Ok. The words Password and the password will be seen. The next time you edit this page the password will be seen as well.

Template View
As you create a new/edit page the Template View options are seen and one can choose either to use an existing template or choose blank and start over. Selecting a template changes are seen in the Layout area reflecting the current template. After having created a page one can choose to also save the template. Since one might want to create a similar page again. Custom templates are seen on the right side.

Grid Layout
Grid – similar to the old time html table, but vastly improved.
Grid icon: click the grid icon to open the dialog box showing an Opacity Slider and a text box which says 3 but can be changed to change the amount of columns. Can also be changed by merging/splitting cells directly inside the layout area.

Main Elements and Elements (Widgets)
Drag and drop the Main Elements into the layout area.

For instance: Drag out the Header and as the mouse comes over the layout area a semi transparent grid is seen. Drop the Header in one of the top cells. Click the header box and customize: background color, border and color, curved corners etc. Modifications can show up on the right side area in a active options box. Add an image to the header box.

Drag in sidebar and customize the look, then click widgets drop down. Select a widget and the options show up right below.Drag the Widget into the layout area.

A comments widget can be added to a page. (Instead of comments buried inside the Show options area of today.)


All pages or posts can be added to a Category. This way one can create unique categories containing posts and pages that can also be added to the menu structure.



All Pages/posts/categories

Category which is color labeled from the Categories section.


WordPress All Pages wireframe


Edit Category

Can be similar to creating a page/post to contain the same consistency.

Differences are Layout Styles and adding a color label to a category.


WordPress Categories wireframe



Adobe Dreamweaver – the category list shortcodes. Do also take a look at their new page builder.




Leave a Comment

Your email address will not be published. Required fields are marked *