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
440

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
サービスデザインにおける、 映像活用の可能性（Spectrum Tokyo Meetup #18）
Avatar for Akihide Kanai ka71
0
120
250131_product meetup
Avatar for Motoko Ishida motokoishida
0
210
BPStudy#213〜ビジネスアナリシスとDDD（ドメイン駆動設計）パネルディスカッション資料 / BPStudy213-panel
Avatar for haru860 haru860
0
410
An Early Spring | Storyboard | Scenes 1-18
Avatar for Gio Fortunato giofortuna_story
0
260
Crisp Code inc. ブランドガイドライン
Avatar for So Kotani / Crisp Code inc. CEO so_kotani
1
190
Hatena Engineer Seminar #33 チームと開発するためのモック
Avatar for takuwolog takuwolog
0
330
ビジネス成果を最大限に発揮するPORTFOLIO
Avatar for 新井拓海 ataxi1003
0
190
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
6
3.5k
アップロード-職業訓練_ワンランク上に見せるデザインのコツ.pdf
Avatar for keita keita_yoshikawa
0
130
Haley's adventure chase
Avatar for Ivette Molina ivettetwin
0
230
#Dubois Challenge 2025: Economics
Avatar for Anthony Starks ajstarks
0
110
Design Studio Deck | インクルーシブデザインスタジオCULUUM
Avatar for インクルーシブデザインスタジオCULUMU culumu
3
1.4k

Featured

See All Featured
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
270
20k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.3k
Fireside Chat
Avatar for paigeccino paigeccino
37
3.5k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
524
40k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
694
190k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
430
65k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
39
1.9k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
51
8.5k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
48
14k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
45
7.5k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.7k

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