Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
design:start [2017/09/29 15:11] – [Smaller Tasks and UI Improvements] soc | design:start [2024/05/09 09:06] (current) – Update gitlab link, clean up table a little, resize image for crisper borders newhoa | ||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== Xfce Design SIG (Special Interest Group) ====== | + | ~~NOTOC~~ |
- | The Xfce Design SIG aims at improving the usability and visual appearance of the Xfce desktop environment. Our goal is to bring interested users, designers and hackers together to ensure neither of them is working in a vacuum. By establishing a context in which they can collaborate on smaller and larger design-related projects we try to increase the chance of the proposed changes to be merged into the official Xfce repositories. | + | * **[[#Color Palette|Color Palette]]** |
+ | * **[[#Icon Standards|Icon Standards]]** | ||
- | ===== Members | + | ====== Xfce Design Standards ====== |
- | Members of the Design SIG are not appointed or elected. Everyone can participate! Feel free to add your name, interests and skills to the following list if you are striving for regular contributions to our ongoing design efforts. | + | The Xfce design standard aims at improving |
- | | **Name** | **IRC Nickname** | **Interests (In the SIG Context)** | **Skills (Applicable in the SIG Context)** | | + | ===== Color Palette |
- | | Simon Steinbeiß | ochosi | GTK theming; UI improvements | mockups, gtk-theming | | + | |
- | | Jannis Pohlmann | JPohlmann | Improve usability and visual appearance of Xfce | Knows Xfce well, can code | | + | |
- | | Nick Schermer | NSchermer | Same as above | Same as above | | + | |
- | | Pasi Lallinaho | knome | Any UI/ | + | |
- | | Jon Masters | jonmasters | UI roadmap, usability/ | + | |
- | | Steve Dodier-Lazaro | sidi | User studies, general UX roadmap | User research (field, interviews, online studies), can code | | + | |
- | ===== Accepted and Active Projects | + | |
- | * **xfce4-power-manager** | + | Source: |
- | * [[design:power-manager|Improvements for the Power Manager]] (Accepted, Started in Apr 2014) | + | * **[[https:// |
- | * **xfce4-profile-manager** | + | |
- | | + | |
- | | + | |
- | * [[design: | + | |
+ | {{xfce-color-palette.svg? | ||
+ | ---- | ||
- | ===== Completed Projects ===== | + | ^ Color ^ Hexadecimal ^ RGB ^ Name ^ |
- | * **Thunar** | + | | {{midnight-1.png? |
- | * [[design: | + | | {{midnight-2.png? |
- | * [[design: | + | | {{midnight-3.png? |
- | * Simplify Thunar toolbar | + | | {{midnight-4.png? |
- | * **xfce4-appfinder** | + | | {{midnight-5.png? |
- | * [[design: | + | | {{grey-1.png? |
- | * **xfwm4-tabwin** | + | | {{grey-2.png? |
- | * [[design: | + | | {{grey-3.png? |
- | * **Session-menu/Action-buttons/ | + | | {{grey-4.png? |
- | * [[design: | + | | {{grey-5.png? |
- | * **Ristretto** | + | | {{blue-1.png? |
- | * [[design: | + | | {{blue-2.png? |
- | * [[design: | + | | {{blue-3.png? |
- | * **xfdesktop-settings** | + | | {{blue-4.png? |
- | * [[design: | + | | {{blue-5.png? |
- | * **xfce4-settings** | + | | {{green-1.png? |
- | * [[design: | + | | {{green-2.png? |
- | * **Parole** | + | | {{green-3.png? |
- | * [[Parole-UI|Improve Parole' | + | | {{green-4.png? |
+ | | {{green-5.png? | ||
+ | | {{yellow-1.png? | ||
+ | | {{yellow-2.png? | ||
+ | | {{yellow-3.png? | ||
+ | | {{yellow-4.png? | ||
+ | | {{yellow-5.png? | ||
+ | | {{red-orange-1.png? | ||
+ | | {{red-orange-2.png? | ||
+ | | {{red-orange-3.png? | ||
+ | | {{red-orange-4.png? | ||
+ | | {{red-orange-5.png? | ||
+ | | {{purple-1.png? | ||
+ | | {{purple-2.png? | ||
+ | | {{purple-3.png? | ||
+ | | {{purple-4.png? | ||
+ | | {{purple-5.png? | ||
+ | | {{brown-1.png? | ||
+ | | {{brown-2.png? | ||
+ | | {{brown-3.png? | ||
+ | | {{brown-4.png? | ||
+ | | {{brown-5.png? | ||
- | ===== Project Proposals ===== | ||
- | Here you can propose new UI-related projects for the Design SIG to work on. Please provide a title and a short description and maybe a link to mockups and related information. | + | [[|Back |
+ | ---- | ||
- | ==== Big Tasks ==== | + | ===== Application Icons ===== |
- | * **xfce4-settings: | + | |
- | * [[design: | + | ==== Icon Colors ==== |
- | | + | |
- | * **Thunar: Improve the file operation progress dialog** --- // | + | Xfce icons use the [[design:start#Color Palette|Xfce color palette]] and have a flat look using solid colors and no gradients. |
- | * The current shared file operation progress dialog provides rather sparse information. It is not easy to decide what information //should// be displayed and how. | + | |
- | * Initial thoughts were written down here: http:// | + | |
- | * **Thunar: Add a persistent, editable UI to copy/move files** | + | ==== Icon Sizes ==== |
- | * I've seen something like this in OS X recently: whenever drag-and-drop is initiated in Finder, [[http:// | + | |
- | * Have a simple D-Bus service that allows to store/ | + | Xfce supports icon sizes of 16px, 24px, 32px, 48px, 64px, 96px, and 128px. Application icons should be provided for all supported sizes. |
- | * **xfce4-session: | + | |
- | * [[design: | + | |
- | * **xfce4-networkmanager** --- // | + | ==== Icon Margins ==== |
- | * [[design: | + | |
- | ==== Smaller Tasks and UI Improvements | + | The icon sizes above list the final size of the SVG or the PNG, the full page size. But all icons above 16px should have empty space around the icon content as margins. For example, for a square 64px icon, the square shape would be 56x56px, leaving 4px of empty space on all sides (making the final icon size 64x64px). The margin space needed increases as icon size increases. See the [[design: |
- | * **Thunar: Show free-space-status of devices in sidebar** | + | |
- | | + | |
- | * **Terminal: Make tabs look the same as in other programs**. | + | ==== Icon Shapes ==== |
- | * See https:// | + | |
- | * I agree the tabs look nicer, but the border around the VteWidget is ugly and makes the terminal resize. | + | There are no hard rules on icon shapes, but the main content of the icon should stay within certain limits and provide a certain amount of margins. The [[design:start#Icon Dimensions Table]] below provides details. Icons that are not square or circular should still be limited to the square size dimensions. Using a 48px icon as an example, the square should be 40x40px. A rectangular |
- | * **Thunar | + | |
- | * When you create a new folder or file, you type the name, press enter and then you want to open it by pressing enter a second time but you can't. Solution is to just make the file/folder selected after it was created. --- // | + | |
- | * **xfwm4-tabwin** // | + | ==== Icon Borders ==== |
- | * Users should have the option of only showing the outline of the window | + | |
- | * Showing the window makes cycling slower | + | Icons should have a 1px border at all sizes except at 128px. 128px icons are used as scalable icons and have no borders. |
- | * Would also be nice if the opacity of the window being shown could be selected. | + | |
- | | + | |
- | * I think that this can by a good solution for the gtk3-engine-xfce and the theme in gtk3, since nobody care for these component nor the theming, I think is good simply and for all select a non engine-dependant theme and whit popper maintainance. And make it the default. | + | ==== Icon Corners |
- | * **Design a good, default wallpaper for Xfce.** --- //[[pasi@shimmerproject.org|Pasi Lallinaho]] 2011/06/23 11:47// | + | |
- | * **Design a nicer mouse pointer, with curve borders** | + | Square and rectangular icons use rounded corners (see the [[design:start#Icon Dimensions Table]] below). Elements within icons should generally also use rounded corners. |
- | * **in the tasklist, group task according to the workspace (when you display task for all workspace)** --- //[[pops451@gmail.com|pops]] 2012/01/22 18:59// | + | |
- | * [[http:// | + | |
- | * I second this propose. In my case every workspace has their own fuction (one for web, another for communication tools, third one for development tools and so on) and displaying applications according to the workspace makes it very fast and easy for me to find out the correct application. I'm currently using Tint2 (multi_desktop mode) instead of xfce-panel because of this feature. //[[eyemonen@wippies.com|eyemonen]] 2012/12/04 12:46// | + | ==== Icon Position and Alignment ==== |
- | * **Change default window shadows** | + | |
- | * Xfwm4 window shadows are almost symmetrical, | + | All icons should be centered both horizontally |
- | * **Xfce4-session: | + | |
- | | + | <note important> |
- | * **Menu bars: More consistency ** | + | |
- | * Introduce setting to show/hide menu bar by default | + | |
- | * Introduce common shortcut to temporarily display menu bar | + | ==== Icon Dimensions Table ==== |
+ | |||
+ | ^ Icon Size ^ Square/Rectangle Corner Radius | ||
+ | | 16px | 2px | 16px (0px) | 16px (0px) | 1px | ||
+ | | 24px | 3px | 20px (2px) | 22px (1px) | 1px | | ||
+ | | 32px | 3px | 28px (2px) | 30px (1px) | 1px | | ||
+ | | 48px | 4px | 40px (4px) | 42px (3px) | 1px | | ||
+ | | 64px | 6px | 56px (4px) | 60px (2px) | 1px | | ||
+ | | 96px | 8px | 80px (8px) | 82px (8px) | 1px | | ||
+ | | 128px | 8px | 104px (12px) | ||
+ | |||
+ | |||
+ | ==== Icon Detail ==== | ||
+ | |||
+ | Icons should be fairly simple | ||
+ | |||
+ | |||
+ | ==== Icon Naming ==== | ||
+ | |||
+ | Application icons use the [[wp> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | [[|Back to Top]] | ||
+ | ---- | ||
+ | [[:|Back to main Xfce Wiki page]] | ||
+ | |||
+ | [[https://docs.xfce.org|Back to main Xfce documentation page]] |