Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Le wagon Aix-Marseille - sketch

0 vue

Publié le

UX Design : Best practices to prototype your website / mobile app with Sketch

Publié dans : Design
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Le wagon Aix-Marseille - sketch

  1. 1. Sketch @williamhutter@lewagonaixmrs starring
  2. 2. Sketch
  3. 3. Sketch UI Design Tool Wireframing Tool iOS Android and Web design
  4. 4. Other Design tools vs
  5. 5. Sketch and Windows ? Buy a mac Install Mac on Windows (Nerd only) vs
  6. 6. Workshop outline Theoretical intros Basic concepts to understand Live-design demos We design, you don't 
 Your turn Design & have fun
  7. 7. Let’s enter a new world
  8. 8. Setup Download it
  9. 9. Dowload the exercises Download it
  10. 10. Launch Unzip and open Wagon.sketch
  11. 11. Artboard Artboards are the Screens of your app
  12. 12. Create an artboard Shortcut : A
  13. 13. Define a size
  14. 14. Use templates
  15. 15. Rename it Double click
  16. 16. Add text
  17. 17. Your turn ! Open the page 1. Artboards & Text
  18. 18. Shape A Shape is a basic element of your design
  19. 19. Shape attributes Size Radius Color Opacity Borders Shadow
  20. 20. Shape operations
  21. 21. Shape operations Select two shapes Select an operation
  22. 22. Import other shapes
  23. 23. Symbol A Symbol allows to re-use the same component - DRY
  24. 24. Your turn ! Open the page 2. Shapes & Symbols
  25. 25. Your turn ! Open the page 3. Masks & groups
  26. 26. Pick color from pages
  27. 27. Craft Plugin Download it
  28. 28. Your turn ! Open the page 4. Craft Plugin & Content Generation
  29. 29. Page Each Page represents a platform or a completely different resolution.
  30. 30. Your Turn
  31. 31. Export your job
  32. 32. Drag and drop export
  33. 33. Export locally
  34. 34. Export SVG
  35. 35. Next steps Mirror your pages on devices Animate your design with Proto.io Animate SVG on with CSS
  36. 36. Go further ondemand.lewagon.org www.lewagon.org/aix-marseille
  37. 37. Feedback Answer our typeform
  38. 38. Help us ;) Review our Facebook page
  39. 39. Thank you!

×