You are on page 1of 13

2.7 Wireframes v0.

02
September 30, 2008

Contents:
Introduction
Navigation
Header
Dashboard
Add New Post
Edit Posts
Comments
Media Library
Tags
Categories
Collapsed Navigation Menu
Introduction
WordPress 2.7 is a work in progress. These
wireframes attempt to document the current state of
or plans for the application. In some cases, elements
may change as development proceeds, either
because of technical issues or to address usability Header: Access to dashboard(s), breadcrumb, search, favorites. Also, greeting/logout.
issues. In addition, elements may change during the
visual design stage. These wireframes are a guide
Status, Options, Filters, Alerts
for development that will be updated as necessary,
and are not set in stone.

2.7 will use a fluid design, rather than the fixed-width


of 2.5. The wireframes are scaled to represent an
actual browser window at 1024x768 resolution.

General Structure
The overall structure in 2.7 has changed to place the
primary navigation on the left side. This allows for
more vertical above-the-fold working space,
Primary
especially important when users access their admin
panel from laptops with screens wider than they are Navigation
Main Work Area
tall. Ultimately, this column will be collapsible for
users wishing to maximize their working area.

The header area has been reduced in height, and


includes breadcrumb navigation links in place of a
large screen headline in the work area. This also
serves to maximize the working area, as well as
providing alternate navigational access if the left
hand navigation column has been collapsed.

An area between the header and the work area will


provide access to screen display options, filters and
error or alert messaging as needed.

2.7 Wireframes v0.01: Introduction .2


Navigation
Navigation is on the left side, in expandable sections as outlined
to the right. Ideally an icon for each section header will be
created, allowing for a future implementation of a user-
Sections
controlled collapsible navigation area. Breadcrumb links at the
top of the screen provide access to additional screens. By
default, the Posts section will be open on arrival at admin panel, Dashboard Appearance
as shown below. Themes
Posts Widgets
Add New Custom Header
Edit Edit CSS
Tags
Categories Settings
General
Media Writing
Add New Reading
Edit Discussion
All Types Media
Images Privacy
Videos Permalinks
Audio Users
Documents
Galleries Tools
Import
Links Export
Add New Press This
Edit Turbo
Link Categories Tag Converter
Category Converter
Pages
Add New Plugins
Edit Add New
Installed
Comments Editor
Moderate
Akismet Spam Help
My Comments Documentation
Forums
Feedback

2.7 Wireframes v0.01: Navigation .3


Header
The header has been revised. When in the
administration panel, the admin panel will not be
displayed by default. In the upper right is the
standard user greeting (links to profile) and logout
link. When the user has a gravatar, this will be
displayed as well.

On the far left, the WordPress mark will function as a WordPress.com

shortcut to other WordPress dashboards Dashboards:


Blogname 1
(wordpress.com and MU only) via a dropdown menu Blogname 2
Blogname3
and will have a link back to either wordpress.com or
wordpress.org as appropriate.

The blog name will be followed by breadcrumb


navigation that shows the current screen and its
parent section as well as a link to the Dashboard. A
new window icon following the blog title will link to
the live blog in a new tab or window. Following the
breadcrumb will be a small link for screen options.
Clicking this link will open a layer that allows the user
to select element s to display on screen, and in some
cases to access related settings.

To the right is a favorites menu that expands on


Options
hover (JavaScript-enabled browsers only). Currently
the menu is populated with screens most frequently
Display Columns: Post Author Categories Tags Media Comments Stats Date
accessed by users: Add new post, Comments, Stats
(.com only), Plugins (,org only). Ultimately, items in Number of Posts to list per page: 10
this menu will be user-defined.
Display Tools: Search Posts Filter by Category Filter by Date Filter by Author

2.7 Wireframes v0.01: Header .4


