Photoshop Files Guide 

The photoshop files created for the Genuine project are quite big and unfortunately got bit complicated since there were different variants tried on each branch which was followed up. Thus, this page should provide a guideline that explains which concept you should use from which file (and vice versa, what concepts does a file show).

Details about the different concepts shown here can be found on the concept page.

Magnolia UI 4.0 Light more dialog like.psd

Shortcut name: Magnolia 4.0 Dialog Style - ... or simply MDS - ...

Status: latest file, most appropriate 

Purpose of branch: align dialog design and Admin Central (basically to decide for one or the other color scheme).

Evolved from: Magnolia UI 4.0 Light.psd

General concepts shown:

  • color scheme
  • alignment of dialog and Admin Central style
  • alternative navigation style
  • final style of controls
  • toolbar at the bottom

Screenshots

Screenshots taken from that file.

Admin Central, alternative navigation


 
 

Admin Central, original layout & navigation 


 

Dialog with tabs


Magnolia UI 4.0 Light.psd 

Shortcut name: Magnolia 4.0 Light - ... or simply MLI - ...

Status: superseded by MDS

Purpose of branch: alternative color scheme (light background color).

Evolved from: Magnolia UI 4.0.psd

General concepts shown:

  • color scheme, light colors, less contrast
  • alignment of dialog and Admin Central style
  • final style of controls

Screenshots 

Admin Central 


 

Admin Central, Magnolia 3.x Colors


  

Magnolia UI 4.0 Preview Editing (Fullscreen).psd 

Shortcut name: Magnolia 4.0 Preview Editing Fullscreen - ... or simply MPEF - ...

Status: superseded by MDI

Purpose of branch: preview editing mode, fullscreen.

Evolved from: Magnolia 4.0 Preview Editing.psd

General concepts shown:

  • preview editing mode, fullscreen editing
  • floating/detached toolbar, toolbar organized by working aspects

Screenshots

Detached Toolbar (variants)

  • try to solve "icon mania" issue
  • support aspect oriented/task focused working (idea) 

Detached Toolbar with inline editing


 

Magnolia UI 4.0 Preview Editing.psd 

Shortcut name: Magnolia 4.0 Preview Editing - ... or simply MPE - ...

Status: superseded by MPE/MDI

Purpose of branch: show details of preview editing mode

Evolved from: Magnolia 4.0.psd

General concepts shown:

  • preview editing mode
  • inplace editing
  • toolbar (small, icons only, detached)
  • view mode switch (list vs. preview editing)
  • collapsible navigation

Screenshots

Hidden Navigation


Magnolia UI 4.0 List Editing.psd 

Shortcut name: Magnolia 4.0 - ... or simply MLE - ...

Status: superseded by MDI

Purpose of branch: show details of list editing mode

Evolved from: Magnolia 4.0.psd

General concepts shown:

  • list editing mode, editing content within generic layout
  • dialogs as views in Admin Central
  • lists: lists are normal components that can be used in dialogs
  • inplace editing: editors in lists are same controls/components as in preview editing mode
  • toolbar: less and smaller items

Screenshots

Admin Central



Magnolia UI 4.0.psd 

Shortcut name: Magnolia 4.0 - ... or simply MGNL4 - ...

Status: superseded by MDI

Purpose of branch: original design draft.

Evolved from: none.

General concepts shown:

  • tree
  • dialog
  • toolbar (big items with text)
  • general layout

Screenshots

Admin Central





  • No labels