Updating missing icons + subtitles for design guidance section (#1682)

- Updated the Windows UI Kit name / URL - Added icons / subtitles to design guidance sections Before: ![image](https://github.com/user-attachments/assets/e71627ac-a3a7-466c-bf6c-ec3b113db2fb) After: ![image](https://github.com/user-attachments/assets/b46e441f-521b-4139-8c26-92a9008976a9)
microsoft · Dec 11, 2024 · d7e7fa1 · d7e7fa1
1 parent 0951785
commit d7e7fa1
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 7 deletions.
diff --git a/WinUIGallery/Assets/ControlImages/Accessibility.png b/WinUIGallery/Assets/ControlImages/Accessibility.png
diff --git a/WinUIGallery/DataModel/ControlInfoData.json b/WinUIGallery/DataModel/ControlInfoData.json
@@ -11,14 +11,16 @@
         {
           "UniqueId": "Color",
           "Title": "Color",
+          "Subtitle": "Balanced color design creates clarity and aesthetic harmony.",
+          "ImagePath": "ms-appx:///Assets/ControlImages/ColorPaletteResources.png",
           "Docs": [
             {
               "Title": "Colors in Windows 11",
               "Uri": "https://learn.microsoft.com/windows/apps/design/signature-experiences/color"
             },
             {
-              "Title": "Windows UI Toolkit (Figma)",
-              "Uri": "https://www.figma.com/community/file/1159947337437047524"
+              "Title": "Windows UI Kit (Figma)",
+              "Uri": "https://aka.ms/WinUI/3.0-figma-toolkit"
             },
             {
               "Title": "WinUI Theme Resources (GitHub)",
@@ -29,6 +31,8 @@
         {
           "UniqueId": "Geometry",
           "Title": "Geometry",
+          "Subtitle": "Clear geometric design ensures visual coherence and structure.",
+          "ImagePath": "ms-appx:///Assets/ControlImages/Shape.png",
           "Docs": [
             {
               "Title": "Geometry in Windows 11",
@@ -43,6 +47,8 @@
         {
           "UniqueId": "Iconography",
           "Title": "Iconography",
+          "Subtitle": "Icons are a visual design language that can be used to communicate information quickly and effectively.",
+          "ImagePath": "ms-appx:///Assets/ControlImages/IconElement.png",
           "Docs": [
             {
               "Title": "Iconography in Windows 11",
@@ -57,6 +63,8 @@
         {
           "UniqueId": "Spacing",
           "Title": "Spacing",
+          "Subtitle": "Thoughtful spacing design enhances readability and flow.",
+          "ImagePath": "ms-appx:///Assets/ControlImages/CompactSizing.png",
           "Docs": [
             {
               "Title": "Content design basics",
@@ -67,7 +75,9 @@
         {
           "UniqueId": "Typography",
           "Title": "Typography",
+          "Subtitle": "Typography design guides attention with intuitive fonts and hierarchy.",
           "SourcePath": "/CommonStyles/TextBlock_themeresources.xaml",
+          "ImagePath": "ms-appx:///Assets/ControlImages/TextBlock.png",
           "Docs": [
             {
               "Title": "Typography in Windows Apps",
@@ -94,7 +104,8 @@
         {
           "UniqueId": "AccessibilityColorContrast",
           "Title": "Color Contrast",
-          "ImagePath": "ms-appx:///Assets/ControlImages/AppBarSeparator.png",
+          "Subtitle": "High contrast design ensures accessibility for all users.",
+          "ImagePath": "ms-appx:///Assets/ControlImages/Accessibility.png",
           "Docs": [
             {
               "Title": "Accessibility",
@@ -108,8 +119,9 @@
         },
         {
           "UniqueId": "AccessibilityKeyboard",
-          "Title": "Keyboard Support",
-          "ImagePath": "ms-appx:///Assets/ControlImages/AppBarSeparator.png",
+          "Title": "Keyboard Navigation",
+          "Subtitle": "Keyboard-friendly design enables seamless interactions.",
+          "ImagePath": "ms-appx:///Assets/ControlImages/Accessibility.png",
           "Docs": [
             {
               "Title": "Accessibility",
@@ -147,8 +159,9 @@
         },
         {
           "UniqueId": "AccessibilityScreenReader",
-          "Title": "Screen Reader Support",
-          "ImagePath": "ms-appx:///Assets/ControlImages/AppBarSeparator.png",
+          "Title": "Screen Reader",
+          "Subtitle": "Inclusive design ensures meaningful content for assistive technologies.",
+          "ImagePath": "ms-appx:///Assets/ControlImages/Accessibility.png",
           "Docs": [
             {
               "Title": "Accessibility",

diff --git a/WinUIGallery/WinUIGallery.csproj b/WinUIGallery/WinUIGallery.csproj
@@ -145,6 +145,7 @@
     </ItemGroup>
 
     <ItemGroup>
+        <None Remove="Assets\ControlImages\Accessibility.png" />
         <None Remove="Assets\Design\Cards.dark.png" />
         <None Remove="Assets\Design\Cards.light.png" />
         <None Remove="Assets\Design\Dialog.dark.png" />
@@ -309,6 +310,7 @@
     </ItemGroup>
 
     <ItemGroup>
+        <Content Include="Assets\ControlImages\Accessibility.png" />
         <Content Include="Assets\Design\Cards.dark.png" />
         <Content Include="Assets\Design\Cards.light.png" />
         <Content Include="Assets\Design\Dialog.dark.png" />