fluxible-15m.pdf

Transcript

1. 15 Practical Tips for Cheating at Design
2. Steve Schoger (Pronounced Show-Grrrrr)
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
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
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%)
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
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%)
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;
45. Dropdowns can be more than a boring list of links 08
47. Extra space lets you highlight new features and provide supporting text Adding icons can make the options easier to recognize at a glance
49. Don’t blow up icons that are meant to be small 09
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;
60. Use "invisible" borders to separate overlapping images 12
62. border: 4px solid #fff;
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
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
76. Your UI doesn't have to map 1:1 to your data schema 15
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