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
そのUIコンポーネント、これから先も使えますか？―Headless UI,Open UI,グローバルデザインシステム
Avatar for sakito sakito
2
2k
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
320
【最新】マズロー安達の弟子実績（1期-6期の37人分）
Avatar for マズロー安達 maslow_akkun
0
3.1k
Yumika Yamada Portfolio
Avatar for Yumii yumii
0
2.1k
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
530
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
650
企画を動かすデザイナーの思考！「広げて絞る」アプローチ。
Avatar for Hikida Kan hikidakan
0
190
DESIGNEAST 2025 A-3
Avatar for Shigeru Kobayashi _kotobuki_
0
100
Vibe Coding デザインシステム
Avatar for poteboy poteboy
1
1.1k
maki setoguchi
Avatar for Maki / Web Designer maki_setoguchi
0
490
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
Avatar for Hiromi Morikawa hiromitsuuuuu
1
810
組織で取り組むアクセシビリティのはじめ方
Avatar for cawpea masakiohsumi
0
190

Featured

See All Featured
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
253
22k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.9k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.6k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.1k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
23k
Done Done
Avatar for chrislema chrislema
185
16k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
84
9.2k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.7k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
11k

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