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

UI/UX I: Jerarquía, Contraste y Proximidad

Avatar for Joel Monegro Joel Monegro
November 27, 2013
Design
0
460

UI/UX I: Jerarquía, Contraste y Proximidad

Empezamos la primera charla de UI/UX Dominicana explorando los conceptos básicos

Avatar for Joel Monegro

Joel Monegro

November 27, 2013
Tweet

More Decks by Joel Monegro

See All by Joel Monegro
Bitcoin As Protocol: Exploring Alternative Uses for The Blockchain
Avatar for Joel Monegro jmonegro
0
150
UI/UX III: Color
Avatar for Joel Monegro jmonegro
2
230

Other Decks in Design

See All in Design
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
Avatar for Takahiro Yamaguchi hiro93n
0
130
事例で学ぶ！今日から使えるWebサービスUI改善ポイント
Avatar for NCDC ncdc
0
240
デザインシステムの「種」を使って、受託開発を加速させる
Avatar for akane akane___ui
0
11k
Saudade typeface
Avatar for Tiago Porto tiagoporto
0
350
7 Core Values of Round-L
Avatar for Round-L wired888
0
1.5k
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
1
180
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
440
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
Avatar for Tomoya AZUMA t_east
1
1.2k
数理的アプローチで挑むスマホUIのデザイン改善：タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
790
デフォルトの16:9（960*540px）のケース / Google Slide Size Test
Avatar for Arthur arthur1
0
3.3k
Goodpatch Tour💙 / We are hiring!
Avatar for Goodpatch Inc. goodpatch
31
880k
portfolio.pdf
Avatar for Fumitaka Ono onof003
0
160

Featured

See All Featured
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
23
3.6k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
70
11k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
4k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
55
6.5k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.1k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
6.8k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k

Transcript

  1. UI/UX Dominicana I Jerarquía, Contraste, y Proximidad

  2. Jerarquía Es la organización de los elementos de una interfaz

    basada en su importancia con respecto a los demás.

  3. Una buena jerarquía visual guía al usuario a través de

    una interfaz y provee un sentido de orden.
  4. None

  5. Podemos inducir un sentido de jerarquía manipulando el peso visual

    de los elementos del diseño mediante cambios en el tamaño, color, y valor.

  6. Tamaño

  7. None
  8. None

  9. Color

  10. None
  11. None

  12. Valor

  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None

  24. Contraste Son diferencias en las propiedades visuales que distinguen un

    elemento de los demás y del fondo.

  25. Usamos el contraste para diferenciar un elemento de los demás

    y del fondo.

  26. El contraste visual afecta el interés sobre un elemento. Mayor

    contraste = Mayor interés

  27. • Tamaño • Color • Forma • Posición • Textura

    • Orientación

  28. Tamaño

  29. None

  30. Forma

  31. None

  32. Color

  33. None

  34. Posición

  35. None

  36. Textura

  37. None

  38. Orientación

  39. None
  40. None
  41. None
  42. None
  43. None

  44. Proximidad La distancia entre los elementos denota la relación entre

    los mismos.

  45. Haciendo uso correcto de la proximidad, buscamos crear grupos de

    elementos relacionados.
  46. None
  47. None