Tips para crear aplicaciones .net maui sorprendentes.pdf

2. Comunidades
Organizadoras

3. PATROCINADORES

4. PATROCINADORES

5. PATROCINADORES

6. PATROCINADORES

7. PATROCINADORES

8. PATROCINADORES

9. PATROCINADORES

10. PATROCINADORES

11. Tips for
Creating
Amazing .NET
MAUI
Applications
Héctor Pérez
https://elcamino.dev

12. .NET MAUI Beautiful
UI Challenge
https://devblogs.microsoft.com/dotnet/announcing-
dotnet-maui-beautiful-ui-challenge/

13. Use Cool .NET MAUI features

14. Gradients
<Frame BorderColor="LightGray"
HasShadow="True"
CornerRadius="12"
HeightRequest="120"
WidthRequest="120">
<Frame.Background>
<!-- StartPoint defaults to (0,0) -->
<LinearGradientBrush EndPoint="0,1">
<GradientStop Color="Yellow"
Offset="0.1" />
<GradientStop Color="Green"
Offset="1.0" />
</LinearGradientBrush>
</Frame.Background>
</Frame>

15. Gradients Demo: Code Quotes
https://bit.ly/MAUIOFFER

16. Shadows
<Image Source="dotnet_bot.png"
WidthRequest="250"
HeightRequest="310">
<Image.Shadow>
<Shadow Brush="Black"
Offset="20,20"
Radius="40"
Opacity="0.8" />
</Image.Shadow>
</Image>

17. Shadows

18. Shadows Demo: MAUI Scientific Calculator
https://github.com/naweed/MauiScientificCalculator

19. <Border StrokeThickness="4"
StrokeShape="RoundRectangle 40,0,0,40"
Background="#2B0B98"
Padding="16,8"
HorizontalOptions="Center">
<Border.Stroke>
<LinearGradientBrush EndPoint="0,1">
<GradientStop Color="Orange"
Offset="0.1" />
<GradientStop Color="Brown"
Offset="1.0" />
</LinearGradientBrush>
</Border.Stroke>
<Label Text=".NET MAUI"
TextColor="White"
FontSize="18"
FontAttributes="Bold" />
</Border>
Borders

20. Border Demo

21. Animations
await image.RotateTo(360, 2000);
image.Rotation = 0;

22. Animations Demo: Weather ‘21 App
https://github.com/dotnet/maui-samples/tree/main/6.0/Apps/WeatherTwentyOne

23. Use Shapes and Paths

24. Paths Demo

25. <Setter Property="Color"
Value="{AppThemeBinding
Light={StaticResource Primary},
Dark={StaticResource White}}" />
Dark & White Mode

26. Dark & White Demo
https://bit.ly/MAUIOFFER

27. Use Lottie Animations
https://mono.github.io/SkiaSharp.Extended/api/ui-maui/#sklottieview

28. Lottie Demo: MAUIWeather
https://bit.ly/MAUIOFFER

29. .NET MAUI Community Toolkits
https://docs.microsoft.com/en-us/dotnet/communitytoolkit/

30. Use appropriate elements

31. Select the correct font family

32. Select the correct
font family
• Similar Fonts

33. Select the
correct font
family
• Unrelated fonts

34. Select the correct
font family
• Same Family & similar x-height

35. Select the
correct font
family
• https://fontjoy.com/

36. Select the
correct font
family
• https://www.mixfont.com/

37. Select the
right colors

38. Select the right
colors
• https://material.io/design/materi
al-studies/crane.html

39. Select the right
colors
• https://brandmark.io/color-
wheel/app/

40. Select the right
colors
• https://colors.eva.design/

41. Select the right
colors
• https://dequeuniversity.com/colo
r-contrast

42. Colors Demo: MAUIVerter
https://bit.ly/MAUIOFFER

43. Learn about UX Design
Patterns

44. Skeleton
Views
The Skeleton view makes your app feel faster.

45. Skeleton
Views
• The Skeleton view makes your app feel faster.

46. Accelerators
Accelerators are hidden shortcuts that allow users to
perform actions or view content more efficiently.

47. Skeleton
Views
The Skeleton view makes your app feel faster.

48. One-Handed
Usage
One-handed usage makes your app easier to
use on larger screens as well as on regular-
sized devices where you only have one hand
available.

49. One-
Handed
Usage

50. Intelligence
“A computer should never ask the user for any
information that it can auto-detect, copy or deduce.”
— Eric Raymond

51. UI / UX Patterns Resources
• https://github.com/jsuarezruiz/awesome-dotnet-maui
• https://designvault.io/patterns/
• https://www.checklist.design/
• https://ui-patterns.com/
• https://dribbble.com/

52. Get inspiration

53. Point of Sale Demo
https://github.com/dotnet/maui-samples/tree/main/6.0/Apps/PointOfSale

54. eShop mobile client Demo
https://github.com/dotnet-architecture/eshop-mobile-client

55. Get Inspiration
• https://material.io/design/materi
al-studies/crane.html

56. CLEARLY DISTINGUISH ALL OPTIONAL FIELDS

57. DON’T ASK USERS TO REPEAT THEIR EMAIL
ADDRESS

58. PROVIDE “SHOW PASSWORD” OPTION
<Entry Placeholder="Password" IsPassword="True"/>

59. USE PLACEHOLDERS AND MASKED INPUT
<Entry Placeholder="Credit Card Number">
<Entry.Behaviors>
<toolkit:MaskedBehavior Mask="XXXX-XXXX-XXXX-XXXX" />
</Entry.Behaviors>
</Entry>

60. Use a Single Column Layout

61. Select the correct font family

62. Input
Fields
Field
Labels
Structure
Action
Buttons
Feedback

63. Learn about UI Design patterns

64. Get inspiration

65. Bibliotecas nuget

66. Toma en cuenta la UX

67. Effecto web visto en video con clip