Difference between revisions of "FLUX UI"

From Apache OpenOffice Wiki
Jump to: navigation, search
m (Current Color Palette: added link to proposed palette)
(Specific Ideas)
 
(31 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
{| style="border: thin dashed #CC2222; padding:5px"
 
{| style="border: thin dashed #CC2222; padding:5px"
 
|-  
 
|-  
| '''Please do not make major edits on this page unless you are on the FLUX UI Team.''' Your feedback and comments are welcomed on the mailing list.
+
| '''Please do not make major edits on this page unless you are on the FLUX UI Team.''' Your feedback and comments are welcomed in the appropriate sections or on the mailing list.
 
|}<br>
 
|}<br>
  
 
=About the project=
 
=About the project=
'''FLUX UI''', or '''FLUX User Interface''', is a user interface design proposal for OpenOffice.org initially developed by Joshua Martin, Stephan Ruben, and Mikko Lehmitsolo but whose development has grown to be a community effort. The ongoing mantra, or constitution, of the development process has been the three statements as follows:
+
'''FLUX UI''', or '''FLUX User Interface''', is a user interface design proposal for OpenOffice.org initially developed by Joshua Martin, Stefan Roeben, and Mikko Lehmitsolo but whose development has grown to be a community effort. Three design principles guide the design's development:
  
 
* The document is the most important UI element.
 
* The document is the most important UI element.
Line 43: Line 43:
 
*Joshua User ID: [[User:Josmar52789|Josmar52789]]
 
*Joshua User ID: [[User:Josmar52789|Josmar52789]]
 
*Knoxy User ID: [[User:Ak13|AK13]]
 
*Knoxy User ID: [[User:Ak13|AK13]]
*Pranav User ID:[[User:Pranavrules|Pranavrules]]
+
*Pranav User ID:[[User:Pranavrules| Pranavrules]]
 
|
 
|
 
*The Brains
 
*The Brains
Line 49: Line 49:
 
*The Beauty
 
*The Beauty
 
|}
 
|}
 
  
 
=The Concept=
 
=The Concept=
==Current Image==
+
==Current Image: Writer==
[[Image:Writer_horizontal_accordion4.png|776px|thumb|center|A screenshot of the FLUX UI (Last Updated on February, 17th 2009)]]
+
[[Image:Writer_horizontal_accordion4.png|776px|thumb|center|A screenshot of the FLUX UI (Last Updated on February 17th 2009)]]
 +
Additional Images:
 +
 
 +
==Current Image: Impress==
 +
[[Image:Impress-proposal-mockup-2.png|776px|thumb|center|A screenshot of the FLUX UI design proposal for project Renaissance (Last Updated on May 12th 2009) <br>''Note that this proposal was designed to be in accordance with submission regulations, and does not fully represent the feature rich version envisioned by the team.'']]
 +
 
 +
==Impress Proposal==
 +
