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
450

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
140
UI/UX III: Color
Avatar for Joel Monegro jmonegro
2
230

Other Decks in Design

See All in Design
実践ゼロから作らないデザインシステム SaaS × デザインシステム × プロダクトデザイン / Efficient Design System for SaaS—no need to start from scratch.
Avatar for 株式会社カミナシ kaminashi
2
1.7k
Design Studio Deck | インクルーシブデザインスタジオCULUUM
Avatar for インクルーシブデザインスタジオCULUMU culumu
3
1.5k
Building foundations 堅牢なデザイントークンの設計
Avatar for Hiroki Tani hilokifigma
2
3.5k
読書シェア会 vol.5 / Yumemi.grow 20250526
Avatar for Rakus_Dev rakus_dev
0
1.6k
freee + Product Design FY25Q4
Avatar for freee freee
4
14k
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない？というお話
Avatar for なつ iflection
3
990
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
210
CMS管理画面のアクセシビリティ
Avatar for Rikiya Ihara / magi magi1125
6
2k
Cards | Storyboards
Avatar for Gio Fortunato giofortuna_story
0
290
株式会社バクタム　会社説明資料
Avatar for Bactum Inc. bactum
0
240
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
Avatar for Yu Morita securecat
5
1.6k
Flow, Not Stock 知識触媒としてのIA
Avatar for Takehisa Gokaichi 5kaichi
1
290

Featured

See All Featured
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
58
9.4k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
62k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
72
4.9k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
51
8.5k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
161
15k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
42
7.6k
Designing for Performance
Avatar for Lara Hogan lara
609
69k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
138
34k
The Language of Interfaces
Avatar for Des Traynor destraynor
158
25k

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