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 [2019/03/25 12:21] – [Big Tasks] blueberrybrownie | 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 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. | + | * **[[#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** | + | | :--: | :--: | :--: | :--: | |
- | * [[design:thunar:window-layout|Improvement of the Window Layout]] | + | | {{midnight-1.png|}} | # |
- | * [[design: | + | | {{midnight-2.png|}} | # |
- | * Simplify Thunar toolbar | + | | {{midnight-3.png|}} | #344958 | (52, 73, 88) | Midnight 3 | |
- | * **xfce4-appfinder** | + | | {{midnight-4.png|}} | #263742 | (38, 55, 66) | Midnight 4 | |
- | * [[design: | + | | {{midnight-5.png|}} | #070c0f | (7, 12, 15) | Midnight 5 | |
- | * **xfwm4-tabwin** | + | | {{grey-1.png|}} | #f1f3f5 | (241, 243, 245) | Grey 1 | |
- | * [[design: | + | | {{grey-2.png|}} | #d2d8dc | (210, 216, 220) | Grey 2 | |
- | * **Session-menu/Action-buttons/ | + | | {{grey-3.png|}} | #bcc5ca | (188, 197, 202) | Grey 3 | |
- | * [[design: | + | | {{grey-4.png|}} | #a7b0b7 | (167, 176, 183) | Grey 4 | |
- | * **Ristretto** | + | | {{grey-5.png|}} | # |
- | * [[design: | + | | {{blue-1.png|}} | #c1ebf7 | (193, 235, 247) | Blue 1 | |
- | * [[design: | + | | {{blue-2.png|}} | # |
- | * **xfdesktop-settings** | + | | {{blue-3.png|}} | #00aade | (0, 170, 222) | Blue 3 | |
- | * [[design: | + | | {{blue-4.png|}} | #006888 | (0, 104, 136) | Blue 4 | |
- | * **xfce4-settings** | + | | {{blue-5.png|}} | #003445 | (0, 52, 69) | Blue 5 | |
- | * [[design: | + | | {{green-1.png|}} | #d7fdb2 | (215, 253, 178) | Green 1 | |
- | * **Parole** | + | | {{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]] | ||
+ | ---- | ||
- | ===== Project Proposals | + | ===== Application Icons ===== |
- | 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 ==== | + | ==== Icon Colors |
- | * **xfce4-settings: | + | Xfce icons use the [[design:start#Color Palette|Xfce color palette]] and have a flat look using solid colors and no gradients. |
- | * [[design:xfce4-settings: | + | |
- | * [[design: | + | |
- | * **Thunar: Improve the file operation progress dialog** --- // | + | ==== Icon Sizes ==== |
- | | + | |
- | * **Thunar: Add a persistent, editable UI to copy/move files** | + | Xfce supports icon sizes of 16px, 24px, 32px, 48px, 64px, 96px, and 128px. Application icons should be provided for all supported 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 | + | |
- | * **xfce4-session: | + | ==== Icon Margins ==== |
- | * [[design:xfce4-session: | + | |
- | * **xfce4-networkmanager** --- // | + | The icon sizes above list the final size of the SVG or the PNG, the full page size. But all icons above 16px should |
- | * [[design: | + | |
- | ==== Smaller Tasks and UI Improvements | + | |
- | * **Thunar: Show free-space-status of devices in sidebar** | + | ==== Icon Shapes ==== |
- | * [[design/ | + | |
- | * **Clean up the theme and wallpaper collection.** Include Shimmer themes in the collection. | + | There are no hard rules on icon shapes, but the main content |
- | * 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 | + | |
- | * **Design a good, default wallpaper for Xfce.** --- // | + | |
- | | + | ==== Icon Borders ==== |
- | | + | |
- | * [[http:// | + | Icons should have a 1px border at all sizes except at 128px. 128px icons are used as scalable icons and have no borders. |
- | * I second this propose. In my case every workspace has their own fuction | + | |
- | * **Change default window shadows** | + | |
- | * Xfwm4 window shadows are almost symmetrical, | + | ==== Icon Corners ==== |
- | * **Xfce4-session: | + | |
- | * [[https://wiki.xfce.org/design/ | + | Square and rectangular icons use rounded corners (see the [[design:start#Icon Dimensions Table]] below). Elements within icons should generally also use rounded corners. |
- | * **Menu bars: More consistency ** | + | |
- | * Introduce setting | + | |
- | * Introduce common shortcut to temporarily display menu bar (many non-Xfce applications use '' | + | ==== Icon Position |
+ | |||
+ | All icons should be centered both horizontally | ||
+ | |||
+ | <note important> | ||
+ | |||
+ | |||
+ | ==== Icon Dimensions Table ==== | ||
+ | |||
+ | ^ Icon Size ^ Square/Rectangle Corner Radius | ||
+ | | 16px | 2px | 16px (0px) | 16px (0px) | 1px | | ||
+ | | 24px | 3px | 20px (2px) | ||
+ | | 32px | 3px | 28px (2px) | 30px (1px) | 1px | ||
+ | | 48px | 4px | 40px (4px) | ||
+ | | 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 |