How to make a good wpf ui

Hello, today im gonna be sharing some tips to make a nice looking ui. I did make an older post about it but this will be more detailed.

 

---

Table of content:

• Planning
• Color Scheme and color advice
• Icons
• Effects
• Animations

---

Planning

Planning your ui is really important to give you an idea on how it will look like. For an example planning your layout and where you want things to be. A good tool to use would be figma. Figma is a good tool for pgraphics designing. Planning your ui can save alot of time because you will have a basic idea on how the ui will look like.

 

Figma - https://www.figma.com

---

Color scheme

A color scheme is really important. I recomend something nice and colorfull rather than your ui always being gray. You should add up to three colors. I recommend using a color picker as you can get the exact color you would like. I recommend htmlcolorcodes.

 

A good colorpicker - https://htmlcolorcodes.com/color-picker/

---

Icons

Using icons spices your ui making it look less basic and give more of a modern look. There are many good icons. I would reccomend not using the segoe mdl2 assets or segoe fuent icons as they do not have as much customization to them. A good alternitive would be svg. I will list some good icons.

 

Heroicons - https://heroicons.com

Material Icons/Symbols - https://fonts.google.com/icons

---

Effects

You can make your ui look better by adding effects. They are effects like drop shadow which make your ui look better.

---

Animations

Animations can make your ui look more smooth and active. You can use effects like sizing effects, fading effects and moving effects using storyboards. You can select an event of your choice on when you want that animation to start. I could make it fade when i open the window.

---

Hopefully these tips and tools helped you to create a better ui. 

 

You can view the xaml documentation for any help with adding stuff from this thread - https://learn.microsoft.com/en-us/dotnet/desktop/wpf/advanced/xaml-syntax-in-detail?view=netframeworkdesktop-4.8