-
Notifications
You must be signed in to change notification settings - Fork 364
UI Design Proposals
donspang edited this page Dec 24, 2014
·
4 revisions
Updated spec based on feedback from initial proposal which includes all tab designs with blueprint (font, color, layout) and interactions. Task level blueprints are included as applications of overall style.
Below is a set of UI design proposals covering all the major tab areas of Kimchi. The goals of the design effort include the following:
- Provide a complete user interface and visual style for all major tabs and tasks
- Maintain clean design and interactions in keeping with Kimchi directions
- Design flexible framework to allow for consistency when adding new capabilities
- Enable design to support responsiveness and touch / mobile (tablet / phone) interactions
Common design features and patterns across all of the areas, including:
- New header design intended to span full width of display (impacted by responsiveness)
- Consolidation of page actions from seperate task buttons to an actions drop down (dependent on selection)
- Gallery and table view visual and interaction enhancements
- Flexible filtering and sorting capabilities
Next steps
- Gather feedback on design
- Provide blueprint diagrams for interactions, style (layout, color, fonts), and responsiveness
- Complete task level designs
Features of the proposal include:
- Relocation of the shutdown / restart tasks to sub-header away from main page flow
- Improved visibility of performance trend graphs to top of page including visual design enhancements
Design images:
Features of the proposal include:
- Add guest task included as part of page header
- Visual design and interaction enhancements for the gallery view
- Horizontal bar graphs for guest resources (processor, memory, etc)
Design images:
- Guest tab design - gallery view
- Guest gallery actions menu
- Guest tab design - table view
- Guest table actions menu
Features of the proposal include:
- Visual design and interaction enhancements for the gallery view
- Add templates task included as part of page header
Design images:
- Template tab design - gallery view
- Template tab design - table view
- Templates actions menu
- Template filter view
Features of the proposal include:
- Add storage task included as part of page header
- New column for % used of storage pool with corresponding icon graphic of utlization for quick scanning
- Wrapping of volume headers to support viewing of full name
- Volume % used icon graphic following storage pool
Design images:
- Storage tab design - gallery view
- Storage tab design - table view
- Storage actions menu - activate
- Storage actions menu - deactivate
- Storage filter view
Features of the proposal include:
- Add network task included as part of page header
Design images:
