Xfce Wiki

Sub domains
 

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
design:start [2024/02/24 10:03] – alexxconsdesign: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:
-<note important>Please note that all information on this page is outdated and might not be relevant anymore!</note>+~~NOTOC~~
  
-====== Xfce Design SIG (Special Interest Group) ======+  * **[[#Color Palette|Color Palette]]** 
 +  * **[[#Icon Standards|Icon Standards]]**
  
-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 that none of them are 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.+====== Xfce Design Standards ======
  
-===== Members =====+The Xfce design standard aims at improving the consistency in the visual appearance of the Xfce desktop environment. 
  
-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.+===== Color Palette =====
  
-| **Name** | **IRC Nickname** | **Interests (In the SIG Context)** | **Skills (Applicable in the SIG Context)** | +Source: 
-| Simon Steinbeiß | ochosi | GTK theming; UI improvements | mockups, gtk-theming | +  * **[[https://gitlab.xfce.org/artwork/xfce-color-palette|]]**
-| 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/graphical improvement, usability/clean approaches |Mockups, artwork, CSS, ... | +
-| Jon Masters | jonmasters | UI roadmap, usability/clean approaches | Recent convert, can code | +
-| Steve Dodier-Lazaro | sidi | User studies, general UX roadmap | User research (field, interviews, online studies), can code | +
-===== Accepted and Active Projects =====+
  
-  * **xfce4-power-manager** +{{xfce-color-palette.svg?534}}
-    * [[design:power-manager|Improvements for the Power Manager]] (Accepted, Started in Apr 2014) +
-  * **xfce4-profile-manager** +
-    * [[design:profile-manager|Profile Manager for xfce]] (Accepted, Started in Oct 2011) +
-  * **xfce4-settings** +
-    * [[design:xfce4-settings:useraccounts|Design interface for managing user accounts]]+
  
 +----
  
 +^ Color ^ Hexadecimal ^ RGB ^ Name ^
 +| {{midnight-1.png?nolink|}} | #61757f | (97, 117, 127) | Midnight 1 |
 +| {{midnight-2.png?nolink|}} | #485e6b | (72, 94, 107) | Midnight 2 |
 +| {{midnight-3.png?nolink|}} | #344958 | (52, 73, 88) | Midnight 3 |
 +| {{midnight-4.png?nolink|}} | #263742 | (38, 55, 66) | Midnight 4 |
 +| {{midnight-5.png?nolink|}} | #070c0f | (7, 12, 15) | Midnight 5 |
 +| {{grey-1.png?nolink|}} | #f1f3f5 | (241, 243, 245) | Grey 1 |
 +| {{grey-2.png?nolink|}} | #d2d8dc | (210, 216, 220) | Grey 2 |
 +| {{grey-3.png?nolink|}} | #bcc5ca | (188, 197, 202) | Grey 3 |
 +| {{grey-4.png?nolink|}} | #a7b0b7 | (167, 176, 183) | Grey 4 |
 +| {{grey-5.png?nolink|}} | #758087 | (117, 128, 135) | Grey 5 |
 +| {{blue-1.png?nolink|}} | #c1ebf7 | (193, 235, 247) | Blue 1 |
 +| {{blue-2.png?nolink|}} | #6acfec | (106, 207, 236) | Blue 2 |
 +| {{blue-3.png?nolink|}} | #00aade | (0, 170, 222) | Blue 3 |
 +| {{blue-4.png?nolink|}} | #006888 | (0, 104, 136) | Blue 4 |
 +| {{blue-5.png?nolink|}} | #003445 | (0, 52, 69) | Blue 5 |
 +| {{green-1.png?nolink|}} | #d7fdb2 | (215, 253, 178) | Green 1 |
 +| {{green-2.png?nolink|}} | #aef766 | (174, 247, 102) | Green 2 |
 +| {{green-3.png?nolink|}} | #6acc0a | (106, 204, 10) | Green 3 |
 +| {{green-4.png?nolink|}} | #52a302 | (82, 163, 2) | Green 4 |
 +| {{green-5.png?nolink|}} | #3c7902 | (60, 121, 2) | Green 5 |
 +| {{yellow-1.png?nolink|}} | #fcf4c0 | (252, 244, 192) | Yellow 1 |
 +| {{yellow-2.png?nolink|}} | #fbeb83 | (251, 235, 131) | Yellow 2 |
 +| {{yellow-3.png?nolink|}} | #f9da02 | (249, 218, 2) | Yellow 3 |
 +| {{yellow-4.png?nolink|}} | #dcb102 | (220, 177, 2) | Yellow 4 |
 +| {{yellow-5.png?nolink|}} | #ad7702 | (173, 119, 2) | Yellow 5 |
 +| {{red-orange-1.png?nolink|}} | #f3b6a6 | (243, 182, 166) | Red-Orange 1 |
 +| {{red-orange-2.png?nolink|}} | #ec866a | (236, 134, 106) | Red-Orange 2 |
 +| {{red-orange-3.png?nolink|}} | #e6461d | (230, 70, 29) | Red-Orange 3 |
 +| {{red-orange-4.png?nolink|}} | #c02700 | (192, 39, 0) | Red-Orange 4 |
 +| {{red-orange-5.png?nolink|}} | #851b00 | (133, 27, 0) | Red-Orange 5 |
 +| {{purple-1.png?nolink|}} | #d4ade2 | (212, 173, 226) | Purple 1 |
 +| {{purple-2.png?nolink|}} | #b97ace | (185, 122, 206) | Purple 2 |
 +| {{purple-3.png?nolink|}} | #9c41bf | (156, 65, 191) | Purple 3 |
 +| {{purple-4.png?nolink|}} | #753390 | (117, 51, 144) | Purple 4 |
 +| {{purple-5.png?nolink|}} | #471d57 | (71, 29, 87) | Purple 5 |
 +| {{brown-1.png?nolink|}} | #c6a798 | (198, 167, 152) | Brown 1 |
 +| {{brown-2.png?nolink|}} | #a17a69 | (161, 122, 105) | Brown 2 |
 +| {{brown-3.png?nolink|}} | #79503c | (121, 80, 60) | Brown 3 |
 +| {{brown-4.png?nolink|}} | #603f2f | (96, 63, 47) | Brown 4 |
 +| {{brown-5.png?nolink|}} | #4a3025 | (74, 48, 37) | Brown 5 |
  
-===== Completed Projects ===== 
-  * **Thunar** 
-    * [[design:thunar:window-layout|Improvement of the Window Layout]] (Completed in May 2011) 
-    * [[design:thunar:shortcuts-pane|Redesign of the Shortcuts Pane]] (Completed) 
-    * Simplify Thunar toolbar (Completed) 
-  * **xfce4-appfinder** 
-    * [[design:appfinder|Design of the xfce4-appfinder and xfrun4 merge]] (Completed) 
-  * **xfwm4-tabwin** 
-    * [[design:xfwm4:tabwin|Allow the Alt-Tab Window to be Themed]] (Completed) 
-  * **Session-menu/Action-buttons/Xfswitch plugin** 
-    * [[design:panel:session-menu|Merge of the three plugins into one]] (Completed) 
-  * **Ristretto** 
-    * [[design:ristretto:folder-concept|Implement "folder concept" in ristretto]] (Completed) 
-    * [[design:ristretto:appicon|Rework ristretto's application icon]] (Completed in Feb 2012) 
-  * **xfdesktop-settings** 
-    * [[design:xfdesktop:settings|Improve xfdesktop's settings UI]] (Completed) 
-  * **xfce4-settings**  (Completed) 
-    * [[design:xfce4-settings:display|Improve handling of multiple displays]] 
-  * **Parole**  (Completed) 
-    * [[Parole-UI|Improve Parole's UI]] 
  
-===== Project Proposals =====+[[|Back to Top]] 
 +----
  
-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.+===== Application Icons =====
  
-==== Big Tasks ==== 
  
-  * **xfce4-settings: Merge some settings panels** +==== Icon Colors ==== 
-    * [[design:xfce4-settings:mergedialogs|Proposal]] --- //[[simon@xfce.org|Simon Steinbeiß]] 2014/03/28 12:52// + 
-    * [[design:xfce4-settings:moremergedialogs|Proposal]] --- //[[simon@ochsenreither.de|Simon Ochsenreither]] 2017/09/28 12:00// +Xfce icons use the [[design:start#Color Palette|Xfce color palette]] and have a flat look using solid colors and no gradients. 
-  * **Thunar: Improve the file operation progress dialog** --- //[[jannis@xfce.org|Jannis Pohlmann]] 2011/05/26 19:15// + 
-    * The current shared file operation progress dialog provides rather sparse information. It is not easy to decide what information //should// be displayed and how.  + 
-  * **Thunar: Add a persistent, editable UI to copy/move files**  --- //[[jannis@xfce.org|Jannis Pohlmann]] 2011/09/20 15:40// +==== Icon Sizes ==== 
-    * I've seen something like this in OS X recently: whenever drag-and-drop is initiated in Finder, a black drop area pops up at the edge of the screen. Files can be dropped there and users can later drag them from the area back into another folder or application. We could do something similar. Here are some ideas:  + 
-      * Have a simple D-Bus service that allows to store/retrieve a list of URIs (potentially grouped by an application or task specific ID). Have a standalone application or a panel plugin implement this to visualize the files that are in memory. Maybe split up the visualization into a "copy" and a "cut" area. In Thunar, add URIs to this storage if Ctrl+C/Ctrl+X are pressed or whatever other methods there are to initiate a copy/cut operation. Heck, maybe even allow arbitrary objects to be stored instead of just URIs, perhaps using a semantic temporary storage. We could also think about defining standard storage group IDs for common purposes.  --- //[[jannis@xfce.org|Jannis Pohlmann]] 2011/09/20 15:40// +Xfce supports icon sizes of 16px, 24px, 32px, 48px, 64px, 96px, and 128px. Application icons should be provided for all supported sizes. 
-  * **xfce4-session:** Evaluate the session saving and resuming feature + 
-    * [[design:xfce4-session:sessionsaving|Evaluate the usability of session saving]] (Started in Nov 2014) + 
-==== Smaller Tasks and UI Improvements ==== +==== Icon Margins ==== 
-  * **Thunar: Show free-space-status of devices in sidebar** + 
-    * [[design/thunar/freespaceindicator|Show free space indicator in Thunar's sidebar]] --- //[[simon.steinbeiss@univie.ac.at|Simon Steinbeiß]] 2012/01/03 13:50// +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:start#Icon Dimensions Table]] below for details. 
-  * **Clean up the theme and wallpaper collection.** Include Shimmer themes in the collection.  --- //[[pasi@shimmerproject.org|Pasi Lallinaho]] 2011/06/22 22:56// + 
-    * 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. + 
-  * **Design a good, default wallpaper for Xfce.** --- //[[pasi@shimmerproject.org|Pasi Lallinaho]] 2011/06/23 11:47// +==== Icon Shapes ==== 
-  * **Design a nicer mouse pointer, with curve borders** + 
-  * **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// +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 or other shaped icon should be reduced either vertically or horizontally to create the shape, but it should not exceed the 40px size in either direction. Circular icons are an exception to this rule because they appear slightly smaller when rendered. Using the 48px icon as an example, if creating a fully circular icon, the circle would be 42x42px. 
-    * [[http://pix.toile-libre.org/upload/original/1327253668.png|See here]] --- //[[pops451@gmail.com|pops]] // + 
-    * 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// + 
-  * **Change default window shadows** +==== Icon Borders ==== 
-    * Xfwm4 window shadows are almost symmetrical, which doesn't look right with most of the Gtk themes. Also, many themes needlessly override these settings, preventing users from setting their own values. See https://bugzilla.xfce.org/show_bug.cgi?id=8408 for more information.  --- //[[ndrwrdck@gmail.com|Andrzej]] 2012/02/08 10:55// + 
-  * **Xfce4-session: Add options for gpg and ssh agent startup ** +Icons should have a 1px border at all sizes except at 128px. 128px icons are used as scalable icons and have no borders. 
-    * [[https://wiki.xfce.org/design/xfce4-session/gpg-ssh-agents|Redesign the Advanced tab of Session and Startup]] to allow the user to select how to handle their gpg and ssh keys. //eric_the_idiot 2015/02/15// + 
-  * **Menu bars: More consistency **  --- //[[simon@ochsenreither.de|Simon Ochsenreither]] 2017/09/28 12:00// + 
-    * Introduce setting to show/hide menu bar by default (probably using ''Gtk/ShellShowsMenubar'' underneath) +==== Icon Corners ==== 
-    * Introduce common shortcut to temporarily display menu bar (many non-Xfce applications use ''Alt'' for this purpose)+ 
 +Square and rectangular icons use rounded corners (see the [[design:start#Icon Dimensions Table]] below). Elements within icons should generally also use rounded corners. 
 + 
 + 
 +==== Icon Position and Alignment ==== 
 + 
 +All icons should be centered both horizontally and vertically. All elements of the icon should be grid-aligned; elements are considered grid-aligned when they are positioned (when they start and end) at whole-numbered pixel positions. In Inkscape, you can show the grid by going to View > Page Grid. Grid-aligned icons have sharp, clear borders and elements. Grid-unaligned icons are blurry. 
 + 
 +<note important>Scaling an icon to other sizes will make them and their elements grid-unaligned. It may also scale line thickness, and borders (which should always remain at 1px). Icon elements will have to be grid-aligned and line/border sizes checked at each size to avoid blurry icons.</note> 
 + 
 + 
 +==== Icon Dimensions Table ==== 
 + 
 +^  Icon Size  ^  Square/Rectangle Corner Radius  ^  Square Size (Margin)  ^  Circle Size (Margin)  ^  Border  ^ 
 +| 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)  |  106px (11px)  |  0px  | 
 + 
 + 
 +==== Icon Detail ==== 
 + 
 +Icons should be fairly simple and easy to understand. While a larger icon may be more detailed, detail in smaller icons should be reduced if needed to keep icons readable at small sizes. 
 + 
 + 
 +==== Icon Naming ==== 
 + 
 +Application icons use the [[wp>Reverse_domain_name_notation|rDNS]] naming (//e.g.// org.xfce.appname). Please refer to this list of [[releng:4.16:icons_rdns_naming_for_icons|Xfce rDNS icon names]] for more examples. When developing applications or plugins, icons used within your code (like action or status icons) should use names provided in the [[https://specifications.freedesktop.org/icon-naming-spec/icon-naming-spec-latest.html|FreeDesktop.org Icon Naming Specification]]. 
 + 
 + 
 + 
 + 
 +[[|Back to Top]] 
 +---- 
 +[[:|Back to main Xfce Wiki page]] 
 + 
 +[[https://docs.xfce.org|Back to main Xfce documentation page]]