Merge pull request #130 from bertob/quality-examples

quality guidelines: add illustrations for icons

docs/02-for-app-authors/03-appdata-guidelines/01-quality-guidelines.mdx

@@ -36,15 +36,19 @@ You can use the following grid to check if your icon has a reasonable footprint:
 
 <AppIconGrid className="appIconGrid svgColor" />
 
-![Example footprints](./assets/app-icon-footprint.png)
+![Examples of icons with footprints that are too large, too small, and just right.](assets/app-icon-footprint.png)
 
 ### Good contrast
 
 The icon should have good contrast on dark and light backgrounds. In particular, avoid single-color glyphs and the like since they can be very hard to see if the background color is similar. Dark colors near the edges are also a problem, since shadows don't help much with contrast on dark backgrounds.
 
+![Illustration of why icons should not be dark near the edges, showing two similar device icons on dark and light backgrounds.](assets/app-icon-contrast.png)
+
 ### Not too much or too little detail
 
-The icon should be recognizable at small sizes. Avoid too many tiny details, small text, and generally try and match other well-executed app icons in terms of complexity. Icons should also be complex enough to be recognizable, e.g. a flat single-colored square is too simple.
+The icon should be recognizable at small sizes. Avoid too many tiny details, small text, and generally try and match other well-executed app icons in terms of complexity. Icons should also be complex enough to be recognizable, e.g. a flat single-colored symbol is too simple.
+
+![Examples of icons with too much and too little detail.](assets/app-icon-detail.png)
 
 ### No baked-in shadows
 
@@ -54,6 +58,8 @@ The icon should not have any baked-in shadows or glows. Both the Flathub website
 
 The icon should be somewhat in line with the contemporary icon styles (i.e. not look like it hasn't been updated in decades). The [GNOME](https://developer.gnome.org/hig/guidelines/app-icons.html) and [KDE ](https://develop.kde.org/hig/style/icons/colorful/application/) app icon guidelines are examples of the kind of style your icon should align with.
 
+![Two icons that are not in line with contemproary styles, and two that are.](assets/app-icon-style.png)
+
 ## App Name
 
 ### Not too long