Dashboard
The redesigned Dashboard is intended to provide more
utility to the user. Modules may be hidden or displayed using
the Options link, may be expanded or collapsed, and may
be moved using drag and drop, allowing the user to place
modules of interest above the fold and in the order of
G Howdy, username! Logout preference.
A Longish Blog Name Dashboard [Screen] Options Add New Post
Modules taken directly from the current Dashboard include
D Dashboard Right Now Right Now, Stats (for wordpress.com), and Recent Activity.
QuickPress
P Posts Recent Comments (13) View All Comments
Add New Today: Title: Updated modules include Recent Comments, Incoming
Edit In response to [Post Title]: [This is a comment. This is a comment that needs moderation. This is a comment Links, and What's Hot. Recent Comments now includes the
Tags Author that needs moderation. This is a comment. This is a comment.] Post:
Categories gravatar Approve | Edit | Mark as Spam | Delete | Reply ability to moderate or reply to comments directly from the
Trackback: [Blog Name] >> [Post Title]
dashboard, and includes commenter gravatars for easy
M Media Insert
[This is a new trackback. This is a new trackback. This is a new trackback. This is a new trackback.]
Media scanning. Trackbacks are labeled to differentiate them from
L Links
Author
In response to [Post Title]: [This is a comment. This is a comment that has already been approved. This is a comments left on the actual blog.
PG Pages comment. This is a comment.]
gravatar Unapprove | Edit | Mark as Spam | Delete | Reply
C Comments
Yesterday: Both Recent Comments and Incoming Links are updated to
In response to [Post Title]: This is a long comment. This is a comment that needs moderation and that goes
Author more than 3 lines. This is a comment. This is a comment. This is a comment that is long. This is a comment Tags:
display the number of items in the header bar. When there
A Appearance gravatar
that can be expanded by clicking on 'more...'] more...
Approve | Edit | Mark as Spam | Delete | Reply
are zero items, no number will displayed, preventing users
S Settings Save Draft Publish receiving zero comments or links from feeling disappointed
T Tools upon coming to the Dashboard. Ultimately, users will be able
Incoming Links Recent Drafts
U Plugins View All Drafts to configure these modules to determine how many items to
? Help Stats [mm/dd/yyyy]- Draft post title
[mm/dd/yyyy]- Another draft post title
display and/or how wide of date range.
[mm/dd/yyyy]- Short title
Recent Activity [mm/dd/yyyy]- This is a little bit longer post title
Today [mm/dd/yyyy]- Draft post title The What's Hot module will move toward a being more of a
Moderation: test1515 - 1 awaiting moderation
user-defined feed reader, including headlines from Tag
[Feeds]
Surfer, Blog Surfer, WordPress.com News, or other related
Moderation: wordpress.com - 128 awaiting moderation
[Source1 ] blogs.
Headline from Source 1
Moderation: en.blog - 101 awaiting moderation
Another headline from Source 1
And another Source 1 headline
Comment: en.blog - May Flowers Foundation on WordPress 2.7 Design Survey #2: Search, Favorites, Future Publish
A fourth headline New in 2.7 is the QuickPress Module, which allows the user
Comment: en.blog - guthixshowdown on WordPress 2.7 Design Survey #2: Search, Favorites, Future Publish
Show last five per source by default to create a post or draft quickly from the dashboard without
Updated: wordpress.com - Stats-updated
[Source 2] having to go to the full post editor. Ultimately, the user wil be
Headline from Source 2
New page: wordpress.com - Stats-updated
Another headline from Source 2 able to configure this module to determine which fields to
And another Source 2 headline
A fourth headline
display. If "Save Draft" is clicked, the post will be added to
New post: wpdevel - Andrew, Alex, and I are making good prog ...
Show last five per source by default the "Recent Drafts" module below, at the top of the list.

2.7 Wireframes v0.01: Dashboard .5


Posts > Add New

The screen for creating a new post will be customizable


