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