(Originally posted 20 August 2013. It might be updated in the future.)
Update of Content Editing experience.
For new updates of the Frontend editing experience development check:
Customizing TinyMCE to make it even more user friendly. Having most used buttons at the top level and visible.
Styling inside TinyMCE.
Extra functions inside the right fixed content block area.
Widgets areas used on page top right.
On the side there could be a fixed area for adding content blocks. At the bottom of this area there could be a publish button. As the page gets longer the fixed area moves with the scroll bars. In Dreamweaver CS 6 at the bottom right is an area where the user can click the mobile, Ipad’ish or desktop icon to check various screen sizes. I added it in here as well to the bottom middle area.
I have also added in a Grid view beside the Styling area one begins in. Grid view is where one can move all blocks around. Moving blocks automatically also creates columns or one can also use the column icon in the top area (not seen in the image). One can click a block in Grid view and add styling directly to a block. Nest box blocks etc.
Ubernaut posted about doing away with the distinction between editing the front end and back end.
The below comment I made is in relation to ubernaut posting mockups on his web site:
Thinking out loud about the Frontend editing process….
The first thing one sees is the default theme front page. A box up in the right corner to login. The user logs in. The dashboard bar shows at the top. Since it is the first login a link below the login box is seen: “tour the interface.” User clicks and a short video is seen.
– How to select a theme from the front end. Perhaps a link all the way to the right of the Dashboard top bar with the name of “Choose Theme”. Click the link and see a drop down of small thumbnails and at the bottom of the drop down a see additional themes option. As the user moves the cursor over the thumbnails they are automatically bigger to the side of the drop down showing 2-3 fairly lage screenshots with some key info below the screenshots. The user selects a theme and the front end automatically adjusts to show the theme selected.
– Hover over elements on the page an outline is seen and one can click inside and an edit bar is seen.
– Drag elements around to replace.
– Turn on grid to align elements.
– Click directly on an menu link to move to the page.
– At the top Dashboard bar click the +New (OR use the Template button next to it to use an existing saved page) to create a post/page/category.
A blank page is seen and blocks are seen on the right side (depending on if it is a post/page/category). Main elements – Header, menu, sidebar, content, footer.
Elements (widgets, shortcodes, block elements all in one).
One drags the various elements to create the page. Click the save button top right to the left of the login area. Beside it is the copy page button on hover it will say save as template.
Create a new page – top right – save, copy, use template button.
A lot of these things can be very similar on the backend and frontend.