Intro

The visual design aims at re-using design elements from the current Magnolia look & feel but clearly brings in some visual fresh-up. The aim is to have a visually simple, clear, distraction-free editing environment. The labels and form fields have a new design and the user is generally guided by text invitations. Title and Lead text are different from normal form fields. They have special font styles which at first glance already show what values they'll actually contain.

The following style guidelines contain the:

• General look & feel, Re-design of the forms and new "Add-image-pattern"
• Spacing & padding specifications
• Font styles for input text in forms
• Font styles for invitations in forms
• Focus specifications for Edit-Mode and Move/Delete-Mode

They are described in the images below.
All further UI components for the Article Editor will be described in follow-up issues.

Guidelines

General look & feel, Re-design of the forms and new "Add-image-pattern"

1. The forms have a new look: Labels are above the input field, the input field has no borders and contains invitations to guide the user.
2. We aim at introducing a collapsable dialog box for all kinds of meta data. We've heard it many times over that an editor wants to focus on writing an article and gets distracted by having to fill in loads of data before he can actually start writing the story. That's the reason why we want to enable to collapse/expand meta data which is only important one time and the user can choose at what point of time.
3. We also aim at introducing a new pattern to add an image: Before you add an image there is only a simple box with an invitation visible. By clicking in the box the "select-image" dialog opens as usual. Only after selecting an image we show the common form fields as is. The reason is to clarify the user experience and simplify the workflow.

Spacing & padding specifications

The spacing and padding is systematically built up and is designed for all three status of a form field: normal, with edit focus, with move/delete focus.

Font styles for input text in forms

We are using only the Verdana font but in different variations. As already mentioned above we particularly want to differ Title and Lead font styles from all other normal input fields.

Font styles for invitations in forms

Invitations font styles are slightly modified to the input text styles. They are bit lighter and italic.

Focus specifications for Edit-Mode and Move/Delete-Mode

The focus of the Edit-Mode has a light bg-color whereas the focus of the Move/Delete-Mode has a distinct border and a delete icon. The position of the delete icon is also the reason why the input field has a bigger padding from the right border so it will not collide with the delete icon.