according to user preference. Options will allow the user to
determine which modules to display on the page according
to his/her needs, and drag and drop functionality will allow
the user to put modules in the places that make the most
G Howdy, username! Logout sense according to personal preferences. Modules may also
A Longish Blog Name Dashboard > Posts > Add New [Screen] Options Add New Post
be dragged between columns. If all modules are dragged to
the wider left column, that column will expand to fill the
D
D
Dashboard
Dashboard Title remaining screen width.
PP Posts Publish
Posts
Add Permalink: http://blogname.wordpress.com/yyyy/mm/dd/title-as-entered [edit] [refresh] Most of the modules are the same as in 2.6, or slightly
AddNew
New Current Status: Unpublished
Save Draft
Edit
Edit
View History
revised in terms of layout. Some new features have been
Tags
Tags Post Embed: F Y G P Upload: I Visual | HTML Preview
Categories
Categories
V A D
Stick this post to the front page added as well.
TinyMCE Timestamp: Current time (Change)
M Media
M Media Delete Post Publish
The title field currently populates the permalink field
L Links
L Links according to the blog settings. The permalink is generated
PG Pages
PG Pages Media when the title is first created, but may be edited by the user
C Comments
C Comments Add New Currently Added if desired. Many users have expressed a desire to be able to
Upload: I V A D refresh the permalink to match a revised title rather than
AA Appearance
Appearance
having to type it out twice. The small 'refresh' link to the right
Embed: F Y G P
SS Settings
Settings of the 'edit' link will refresh the permalink to the settings-
TT Tools
Tools From URL: Add based format based on the current information.
UU Plugins
Plugins From Library: Browse...
?? Help
Help In the post editor, a row of icons to the left of the Visual/
Path: Word Count: #,### Tags HTML tabs now separates icons into embed and upload
Privacy Options functions. Embed icons feature logos such as YouTube,
Add
Separate tags with commas Flicker, Google Maps and PollDaddy. The Upload icons
Excerpt
Choose from your existing tags
retain the same functionality they had in 2.6.
Author
Categories The tabbed Media module (default position in right column)
Post author: [current username]
All | Most Used | Add New is intended to provide users with easier access to media
Trackbacks and Pings
category-a
Another category
management within a post.When no media has been added
mycategory to the post, the default tab displays the options for including
this is a longer category
Comments category-b media files. When media has been added to the post, the
category15
anothercategory
'Currently Added' tab is displayed, showing thumbnails with
Custom Fields
filename and links to edit or remove from post.

2.7 Wireframes v0.01: Add New Post .7


Posts > Edit

This screen is shown with all optional elements displayed.


This includes the status filter, filters by date, category and
author, the section search, and list/expanded view icons.
The dropdown menu for bulk actions and the pagination
display are not optional. The view on the left is List View.
G Howdy, username! Logout

A Longish Blog Name Dashboard > Posts > Edit [Screen] Options Add New Post
Columns include post title, author, categories, tags, media,
comments, stats, and date. Comments and stats will display
DD Dashboard
Dashboard All (348) | Drafts (4) | Published (301) | Private (34) | Password-Protected (9) Search Posts as icons, as in 2.6. In list view, the Media column will list 1-3
Actions Apply Show All Dates Show All Categories Show All Authors Filter Displaying 1-10 of 48 1 2 3 4 5 file names depending on space, followed by ellipses if there
PP Posts
Posts
Select All Post Author Categories Tags Media Comments Stats Date
are more media files attached to the post. In expanded view,
Add
AddNewNew
Edit
Edit [This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy] the Media column will display mini-thumbnails, the same
Tags
Tags
Categories
Edit | Quick Edit | Delete | Change Status | View Published
size as in the Media module on the Add New Post screen. In
Categories
[This is a post title]
Edit | Quick Edit | Delete | Change Status | View
[Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
Published
expanded view, the Post column will display an excerpt of
M Media
M Media [This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
the post below the title. In the Date column, date format
L Links
L Links
Edit | Quick Edit | Delete | Change Status | View Published should follow that chosen by user in Settings. Below the
PG Pages [This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy] date, 'Published' or 'Last Modified' indicates what the date/
PG Pages Edit | Quick Edit | Delete | Change Status | View Published
C Comments time refers to, since in 2.7, Drafts are included in the All
C Comments [This is a post title] - Draft [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
Edit | Quick Edit | Delete | Change Status | Preview Last modified Posts list chronologically rather than appearing at the very
A
A
Appearance
Appearance [This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy] end of the list. In expanded mode, the Date column displays
Edit | Quick Edit | Delete | Change Status | View Published
S
S
Settings
Settings the time of the post below the date and above the status.
[This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
T
T
Tools
Tools Edit | Quick Edit | Delete | Change Status | View Published
Background colors provide additional visual cues to post
U
U
Plugins
Plugins [This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
status for Drafts and Private posts.
Edit | Quick Edit | Delete | Change Status | View Published
?
?
Help
Help
[This is a post title] - Private
Edit | Quick Edit | Delete | Change Status | View
[Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
Published
All screens in list/column format now repeat column
headers, bulk action controls and pagination at the bottom of
[This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
Edit | Quick Edit | Delete | Change Status | View Published the screen to prevent unnecessary scrolling. In addition,
[This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy] actions links in these screens have been moved to the left
Edit | Quick Edit | Delete | Change Status | View Published
column, directly beneath the primary item title or excerpt.
[This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
Edit | Quick Edit | Delete | Change Status | View Published Action Links:
[This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy] Edit- loads the post editor for that item.
Edit | Quick Edit | Delete | Change Status | View Published
QuickEdit- opens a layer allowing in line editing of all fields
[This is a post title]
Edit | Quick Edit | Delete | Change Status | View
[Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
Published
currently displayed in columns.
Delete- deletes post after asking for confirmation of action.
Select All Post Author Categories Tags Comments Stats Date
Change Status- allows user to change post from Published
Actions Displaying 1-10 of 48 1 2 3 4 5
Apply
to Draft, Public to Private, etc.
View/Preview- opens the post on the live blog, or in preview
mode if a Draft.

2.7 Wireframes v0.01: Edit Posts .8


Posts > Comments > Moderate

The Comment screen includes functionality similar to the


Edit Posts screen. In Expanded mode on this screen, the
comment text is displayed in entirety, while list mode
displays the first excerpted line.

G Howdy, username! Logout Action links are again moved to the left column. Approve/
A Longish Blog Name Dashboard > Comments > Moderate [Screen] Options
Add New Post
Unapprove, Edit, Spam and Delete function as in 2.6. Reply
opens a layer allowing the user to reply directly to the
Show All Types All (348) | Pending (4) | Approved (330) | Spam (14)
DD Dashboard
Dashboard Search Comments comment. This reply will appear immediately following the
PP Posts
Actions Apply Show All Dates Filter Displaying 1-10 of 48 1 2 3 4 5 original comment on the public blog.
Posts
Add New Select All Comment Author Submitted In Response to This Post
M Media
Edit [This is sample comment text. This is sample comment text. ] [Gravatar] [Author Name] [mm/dd/yyyy] [This is a post title] [# comments icon] In 2.6, text filters for this screen included All, Awaiting
L Tags
Links Approve | Reply | Edit | Spam | Delete [author@email.com] [IP.IPI.PIP.IP] at [hh:rr xm] Published [mm/dd/yyyy] at [hh:rr xm]
Categories Moderation, Approved. In the Crazyhorse prototype, Spam
PG Pages [This is sample comment text. This is sample comment text. ] [Gravatar] [Author Name] [mm/dd/yyyy] [This is a post title] [# comments icon]
Approve | Reply | Edit | Spam | Delete [author@email.com] [IP.IPI.PIP.IP] at [hh:rr xm] Published [mm/dd/yyyy] at [hh:rr xm] was added, so that users would not need to use additional
M
C
Media
Comments
[This is sample comment text. This is sample comment text. ] [Gravatar] [Author Name] [mm/dd/yyyy] [This is a post title] [# comments icon] navigation to see comments they had marked as spam. This
L Links
Moderate
Akismet Spam
Approve | Reply | Edit | Spam | Delete [author@email.com] [IP.IPI.PIP.IP] at [hh:rr xm] Published [mm/dd/yyyy] at [hh:rr xm]
text filter is included in 2.7. In addition, a dropdown menu to
PG Pages
My Comments [This is sample comment text. This is sample comment text. ]
Approve | Reply | Edit | Spam | Delete
[Gravatar] [Author Name]
[author@email.com] [IP.IPI.PIP.IP]
[mm/dd/yyyy]
at [hh:rr xm]
[This is a post title] [# comments icon]
Published [mm/dd/yyyy] at [hh:rr xm]
the left of these text filters will offer users the ability to show
C Comments
[This is sample comment text. This is sample comment text. ] [Gravatar] [Author Name] [mm/dd/yyyy] [This is a post title] [# comments icon]
all types, comments only, or trackbacks only. Text filters will
A Appearance Approve | Reply | Edit | Spam | Delete [author@email.com] [IP.IPI.PIP.IP] at [hh:rr xm] Published [mm/dd/yyyy] at [hh:rr xm] be applied to the selection in the dropdown menu.
A Appearance
S Settings [This is sample comment text. This is sample comment text. ] [Gravatar] [Author Name] [mm/dd/yyyy] [This is a post title] [# comments icon] Background color will indicate comments in need of
Approve | Reply | Edit | Spam | Delete [author@email.com] [IP.IPI.PIP.IP] at [hh:rr xm] Published [mm/dd/yyyy] at [hh:rr xm]
S Settings
Tools moderation.
T
T Tools [This is sample comment text. This is sample comment text. ] [Gravatar] [Author Name] [mm/dd/yyyy] [This is a post title] [# comments icon]
U Plugins Approve | Reply | Edit | Spam | Delete [author@email.com] [IP.IPI.PIP.IP] at [hh:rr xm] Published [mm/dd/yyyy] at [hh:rr xm]
U Plugins
[This is sample comment text. This is sample comment text. ] [Gravatar] [Author Name] [mm/dd/yyyy] [This is a post title] [# comments icon]
? Help Approve | Reply | Edit | Spam | Delete [author@email.com] [IP.IPI.PIP.IP] at [hh:rr xm] Published [mm/dd/yyyy] at [hh:rr xm]
? Help
[This is sample comment text. This is sample comment text. ] [Gravatar] [Author Name] [mm/dd/yyyy] [This is a post title] [# comments icon]
Approve | Reply | Edit | Spam | Delete [author@email.com] [IP.IPI.PIP.IP] at [hh:rr xm] Published [mm/dd/yyyy] at [hh:rr xm]

[This is sample comment text. This is sample comment text. ] [Gravatar] [Author Name] [mm/dd/yyyy] [This is a post title] [# comments icon]
Approve | Reply | Edit | Spam | Delete [author@email.com] [IP.IPI.PIP.IP] at [hh:rr xm] Published [mm/dd/yyyy] at [hh:rr xm]

[This is sample comment text. This is sample comment text. ] [Gravatar] [Author Name] [mm/dd/yyyy] [This is a post title] [# comments icon]
Approve | Reply | Edit | Spam | Delete [author@email.com] [IP.IPI.PIP.IP] at [hh:rr xm] Published [mm/dd/yyyy] at [hh:rr xm]

[This is sample comment text. This is sample comment text. ] [Gravatar] [Author Name] [mm/dd/yyyy] [This is a post title] [# comments icon]
Approve | Reply | Edit | Spam | Delete [author@email.com] [IP.IPI.PIP.IP] at [hh:rr xm] Published [mm/dd/yyyy] at [hh:rr xm]

[This is sample comment text. This is sample comment text. ] [Gravatar] [Author Name] [mm/dd/yyyy] [This is a post title] [# comments icon]
Approve | Reply | Edit | Spam | Delete [author@email.com] [IP.IPI.PIP.IP] at [hh:rr xm] Published [mm/dd/yyyy] at [hh:rr xm]

[This is sample comment text. This is sample comment text. ] [Gravatar] [Author Name] [mm/dd/yyyy] [This is a post title] [# comments icon]
Approve | Reply | Edit | Spam | Delete [author@email.com] [IP.IPI.PIP.IP] at [hh:rr xm] Published [mm/dd/yyyy] at [hh:rr xm]

Select All Comment Author Submitted In Response to This Post

Actions Apply Displaying 1-10 of 48 1 2 3 4 5

2.7 Wireframes v0.01: Comments .9


Media > Edit > All Types

The Media Library includes more data now, including file


type, file size, dimensions (if applicable), author, categories
and tags, posts to which the item is attached, comments on
the item, and the date it was added. In expanded view, the
image description would appear in the first column below the
G Howdy, username! Logout name and file information.
A Longish Blog Name Dashboard > Media > Edit > All Types [Screen] Options Add New Post
Action Links:
DD Dashboard
Dashboard All (366) | Images (4) | Videos (330) | Audio (14) | Documents (3) | Unattached [15] Search Media Edit- Opens the editing screen as in 2.6.
PP Posts
Actions Apply All Dates All Authors Filter Displaying 1-10 of 48 1 2 3 4 5 Attach to Post- Opens a layer and allows user to search for
Posts
Add New Select All File Author Categories Tags Attached to Comments Date existing post to attach item to, or to go to the screen to
M Media
Edit [This is a media filename.ext] [Author] [Category] [tag1, tag2, tag3] [Post title] [(#)] [mm/dd/yyyy] create a new post with this item already inserted.
Tags img [dimensions], [file size]
Upload
Categories
v Edit Edit | Attach to Post | Delete | View Delete- Deletes the item after confirmation of intent.
All Media Types
[This is a media filename.ext] [Author] [Category] [tag1, tag2, tag3] [Post title] [(#)] [mm/dd/yyyy]
View- Opens the item's permanent individual *page* on the
M Media
Images
Video
img [dimensions], [file size]
Edit | Attach to Post | Delete | View
live blog. To get the actual URL of the media item itself, the
L Links
Audio
Documents user would need to click on the item from that permanent
PG Pages [This is a media filename.ext] [Author] [Category] [tag1, tag2, tag3] [Post title] [(#)] [mm/dd/yyyy]
Galleries img [dimensions], [file size] page, as it is in 2.6.
C Comments Edit | Attach to Post | Delete | View
L Links
[This is a media filename.ext] [Author] [Category] [tag1, tag2, tag3] [Post title] [(#)] [mm/dd/yyyy]
PG Pages img [dimensions], [file size]
A Appearance Edit | Attach to Post | Delete | View
C Comments
S Settings [This is a media filename.ext] [Author] [Category] [tag1, tag2, tag3] [Post title] [(#)] [mm/dd/yyyy]
A Appearance img [dimensions], [file size]
T Tools Edit | Attach to Post | Delete | View
S Settings
U Plugins [This is a media filename.ext] [Author] [Category] [tag1, tag2, tag3] [Post title] [(#)] [mm/dd/yyyy]
T Tools img [dimensions], [file size]
? Help Edit | Attach to Post | Delete | View
U Plugins
[This is a media filename.ext] [Author] [Category] [tag1, tag2, tag3] [Post title] [(#)] [mm/dd/yyyy]
? Help img [dimensions], [file size]
Edit | Attach to Post | Delete | View

[This is a media filename.ext] [Author] [Category] [tag1, tag2, tag3] [Post title] [(#)] [mm/dd/yyyy]
img [dimensions], [file size]
Edit | Attach to Post | Delete | View

[This is a media filename.ext] [Author] [Category] [tag1, tag2, tag3] [Post title] [(#)] [mm/dd/yyyy]
img [dimensions], [file size]
Edit | Attach to Post | Delete | View

[This is a media filename.ext] [Author] [Category] [tag1, tag2, tag3] [Post title] [(#)] [mm/dd/yyyy]
img [dimensions], [file size]
Edit | Attach to Post | Delete | View

Select All File Author Categories Tags Attached to Comments Date


Displaying 1-10 of 48 1 2 3 4 5
Actions Apply

2.7 Wireframes v0.01: Media Library .10


Posts > Tags

The tag management screen has been condensed to reduce


scrolling. In the upper left, the form to add a new tag
appears. When a new tag is submitted, it will appear in the
column to the right.

G Howdy, username! Logout The 'Popular Tags' cloud in the lower left displays tags in
A Longish Blog Name Dashboard > Tags [Screen] Options Add New Post
non-columnar format, with font size indicating frequency of
use. Clicking on a tag here will open the editing screen for
DD Dashboard
Dashboard Search Tags
that tag.
Actions
PP Posts
Posts
Add a New Tag Apply Displaying 1-10 of 48 1 2 3 4 5

Add New Select All Tag Name Tag Slug Posts The traditional column containing tags for management
Write Tag Name
Edit
Drafts [tag name] [tag slug] [#] includes the tag name, tag slug (.org only), and the number
Tags
View All Edit | Delete
Categories
Tags of posts to which the tag is attached. Clicking on the number
The name is how the tag appears on your site. [tag name] [tag slug] [#]
Categories
Edit | Delete in the Posts column will open a layer that lists the titles of
M Media
M Media [tag name] [tag slug] [#] the posts with this tag. Post titles will link to their own editing
L Links Tag Slug
L Links
Edit | Delete
screens.
PG Pages [tag name] [tag slug] [#]
PG Pages The “slug” is the URL-friendly version of the name. It is Edit | Delete
C Comments
C Comments usually all lowercase and contains only letters, numbers,
[tag name] [tag slug] [#]
In the left navigation column, users are reminded of the
and hyphens. Edit | Delete category to tag converter tool, with a link to that screen in
AA Appearance
Appearance Submit [tag name] [tag slug] [#] the Tools section.
Edit | Delete
SS Settings
Settings
TT Tools [tag name] [tag slug] [#]
Tools Edit | Delete
UU Plugins
Plugins Popular Tags [tag name] [tag slug] [#]
tagname Tag tag33 alongertag
Edit | Delete
?? Help
Help
[tag name] [tag slug] [#]
ADifferentTagName atag Tag23 Edit | Delete

randomtag Tags tagname Tag tag33 [tag name] [tag slug] [#]
Edit | Delete

Note:
alongertag tagname Tag tagname Tag
[tag name] [tag slug] [#]
Tags can be converted
to tags using the
tag33 alongertag tag33 alongertag Edit | Delete

category to tag
converter in the Tools
tagname Tag tagname Tag tagname [tag name]
Edit | Delete
[tag slug] [#]

section.
Tag tag33 alongertag tag33 [tag name] [tag slug] [#]
Edit | Delete
alongertag tag33 alongertag tagname
[tag name] [tag slug] [#]
Tag tag33 alongertag tagname Tag Edit | Delete

tag33 alongertag Select All Tag Name Tag Slug Posts

Actions Apply Displaying 1-10 of 48 1 2 3 4 5

2.7 Wireframes v0.01: Tags .11


Posts > Categories

The category management screen has been condensed to


reduce scrolling. On the left, the form to add a new category
appears. When a new category is submitted, it will appear in
the column to the right.

G Howdy, username! Logout


The traditional column containing categories for

A Longish Blog Name Dashboard > Categories [Screen] Options Add New Post
management includes the category name, category slug
(.org only), the description, and the number of posts to
DD Dashboard
Dashboard Search Categories which the category is attached. The Description column will
Add a New Category Actions Apply Displaying 1-10 of 48 1 2 3 4 5 be hidden by default. Clicking on the number in the Posts
PP Posts
Posts
Select All Category Name Category Slug Description Posts
column will open a layer that lists the titles of the posts with
Add New
Write
Edit
Drafts
Category Name
[Category name] [Category slug] [Category description]... [#]
this category. Post titles will link to their own editing screens.
Tags
View All Edit | Delete
Categories
Tags The name is used to identify the category almost everywhere,
Categories such as under the post or in the category widget. [Category name]
Edit | Delete
[Category slug] [Category description]... [#] In the left navigation column, users are reminded of the tag
M Media to category converter tool, with a link to that screen in the
M Media Category Slug [Category name] [Category slug] [Category description]... [#]
L Links Edit | Delete Tools section.
L Links
PG Pages The “slug” is the URL-friendly version of the name. It is usually [Category name] [Category slug] [Category description]... [#]
PG Pages all lowercase and contains only letters, numbers, and hyphens. Edit | Delete
C Comments
C Comments [Category name] [Category slug] [Category description]... [#]
Parent Category Edit | Delete
AA Appearance
Appearance
None [Category name] [Category slug] [Category description]... [#]
Edit | Delete
SS Settings
Settings The “slug” is the URL-friendly version of the name. It is usually all
lowercase and contains only letters, numbers, and hyphens. [Category name] [Category slug] [Category description]... [#]
TT Tools
Tools Categories, unlike tags, can have a hierarchy. You might have a Edit | Delete
UU Plugins
Plugins Jazz category, and under that have children categories for Bebop
and Big Band. Totally optional. [Category name] [Category slug] [Category description]... [#]
Edit | Delete
?? Help
Help
Category Description [Category name] [Category slug] [Category description]... [#]
Edit | Delete

[Category name] [Category slug] [Category description]... [#]


Note: Edit | Delete
Deleting a category
does not delete the [Category name] [Category slug] [Category description]... [#]
posts in that category. Edit | Delete
Instead, posts that were
The description is not prominent by default; however, [Category name] [Category slug] [Category description]... [#]
only assigned to the
some themes may show it. Edit | Delete
deleted category are set
to Uncategorized. [Category name] [Category slug] [Category description]... [#]
Submit Edit | Delete
Categories can be
converted to tags using [Category name] [Category slug] [Category description]... [#]
the category to tag Edit | Delete
converter in the Tools
section. Select All Category Name Category Slug Description Posts

Actions Apply Displaying 1-10 of 48 1 2 3 4 5

2.7 Wireframes v0.01: Categories .12


Collapsible Navigation Column

Ultimately, the left column will be able to be collapsed to a


remnant column that displays the sections icons for quick
access to other sections. In this mode, the screen real
estate is primarily dedicated to working area.

G Howdy, username! Logout

A Longish Blog Name Dashboard > View All Posts [Screen] Options Add New Post

DD Dashboard
Actions 1 2 3 4 5

P Select All Post


Posts Author Categories Tags Media Comments Stats Date
P
Add New [This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
M Edit | Quick Edit | Delete | Change Status | View Published
Edit
L Tags
[This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
Categories Edit | Quick Edit | Delete | Change Status | View Published
PG
M
C
Media [This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
Edit | Quick Edit | Delete | Change Status | View Published
L Links
[This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
PG
A
Pages Edit | Quick Edit | Delete | Change Status | View Published

S
C Comments [This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
Edit | Quick Edit | Delete | Change Status | View Published
U
[This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
A Appearance Edit | Quick Edit | Delete | Change Status | View Published

?S Settings [This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
Edit | Quick Edit | Delete | Change Status | View Published
T Tools
[This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
U Plugins Edit | Quick Edit | Delete | Change Status | View Published

>? Help [This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
Edit | Quick Edit | Delete | Change Status | View Published

[This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
Edit | Quick Edit | Delete | Change Status | View Published

[This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
Edit | Quick Edit | Delete | Change Status | View Published

[This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
Edit | Quick Edit | Delete | Change Status | View Published

[This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
Edit | Quick Edit | Delete | Change Status | View Published

[This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
Edit | Quick Edit | Delete | Change Status | View Published

Select All Post Author Categories Tags Comments Stats Date

Actions 1 2 3 4 5

2.7 Wireframes v0.01: Collapsed: View All Posts .13

You might also like