nifi-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Rob Moran (JIRA)" <>
Subject [jira] [Updated] (NIFI-1323) UI visual design enhancement
Date Thu, 05 May 2016 19:09:12 GMT


Rob Moran updated NIFI-1323:
    Attachment: nifi-component-samples.png

*niif-component-samples* updated

Made some changes to the components to achieve a more consistent layout and treatment of status
items and bulletins. Also removed the 2px border-radius on all components.

> UI visual design enhancement
> ----------------------------
>                 Key: NIFI-1323
>                 URL:
>             Project: Apache NiFi
>          Issue Type: Improvement
>          Components: Core UI
>    Affects Versions: 1.0.0
>            Reporter: Rob Moran
>            Priority: Trivial
>         Attachments:, nifi-add-processor-dialog.png, nifi-component-samples.png,
nifi-configure-processor-properties-set-value.png, nifi-configure-processor-properties.png,
nifi-configure-processor-scheduling.png, nifi-configure-processor-settings.png, nifi-dialog-sample-@800px.png,
nifi-drop.svg, nifi-global-menu.png, nifi-interaction-and-menu-samples.png, nifi-lineage-graph-@800px.png,
nifi-logo.svg, nifi-sample-flow-@800px.png, nifi-sample-flow.png, nifi-shell-sample-@800px.png
> (I will attach mockups and supporting files as they become available)
> I am starting to work on a design to modernize the look and feel of the NiFi UI. The
initial focus of the design is to freshen the UI (flat design, SVG icons, etc.). Additionally,
the new design will propose usability improvements such as exposing more flow-related actions
into collapsible panes, improving hierarchy of information, etc.
> Going forward, the design plan is to help lay the foundation for other UI/UX related
issues such as those documented in NIFI-951.
> ---
> **
> Contains icon font and supporting files
> *nifi-add-processor-dialog.png*
> Dialog sample. This sample shows the 'Add Processor' dialog.
> *nifi-component-samples.png*
> To show styling for all components, as well as those components when a user is unauthorized
to access.
> *nifi-configure-processor-properties*
> *nifi-configure-processor-properties-set-value*
> *nifi-configure-processor-scheduling*
> *nifi-configure-processor-settings*
> Configure Processor dialog. See related Comments below (in Activity section).
> *nifi-dialog-sample-@800px*
> Dialog sample in 800px wide viewport. This sample shows the the 'Details' tab of a provenance
> *nifi-drop.svg*
> NiFi logo without 'nifi
> *nifi-global-menu*
> To show global menu
> *nifi-interaction-and-menu-samples.png*
> To demonstrate user interactions - hover states, tooltips, menus, etc.
> *nifi-lineage-graph-@800px*
> To show lineage graph with explicit action to get back to data provenance event list.
> *nifi-sample-flow-@800px*
> Shows a very useable UI down to around 800px in width. The thinking here is that at anything
lower than this, the NiFi user experience will change to more of a monitoring and/or administrative
type workflow. Future mockups will be created to illustrate this.
> *nifi-logo.svg*
> NiFi logo complete
> *nifi-sample-flow.png*
> Mockup of sample flow. Updated to show revised tool and status bars. Management related
actions will move to a menu via mouseover (see _nifi-global-menu_). Added benefits here include
reducing clutter and more user-friendly menu with text labels to reduce time spent scanning
only a large set of icons. This also helps gain valuable viewport width in a browser (see
> *nifi-shell-sample-@800px*
> Shell sample in 800px wide viewport. This sample shows the 'Data Provenance' table.

This message was sent by Atlassian JIRA

View raw message