The Flux UI team, headed by Joshua Martin, has submitted a [http://wiki.services.openoffice.org/wiki/Proposal_by_Knoxy design proposal for Impress] through the Renaissance Project. Abiding by the guidelines for the proposal, the team was limited in that we could not introduce features not already present, merely architecture/hierarchy/functionality. For complete guidelines please visit [http://wiki.services.openoffice.org/wiki/Renaissance/Design_Proposals_for_%E2%80%9CAccessing_Functionality%E2%80%9D#Principles The Design Proposal Guidelines Page].
  
Additional Images:
 
 
==Specific Ideas==
 
==Specific Ideas==
 
{| class="prettytable" border="1" width="100%"
 
{| class="prettytable" border="1" width="100%"
Line 61: Line 66:
 
! Concept Title
 
! Concept Title
 
! Image
 
! Image
! Explanation, please sign your name with <nowiki>(~~~~)</nowiki>
+
! Explanation, please sign your name with <nowiki>"~~~"</nowiki>
 
! Comments & Suggestions
 
! Comments & Suggestions
  
Line 72: Line 77:
 
|- style="vertical-align: top;"
 
|- style="vertical-align: top;"
 
| Image-Strip Scrollbar
 
| Image-Strip Scrollbar
| [[Image:Scrollbar.jpeg]]
+
| [[Image:Scrollbar.jpeg|275px]]
 +
[http://wiki.services.openoffice.org/wiki/Image:Scrollbar_B.jpg Second Image] One up display in the FLUX UI
 +
 
 +
[http://wiki.services.openoffice.org/wiki/Image:ScrollbarC.jpg Third Image] One up display in OOo 3.x
 +
 
 +
[http://wiki.services.openoffice.org/wiki/Image:Sliderdouble.jpeg Fourth Image] Showing the two-up display
 +
 
 +
For a gimp version of the third/fourth image please contact me.
 
| The image strip scrollbar is a vertical set of thumbnail images positioned to the left of the vertical scrollbar. This image strip allows the user to navigate their document with more precision. Features of the I-S S are;
 
| The image strip scrollbar is a vertical set of thumbnail images positioned to the left of the vertical scrollbar. This image strip allows the user to navigate their document with more precision. Features of the I-S S are;
 
*A variable width based on the length of the document.
 
*A variable width based on the length of the document.
Line 79: Line 91:
 
*Right clicking on the window gives immediate access to zoom options
 
*Right clicking on the window gives immediate access to zoom options
 
*An icon to collapse the image strip to a scrollbar, as a means of saving screen real estate or hiding the image-strip for those that prefer a scrollbar.
 
*An icon to collapse the image strip to a scrollbar, as a means of saving screen real estate or hiding the image-strip for those that prefer a scrollbar.
([[User:Ak13|Ak13]] 17:00, 17 February 2009 (UTC))
+
*The images in view bar should reflect the zoom setting as well whether it be page width or text width
 +
These features aren't implemented in all of the images. I wanted to show variety.
 +
[[User:Ak13|Ak13]]
 
| What about an effect affecting each page size, such as in mac OS X Dock? In this way, the feature could be accessed whatever the number of pages, window size and zoom level. It could also use more screen space for the selected one. The pages images and the "window" could also appear only after a short pause in drag-and-drop, to assist the user without taking screen space in normal operations.
 
| What about an effect affecting each page size, such as in mac OS X Dock? In this way, the feature could be accessed whatever the number of pages, window size and zoom level. It could also use more screen space for the selected one. The pages images and the "window" could also appear only after a short pause in drag-and-drop, to assist the user without taking screen space in normal operations.
  
Line 89: Line 103:
 
| Tabs
 
| Tabs
 
|
 
|
|  
+
| Tab styling could be as simple as that which is employed in Firefox or as complex as Chrome. The main functionality that I am referring to is dragging a tab out of the window. This functionality allows the user to compare documents and copy/paste information between the two easily, while offering the organization of tabbed browsing.
 +
When screen real estate is demanding it could be possible for the tabs to condense to an icon of the program.
 +
[[User:Ak13|Ak13]]
 +
|
 +
 
 +
|- style="vertical-align: top;"
 +
| Writer: Zoom Slider
 +
| [[Image:Zoom_Slider_GearStick_real_size.png|275px]]
 +
| This concept is from [[User:Clément Pillias|Clément Pillias]] page on the [http://wiki.services.openoffice.org/wiki/Zoom_Slider Zoom Slider]. Please visit it for a full description.
 +
|
 +
 
 +
|- style="vertical-align: top;"
 +
| Impress: Zoom Slider
 +
| [[Image:Zoom_slider_impress.jpeg]]
 +
| Following [[User:Clément Pillias|Clément Pillias]]' design, the zoom slider for Impress could cover not just page size but the other "view options." Shown in the image are (clockwise)
 +
* real
 +
* handout
 +
* slide sorter
 +
* notes
 +
* and outline.
 +
I would expect the graphics design group would want to overhaul these icons, but I thought it was a good start.
 +
[[User:Ak13|Ak13]]
 +
|
 +
 
 +
|- style="vertical-align: top;"
 +
| Calc: Transparency / Style Layers
 +
|
 +
| The idea is particular to spreadsheet applications. Basically the idea would be to create a transparency (or layer) over the document that can be hidden or shown with ease. This would allow for graphical specific highlighting, not context sensitive. This would also allow different style sheets to be turned on/off to make certain information stand out.
 +
[[User:Ak13|Ak13]]
 
|
 
|
  
Line 100: Line 142:
 
|}
 
|}
  
==Current Color Palette==
+
==Working Color Palette==
 
The current color palette is in the process of being assembled. Possible considerations for the color palette include the [http://ui.openoffice.org/VisualDesign/OOo_galaxy.html User Interface: Visual Design Groups work with the Galaxy Icon Palette].
 
The current color palette is in the process of being assembled. Possible considerations for the color palette include the [http://ui.openoffice.org/VisualDesign/OOo_galaxy.html User Interface: Visual Design Groups work with the Galaxy Icon Palette].
  
Here is a proposed palette - [[Media:luxui-palette-1.svg]]
+
Proposed Palette 1 - [[Media:Fluxui-palette-1.svg]]
 +
*[http://kuler.adobe.com/#themeID/472549 Colors pulled from images]
 +
*
  
=Files=
+
Proposed Palette 2 - [http://kuler.adobe.com/#themeID/472464 Light sand, Bright highlight, Coal borders], by Knoxy
  
 +
Proposed Palette 3 - [http://kuler.adobe.com/#themeID/472452 Dark sand, Light rocks, Bright highlights], by Knoxy
 +
 +
Proposed Palette 4 - [http://kuler.adobe.com/#themeID/472459 Light sand, Dark rocks, Deep highlights], by Knoxy
 +
 +
Proposed Palette 5 - [http://kuler.adobe.com/#themeID/472516 Contrast & Concentration], by Knoxy
 +
 +
=Files=
 +
'''Writer Files'''
 
* [[Image:Writer.odg]]: Original OpenOffice.org Draw file created by Joshua Martin. Includes most of the work throughout the life of FLUX UI.)
 
* [[Image:Writer.odg]]: Original OpenOffice.org Draw file created by Joshua Martin. Includes most of the work throughout the life of FLUX UI.)
 +
 +
'''Impress Files'''
 +
* [[Media:Call_for_Design_Proposals_-_Impress.odp|Call for Design Proposals Presentation]].
 +
* [[Media:FLUX-Proposal-Impress.odg|Original Draw file for FLUX UI Impress Proposal]]
  
 
[[Category:UX Idea]]
 
[[Category:UX Idea]]
 
  
 
=External Links=
 
=External Links=
 +
*Knoxy has worked on a redesign of the Start Center, which can be found under the title [http://wiki.services.openoffice.org/wiki/User_Experience/StartCenter#Mockups Galaxy Start].
 +
*[http://wiki.services.openoffice.org/wiki/Renaissance/Design_Proposals_for_%E2%80%9CAccessing_Functionality%E2%80%9D#Design_Proposals_Submitted Design proposals by other groups] for the Renaissance remodel of Impress
 +
*Check out our google group ([http://groups.google.com/group/flux-control-panel FLUX Control panel]) to join the mailing list, and learn more about the project
 
*[http://ux.openoffice.org/ The User Experience Project]
 
*[http://ux.openoffice.org/ The User Experience Project]
 
**[http://wiki.services.openoffice.org/wiki/HowTo_Join_the_User_Experience_Community Join the UX team]
 
**[http://wiki.services.openoffice.org/wiki/HowTo_Join_the_User_Experience_Community Join the UX team]
 
*[http://wiki.services.openoffice.org/wiki/Renaissance The Renaissance Project]
 
*[http://wiki.services.openoffice.org/wiki/Renaissance The Renaissance Project]
 +
 +
==Other User Interface Concepts==
 +
*[http://wiki.services.openoffice.org/wiki/DaVinci DaVinci User Interface Concept]
 +
*[http://wiki.services.openoffice.org/wiki/Iced_Coffee Iced Coffee User Interface Concept]

Latest revision as of 17:32, 29 May 2009

Please do not make major edits on this page unless you are on the FLUX UI Team. Your feedback and comments are welcomed in the appropriate sections or on the mailing list.

About the project

FLUX UI, or FLUX User Interface, is a user interface design proposal for OpenOffice.org initially developed by Joshua Martin, Stefan Roeben, and Mikko Lehmitsolo but whose development has grown to be a community effort. Three design principles guide the design's development:

  • The document is the most important UI element.
  • Don't show the user what he/she doesn't need at the moment (context sensitivity).
  • Don't focus on a single UI element (i.e. Ribbon, Menus, Tabs) - use a hybrid of elements so that the information is displayed in the most appropriate way.


Contact Us or Contribute

Anyone is welcome to contribute. Your comments and questions will reach us at either e-mail address, and are more likely to be considered than contacting us individually.

Communication Channel Address Information
E-Mail
  • Contact just the flux group

  • Contact the Renaissance Projects User Experience Group
IRC irc.freenode.net #ux.openoffice.org Weekly meetings are held on Monday morning at 10AM EST (-5:00), though you may be able to find us floating around the channel during other hours.
  • aknoxy
  • josmar52789
Active Members
  • The Brains
  • The Brawn
  • The Beauty

The Concept

Current Image: Writer

A screenshot of the FLUX UI (Last Updated on February 17th 2009)

Additional Images:

Current Image: Impress

A screenshot of the FLUX UI design proposal for project Renaissance (Last Updated on May 12th 2009)
Note that this proposal was designed to be in accordance with submission regulations, and does not fully represent the feature rich version envisioned by the team.

Impress Proposal

The Flux UI team, headed by Joshua Martin, has submitted a design proposal for Impress through the Renaissance Project. Abiding by the guidelines for the proposal, the team was limited in that we could not introduce features not already present, merely architecture/hierarchy/functionality. For complete guidelines please visit The Design Proposal Guidelines Page.

Specific Ideas

Concept Title Image Explanation, please sign your name with "~~~" Comments & Suggestions
Accordian Toolbar Explanation of the Accordian Toolbar
Image-Strip Scrollbar Scrollbar.jpeg

Second Image One up display in the FLUX UI

Third Image One up display in OOo 3.x

Fourth Image Showing the two-up display

For a gimp version of the third/fourth image please contact me.

The image strip scrollbar is a vertical set of thumbnail images positioned to the left of the vertical scrollbar. This image strip allows the user to navigate their document with more precision. Features of the I-S S are;
  • A variable width based on the length of the document.
  • When a certain document length is reached the width of the images makes it useless, and it should collapse to a simple scrollbar.
  • A "window" that mirrors what is visible on screen, and adjusts to show the current zoom state.
  • Right clicking on the window gives immediate access to zoom options
  • An icon to collapse the image strip to a scrollbar, as a means of saving screen real estate or hiding the image-strip for those that prefer a scrollbar.
  • The images in view bar should reflect the zoom setting as well whether it be page width or text width

These features aren't implemented in all of the images. I wanted to show variety. Ak13

What about an effect affecting each page size, such as in mac OS X Dock? In this way, the feature could be accessed whatever the number of pages, window size and zoom level. It could also use more screen space for the selected one. The pages images and the "window" could also appear only after a short pause in drag-and-drop, to assist the user without taking screen space in normal operations.

And what about multi-pages view (e.g. when two pages are displayed on screen?)

Clément Pillias 18:42, 17 February 2009 (UTC)

Tabs Tab styling could be as simple as that which is employed in Firefox or as complex as Chrome. The main functionality that I am referring to is dragging a tab out of the window. This functionality allows the user to compare documents and copy/paste information between the two easily, while offering the organization of tabbed browsing.

When screen real estate is demanding it could be possible for the tabs to condense to an icon of the program. Ak13

Writer: Zoom Slider Zoom Slider GearStick real size.png This concept is from Clément Pillias page on the Zoom Slider. Please visit it for a full description.
Impress: Zoom Slider Zoom slider impress.jpeg Following Clément Pillias' design, the zoom slider for Impress could cover not just page size but the other "view options." Shown in the image are (clockwise)
  • real
  • handout
  • slide sorter
  • notes
  • and outline.

I would expect the graphics design group would want to overhaul these icons, but I thought it was a good start. Ak13

Calc: Transparency / Style Layers The idea is particular to spreadsheet applications. Basically the idea would be to create a transparency (or layer) over the document that can be hidden or shown with ease. This would allow for graphical specific highlighting, not context sensitive. This would also allow different style sheets to be turned on/off to make certain information stand out.

Ak13

Example Row

Working Color Palette

The current color palette is in the process of being assembled. Possible considerations for the color palette include the User Interface: Visual Design Groups work with the Galaxy Icon Palette.

Proposed Palette 1 - Media:Fluxui-palette-1.svg

Proposed Palette 2 - Light sand, Bright highlight, Coal borders, by Knoxy

Proposed Palette 3 - Dark sand, Light rocks, Bright highlights, by Knoxy

Proposed Palette 4 - Light sand, Dark rocks, Deep highlights, by Knoxy

Proposed Palette 5 - Contrast & Concentration, by Knoxy

Files

Writer Files

  • File:Writer.odg: Original OpenOffice.org Draw file created by Joshua Martin. Includes most of the work throughout the life of FLUX UI.)

Impress Files

External Links

Other User Interface Concepts

Personal tools