fluxible-15m.pdf

382fe1dc60baac42f9c5d61afe1f88c1?s=47 steveschoger
September 22, 2018
660

 fluxible-15m.pdf

382fe1dc60baac42f9c5d61afe1f88c1?s=128

steveschoger

September 22, 2018
Tweet

Transcript

  1. 15 Practical Tips for Cheating at Design

  2. Steve Schoger (Pronounced Show-Grrrrr)

  3. None
  4. None
  5. !

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

    on LinkedIn.”
  7. "

  8. 15 Practical Tips for Cheating at Design

  9. Use Fewer Borders 01

  10. None
  11. Replace top border with background color Subtle offset box-shadow Background

    color Increased space
  12. Subtle offset box-shadow

  13. Replace top border with background color

  14. Increase space

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

    02
  16. None
  17. Bolder not bigger

  18. Bolder not bigger Lighter not smaller

  19. Light grey text Dark text Grey text

  20. Normal Bold

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

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

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

    35%) opacity: 0.6;
  25. Balance different font sizes with weight 04

  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;
  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
  28. I I I font-size: 30px; font-weight: bold; font-size: 60px; font-weight:

    normal; font-size: 20px; font-weight: extrabold;
  29. I I I

  30. None
  31. Greys are usually not grey 05

  32. Cool Neutral (Grey) Warm

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

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

  35. None
  36. None
  37. Offset your shadows 06

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

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

    4px 0
  40. Use accent borders to add color to a bland design

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

  42. None
  43. None
  44. None
  45. Dropdowns can be more than a boring list of links

    08
  46. None
  47. Extra space lets you highlight new features and provide supporting

    text Adding icons can make the options easier to recognize at a glance
  48. None
  49. Don’t blow up icons that are meant to be small

    09
  50. None
  51. Intended Size (20px) Icon Scaled Up (48px) Icon Intended for

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

  53. Add letter-spacing to uppercase letters 10

  54. letting-spacing: 0.05em

  55. Developer DEVELOPER

  56. Developer DEVELOPER

  57. Overlap elements to create depth 11

  58. margin: -100px;

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

  61. None
  62. border: 4px solid #fff;

  63. None
  64. None
  65. Line-height is proportional 13

  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;
  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.
  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;
  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;
  70. Not every button needs a background color 14

  71. None
  72. None
  73. Save Draft Save Draft Save Draft Sign Up Sign Up

    Sign Up Learn More Learn More Learn More PRIMARY SECONDARY TERTIARY
  74. Unpublish Unpublish Unpublish PRIMARY SECONDARY TERTIARY

  75. None
  76. Your UI doesn't have to map 1:1 to your data

    schema 15
  77. None
  78. Present data in a more useful way Emphasize the most

    important information Combine labels and values into human- readable phrases
  79. Tables can be more than just simple unstyled text 15

  80. Combine columns Use color Include images

  81. Make your ideas look awesome, without relying on a designer.

    AVAILABLE NOW refactoringui.com/book
  82. @steveschoger