Upgrade to Pro — share decks privately, control downloads, hide ads and more …

fluxible-15m.pdf

steveschoger
September 22, 2018
1.1k

 fluxible-15m.pdf

steveschoger

September 22, 2018
Tweet

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