Commit 89be8c9c authored by Nate Graham's avatar Nate Graham 🔩

Revamp Icon Design and Emblem pages

Summary:
Rewrote the Icons page with the following goals in mind:
- Offer concrete guidelines to help people design new icons
- Accurately describe existing icon conventions
- Document the dynamic color changing mechanism for monochrome icons
- Replace outdated images
- Be more focused and less rambling/stream-of-consciousness-ey

Also adjusted the Emblems page to point to the new icons page, where applicable.

Test Plan:
Your best bet is probably to compile it and read the pages yourself (see
https://hig.kde.org/resources/contribute.html#getting-started)

Reviewers: fabianr, #vdg, #kde_human_interface_guidelines, ndavis

Reviewed By: #vdg, ndavis

Subscribers: trickyricky26, abetts, ndavis

Tags: #kde_human_interface_guidelines

Differential Revision: https://phabricator.kde.org/D16848
parent a462c5a5
......@@ -43,15 +43,6 @@ Guidelines
Appearance
----------
An emblem that indicates status should take the form of a light-colored symbol
on top of a brightly-colored shape.
.. figure:: /img/emblem-warning.png
:alt:
Warning emblem
An emblem that indicates unread notifications should take the form of a
light-colored number inside a blue circle. The circle can become "pill-shaped"
if the number is very large.
......@@ -65,3 +56,6 @@ if the number is very large.
:alt:
Notification emblem with a large number
For symbolic icon emblems, see the :doc:`Breeze icon guidelines </style/icon>`.
<svg height="32" width="32" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h32v32H0z" fill="#1d99f3"/></svg>
<svg height="32" width="32" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h32v32H0z" fill="#f67400"/></svg>
source/img/Breeze-icon-design-1.png

11 KB | W: | H:

source/img/Breeze-icon-design-1.png

20.9 KB | W: | H:

source/img/Breeze-icon-design-1.png
source/img/Breeze-icon-design-1.png
source/img/Breeze-icon-design-1.png
source/img/Breeze-icon-design-1.png
  • 2-up
  • Swipe
  • Onion skin
source/img/Breeze-icon-design-14.png

21.8 KB | W: | H:

source/img/Breeze-icon-design-14.png

52.3 KB | W: | H:

source/img/Breeze-icon-design-14.png
source/img/Breeze-icon-design-14.png
source/img/Breeze-icon-design-14.png
source/img/Breeze-icon-design-14.png
  • 2-up
  • Swipe
  • Onion skin
source/img/Breeze-icon-design-15.png

18.8 KB | W: | H:

source/img/Breeze-icon-design-15.png

45.8 KB | W: | H:

source/img/Breeze-icon-design-15.png
source/img/Breeze-icon-design-15.png
source/img/Breeze-icon-design-15.png
source/img/Breeze-icon-design-15.png
  • 2-up
  • Swipe
  • Onion skin
source/img/Breeze-icon-design-2.png

1.78 KB | W: | H:

source/img/Breeze-icon-design-2.png

3.98 KB | W: | H:

source/img/Breeze-icon-design-2.png
source/img/Breeze-icon-design-2.png
source/img/Breeze-icon-design-2.png
source/img/Breeze-icon-design-2.png
  • 2-up
  • Swipe
  • Onion skin
source/img/Breeze-icon-design-3.png

5.76 KB | W: | H:

source/img/Breeze-icon-design-3.png

15.2 KB | W: | H:

source/img/Breeze-icon-design-3.png
source/img/Breeze-icon-design-3.png
source/img/Breeze-icon-design-3.png
source/img/Breeze-icon-design-3.png
  • 2-up
  • Swipe
  • Onion skin
source/img/Breeze-icon-design-4.png

17 KB | W: | H:

source/img/Breeze-icon-design-4.png

28.8 KB | W: | H:

source/img/Breeze-icon-design-4.png
source/img/Breeze-icon-design-4.png
source/img/Breeze-icon-design-4.png
source/img/Breeze-icon-design-4.png
  • 2-up
  • Swipe
  • Onion skin
source/img/Breeze-icon-design-8.png

9.48 KB | W: | H:

source/img/Breeze-icon-design-8.png

19.3 KB | W: | H:

source/img/Breeze-icon-design-8.png
source/img/Breeze-icon-design-8.png
source/img/Breeze-icon-design-8.png
source/img/Breeze-icon-design-8.png
  • 2-up
  • Swipe
  • Onion skin
<svg height="32" width="32" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h32v32H0z" fill="#2ecc71"/></svg>
<svg height="32" width="32" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h32v32H0z" fill="#27ae60"/></svg>
<svg height="32" width="32" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h32v32H0z" fill="#4d4d4d"/></svg>
<svg height="32" width="32" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h32v32H0z" fill="#3daee9"/></svg>
<svg height="32" width="32" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h32v32H0z" fill="#f47750"/></svg>
<svg height="32" width="32" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h32v32H0z" fill="#232629"/></svg>
source/img/HIGMonoIcons.png

4.33 KB | W: | H:

source/img/HIGMonoIcons.png

6.65 KB | W: | H:

source/img/HIGMonoIcons.png
source/img/HIGMonoIcons.png
source/img/HIGMonoIcons.png
source/img/HIGMonoIcons.png
  • 2-up
  • Swipe
  • Onion skin
source/img/Sample_color_icons.png

20.5 KB | W: | H:

source/img/Sample_color_icons.png

74.3 KB | W: | H:

source/img/Sample_color_icons.png
source/img/Sample_color_icons.png
source/img/Sample_color_icons.png
source/img/Sample_color_icons.png
  • 2-up
  • Swipe
  • Onion skin
source/img/emblem-public-on-folder.png

2.01 KB | W: | H:

source/img/emblem-public-on-folder.png

1.83 KB | W: | H:

source/img/emblem-public-on-folder.png
source/img/emblem-public-on-folder.png
source/img/emblem-public-on-folder.png
source/img/emblem-public-on-folder.png
  • 2-up
  • Swipe
  • Onion skin
This diff is collapsed.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment