Le Wagon - UI and Design Crash Course
17 likes4,505 views
This workshop provides an overview of UI and design for non-designers. It covers finding inspiration from sites like Dribbble and CallToIdea, resources for graphical assets like colors, images, icons and fonts, and design rules of thumb for creating a visual identity with principles like using grayscale with color accents, proper font sizes and spacing, subtle shadows and filters, and consistent proportions. An example sketch sprint demonstrates applying these concepts to build a newsletter banner in Sketch. The goal is to give attendees a crash course in UI and design fundamentals to apply to their projects.
Le Wagon - UI and Design Crash Course
- 1. UI & Design Crash Course @bpapillard
- 2. Why this workshop? Design for non-Designers
- 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. This is
- 5. Disclaimer Disclaimer 100+ design services every day
- 6. Let’s check Design collections
- 7. 1) Find inspiration 2) Find assets 3) Design rules of thumb 4) Sketch demo Roadmap
- 8. 1) Inspiration We are not born designers, We just copy/paste find inspiration
- 9. What are you looking for? General inspiration UI components examples Website design examples
- 11. Challenge #1 - Dribbble search A wagon or van A signup form An icon set A free food icon set …
- 13. Challenge #2 - CallToIdea search A login form A footer A 404 page …
- 14. UI pre-requisite, you must read http://www.goodui.org/
- 15. Inspiration for Website design
- 16. 2) Resources
- 17. What’s a graphical asset? Colors Images Icons Fonts Code Snippets Gradients
- 18. Colors - color pickers Sip ColorZilla
- 19. Colors - resources colorhunt.co coolors.co
- 22. Icons - resources thenounproject.com historic (B&W) iconstore.co free icons sets
- 23. Challenge #3 - IconStore search Entertainment icons … Sport icons Legal icons
- 26. Challenge #3 - Fonts search Montserrat on Google … Raleway on Google Avenir on MyFonts
- 28. Code Snippets - resources codepen.io
- 29. Challenge #4 - CodePen search Loading … Progress Bar Beers animation
- 30. 3) Design Rules of Thumb
- 31. #1 - One day to fix your identity Don’t beat around the bush
- 32. Persian Red - #D23333 Quincy - #6C5145 Mine Shaft - #343434 Sea Blue - #006A9C Example - Our Colors
- 33. Example - Our Fonts
- 34. Le Wagon NOT lewagon LeWagon leWagon le wagon le Wagon Example - Our Spelling
- 35. #2 - Font = ratios
- 36. #3 - Don’t buy all Font suite Buy desktop version (.ttf) and convert it for web
- 37. #4 - Contrast your texts Big Bold Black Header Light Small Grey sub-header
- 38. #5 - Don’t play fancy with colors Gray scale is your best friend Bring colors with small touches
- 39. Gray scale + Green
- 40. #6 - Design = Space The space that surrounds an object is as important as the object itself.
- 41. #4 - No more startup stocks Make it personal
- 42. #7 - Add filters & shadows
- 43. Can’t read text
- 44. Can read text
- 45. Better with text shadow
- 46. #8 - Good Design is the one you don’t notice
- 47. Poor Radius
- 48. Good Radius
- 49. Poor Border
- 50. Good Border
- 51. Poor Shadow
- 52. Good Shadow
- 53. #9 - Think proportions Size doesn’t mean proportion
- 54. Same Sizes
- 55. Same Proportions
- 56. 4) Sketch Demo
- 57. Challenge #5 - Sketch Sprint Newsletter banner for Le Wagon London Social icons resized and colored Let’s build Custom icons re-shaped
- 59. Thank you!