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
240

Other Decks in Design

See All in Design
Franks Myth
Avatar for George Frank Hayford-Taylor gfht1
0
390
越境するデザイン人材：デザイナーが社会資本となる世界へ
Avatar for Goodpatch Inc. goodpatch
1
450
OJTで学んだ 「心を動かす」ファシリテーション
Avatar for さき saki822
1
210
【サイバーエージェント】Creative Switch 会社説明資料
Avatar for 【CyberAgent】クリエイター新卒採用 cyberagent_creators
0
4.6k
企業にデザインが融けたとき、デザイナーにできること。事業会社12年間の探究と葛藤 / Designship2025
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
0
1.3k
CursorでAI活用のナレッジベースを構築する
Avatar for 神崎 kanzaki
0
1.1k
Installing and Running decksh/pdfdeck
Avatar for Anthony Starks ajstarks
1
910
【MIXI MEETUP！ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏：デザイナーが語るプロダクト誕生秘話
Avatar for MIXI DESIGN mixi_design
PRO
0
180
アプリ360onWeb使い方と裏ワザ？紹介！
Avatar for ikejun360 ikejun360
1
450
TWCP#21 UXデザインと哲学のはなし
Avatar for MAMIYA Shinsuke shinn
0
230
SAMSUL KAMAR ABDUL RAHMAN
Avatar for SAMSUL RAHMAN samsulrahman32
0
200
kintone Style Book
Avatar for kintone kintone
5
9k

Featured

See All Featured
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
3
2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
34k
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
21
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
0
140
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.9k
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
180
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.6k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
34
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
67
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
720

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