Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionLast revisionBoth sides next revision | ||
design:start [2011/10/11 11:59] – [Accepted, Completed and Active Projects] ochosi | design: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 |
- | | **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/ | + | |
- | ===== Accepted, Completed and Active Projects ===== | + | Source: |
+ | * **[[https:// | ||
- | * **Thunar** | + | {{xfce-color-palette.svg? |
- | * [[design: | + | |
- | * [[design: | + | |
- | * **xfce4-appfinder** | + | |
- | * [[design: | + | |
- | * **xfwm4-tabwin** | + | |
- | * [[design: | + | |
- | * **Session-menu/ | + | |
- | * [[design: | + | |
- | * **xfce4-profile-manager** | + | |
- | * [[design: | + | |
- | * **Ristretto** | + | |
- | * [[design: | + | |
- | * [[design: | + | |
- | ===== 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** --- // | + | ===== 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:// | + | |
- | * **Thunar: Add a persistent, editable UI to copy/move files** | + | |
- | * 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/ | + | |
- | ==== Smaller Tasks and UI Improvements | + | |
- | * **< | + | |
- | * The current | + | ==== Icon Colors ==== |
- | * Not true, it renders | + | |
- | * After testing this a bit I have to say the unified look doesn' | + | Xfce icons use the [[design: |
- | * **Terminal: Make tabs look the same as in other programs**. | + | |
- | * See https:// | + | |
- | * I agree the tabs look nicer, but the border around | + | ==== Icon Sizes ==== |
- | * **Notifications: | + | |
- | * Xfce's brightness-notifications (which come from power-manager) have a different style than all other notifications. They' | + | Xfce supports icon sizes of 16px, 24px, 32px, 48px, 64px, 96px, and 128px. Application icons should be provided for all supported sizes. |
- | * I think we should | + | |
- | * I like the idea of having a few notifications displayed differently, like the screen brightness | + | |
- | | + | ==== Icon Margins ==== |
- | * When you create | + | |
- | * **Simplify Thunar toolbar removing some shortcut menu** --- // | + | The icon sizes above list the final size of the SVG or the PNG, the full page size. But all icons above 16px should |
- | * Thunar with toolbar have 4 different shortcut menu or button. I propose | + | |
- | * I agree that some elements in the toolbar are redundant | + | |
- | * 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. | + | ==== Icon Shapes ==== |
- | * **xfwm4-tabwin** //[[nick@afternight.org|nickl]] 2011/ | + | |
- | * 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. | + | There are no hard rules on icon shapes, but the main content of the icon should stay within certain limits |
- | * 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. | + | |
- | * **Design a good, default wallpaper for Xfce.** --- //[[pasi@shimmerproject.org|Pasi Lallinaho]] 2011/06/23 11:47// | + | ==== Icon Borders ==== |
- | * **Make one-click work both in Thunar AND on the desktop.** Please. This is a VERY serious annoyance. | + | |
- | * **Design a nicer mouse pointer, with curve borders** | + | Icons should have a 1px border at all sizes except at 128px. 128px icons are used as scalable icons and have no borders. |
+ | |||
+ | |||
+ | ==== Icon Corners ==== | ||
+ | |||
+ | 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 | ||
+ | |||
+ | <note important> | ||
+ | |||
+ | |||
+ | ==== 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]] |