1 of 31

UX

Diseño Visual

2 of 31

Proximidad

3 of 31

Elementos que están cerca se asumen como relacionados

4 of 31

Elementos que no estén relacionados deben estar separados

Sin el espacio en blanco todo se mezcla y se vuelve agotador

5 of 31

6 of 31

Repetición

7 of 31

Elementos de equivalente jerarquía o funcionalidad deben verse iguales

8 of 31

Elementos deben encontrarse donde el/la usuario/a lo espera

9 of 31

Respetar forma de elementos aprendidos

10 of 31

11 of 31

Alineación

12 of 31

Alineación da orden.

Une elementos aunque estén separados.

13 of 31

Mantén la menor cantidad de líneas de alineación posible

14 of 31

Elige por defecto la alineación a la izquierda. A la derecha o centro sólo con intención. Justificado nunca.

15 of 31

16 of 31

Contraste

17 of 31

Contraste figura (texto) fondo debe ser suficiente para una cómoda lectura. Tener cuidado especial con fondos de imagen o textura.

18 of 31

webaim.org/resources/contrastchecker

19 of 31

Marca jerarquía

Marca estados distintos

Marca funciones distintas

20 of 31

21 of 31

Tipografía

22 of 31

23 of 31

24 of 31

Lorem Ipsum

Quisque non ligula

Ut quam ex, facilisis ut dictum et, ullamcorper a sapien. Suspendisse pellentesque, neque in tristique scelerisque, erat felis condimentum eros.

Proin tempus, velit eu tristique facilisis, lacus justo accumsan arcu, id mollis neque nibh sit amet odio.

Nam vulputate

h1

h2

h3

h4

p

25 of 31

Color

26 of 31

27 of 31

28 of 31

material.io/tools/color

29 of 31

30 of 31

31 of 31

  1. Contraste
  2. Repetición
  3. Alineación
  4. Proximidad�
  5. Tipografía
  6. Color

EJERCICIO