How to Think Like a Visual Designer

Transcript

1. How to Think Like a Designer Visual >
2. How to Think Like a Designer Visual >
12. Explore more than one layout idea 01
35. Choose good fonts 02
39. Graphik Proxima Nova Acumin Pro Cerebri Sans Inter UI GT America Encode Sans Work Sans Available from Commerical Type Available on Adobe Fonts and Fonts.com Available on Adobe Fonts Available from Hanken Design Co. Available from rsms.me Available from Grilli Type Available on Google Fonts Available on Google Fonts FREE FREE FREE
43. Choosing color
46. Corner radius
51. Use color and weight to create contrast 03
55. 1.25rem 1.25rem
57. Create depth with color 04
60. Text color Border color
75. Don’t use gray text on a colored background 05
77. text-gray-300
78. text-indigo-200
79. Background color Text color
81. Overlap elements to create layers 06
87. Don’t scale up icons 07
90. Align all the things 08
94. Streamline 3.0 streamlineicons.com Pixi hellopixi.com Heroicons heroicons.com Heroicons Duo Included in Refactoring UI Complete Package
96. .primary { fill: #0D2B3E; } .secondary { fill: #A5B3BB; }
99. Switch up the layout 09
118. Change the background color 10
127. Control shape and size 12
133. Dark mode does not mean inverted 13
135. Lightest
136. Lightest Darkest
138. Darkest Lightest Lightest Darkest
139. Lightest Darkest Lightest Darkest
144. Prevent clashing colors 14
151. Make your ideas look awesome, without relying on a designer. AVAILABLE NOW refactoringui.com/book