fluxible-15m.pdf

Transcript

1. 15 Practical Tips
   for Cheating at Design
   

   View Slide

2. Steve Schoger
   (Pronounced Show-Grrrrr)
   

   View Slide

3. View Slide

4. View Slide

5. !
   

   View Slide

6. “Hi, I’d like to add you to my professional
   network on LinkedIn.”
   

   View Slide

7. "
   

   View Slide

8. 15 Practical Tips
   for Cheating at Design
   

   View Slide

9. Use Fewer Borders
   01
   

   View Slide

10. View Slide

11. Replace top border
    with background color
    Subtle offset box-shadow
    Background color
    Increased space
    

    View Slide

12. Subtle offset box-shadow
    

    View Slide

13. Replace top border
    with background color
    

    View Slide

14. Increase space
    

    View Slide

15. Use color and weight to create
    hierarchy instead of size
    02
    

    View Slide

16. View Slide

17. Bolder not bigger
    

    View Slide

18. Bolder not bigger
    Lighter not smaller
    

    View Slide

19. Light grey text
    Dark text
    Grey text
    

    View Slide

20. Normal
    Bold
    

    View Slide

21. Don’t use grey text
    on a colored background
    03
    

    View Slide

22. color: hsl(0, 0%, 75%); color: hsl(278, 100%, 86%)
    background: hsl(278, 51%, 35%)
    

    View Slide

23. View Slide

24. Reduced Opacity Hand-Picked
    color: hsl(278, 100%, 86%)
    background: hsl(278, 51%, 35%)
    opacity: 0.6;
    

    View Slide

25. Balance different font sizes with
    weight
    04
    

    View Slide

26. 9/ mo
    $ 9/ mo
    $
    font-size: 20px;
    font-weight: normal;
    font-size: 30px;
    font-weight: normal;
    font-size: 60px;
    font-weight: normal;
    font-size: 20px;
    font-weight: extrabold;
    font-size: 30px;
    font-weight: bold;
    font-size: 60px;
    font-weight: normal;
    

    View Slide

27. Proxima Nova Regular
    Proxima Nova Light
    Proxima Nova Thin
    Proxima Nova Medium
    Proxima Nova Semibold
    Proxima Nova Bold
    Proxima Nova Extrabold
    Proxima Nova Black
    

    View Slide

28. I
    I I
    font-size: 30px;
    font-weight: bold;
    font-size: 60px;
    font-weight: normal;
    font-size: 20px;
    font-weight: extrabold;
    

    View Slide

29. I
    I I
    

    View Slide

30. View Slide

31. Greys are usually not grey
    05
    

    View Slide

32. Cool Neutral (Grey) Warm
    

    View Slide

33. HSL(224, 27%, 16%)
    HSL(226, 26%, 19%)
    HSL (222, 28%, 17%)
    

    View Slide

34. HSL(34, 16%, 72%)
    HSL(228, 5%, 79%)
    

    View Slide

35. View Slide

36. View Slide

37. Offset your shadows
    06
    

    View Slide

38. box-shadow: 0 5px 15px 0
    box-shadow: 0 0 15px 0
    

    View Slide

39. box-shadow: inset 0 2px 4px 0
    box-shadow: inset 0 0 4px 0
    

    View Slide

40. Use accent borders to add color
    to a bland design
    07
    

    View Slide

41. border-top: 6px solid #40A4F4;
    

    View Slide

42. View Slide

43. View Slide

44. View Slide

45. Dropdowns can be more than a
    boring list of links
    08
    

    View Slide

46. View Slide

47. Extra space lets you highlight
    new features and provide
    supporting text
    Adding icons can
    make the options
    easier to recognize
    at a glance
    

    View Slide

48. View Slide

49. Don’t blow up icons that are
    meant to be small
    09
    

    View Slide

50. View Slide

51. Intended Size (20px) Icon Scaled Up (48px) Icon Intended for Large Sizes (48px)
    

    View Slide

52. Intended Size (20px) Icon Scaled Up (48px) Larger Without Scaling
    

    View Slide

53. Add letter-spacing to uppercase
    letters
    10
    

    View Slide

54. letting-spacing: 0.05em
    

    View Slide

55. Developer
    DEVELOPER
    

    View Slide

56. Developer
    DEVELOPER
    

    View Slide

57. Overlap elements to create
    depth
    11
    

    View Slide

58. margin: -100px;
    

    View Slide

59. View Slide

60. Use "invisible" borders to
    separate overlapping images
    12
    

    View Slide

61. View Slide

62. border: 4px solid #fff;
    

    View Slide

63. View Slide

64. View Slide

65. Line-height is proportional
    13
    

    View Slide

66. font-size: 36px
    line-height: 1.5;
    font-size: 24px
    line-height: 1.5;
    font-size: 16px
    line-height: 1.5;
    font-size: 36px
    line-height: 1;
    font-size: 24px
    line-height: 1.25;
    font-size: 16px
    line-height: 1.5;
    

    View Slide

67. There was no possibility of taking a walk that day. We had been wandering, indeed, in
    the leafless shrubbery an hour in the morning; but since dinner (Mrs. Reed, when there
    was no company, dined early) the cold winter wind had brought with it clouds so
    sombre, and a rain so penetrating, that further out-door exercise was now out of the
    question.
    

    View Slide

68. There was no possibility of taking a walk
    that day. We had been wandering, indeed,
    in the leafless shrubbery an hour in the
    morning; but since dinner (Mrs. Reed, when
    there was no company, dined early) the
    cold winter wind had brought with it clouds
    so sombre, and a rain so penetrating, that
    further out-door exercise was now out of
    the question.
    There was no possibility of taking a walk that day. We had been wandering, indeed, in
    the leafless shrubbery an hour in the morning; but since dinner (Mrs. Reed, when there
    was no company, dined early) the cold winter wind had brought with it clouds so
    sombre, and a rain so penetrating, that further out-door exercise was now out of the
    question.
    font-size: 16px
    line-height: 1.5;
    font-size: 16px
    line-height: 2;
    

    View Slide

69. Can drinking a cup of coffee a day
    make you a better developer?
    Can drinking a cup of coffee a day
    make you a better developer? font-size: 40px
    line-height: 1.5;
    font-size: 40px
    line-height: 1;
    

    View Slide

70. Not every button needs a
    background color
    14
    

    View Slide

71. View Slide

72. View Slide

73. Save Draft Save Draft Save Draft
    Sign Up Sign Up Sign Up
    Learn More Learn More Learn More
    PRIMARY SECONDARY TERTIARY
    

    View Slide

74. Unpublish Unpublish Unpublish
    PRIMARY SECONDARY TERTIARY
    

    View Slide

75. View Slide

76. Your UI doesn't have to map 1:1
    to your data schema
    15
    

    View Slide

77. View Slide

78. Present data in a more
    useful way
    Emphasize the most
    important information
    Combine labels and
    values into human-
    readable phrases
    

    View Slide

79. Tables can be more than just
    simple unstyled text
    15
    

    View Slide

80. Combine columns
    Use color
    Include images
    

    View Slide

81. Make your ideas look awesome,
    without relying on a designer.
    AVAILABLE NOW
    refactoringui.com/book
    

    View Slide

82. @steveschoger
    

    View Slide