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
Last revisionBoth sides next revision
design:start [2012/01/03 13:53] – [Smaller Tasks and UI Improvements] ochosidesign:start [2024/05/09 08:34] – Add initial icon information, dimensions 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 the consistency in the visual appearance of the Xfce desktop environment. 
  
-| **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/graphical improvement, usability/clean approaches |Mockups, artwork, CSS, ... | +
-| Jon Masters | jonmasters | UI roadmap, usability/clean approaches | Recent convert, can code |+
  
-===== Accepted, Completed and Active Projects =====+Source: 
 +  * **[[https://gitlab.xfce.org/newhoa/xfce-color-palette|]]**
  
-  * **Thunar** +{{xfce-color-palette.svg?600}}
-    * [[design:thunar:window-layout|Improvement of the Window Layout]] (Completed in May 2011) +
-    * [[design:thunar:shortcuts-pane|Redesign of the Shortcuts Pane]] (Accepted, Started in May 2011) +
-  * **xfce4-appfinder** +
-    * [[design:appfinder|Design of the xfce4-appfinder and xfrun4 merge]] (Accepted, Started in May 2011) +
-  * **xfwm4-tabwin** +
-    * [[design:xfwm4:tabwin|Allow the Alt-Tab Window to be Themed]] (Accepted in May 2011) +
-  * **Session-menu/Action-buttons/Xfswitch plugin** +
-    * [[design:panel:session-menu|Merge of the three plugins into one]] (Accepted, Started in July 2011) +
-  * **xfce4-profile-manager** +
-    * [[design:profile-manager|Profile Manager for xfce]] (Accepted, Started in Oct 2011) +
-  * **Ristretto** +
-    * [[design:ristretto:folder-concept|Implement "folder concept" in ristretto]] (Accepted, Started in Oct 2011) +
-    * [[design:ristretto:appicon|Rework ristretto's application icon]] (Accepted, Started in Oct 2011) +
-  * **xfce4-settings** +
-    * [[design:xfce4-settings:useraccounts|Design interface for managing user accounts]] +
-===== 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.+----
  
-==== Big Tasks ====+^ Color ^ Hexadecimal ^ RGB ^ Name ^ 
 +| :--: | :--: | :--: | :--: | 
 +| {{midnight-1.png|}} | #61757f | (97, 117, 127) | Midnight 1 | 
 +| {{midnight-2.png|}} | #485e6b | (72, 94, 107) | Midnight 2 | 
 +| {{midnight-3.png|}} | #344958 | (52, 73, 88) | Midnight 3 | 
 +| {{midnight-4.png|}} | #263742 | (38, 55, 66) | Midnight 4 | 
 +| {{midnight-5.png|}} | #070c0f | (7, 12, 15) | Midnight 5 | 
 +| {{grey-1.png|}} | #f1f3f5 | (241, 243, 245) | Grey 1 |  
 +| {{grey-2.png|}} | #d2d8dc | (210, 216, 220) | Grey 2 |  
 +| {{grey-3.png|}} | #bcc5ca | (188, 197, 202) | Grey 3 |  
 +| {{grey-4.png|}} | #a7b0b7 | (167, 176, 183) | Grey 4 |  
 +| {{grey-5.png|}} | #758087 | (117, 128, 135) | Grey 5 |  
 +| {{blue-1.png|}} | #c1ebf7 | (193, 235, 247) | Blue 1 |  
 +| {{blue-2.png|}} | #6acfec | (106, 207, 236) | Blue 2 |  
 +| {{blue-3.png|}} | #00aade | (0, 170, 222) | Blue 3 |  
 +| {{blue-4.png|}} | #006888 | (0, 104, 136) | Blue 4 |  
 +| {{blue-5.png|}} | #003445 | (0, 52, 69) | Blue 5 |  
 +| {{green-1.png|}} | #d7fdb2 | (215, 253, 178) | Green 1 |  
 +| {{green-2.png|}} | #aef766 | (174, 247, 102) | Green 2 |  
 +| {{green-3.png|}} | #6acc0a | (106, 204, 10) | Green 3 |  
 +| {{green-4.png|}} | #52a302 | (82, 163, 2) | Green 4 |  
 +| {{green-5.png|}} | #3c7902 | (60, 121, 2) | Green 5 |  
 +| {{yellow-1.png|}} | #fcf4c0 | (252, 244, 192) | Yellow 1 |  
 +| {{yellow-2.png|}} | #fbeb83 | (251, 235, 131) | Yellow 2 |  
 +| {{yellow-3.png|}} | #f9da02 | (249, 218, 2) | Yellow 3 |  
 +| {{yellow-4.png|}} | #dcb102 | (220, 177, 2) | Yellow 4 |  
 +| {{yellow-5.png|}} | #ad7702 | (173, 119, 2) | Yellow 5 |  
 +| {{red-orange-1.png|}} | #f3b6a6 | (243, 182, 166) | Red-Orange 1 |  
 +| {{red-orange-2.png|}} | #ec866a | (236, 134, 106) | Red-Orange 2 |  
 +| {{red-orange-3.png|}} | #e6461d | (230, 70, 29) | Red-Orange 3 |  
 +| {{red-orange-4.png|}} | #c02700 | (192, 39, 0) | Red-Orange 4 |  
 +| {{red-orange-5.png|}} | #851b00 | (133, 27, 0) | Red-Orange 5 |  
 +| {{purple-1.png|}} | #d4ade2 | (212, 173, 226) | Purple 1 |  
 +| {{purple-2.png|}} | #b97ace | (185, 122, 206) | Purple 2 |  
 +| {{purple-3.png|}} | #9c41bf | (156, 65, 191) | Purple 3 |  
 +| {{purple-4.png|}} | #753390 | (117, 51, 144) | Purple 4 |  
 +| {{purple-5.png|}} | #471d57 | (71, 29, 87) | Purple 5 |  
 +| {{brown-1.png|}} | #c6a798 | (198, 167, 152) | Brown 1 |  
 +| {{brown-2.png|}} | #a17a69 | (161, 122, 105) | Brown 2 |  
 +| {{brown-3.png|}} | #79503c | (121, 80, 60) | Brown 3 |  
 +| {{brown-4.png|}} | #603f2f | (96, 63, 47) | Brown 4 |  
 +| {{brown-5.png|}} | #4a3025 | (74, 48, 37) | Brown 5 |  
 +[[|Back to Top]] 
 +----
  
-  * **Thunar: Improve the file operation progress dialog** --- //[[jannis@xfce.org|Jannis Pohlmann]] 2011/05/26 19:15// +===== Application Icons ===== 
-    * 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://gezeiten.org/post/2009/09/Design-of-the-Thunar-Progress-Dialog + 
-  * **Thunar: Add a persistent, editable UI to copy/move files**  --- //[[jannis@xfce.org|Jannis Pohlmann]] 2011/09/20 15:40// +==== Icon Colors ==== 
-    * I've seen something like this in OS X recently: whenever drag-and-drop is initiated in Finder, [[http://www.techteam.gr/mac/screenshots/40050.jpg|a black drop area pops up]] at th 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 icons use the [[design:start#Color Palette|Xfce color palette]] and have a flat look using solid colors and no gradients. 
-==== Smaller Tasks and UI Improvements ==== + 
-  * **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// +==== Icon Sizes ==== 
-  * **Parole** + 
-    * [[Parole-UI|Improve Parole's UI]] --- //[[simon.steinbeiss@univie.ac.at|Simon Steinbeiß]] 2011/12/20 02:12// +Xfce supports icon sizes of 16px, 24px, 32px, 48px, 64px, 96px, and 128px. Application icons should be provided for all supported sizes. 
-  * **Terminal: Make tabs look the same as in other programs**.  + 
-    * See https://bugzilla.xfce.org/show_bug.cgi?id=7616 for more information. A [[https://bugzilla.xfce.org/attachment.cgi?id=3703|screenshots of the difference]] is in the bug too. + 
-      * I agree the tabs look nicer, but the border around the VteWidget is ugly and makes the terminal resize. --- //[[nick@xfce.org|Nick Schermer]] 2011/06/04 10:34// +==== Icon Margins ==== 
-  * **Notifications: inconsistency in xfce4-powermanager good or bad?*** --- //[[simon.steinbeiss@univie.ac.at|Simon Steinbeiß]] 2011/05/31 22:11// + 
-    * Xfce's brightness-notifications (which come from power-manager) have a different style than all other notifications. They're in the center of the screen, pretty much Mac-like. To be honest I like the looks and feel of it, but I'd suggest to make xfce4-volumed use the same style. These two types of notifications seem kinda different from the rest since they involve progressbars and change/appear on user-input (so in fact they're more "visual feedback" than "notification" imo), so a different style for them wouldn't break consistency. Obviously you can disagree as well and say xfce4-powermanager should use default notification bubbles like everything else. Either way, this could/should be resolved somehow. [[http://wiki.knome.fi/_media/shimmer:brightness.jpg|Screenshot illustrating the two different notification styles]] --- //[[simon.steinbeiss@univie.ac.at|Simon Steinbeiß]] 2011/05/31 22:11// +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. 
-      * I think we should pass these all through the notification daemon (ie what xfce4-volumed does). --- //[[nick@xfce.org|Nick Schermer]] 2011/06/01 09:06// + 
-      * I like the idea of having a few notifications displayed differently, like the screen brightness and the volume level. We could still implement this in xfce4-notifyd and extend the notification spec by a special message hint for this (similar to what Ubuntu introduced with notify-osd). Preferably, this style would look the same as the new xfwm4 tab window. (I think that's kinda important to maintain consistency). --- //[[jannis@xfce.org|Jannis Pohlmann]] 2011/06/02 14:26// + 
-  * **Thunar and keyboard** --- //[[pops451@gmail.com|pops]] 2011/06/05 13:23// +==== Icon Shapes ==== 
-    * 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. --- //[[pops451@gmail.com|pops]] 2011/06/05 13:23// + 
-  * **Simplify Thunar toolbar removing some shortcut menu** --- //[[pops451@gmail.com|pops]] 2011/06/05 14:08// +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. 
-    * Thunar with toolbar have 4 different shortcut menu or button. I propose to remove 2 of them to simplify the toolbar.[[http://pix.toile-libre.org/upload/original/1307275627.png|See here]] --- //[[pops451@gmail.com|pops]] 2011/06/05 14:08// + 
-    * I agree that some elements in the toolbar are redundant or require too much space. I would like to keep the completion popup button but maybe we can move it into the entry as a secondary icon. Another idea I have for simplifying the toolbar is to drop the history popup buttons and simply show the history menus after pressing the back/forward buttons for a certain amount of time. --- //[[jannis@xfce.org|Jannis Pohlmann]] 2011/06/09 17:15// + 
-      * I second the idea of dropping the home-shortcut and moving the arrow inside the entry, this makes total sense to me. I also agree with the history-popup-buttons, but maybe the different options to show the dropdown (e.g. firefox uses right-click) should be discussed. --- //[[simon.steinbeiss@univie.ac.at|Simon Steinbeiß]] 2011/06/23 15:55// +==== Icon Borders ==== 
-  * **xfwm4-tabwin** //[[nick@afternight.org|nickl]] 2011/06/05// + 
-    * Users should have the option of only showing the outline of the window (which is currently the only option) or the actual window itself, when alt-tabbing.  This is especially useful, for example, when you have many terminals open on a single desktop and what to see what's in each one.  +Icons should have a 1px border at all sizes except at 128px. 128px icons are used as scalable icons and have no borders. 
-      * Showing the window makes cycling slower and there is an option to cycle windows of the same application which helps with many terminals. See [[https://bugzilla.xfce.org/show_bug.cgi?id=2701|Bug 2701]] for more information on this matter. --- //[[peter@xfce.org|Peter de Ridder]] 2011/12/16 11:24// + 
-    * Would also be nice if the opacity of the window being shown could be selected.  + 
-  * **Clean up the theme and wallpaper collection.** Include Shimmer themes in the collection.  --- //[[pasi@shimmerproject.org|Pasi Lallinaho]] 2011/06/22 22:56// +==== 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. 
 + 
 + 
 +==== 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]]