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 and Design Crash Course

3,651 views

Published on

Learn to quickly build a set of icons, a logo, a newsletter banner or even a mockup for your app. We'll cover everything you need to know to build your graphical assets:

- Latest and coolest resources for the best pictures, icons, colours, fonts, and patterns.
- Demo of Sketch, a popular graphical tool used in startups, to refine your icons, change their colour and shape, export them, and customise any assets (logo, icons, newsletter banner, etc.)
- General knowledge about standard UI components and how they are built.
- Designer tricks and secrets (how to build a nice shadow? Add a filter to a cover pic? resize pictures with different proportions? Create masks? etc..).

Published in: Design
  • Follow the link, new dating source: ♥♥♥ http://bit.ly/2Qu6Caa ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ❶❶❶ http://bit.ly/2Qu6Caa ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Le Wagon - UI and Design Crash Course

  1. 1. UI & Design Crash Course @bpapillard
  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
  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 Big Bold Black Header 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 London Social icons resized and colored Let’s build Custom icons re-shaped
  58. 58. Remember Design is accessible
  59. 59. Thank you!

×