Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Le wagon UI & design crash course

614 views

Published on

Tricks and resources of design for non designers. How to launch non ugly digital products.

Published in: Design
  • Be the first to comment

Le wagon UI & design crash course

  1. 1. UI & Design Crash Course @matleroux
  2. 2. Why this workshop? Design for non-Designers
  3. 3. I hired the best UX designer for my mockup. I paid 1000$ for this logo. I need a web-designer for my graphical identity.
  4. 4. This is
  5. 5. Disclaimer Disclaimer 100+ design services every day
  6. 6. Let’s check Design collections
  7. 7. 1) Find inspiration 2) Find assets 3) Design rules of thumb 4) Sketch demo Roadmap
  8. 8. 1) Inspiration We are not born designers, We just copy/paste find inspiration
  9. 9. What are you looking for? General inspiration UI components examples Website design examples
  10. 10. Inspiration for everything
  11. 11. Challenge #1 - Dribbble search A wagon or van A signup form An icon set A free food icon set …
  12. 12. Inspiration for UI
  13. 13. Challenge #2 - CallToIdea search A login form A footer A 404 page …
  14. 14. UI pre-requisite, you must read http://www.goodui.org/
  15. 15. Inspiration for Website design
  16. 16. 2) Resources
  17. 17. What’s a graphical asset? Colors Images Icons Fonts
 Code Snippets Gradients
  18. 18. Colors - color pickers Sip ColorZilla
  19. 19. Colors - resources colorhunt.co coolors.co
  20. 20. http://nathanspeller.com/color-pickers/ Colors - trends
  21. 21. Images - resources flick.com
 exhaustive pixels.com
 selective unsplash.it
 for prototypes
  22. 22. Icons - resources thenounproject.com
 historic (B&W) iconstore.co
 free icons sets
  23. 23. Challenge #3 - IconStore search Entertainment icons … Sport icons Legal icons
  24. 24. Fonts - tools FontFaceNinja
  25. 25. Fonts - resources google.com/fonts
 free myfonts.com
 paid
  26. 26. Challenge #3 - Fonts search Montserrat on Google … Raleway on Google Avenir on MyFonts
  27. 27. Gradients - resources
  28. 28. Code Snippets - resources codepen.io
  29. 29. Challenge #4 - CodePen search Loading … Progress Bar Beers animation
  30. 30. 3) Design Rules of Thumb
  31. 31. #1 - One day to fix your identity Don’t beat around the bush
  32. 32. Persian Red - #D23333 Quincy - #6C5145 Mine Shaft - #343434 Sea Blue - #006A9C Example - Our Colors chir.ag/projects/name-that-color
  33. 33. Example - Our Fonts
  34. 34. Le Wagon NOT lewagon LeWagon leWagon le wagon le Wagon Example - Our Spelling
  35. 35. #2 - Font = ratios
  36. 36. #3 - Don’t buy all Font suite Buy desktop version (.ttf) and convert it for web
  37. 37. #4 - Contrast your texts A Big Bold Black Header a light small grey sub-header
  38. 38. #5 - Don’t play fancy with colors Gray scale is your best friend Bring colors with small touches
  39. 39. Gray scale + Green
  40. 40. #6 - Design = Space The space that surrounds an object is as important as the object itself.
  41. 41. #4 - No more startup stocks Make it personal
  42. 42. #7 - Add filters & shadows
  43. 43. Can’t read text
  44. 44. Can read text
  45. 45. Better with text shadow
  46. 46. #8 - Good Design is the one you don’t notice
  47. 47. Poor Radius
  48. 48. Good Radius
  49. 49. Poor Border
  50. 50. Good Border
  51. 51. Poor Shadow
  52. 52. Good Shadow
  53. 53. #9 - Think proportions Size doesn’t mean proportion
  54. 54. Same Sizes
  55. 55. Same Proportions
  56. 56. 4) Sketch Demo
  57. 57. Challenge #5 - Sketch Sprint Newsletter banner for Le Wagon Rio Social icons resized and colored Let’s build Custom icons re-shaped
  58. 58. Remember Design is accessible
  59. 59. Thank you!

×