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

How to Think Like a Visual Designer

steveschoger
July 25, 2019
Design
8
4.6k

How to Think Like a Visual Designer

steveschoger

July 25, 2019
Tweet

More Decks by steveschoger

See All by steveschoger
Practical Solutions to Common UI Design Problems
steveschoger
9
4.1k
fluxible-15m.pdf
steveschoger
4
1.2k
The Little Details of UI Design
steveschoger
39
11k

Other Decks in Design

See All in Design
Осязаемый потребительский опыт. Ловим его за хвост с Картой процесса-опыта
ashapiro
2
210
【Designship 2024｜10.13】デザイン組織を進化させるための仕組み化の要諦
payatsusan213
1
490
デザイナー視点の体験設計とデザインレビューを事業部全員で体験するワークショップをしたお話
masayofff
2
200
Arborea Art Book
thebogheart
1
280
アクセシビリティって何だろう？ -アクセシビリティの概念、そして向き合い方まで-
securecat
6
1.5k
20240921-図書館の実空間とデジタル資源の接点をデザインする-dtk55-Designing-the-interface-between-the-library's-physical-space-and-digital-resources
majimasachi
0
230
Charcoal 2.0: デザインシステムの基盤を再構築
godlingkogami
1
330
1年目のクリエイターがつくりあげた！採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
140
共創するのはモノではなく価値 ── 日本の「はたらく」を変える挑戦 / Designship2024 MainStage
visional_engineering_and_design
1
250
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
310
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
1
460
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
160

Featured

See All Featured
Making the Leap to Tech Lead
cromwellryan
132
8.9k
How GitHub (no longer) Works
holman
311
140k
A Philosophy of Restraint
colly
203
16k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
How to Ace a Technical Interview
jacobian
275
23k
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
For a Future-Friendly Web
brad_frost
175
9.4k
Thoughts on Productivity
jonyablonski
67
4.3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
790
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k

Transcript

  1. How to Think Like a Designer Visual >

  2. How to Think Like a Designer Visual >

  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None

  12. Explore more than one layout idea 01

  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. None
  31. None
  32. None
  33. None
  34. None

  35. Choose good fonts 02

  36. None
  37. None
  38. None

  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
  40. None
  41. None
  42. None

  43. Choosing color

  44. None
  45. None

  46. Corner radius

  47. None
  48. None
  49. None
  50. None

  51. Use color and weight to create contrast 03

  52. None
  53. None
  54. None

  55. 1.25rem 1.25rem

  56. None

  57. Create depth with color 04

  58. None
  59. None

  60. Text color Border color

  61. None
  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  68. None
  69. None
  70. None
  71. None
  72. None
  73. None
  74. None

  75. Don’t use gray text on a colored background 05

  76. None

  77. text-gray-300

  78. text-indigo-200

  79. Background color Text color

  80. None

  81. Overlap elements to create layers 06

  82. None
  83. None
  84. None
  85. None
  86. None

  87. Don’t scale up icons 07

  88. None
  89. None

  90. Align all the things 08

  91. None
  92. None
  93. None

  94. Streamline 3.0 streamlineicons.com Pixi hellopixi.com Heroicons heroicons.com Heroicons Duo Included

    in Refactoring UI Complete Package
  95. None

  96. .primary { fill: #0D2B3E; } .secondary { fill: #A5B3BB; }

  97. None
  98. None

  99. Switch up the layout 09

  100. None
  101. None
  102. None
  103. None
  104. None
  105. None
  106. None
  107. None
  108. None
  109. None
  110. None
  111. None
  112. None
  113. None
  114. None
  115. None
  116. None
  117. None

  118. Change the background color 10

  119. None
  120. None
  121. None
  122. None
  123. None
  124. None
  125. None
  126. None

  127. Control shape and size 12

  128. None
  129. None
  130. None
  131. None
  132. None

  133. Dark mode does not mean inverted 13

  134. None

  135. Lightest

  136. Lightest Darkest

  137. None

  138. Darkest Lightest Lightest Darkest

  139. Lightest Darkest Lightest Darkest

  140. None
  141. None
  142. None
  143. None

  144. Prevent clashing colors 14

  145. None
  146. None
  147. None
  148. None
  149. None
  150. None

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

    AVAILABLE NOW refactoringui.com/book