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.

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

10. Inspiration for everything

11. Challenge #1 - Dribbble search
A wagon or van
A signup form
An icon set
A free food icon set
…

12. Inspiration for UI

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

20. http://nathanspeller.com/color-pickers/
Colors - trends

21. Images - resources
flick.com
exhaustive
pixels.com
selective
unsplash.it
for prototypes

22. Icons - resources
thenounproject.com
historic (B&W)
iconstore.co
free icons sets

23. Challenge #3 - IconStore search
Entertainment icons
…
Sport icons
Legal icons

24. Fonts - tools
FontFaceNinja

25. Fonts - resources
google.com/fonts
free
myfonts.com
paid

26. Challenge #3 - Fonts search
Montserrat on Google
…
Raleway on Google
Avenir on MyFonts

27. Gradients - resources

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

58. Remember
Design is accessible

59. Thank you!