Building Beautiful Apps with Xamarin.Forms.pptx

Building Beautiful Apps with Xamarin

1. STEVEN THEWISSEN

2. STEVEN THEWISSEN Building Beautiful Apps with Xamarin.Forms

3. STEVEN THEWISSEN Building Beautiful Apps with Xamarin.Forms

4. STEVEN THEWISSEN What makes an app beautiful? What is beautiful is very subjective Sensitive to trend We can subconsciously spot a dated design from miles away Beauty doesn’t fix a lack of substance A great developer does not make a great designer

5. STEVEN THEWISSEN Credit: https://9to5mac.com/2018/07/10/app-store-10-years-design-evolution/

6. STEVEN THEWISSEN Credit: https://9to5mac.com/2018/07/10/app-store-10-years-design-evolution/

7. STEVEN THEWISSEN What is beautiful is very subjective Sensitive to trend We can subconsciously spot a dated design from miles away Beauty doesn’t fix a lack of substance A great developer does not make a great designer What makes an app beautiful?

8. STEVEN THEWISSEN Building Beautiful Apps with Xamarin.Forms

9. STEVEN THEWISSEN Originally marketed as “suitable for simple data entry apps” Past experiences The association with the word “Forms”? Why the bad reputation?

10. STEVEN THEWISSEN Gradients Shadows Typography Iconography Colors Shapes Movement Elements of a beautiful UI

11. STEVEN THEWISSEN SkiaSharp MagicGradients PancakeView Built-in Xamarin Forms gradients! (coming soon) Gradients

12. STEVEN THEWISSEN Important visual cue for users Complete freedom on iOS Not so much on Android Getting creative Shadows

13. STEVEN THEWISSEN Important visual cue for users Complete freedom on iOS Not so much on Android Getting creative Shadows https://material.io/design/environment/light-shadows.html

14. STEVEN THEWISSEN Shapes the identity of your app Free options available Google Fonts FontAwesome and others Use generators to help you out Typography, iconography & colors

15. STEVEN THEWISSEN Micro animations Other animations Xamarin.Forms built-in animation framework Xamanimation Page Transitions Lottie https://dribbble.com/shots/4617094-Micro-Animations Movement , animation & transitions

16. STEVEN THEWISSEN Micro animations Lottie Other animations Xamarin.Forms built-in animation framework Xamanimation Xamarin.Plugin.SharedTransitions Movement , animation & transitions https://dribbble.com/shots/6120171-Groceries-Shopping-App-Interaction

17. STEVEN THEWISSEN User experience Consistency Copywriting Performance Accessibility It's not just about fancy visuals

18. STEVEN THEWISSEN How to get started...

19. Using styles to create a reusable UI STEVEN THEWISSEN

20. Using styles to create a reusable UI STEVEN THEWISSEN

21. STEVEN THEWISSEN Find inspiration online Challenge yourself And just do it... A good exercise to do

22. STEVEN THEWISSEN Split the design into parts you can manage Think about how composition can help you Abstracting reusable parts into separate controls Know which controls you have at your disposal Dissecting a design

23. STEVEN THEWISSEN https://github.com/sthewissen/FocusOnXamarin

24. STEVEN THEWISSEN

25. STEVEN THEWISSEN Grid with 2 rows, both Height=Auto But why not set a fixed height for the bottom one?

26. STEVEN THEWISSEN Wrapped in a PancakeView to get the rounded corners Grid with two rows: one fixed height, the other full remaining height

27. STEVEN THEWISSEN PancakeView as item with StackLayout to stack the data CollectionView set to vertical, spanning two columns

28. STEVEN THEWISSEN

29. STEVEN THEWISSEN CollectionView with a Footer row Grid with multiple rows SwipeGestureRecognizers to handle swiping up and down

30. STEVEN THEWISSEN

31. STEVEN THEWISSEN IT’S THAT EASY

32. STEVEN THEWISSEN

33. STEVEN THEWISSEN It’s just a basic Grid. Nothing fancy. Except for maybe this fade…

34. STEVEN THEWISSEN Demo: It's aliiiive!

35. STEVEN THEWISSEN Pretty Weather by James Montemagno https://github.com/jamesmontemagno/app-pretty-weather

36. STEVEN THEWISSEN ArtAuction by Kym Phillpotts https://github.com/kphillpotts/ArtAuction

37. STEVEN THEWISSEN CruiseMobileUI by Andreas Nesheim https://github.com/andreas-nesheim/CruiseMobileUI

38. STEVEN THEWISSEN FoodApp by Leomaris Reyes https://github.com/LeomarisReyes/FoodAppSample

39. STEVEN THEWISSEN PlacesApp by Lorenzo Araujo https://github.com/valentineg8/PlacesApp

40. STEVEN THEWISSEN “If you can’t make it, fake it”

41. STEVEN THEWISSEN [Spec] Gradients - GH #7293 [Spec] Shadows - GH #7744 [Spec] Transitions - GH #6033 [Spec] Shapes - GH #9178 What can you do to help?

42. STEVEN THEWISSEN XAML Hot Reload mfractor.com Tools / extensions dribbble.com behance.com unblast.com uplabs.com pttrns.com Design inspiration kymphillpotts.com snppts.dev aka.ms/xfui Awesome XF UIs coolors.co icomoon.com fontjoy.com IconFont2Code Generators glyphsearch.com Others SharedTransitions Xamanimation MagicGradients SkiaSharp PancakeView NuGet packages

43. STEVEN THEWISSEN Twitter Github @devnl sthewissen Globe www.thewissen.io Thanks for listening!