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

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

Joel Monegro
November 27, 2013
Design
0
430

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

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

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
jmonegro
0
140
UI/UX III: Color
jmonegro
2
230

Other Decks in Design

See All in Design
PF_濵村ひろみ_202503
maru_design78
0
120
苦労が多かった多言語対応をFigmaで楽にした話
pioneer_devrel
PRO
0
150
Illustrator2025がやってきた！私が好きな新機能
hamko1114
0
140
Дизайн услуги через её визуализацию с Картой процесса-опыта
ashapiro
0
300
Cards | Storyboards
giofortuna_story
0
130
The Very Small Creatures - dressing up warm sequence
lizziestoryboards
0
300
クライアントワークにおける UXリサーチの実践
kozotaira
0
600
Дизайн современной услуги с Картой процесса-опыта
ashapiro
0
160
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
jct
1
180
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
0
120
東急URBAN HACKSのデザイナーって何やってるの？ 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
240
セブンデックス カルチャーブック
sevendex
1
9.6k

Featured

See All Featured
The Pragmatic Product Professional
lauravandoore
33
6.5k
Optimizing for Happiness
mojombo
377
70k
Building Adaptive Systems
keathley
41
2.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
13
1.4k
Statistics for Hackers
jakevdp
798
220k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
It's Worth the Effort
3n
184
28k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
41
2.2k

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