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

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
DMMデザイナーの “AI活用の現在と未来”
Avatar for TakumaS takumasaito
1
450
Ralph Penel Portfolio
Avatar for ralphpenel ralphpenel
0
260
AI時代に問われる、リサーチの感受性──地域⇄大企業の現場から見えた「違和感」との向き合い方
Avatar for Muture muture
PRO
0
430
Liquid GlassとApp Intents
Avatar for touyou touyou
0
810
「余白」と「欲望」を味方につける ——AI時代のデザインエンジニアリングと「越境」の作法 #KNOTS2026
Avatar for koyaman koyaman
1
1.4k
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
Avatar for ため tame
1
370
企業にデザインが融けたとき、デザイナーにできること。事業会社12年間の探究と葛藤 / Designship2025
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
0
1.4k
CREATIVE CLASS受講課題｜無印良品を題材としたブランド再構築について
Avatar for satoshi kobayashi happy_ferret153
0
620
これからの「Webデザイン」の話をしよう～デザイナーの私が考えるブロックテーマへの対応で変わりゆくデザインの価値～
Avatar for ミヤケアツシ ds35mm
0
550
【サイバーエージェント】Creative Switch 会社説明資料
Avatar for 【CyberAgent】クリエイター新卒採用 cyberagent_creators
0
5.1k
越境するデザイン人材：デザイナーが社会資本となる世界へ
Avatar for Goodpatch Inc. goodpatch
1
510
【Designship 2025｜10.11】デザイン組織と事業貢献、その挑戦と結果。
Avatar for payatsun payatsusan213
1
920

Featured

See All Featured
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
230
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
1
58
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.8k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
60
42k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
7.9k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
760
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
450
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
110
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
9.9k
Visualization
Avatar for Eitan Lees eitanlees
150
17k

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